In the testApp.h file, in the testApp class declaration, add the shader object declaration as follows:

ofShader shader;  //Shader

At the end of the setup() function declaration, add the following line for loading shaders:

shader.load( "shaderVert.c", "shaderFrag.c" );

Change the empty update() function with the following code:

float time0 = 0;
float phase = 0;
float distortAmount = 0;

void testApp::update(){
  //Compute dt
  float time = ofGetElapsedTimef();
  float dt = ofClamp( time - time0, 0, 0.1 );
  time0 = time;

  float speed = ofMap( mouseY, 0, ofGetHeight(), 0, 5 );
  phase += speed * dt;
  distortAmount = ofMap( mouseX, 0, ofGetWidth(), 0, 1.0 );
}

This function computes time step dt as a time difference between the current time and time of previous calling of the update() function (see details in the Implementing a particle in the project section in Chapter 3, Building a Simple Particle System). Next it computes the phase and distortAmount parameters depending on the mouse position. Note that the phase value changes steadily over time, so our shape distortion will change with time.

In draw(), add the following lines before the //Draw the triangles line:

shader.begin();       //Enable the shader
shader.setUniform1f("phase", phase );
shader.setUniform1f("distortAmount", distortAmount );

This code enables the shader and sets its parameters.

Finally, add the line for disabling the shader just before the ofPopMatrix(); line:

shader.end();  //Disable the shader

Run the project and move the mouse. You will see how the sphere-like cloud will deform depending on the mouse position. Namely, the mouse x-position sets the amount of distortion and the mouse y-position sets the speed of wave-like fluctuations:

Now we will consider the example of using a geometry shader.