Creative Coding with Processing

この記事はグッドパッチのエンジニア陣がお届けするGoodpatch Advent Calendar 2015の24日目の記事です。カレンダーの記事自体の言語はほとんど日本語ですが、今日は英語で書きます！

Yesterday Migiさん did an awesome work talking about Bayesian probability. It's really rare to see this kind of interesting topic outside the academia. お疲れさま、ミギさん！:)

I am from Brazil and currently working as server side engineer for Prott. I am also a frustrated artist, but today I'm pleased to talk about one of my passions.

Creative Coding

Programming isn't an activity that need to be restricted to solving problems. As much as painting, drawing, dancing, and all types of arts are ways of expressing feelings and thoughts, we can do the same by coding.

Creative coding is a type of programming focused in experimentation, and often used as a medium to produce computer generated art. It might sound very difficult, especially for non-engineers, but there are ways to make it simpler.

In this post I'm going to present some examples using the Processing, a computer language built on top of Java, especially designed creative coding and rapid prototyping. It abstracts most of complexities of a computer language in a small set of simple commands, making it suitable to be used by artists, designers and general people with almost no experience in programming.

Playing with randomness

Not all algorithms are designed to give always the same outcome. For creative coding and generative art fields, random results let us create interesting effects.

In this example, we will play with random numbers to create an unique texture. First, download and install the Processing IDE if you still don't have it. Then, in less than 30 lines of code, we can already have something to play with:

float x=150, y=150, xn=150, yn=150;

void setup(){
  size(300, 300);
  frameRate(60);
  background(0, 0, 0);
}

void draw(){
  if(random(1.) > 0.5){
    x += random(-10, 10);
  }
  else{
    y += random(-10, 10);
  }
  
  x = round(x/10)*10;
  y = round(y/10)*10;
  
  x = constrain(x, 0, width);
  y = constrain(y, 0, height);
  stroke(random(0, 255), random(0, 255), random(0, 255));
  line(x, y, xn, yn);
  xn = x;
  yn = y;
}

Running the code you should see something like this:

Try changing the values in the code to see how they impact the result. The structures you create with Processing don't need to be limited to screens and projections. With a few more steps, you can export your work for 3d printers! :)

Conclusion

In creative coding, you are only limited by your creativity. This was a very very short example, but I hope I could give a glimpse of what can be done with Processing. If you want to know more about Processing or algorithms for generative code, I recommend you to check this book.

Tomorrow, our Sadahさん、the Goodpatch's CTO, will make the last post for our Advent Calendar.