CC Lab Homework | Beginning OpenFrameworks & Touring the Examples

First Impressions of Open Frameworks

Welcome to Open Frameworks! This week we begin our tour of a new tool, one that was actually created at Parsons MFA D+T which is pretty cool. OpenFrameworks (to me) is kind of like the Processing of C++. What processing simplifies about Java with libraries and definitions, OpenFrameworks does with C++, although not quite as smoothly (indicated by the # of examples that won’t work in new xCode, and the amount of warnings in every example otherwise)!

But just like processing, I appreciate how easy it is to get started in OpenFrameworks making cool things and adding in simple commands to get things rolling. Its also nice that xCode helps by autofilling many of the arguments for you, letting you know what kind of variables must go in what statement. I like xCode for this reason when using Swift as well. Its a sensitive language in both cases, so this definitely helps.

Making the Ball Bounce

I started out with my work from class, where we left off with a simple ball sketch. It took me a while to clean up the linkages, but I eventually got everything right! On to making the ball bounce. It was pretty simple after thinking about it for 1 moment. Just set up boundaries for the edges of the screen (0 and width, height) for both x and y positioning items and make the velocity negative (so if it hits positive boundary makes –, which is just positive as well) when it hits one of these boundaries.

Making my own Class

While I was happy with getting the ball to bounce, setting up the class gave me trouble, so I decided to start again from scratch and also make some squares that I could bounce around the screen. I wanted to make sure I had the right way to link everything together down so I could easily create my own classes in the future.

Merging Example 1: Sound

The first example I wanted to explore was the Sound examples. It seemed relatively simple to set up an ofSoundPlayer() so I set out to do so, and sync the sounds playing to when the balls hit the walls, and each other. I also added in some effects for when the balls struck things, such as changing their radius, in order to get a handle for controlling events. After I added in the sounds for the balls and squares hitting things, I also added in some background music that I borrowed from the sound example as well. I had to do a little bit experimentation here, and get this to keep looping by using a bool isPlaying and if statement to make it start again over and over, since it wasn’t tied to any of the ball/square events.

Merging Example 2: EasyCam

I tried merging lots of different examples in with what I had, such as the GUI example, but had difficulty getting things to run. I didn’t want to just pull in files from any of the examples, because that doesn’t help me learn, so I kept getting build errors not linked to my code, but to how and where things were located.

Finally, I decided I liked the examples with cameras best. I couldn’t get any of the ones with the GLshaders to work, which would have been a fun add, so I just wanted to try using the easyCam generally to rotate the viewport of my project.

I tied in most of the code from the easyCam example, with the exception of all of the extra help text they had, since I didn’t include the key press changes.

After a bit of tweaking (such as setting up easyCam’s on both of the classes as well to help them rotate a little bit better, and changing the distance to viewport of both so they weren’t invisible most of the time) I was able to get the cams all running. The balls no longer bounce off the “walls” but rather the “invisible walls” of the same size, but in a different 3d plane. I think it is very interesting to see the difference between how the 3D shape, used in the example and tied to the rotation directly, differs from how the balls move around. It is also like they are part of an invisible cube that keeps rotating, not quite in relation to the frame set by the screen borders.

I had some trouble tying everything together due to the different classes and what needed to go where to affect everything. For example, I added the ball.draw() and beat.draw() to the cam on the ofApp.cpp page, and the shapes did in indeed become part of the rotation, vs just bouncing while I rotated, but I am a little bit confused about why adding the other cams directly to the classes helped them to be more visible. I think it is because of the set.viewport functionality helping them to be more aligned, but I would love to learn more about how to make sure you are incorporating your classes correctly when using global commands like easyCam. E.g. should you use more than 1 cam?

Moving Forward

Next I want to work on using more mouse events and key events to trigger things, and retry the GUI example in a new project from scratch, to see if I can fix the linkage issues. I think creating a GUI would be very cool.

I also want to try to build for iPad/iPhone. I have seen some cool examples of using the camera to power the app and draw things in space. I have a fun idea to be able to draw squares (with a little recognition symbol) on the dry erase walls, and then use OpenFrameworks to identify these squares, and fill them with an image/animation. I saw a project from a second year that did something similar for just square spaces in general on ceilings and things like that.


I wanted to explore the easycam functionality a bit more than in my homework, but wanted to start over again so I found a great tutorial to try out.

It taught me how to take an image, and break it down to different kinds of generative mesh. Then it taught using the easy cam with translate, pushmatrix, and pop matrix to move around the points using the mouse, and to make sure they are centered.
I worked my way all the way through the example, buidling upon the types of verteces drawn (points, lines etc.) and loaded in my own images, changing the saturation/lightness threshold to see the effects.

I then went back to my homework, implemented these changes and it looks WAAAYYYY better. Thanks tutorial!

Check out the generative mesh video!

Check out a link to my completed extra project here on GitHub!

Link to Code & HW Video

Here is a quick video of my project – sans sounds 😦

Here is a link to my code on GitHub.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.