Generative Art #1 – Processing

In the past few months I started to discover some new frameworks that, in some ways, combine science and visual art. For me, in this category, there all the code frameworks that have the purpose to create some kind of visual art and even tools that use a mathematical formulas to create illustrations or even sounds. I found a lot of interesting frameworks and tools that fall into this category. I will try to cover some frameworks I liked using during this researches, this time I will talk about Processing. In this article I’ve inserted come GIFs created with Processing just for showing the results achievable.

 

What is Processing?

Processing is an open source programming language that allows to create different types of applications, animations or interactive contents and even generative art. It is built on top of Java language from which it takes many principles and paradigms. It comes with a dedicated IDE (Integrated development environment) but you can set up a different text editor (like Sublime) and set it up to work with Processing.

via GIPHY

 

What you can do with Processing?

Processing can handle both 2D and 3D graphics and the variety of all the achievable effects are countless. Basically it works like a canvas on which you can draw, multiple times per second, on top of it, graphic primitives like points, lines, polygons and circles, to form a single frame. Then these primitives, in order to be animated, had to be drawn in different positions, scale and rotation and Processing allow to do that very easily.

http://sasj.tumblr.com/post/168678854540/geometric-animations-171218

 

How to start using Processing

Processing is supported by all the major operating systems and the initial steps to create your first Processing program are:

  • Download the last version of Processing (HERE)
  • Install the IDE and the environment necessary on your system (GUIDE)
  • Open the IDE, create a new document and paste this code below
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    float numberofCircles = 15;
    float angle = radians(360 / numberofCircles);
    float distance = 40;
    float offset = radians(90);
    float counter = 0.01;

    void setup() {
      size (300, 300);
      smooth();
    }

    void draw () {
      background (#2F9599);
      noStroke();
     
      fill (#F26B38);
      for (int i = 1; i <= numberofCircles; i++) {
        float x = cos(angle *i + offset) * distance + width/2;
        float y = sin(angle *i + offset) * distance + height/2;
        ellipse (x, y, 10, 10);
      }
     
      fill (#F7DB4F);
      for (int i = 1; i <= numberofCircles; i++) {
        float x = cos(angle *i - offset) * (distance+40) + width/2;
        float y = sin(angle *i - offset) * (distance+40) + height/2;
        ellipse (x, y, 10, 10);
      }
     
      fill (#A7226E);
      for (int i = 1; i <= numberofCircles; i++) {
        float x = cos(angle *i + offset) * (distance+80) + width/2;
        float y = sin(angle *i + offset) * (distance+80) + height/2;
        ellipse (x, y, 10, 10);
      }
      offset = offset + counter;
    }
  • Hit the run button on the IDE and watch the results 🙂

 

As you can see in the code, there are two major functions:

  • The setup function that initialize everything and draws the first frame. If your are thinking to a static image, you just need this function.
  • The draw function that draws a frame multiple time per seconds. To create the animation, it is very important to consider the time variable or the mouse input.

 

via GIPHY

Resources

If you want to know more about Processing, there are a lot of resources you can find online on Processing, but I will list some of the resources that I found interesting and inspiring.

  • processing.org – main site with tutorials, forum and lots of information about Processing.
  • Programming Graphics I – A very special SkillShare course about Processing by Joshua Davis. He talks also about HYPE, a framework on top of Processing for creating even cooler illustrations. Checkout also part II and III.
  • Saskia Freeke Tumblr – A massive archive of GIFs of Processing creation, good for inspiration.
  • funprogramming.org – A great list of tutorials on Processing.
  • #creativecoding on Twitter.

 
It is also worth to mention that there are some great communities around Processing, like openprocessing.org that allows you to see scripts in action, fork and modify scripts from other users or write them from scratch.

http://sasj.tumblr.com/post/117793040465/geometric-shapes-150430

On the next issues of this serie I will talk about fractals and how can you create art with them. Stay tuned 🙂

I define myself as a creative developer.

I define myself as a creative developer.