Book Image

Mastering openFrameworks: Creative Coding Demystified

By : Denis Perevalov
Book Image

Mastering openFrameworks: Creative Coding Demystified

By: Denis Perevalov

Overview of this book

openFrameworks is a powerful programming toolkit and library designed to assist the creative process through simplicity and intuitiveness. It's a very handy software library written in C++ to reduce the software development process, helping you to kick-start creative coding. With the help of C++ and shaders support, openFrameworks allows for the processing of all kinds of media information with your custom-developed algorithms at the lowest possible level, with the fastest speed. "Mastering openFrameworks: Creative Coding Demystified" will introduce you to a world of creative coding projects, including interactive installations, audio-visual, and sound art projects. You will learn how to make your own projects using openFrameworks. This book focuses on low-level data processing, which allows you to create really unique and cutting-edge installations and projects. "Mastering openFrameworks: Creative Coding Demystified" provides a complete introduction to openFrameworks, including installation, core capabilities, and addons. Advanced topics like shaders, computer vision, and depth cameras are also covered. We start off by discussing the basic topics such as image and video loading, rendering and processing, playing sound samples, and synthesizing new sounds. We then move on to cover 3D graphics, computer vision, and depth cameras. You will also learn a number of advanced topics such as video mapping, interactive floors and walls, video morphing, networking, and using geometry shaders. You will learn everything you need to know in order to create your own projects; create projects of all levels, ranging from simple creative-code experiments, to big interactive systems consisting of a number of computers, depth cameras, and projectors.
Table of Contents (22 chapters)
Mastering openFrameworks: Creative Coding Demystified
About the Author
About the Reviewers

Creating your first project – the Pendulum example

Let's create an openFrameworks project, which draws a moving pendulum in 2D, consisting of a ball dangled on a rubber segment. The example is based on the emptyExample project in openFrameworks. Perform the following steps to create the project:

  1. Copy the emptyExample project's folder into the folder intended for holding your applications (like apps/myApps), and rename it to Pendulum.

  2. Go inside the Pendulum folder and open this project in your development environment (emptyExample.sln for Visual Studio, emptyExample.xcodeproj for Xcode, or emptyExample.workspace for Code::Blocks).

  3. Open the file testApp.h in the development environment, and in the testApp class declaration add the declarations for the pendulum's center of suspension and the ball's position and velocity:

    ofPoint pos0;        //Center of suspension
    ofPoint pos;         //Ball's position
    ofPoint velocity;    //Ball's velocity

    Here ofPoint is the openFrameworks' class for holding point coordinates, it has x and y members (we will study it in Chapter 2, Drawing in 2D).

  4. Open the file testApp.cpp, and fill the body of the testApp::setup() function definition:

    void testApp::setup(){
      //Set screen frame rate
      ofSetFrameRate( 60 );
      //Set initial values
      pos0 = ofPoint( 512, 300 );
      pos = ofPoint( 600, 200 );
      velocity = ofPoint( 100, 0 );

    In this function we set the frame rate to 60 frames per second, and we also set initial values for all three points.

  5. Now fill the body of the testApp::update() function definition:

    void testApp::update(){
      float dt = 1.0 / 60.0;         //Time step
      float mass = 0.1;              //Mass of a ball
      float rubberLen = 200.0;       //Segment's length
      float k = 0.5;                 //Segment's stiffness
      ofPoint g( 0.0, 9.8 );         //Gravity force
      //Compute Hooke's force
      ofPoint delta = pos - pos0;
      float len = delta.length();   //Vector's length
      float hookeValue = k * (len - rubberLen);
      delta.normalize();            //Normalize vector's length
      ofPoint hookeForce = delta * (-hookeValue);
      //Update velocity and pos
      ofPoint force = hookeForce + g;  //Resulted force
      ofPoint a = force / mass;        //Second Newton's law
      velocity += a * dt;              //Euler method
      pos += velocity * dt;            //Euler method

    This function updates velocity and pos, using Newton's second law and the Euler method. For such a purpose, we compute the force acting on a ball as a sum of Hooke's force between the ball, suspension point, and gravity force.


    The details on the Euler method can be seen in the Defining the particle functions section in Chapter 3, Building a Simple Particle System. The information on the Newton's second law, Hooke's force, and gravity force can be seen at the following links:

  6. Finally, fill the body of the testApp::draw() function definition:

    void testApp::draw(){
      //Set white background
      ofBackground( 255, 255, 255 );  
      //Draw rubber as a blue line
      ofSetColor( 0, 0, 255 );                 //Set blue color
      ofLine( pos0.x, pos0.y, pos.x, pos.y );  //Draw line
      //Draw ball as a red circle
      ofSetColor( 255, 0, 0 );                 //Set red color
      ofFill();                                //Enable filling
      ofCircle( pos.x, pos.y, 20 );            //Draw circle

    Here we set a white background, draw a rubber as a blue line from pos0 to pos, and also draw a ball as a red circle. Note that we use the ofFill() function, which enables openFrameworks' mode to draw filled primitives (circles, rectangles, and triangles). See more details on these drawing functions in Chapter 2, Drawing in 2D.

  7. Run the project. You will see the animation of a moving ball:

Play with numerical values in the setup() and update() functions and see how it affects the dynamics of the pendulum.