A Guide for Creating Basic Geometric Illustrations

Processing Icon

Hey all,

Apart from sound design & field recording for a short movie project, I've taken part in another exhibition at a local bar (called Arkaoda) in Kadikoy, Istanbul. Lately I've been lurking around and wanted to create something graphical for myself. It is pretty basic, but it looks nice and it forms a good basis for further development ideas.

In this project, I wanted to create some colorful geometric graphics with Processing platform. I didn't have anything in my mind in particular, so in the end the project had the feature to change the visuals at each mouse click. Think of this as a little push if you want to start with a new project but can't do it. Just play with the code, add stuff, delete stuff, change stuff... Use the empty draw function for example.

The code is here:

/* A pretty basic code for creating randomly generated triangles with random colors.
*  Deniz Saglam, 2013

float alpha = 0.0;
int triangle_count = 40;

void setup()
size(600, 480); //size of canvas, initially 600 x 480. play around with this to see the difference.
background(200); //canvas background
color c = color (0, 0, 0);
for (int iter = 0; iter < triangle_count; iter++) {
alpha = random(100.0, 255.0);
c = color(random(255.0), random(255.0), random(255.0)); //a random color is generated for filling the triangles at each iteration
fill(c, alpha); //triangles are actually filled with the previously generated color, and have an alpha (transparency) value

//this next line can be edited for different visuals.
triangle(random(height), random(height), random(height + height * 0.24), random(height) + random(height + height * 0.24), random(width), random(width + width * 0.133)); //create a new triangle at each iteration

void draw() {

void mouseClicked() {
print("Mouse is clicked. \n");
color c4 = color(random(50.0, 155.0), random(50.0, 155.0), random(50.0, 155.0)); //create new color for background
background(c4); //new random background is colored
color c = color (0, 0, 0);
for (int iter = 0; iter < triangle_count; iter++) {
c = color(random(255.0), random(255.0), random(255.0));
fill(c, random(100.0, 255.0)); // fill the triangles

//this next line can be edited for different visuals.
triangle(random(height), random(height), random(height + height * 0.24), random(height) + random(height + height * 0.24), random(width), random(width + width * 0.133));



openFrameworks Installation Tutorial


Hey all,

I wanted to give openFrameworks a try after reaching to Processing environment's limits at certain points. I decided that I want to be able to be familiar with another environment where I can build apps that are faster. This C++ framework seems to be a good solution for my problem.

Now, if you want to get started with openFrameworks, this tutorial is definitely for you. I probably spent way more time than the average just to run the first example. Not because it's hard, but a slight distraction causes you to go over the steps from the beginning. So, hope this helps.

1) Assuming you haven't done anything by now, go to , click on "Download the binary release" and choose the right environment for you. I have Windows 8, so in this case I had to download "codeblocks-12.11mingw-setup.exe". After downloading it, simply run the installer and next it all the way to the end.

2) Now you will download openFrameworks. Visit and download openFrameworks for Code::Blocks in Windows. Then unzip the downloaded file and extract it to your Desktop. This folder will contain all the necessary stuff for openFrameworks. Simply create a directory at a handy place (I use C:\openFrameworks). Then, copy and paste all the files from the folder at your desktop into this newly created handy folder. We're almost there.

3) Now visit and follow the instructions.

4) You should have everything settled by now if you've followed the instructions carefully. Now you can go to in order to read the first steps tutorial. I have one more thing to mention: If you want to run an example as it is done in this last link, please don't forget to open the workspace file instead of the project file. Otherwise you will get errors since some parts will be missing. This means, open Code::Blocks, click on File-> Import Project -> Dev-C++project.. and then go to the right directory of the example folder (i.e. C:\OpenFrameworks\examples\graphics\graphicsExample) and select All files instead of the Bloodshed Dev-C++, and then select graphics example workspace file. Run the code and you're good to go.

I hope this helps, since I wouldn't want anyone else to spend meaningless time as I did in the beginning. Also, I want to thank Andrew McWilliams for his post, this tutorial bases mostly on his introduction except a few details.


An Online Tutorial For Creating Interactive Artworks


Hey all,

It has been a busy couple of months and my two friends and I managed to exhibit an interactive work that we named Rehearsal. For detailed information and a handsome video, do check here.

This will be a tutorial for creating an interactive project with Pure Data and Ableton Live on Windows.

In couple of sentences, our project gathers user input from Kinect sensors, processes the data in vvvv and sends floats/integers to Pure Data (Pd), Pd receives the data and maps it to MIDI notes, sends the MIDI notes over LoopBe1 Midi to Ableton Live and lastly, Ableton Live plays them out loud. At the last step I also used a synthesizer VST plug-in to create an appealing sound. Seems intimidating when you read it like that, but trust me once you know what to do it isn't that hard.

The exhibition consisted of four computers with four individual Kinect sensors and each four computer ran vvvv, Pd, Ableton Live and synthesizer VST plug-in. A fast computer would be nice, all these stuff require effort for the processor to deal with. We had four fast computers, but you can run vvvv and the rest of the software on different computers, since the connection between vvvv and Pd is done with TCP.

I was responsible for the sound design part, so I worked with Pure Data, Ableton Live and the synthesizers.

Don't mind the fancy topic, I was just trying to catch your attention. Although I can tell you that if you are into interactive works, you will definetely benefit from this tutorial. I will also provide my Pure Data patches to make everything easier for you. Please note that Pd is a free and open source software and LoopBe1 is also free, however Ableton Live is a product that you would need to buy (it has a one-month trial period though).

First, if you haven't already installed Pure Data to your computer, you should download it. It is a must if you are interested in DIY sounds, computer generated (algorithmic) music, computer aided live shows and most definetely, interactive projects. I recommend the extended version, since it has lots of additional libraries in it. Also Dr. Rafael Hernandez's Pd tutorials are great to get started with. Don't feel like these videos are the ultimate guides to learn Pd though. After a couple of videos, I figured that Pd help files that come along with Pd and googling stuff is the best option to get your way around. Also you can ask me anything about Pd, I will do my best to reply you quickly. I know what it feels like getting stuck at a point and never finding a solution to your problem.

So anyway, you should have installed Pd-extended by now. You are ready to roll. Click on the Pd file I have provided with this post and let's investigate it step by step. Download and open "Interactive MIDI.pd". Two windows will show up; Pd-extended is the main window of Pure Data and Interactive MIDI.pd is the file you opened with Pure Data. Pure Data is a node based, visual programming language. You will see bunch of blocks connected to each other with lines. Kind of like a block diagram. The structure is easy to understand: the hierarchy goes up to down. The output of the first block is connected to the next block's input (At this point let's assume this totally correct. I will show other stuff as we move on).

You see netreceive 9922 is the first block we have. Netreceive opens the port 9922 on your computer and listens to the incoming messages from that port. Right click on it and go to Help to read more about it. This Interactive MIDI.pd file was meant to listen to the incoming messages from port 9922, to which the Kinect data was sent. I was getting seven floats, which were the x and y axis coordinates on a canvas. When you went in front of Kinect and waved your hand from left to right, one of the floats I was getting would change, say, from 0 to 8. Now I received seven of these floats in a packet, so I used unpack function as the second node. The third set of blocks are just numbers, to visualize the floats that I get. Next, we have select function. This redirects the received float at an instance to the related output. It receives seven floats and repeats this process for each input.

Next we have buttons, or 'bang's as they are called in Pure Data. This is again used for visualization purposes. When you receive a series of floats simultaneously, it is harder to see what's going on without a button. Think of them as LEDs in a circuit, which show the path taken by a signal at an instance.

Now, this part looks a bit crowded but it's very simple to understand what is done here. Until here, I receive some coordinates from Kinect sensor as floats, and I have changing signals as someone interacts with the sensor. What I want to do is to map these signals to some beautiful audio output. Heck, I just want to produce some cool sound. So, what do I do?

I had the idea to choose a musical scale and get the notes out of this scale, connect them to the signals I receive and whenever the signal changes, it will play a note in that scale. No matter what signal I get, the played note will be in a specific scale and it will be a consonant note. So, what's with the numbers in the blocks, right? They are the frequencies of each note in that scale. For example, if I want to use F3, I type 174.61 in - or simply 174. I just googled for the list of these frequencies and found this table. Use it! It is wonderful, and you are totally free to select whatever note/scale you want. You can also create a dissonant structure and use notes that are off the scale. Or you can use totally random notes - just go ahead and try it out.

All these frequencies are connected to another number block, which changes whenever a signal is transmitted to it. If the signal comes from 131 at time t, it becomes 131 until the next signal comes from another block. Then it takes the number of that block and it goes on like this. Then it passes its value to ftom function, which is the abbreviation of frequency-to-midi. Pretty straight-forward, this converts the frequency we get to a MIDI note, a note that you could play on a keyboard. You can see this MIDI note in the next block.

The rest is MIDI connection. Makenote block takes 'pitch', 'velocity' and 'duration' as input and gives 'pitch' and 'velocity' as output. The pitch is what we get from the ftom block. You can manually change the other values though. Makenote is connected to noteout block, which transmits the MIDI notes. So as you see, we don't use Pd to create the sound. We could do that, but using a DAW (Ableton Live in thix example) and a synthesizer is a much more elegant way to produce the sound. So, I chose to transmit the MIDI notes to the synthesizer in Ableton Live.

Do not forget to go to the main Pd-extended window and click on DSP button, which stands for Digital Signal Processing. As long as this block is unticked, Pd will do the computation but will not produce any sound. This is where LoopBe1 comes into play.

LoopBe1 is an internal MIDI port for Windows OS, which virtually connects the input and output of different software. So when you want to take the output of Pd and connect it to the input of Ableton Live, you need it. For Mac, you have other options such as Jack OS X. There is LiveOSC, a widely used interface for connecting MIDI, but for me LoopBe1 was the easiest and the most user-friendly tool I could find.

Don't forget, these tutorial patches are made for the incoming data on port 9922, but you can always change it. Try deleting the netreceive 9922 block and inserting a randomizer: Create a bang, connect it to a 'metro 500' object and connect 'metro 500' to 'random 20' object. Then, connect the 'random 20' object to 'unpack f f f f f f f'. When you click on the bang with the proper mouse icon, you will see your patch working. Also check the ftom output, it changes as the signals come through right? These are the different notes played by your computer. Good work there!

It has been a long tutorial but I tried to explain the methodolgy in mapping sound according to the data input. Next time, I will show how to do things on the DAW side.

If you could really read all this post up until here and do everything properly, you really have a good patience. This was my first tutorial post and I apologize for the poor explanation. Feel free to ask me anything regarding this tutorial and I will try to answer your question.

Until next time!


Cinder: Begin Creative Coding

Cinder - Begin Creative Coding

This is a good guide/tutorial for beginners in Cinder framework. The detailed information covers almost all basic steps, starting from what Cinder is, what can be done by using Cinder and the installation steps until 3D and sound integration. The topics are not directly helpful for advanced users since the focus is on basics, however a beginner in Cinder would find this book quite useful.

There are not many (online or printed) sources available out there about Cinder, so this book is definetely valuable in that sense, too. My friend and I are using Cinder in our graduation project and the functions and examples were useful for our work. If you plan to work with Cinder, this book will definetely ease your job and help you on your way.

Note that some background knowledge in programming field, especially in C++ would definetely help you as you read the book, however if you are a total beginner don't worry. The book explains everything plain and simple, so I'm guessing that even flipping the pages of a book on C++ programming basics would be enough.

All in all, I am very glad to have had a chance to read this book and I would suggest it to anyone interested in Cinder.

Interested? You should give it a look.


Digital Sound Design on Coursera


Well, I stumbled upon this course as I was checking out the courses on Coursera, which is an online portal for free education. Honestly, this has been a great discovery for me, since there are many great courses from various universities and instructors.

Although I enrolled the course on 3rd week out of the 4 week schedule, it didn't take long for me to realize that it wouldn't be hard to catch on. For those who are curious about sound design should definetely check out this course.


Processing + Twitter by using Twitter4j

Processing Icon

***RESOLVED*** EDIT: I am updating the info of this post with this edit, since it got a bit outdated. First thanks to Codasign people for their awesome tutorial, you can take a look at it here. The current version of Twitter4j is 4.0.1 by the time I am writing this post. Below you can find the working tutorial for using Twitter4j within Processing.

Okay, I know that there are many, many tutorials on this subject and I know that it's fairly easy to actually get some output within 2 hours of googling and copy pasta - however, this is a long road for impatient users like me. Also, I have a project on my mind and I want to share my experience before I get it done.

First of all, please do check this tutorial before getting your hands dirty, because it is simply awesome. I just modified it slightly and I believe it's a wonderful starting point.

One issue about the tutorial for me was the authentication part of the twitter API. Below is my (slightly different yet more practical) version of the steps:

1. Visit and login with your twitter username and password
2. Click on the ‘Create an app’ button at the bottom right
3. Fill out the form that follows.
4. Once you’ve agreed to the developer terms, you’ll arrive at a page which shows the first two of the four things that we need: the Consumer key and the Consumer secret. Copy and paste these somewhere so you have them ready to access.

 4,5. Click on settings button. Scroll down to Application Type and select Read and Write. This is important because otherwise for posting a tweet, you'll need the rights to be able to Write. The code provided on the tutorial will NOT post a tweet to your account.

5. To get the other two values that we need, click on the button that says ‘Create my access token’. Copy and paste those two values (Access token and Access token secret) so that we have all four in the same place. These are pretty important so keep them handy, but don't share them with third parties.

So this was what you had to do with twitter authentication. Now we come to Twitter4j and Processing part. If you haven't done yet, please download Twitter4j and install it from here.

For installing, do the following:
1) Unzip the
2) Move the unzipped folder to Processing > libraries (This is by default inside Documents on Windows)
3) Rename the folder "twitter4j-4.0.1 " to "twitter4j401"
4) Place all contents of the "twitter4j401" folder into a folder called "library", which is inside the "twitter4j401" folder
5) Rename "twitter4j-core-4.0.1.jar" in the "library" folder to "twitter4j401.jar".  This was our final step and now shut down processing if it's still running and relaunch it. Voila!
Now you should have Twitter4j library ready to use in Processing. Open up a Processing sketch, and select Sketch-> Import Library... -> twitter4j401. If you got it all right, you'll see a bunch of import twitter4j... codes in your sketch. Excellent!

For a quick example (provided %99 by Jer from, copy and paste the code below to your Processing sketch and hit Play button. I'm sure that'll help you get started. By the way, do not forget to replace the asterisks with your own tokens you got from

import twitter4j.conf.*;
import twitter4j.internal.async.*;
import twitter4j.internal.logging.*;
import twitter4j.json.*;
import twitter4j.internal.util.*;
import twitter4j.auth.*;
import twitter4j.api.*;
import twitter4j.util.*;
import twitter4j.internal.http.*;
import twitter4j.*;
import twitter4j.internal.json.*;
//Build an ArrayList to hold all of the words that we get from the imported tweets
ArrayList<String> words = new ArrayList();

void setup() {
//Set the size of the stage, and the background to black.

ConfigurationBuilder cb = new ConfigurationBuilder();

//Now we’ll make the main Twitter object that we can use to do pretty much anything you can do on the twitter website
//– get status updates, run search queries, find follower information, etc. This Twitter object gets built by something
//called the TwitterFactory, which needs our configuration information that we set above:
Twitter twitter = new TwitterFactory(;
//Now that we have a Twitter object, we want to build a query to search via the Twitter API for a specific term or phrase.
// This is code that will not always work – sometimes the Twitter API might be down, or our search might not return any results,
//or we might not be connected to the internet. The Twitter object in twitter4j handles those types of conditions by throwing back
//an exception to us; we need to have a try/catch structure ready to deal with that if it happens:
Query query = new Query("#audio");
//Try making the query request.
try {
QueryResult result =;
ArrayList tweets = (ArrayList) result.getTweets();

for (int i = 0; i < tweets.size(); i++) {
Tweet t = (Tweet) tweets.get(i);
String user = t.getFromUser();
String msg = t.getText();
Date d = t.getCreatedAt();
println("Tweet by " + user + " at " + d + ": " + msg);

//Break the tweet into words
String[] input = msg.split(" ");
for (int j = 0; j < input.length; j++) {
//Put each word into the words ArrayList
catch (TwitterException te) {
println("Couldn't connect: " + te);

void draw() {
//Draw a faint black rectangle over what is currently on the stage so it fades over time.

//Draw a word from the list of words that we've built
int i = (frameCount % words.size());
String word = words.get(i);

//Put it somewhere random on the stage, with a random size and colour
text(word, random(width), random(height));


//End of code.


Please feel free to share any problems you confront with.