Skip to content

Quickstart Guide for ziviDomeLive

Congratulations on installing ziviDomeLive! If you haven’t completed the installation yet, please refer to the Installation Steps to set everything up. Once installed, you’re ready to start creating immersive visuals directly in Processing.


Step 1: Setting Up Your Sketch

To begin, open Processing and create a new sketch. Setting up ziviDomeLive is simple and allows you to quickly explore its core functionalities.

First, import ziviDomeLive and any essential dependencies at the start of your sketch. This ensures that all library functionalities are accessible and ready for use.

import com.victorvalentim.zividomelive.*;
import controlP5.*;
import codeanticode.syphon.*;
import spout.*;

Next, initialize ziviDomeLive by creating an instance of the library. This instance will be the foundation of your immersive environment, facilitating the management and rendering of scenes.

zividomelive ziviDome; // Declares a ziviDome variable of type zividomelive. This variable will be used to instantiate and control the ziviDomeLive library.
Scene currentScene; // Declares a currentScene variable of type Scene. This variable will store the current scene being rendered and interacting with ziviDomeLive.

In the settings() and setup() functions, define the screen dimensions and the 3D rendering mode. Then, call the ziviDomeLive setup function to initialize it properly. With these steps, the environment is ready, and ziviDomeLive is prepared to manage your visuals.

void settings() {
size(1280, 720, P3D); // Sets the window size and enables 3D rendering mode (P3D)
}

void setup() {
ziviDome = new zividomelive(this); // Creates a new instance of ziviDomeLive, passing the reference of the current sketch

    ziviDome.setup(); // Configures ziviDomeLive, initializing its variables and preparing it for rendering

    currentScene = new Scene(ziviDome); // Creates a new instance of a scene called currentScene, associating it with ziviDomeLive

    ziviDome.setScene(currentScene); // Sets currentScene as the active scene within ziviDomeLive
}

Completing this step, the environment is ready, and ziviDomeLive is prepared to manage your visuals.


Step 2: Activating the Rendering Module

With ziviDomeLive initialized, it’s time to start rendering! In the main draw() function of the sketch, you can call the ziviDome.draw() function to render the current scene. This ensures that the scene is drawn correctly in each frame.

void draw() {
ziviDome.draw(); // Calls the draw() method from ziviDomeLive to process and render the content of the current scene
}

Step 3: Enabling Basic Interaction Controls

The ziviDomeLive library offers an intuitive way to handle user interactions within scenes, allowing real-time responses for both simple and complex visual setups. You can enable controls by defining event functions directly in your main Processing sketch, managing interactions like keyboard input, mouse events, and user interface controls using ControlP5 in an organized and efficient way.

Here’s how to enable basic interaction for your scene using the following functions:

  1. Keyboard Input: The keyPressed() function allows ziviDomeLive to capture and handle keyboard events. Within this function, any keyboard input can be directed to the current scene, enabling specific responses to key presses.

  2. Mouse Events: The mouseEvent() function captures and processes mouse events, like clicks and movements. Similar to keyboard input, mouse events can be directed to the current scene for custom interactions.

  3. Control Events: ControlP5 is a user interface library that allows you to create custom controls like buttons, sliders, and text boxes. The controlEvent() function handles events generated by these controls, enabling you to adjust visual parameters in real-time.

void keyPressed() {
ziviDome.keyPressed(); // Passes the key press event to ziviDomeLive, allowing it to process the interaction

    if (currentScene != null) {
        currentScene.keyPressed(key); // Forwards the key press event to the current scene, allowing the scene to respond
    }
}

void mouseEvent(processing.event.MouseEvent event) {
ziviDome.mouseEvent(event); // Passes the mouse event to ziviDomeLive for processing, allowing interactivity with the mouse

    if (currentScene != null) {
        currentScene.mouseEvent(event); // Forwards the mouse event to the current scene, allowing the scene to respond
    }
}

void controlEvent(controlP5.ControlEvent theEvent) {
ziviDome.controlEvent(theEvent); // Passes the control event to ziviDomeLive for processing, allowing interaction with ControlP5 UI elements
}

Step 4: Creating a Basic Scene Class

The core of ziviDomeLive revolves around scenes, which allow you to organize different visual components and easily switch between them.

To begin, create a basic scene class by implementing the Scene interface. Define the initial scene setup, including background colors, shapes, or 3D objects you want to display. In the main content of the scene, use the sceneRender() function to define what should be drawn in each frame.

class Scene implements Scene {
zividomelive parent; // Declares a variable of type zividomelive called parent, representing a reference to the main ziviDomeLive instance

    Scene1(zividomelive parent) { // Constructor for the Scene1 class, which receives a zividomelive instance as a parameter and assigns it to the parent attribute
        this.parent = parent;
    }

    public void setupScene() {
        // Specific scene setup, if necessary
    }

    public void sceneRender(PGraphics pg) {
        // Scene rendering logic
    }

    public void keyPressed(char key) {
        // Key press response logic
    }

    public void mouseEvent(MouseEvent event) {
        // Mouse event response logic
    }
}

After defining the scene class, set it as the active scene in ziviDomeLive by assigning it in the setup() function. This allows ziviDomeLive to manage rendering and any interaction events, like key presses, directly in your scene.


Step 5: Running and Interacting with the Sketch

After setting up and assigning your scene, you’re ready to run the sketch. Simply click the Run button in Processing and watch ziviDomeLive bring your scene to life.

With the sketch running, you can interact using keyboard inputs or other Processing events. Since ziviDomeLive supports interactive functionality, you can easily add controls, experiment with dynamic visuals, or adjust parameters in real-time.


General Summary

These 5 steps form the essential foundation for using the ziviDomeLive library in Processing, enabling immersive visualization and interface control. With this setup, ziviDomeLive is ready to manage scenes and interactions, offering complete support for immersive visual experiences.


What’s Next?

Now that you’ve set up a basic scene, feel free to explore additional features. Try adding new scenes, integrating with external tools like Syphon or Spout for real-time sharing, or setting up custom user interfaces with ControlP5. ziviDomeLive provides a flexible framework for experimenting and creating dynamic visual experiences that respond to your interaction.