Visual System of an Ocean Simulation
C++ C
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
VisualSystemsLibrary @ 85f3b61

Empty Visual System

Welcome to CLOUDS Visual System! We call VisualSystems to modular visual sketches that reinforce and illustrate abstract concepts present on CLOUDS Documentary.

In order to make the process of making a VisualSystem efficient and easy. We have put together Reza Ali DJ environment call Rezonator. This will lets sketch powerful sketches providing the exquisite ofxUI to customize every single detail of it. This variables will be able to be save as Presets. At the end this Presets are going to be curated inside the documentary.

Together with James George's ofxTimeLine this environment provides the ability to animate those changes over time.


Clone the emptyVisualSystem Example

cd openFrameworks
cd apps/myApps
git clone

Add VisualSystemLibraries Submodule

Once the repo is cloned you need to pull the VisualSystemsLibrary submodule. This contain the source of Reza's Rezonator mixed with James's ofxTimeLine. Together this provide the abstract class you will extend in order to make your own VisualSystem.

cd emptyVisualSystem	
git pull && git submodule init && git submodule update && git submodule status

Modify ofMaterial

The resonator let you adjust the camera, lights and other important rendering sets like the material. In order to be able to change the material properties from the GUI we need to modify openframeworks/libs/openFrameworks/gl/ofMaterial.h by forcing this functions to pass their values by reference:

ofFloatColor &getDiffuseColor();
ofFloatColor &getAmbientColor();
ofFloatColor &getSpecularColor();
ofFloatColor &getEmissiveColor();
float &getShininess(); 

Do the same on the ofMaterial.cpp:

float& ofMaterial::getShininess(){
	return shininess;

ofFloatColor& ofMaterial::getDiffuseColor() {
	return diffuse;

ofFloatColor& ofMaterial::getAmbientColor() {
	return ambient;

ofFloatColor& ofMaterial::getSpecularColor() {
	return specular;

ofFloatColor& ofMaterial::getEmissiveColor() {
	return emissive;

Install Addons

This environment use some addons from the community. Go to addons...

cd ../../../addons/

… and start adding:

  • ofxRange by James George

      git clone
  • ofxMSATimer by Memo Atken, James George, Philip Whitfield, Juan Pablo Manson

      git clone
  • ofxTween by James George

      git clone
  • ofxTextInputField by James George, Elliot Woods, Kimchi and Chips.

      git clone
  • ofxTimecode by James George

      git clone
  • ofxTimeline by James George

      git clone
      git checkout develop
  • ofxCameraSaveLoad by Roy MacDonald

      git clone
  • ofxGenerative by Reza Ali

      git clone
  • ofxUI by Reza Ali

      git clone

Making your own VisualSystem

Once you follow the installation process you can compile and see the emptyVisualSystem working. To make your own VisualSystem you need to duplicate the emptyVisualSystem folder. And then rename the emptyVisualSystem.h and emptyVisualSystem.cpp

This will require some extra renaming on the testApp.h source as well.

Your Code

As you can see there is vs_src folder. That's were your extended class of CloudsVisualSystem will be together with all the classes you make. This folder together with the content of the data folder witch also contents your Presets are going to be merge with the CLOUDS apps.

It's very important that you are consistent with the name of your VisualSystem. The name you choose for it have to be the same of your repo and embed on your extended class. Please put the name of it after 'CloudVisualSystem______' so if your VisualSystem is call "World" the repo will be call "World" and the extended class "CloudVisualSystemWorld".

One of the first things you may change on your custom extended class is the getSystemName() function in order to return the exact name of your VS ( and/or your repo)

string CloudVisualSystemWorld::getSystemName()
	return "World";

By doing this the extended class will know how to access to his own data/ folder when is embedded on the main CLOUDS app.


  • F : Toogle Fullscreen
  • H : Hide/Show GUI
  • E : Arrange GUI in Cascade
  • R : Arrange GUI at Top
  • T : Minimize GUI
  • Y : Arrange GUI in circle
  • ` : Take a snapshoot

How to Animate?

How to Save/Delete a Preset?