CC Lab Homework | OpenFrameworks – Trig & Online AddOn’s

Welcome Back to Trig – Feeling Sinocidal

This week our instruction was to make a simple sketch featuring sinusoidal movement (sine, cosine, tangent… ughhhh trig!) incorporating a new add-on library downloaded from the open frameworks add-ons site.

After having so much fun playing with sound last week, I decided I really really wanted to do a sound-reactive piece for this week. I had done something with sinusoidal motion and music for my Processing midterm during boot camp (also featuring cool rainbow array effects)  but at the time, someone helped me a lot with the audio component of it.  So my theme for this week was to explore how I would go about doing something similar using C++ and Open Frameworks vs. Javascript and Processing, learning more about how audio is rendered, analyzed and tied to reactive pieces along the way.

The first thing I did was watch some tutorials on youtube to get a handle on OpenFrameworks a little bit better (after almost jumping out the window trying to get some of the more complicated addons to work).

Luckily I found a great channel by Lewis Lipton on Youtube with tons and tons of really great and simple essential elements (I also learned all about how/why to create timers from another video.  He actually had 2 videos already on sine/cosine and audio reactive pieces, so I had a great place to start.

I first created the simple sine/cosine movements, also learning how to use the ofxGUI library to make a panel and sliders that would allow you to control the sine/cosine motion. I then created another ball and more sliders so that both could be controlled separately to try passing around some values. I finally added a “speed”  factor instead of a static value and added another control panel element to change this. Speed roughly translates to frequency or oscillation of the curves (how many times they occur within the parameters, making them look faster as it increases).

Adding Music

Once this was up and running, I started to add some music to everything.

In the spirit of my original Processing sketch – or because I love it – I decided to stick with the theme of k-pop for my music choice. This time I went with Big Bang’s Fantastic Baby <3. (below for your entertainment)

Using the same principles as last week, I added the track and built the ofSoundPlayer necessary to load the sound. However this time I also added a switch case so that it could be turned on/off by pressing a key (another nod to my original processing project which used them to change between types of motion). The example I found online was actually a little bit different – although the same overall principle – as what I had done in processing, since it can actually analyze the frequency of the track being played itself, vs. my processing sketch which could only analyze the actual volume from my speakers. This is cool since no volume needs to be on and the animation will still be occur as long as the music is playing.

For fun, I tied in the music control several different ways and created several different balls to explore the possibility. Some only have their radius reactive to the sound, others actually have their motion path reactive.

Adding an Online Add-On

After struggling with this quite a bit (I wanted to use a super complicated library after all) I decided to keep it simple and try to recreate elements from my processing sketch. So, I needed to create a cool gradient. Luckily I already had the ofxGradient addon downloaded after trying to mess with an explosion generator library (but it wouldn’t work from the get go like many of the sill online addons!!!)  This was a nice simple add-on that allows you to create simple gradients with standard colors and control them using a couple lines of code. Voila! It worked!

The overall effect for the project is super fun and I had alot of fun looking at it late into the night.

Hope to maybe to some more precision audio work for my OpenFrameworks final.

Code and Video

Check on my code on GitHub

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s