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.

Create a video barcode with Python

 

I’ve recently discovered this curious blog called movie barcode (link). The image on this blog are basically created from the frame colors of a movie or a video and maybe there are some post-processing on the image to make it more artistic. When I discovered it, I really liked the idea and I started to gather information on the possible algorithm to analyse and create (from code) similar images. This is when I discovered some articles (this one, and this one) on the matter and I started to play around with the code given. Most of it was in Python so I continued to use it for this project. My idea was to analyse video source frame by frame, then find the main color for that frame and to create an image that has a vertical line (of a certain width) of that color. I know this is a different approach from the ones on the blog , but I wanted to start easy and then to expand or change the algorithms. The link of the script is at the end of this article 🙂

 

Take a video source

The first step is to take a video source and for that you can choose to take a video on a specific path of your pc or you can download it. I used this library (link) to download a video from Youtube (very easy to use). Once we have a video we can analyse it. I tested my script mostly with mp4, avi and mkv videos, I don’t know if can works with all video codecs or compression. (it’s not the purpose of my script 🙂 )

 

Analyse frame by frame

Now the fun part: find the main color of a frame. To do that I massively inspired my work on this articles (link) from Alan Zucconi, where he uses a K-mean algorithm to analyse an image and explains very well how this algorithm works. Fortunately, there are some good Python libraries to do that (details on the script) and they are easy to use, so why not. This algorithm is pretty heavy but after few seconds we have the RGB components of the main color for that video frame and after doing this process for every frame of the video, we have a list of colors. Since I choosed to make the result images of a certain maximum size, in the script I analyse only a certain number of frames. If the number of frames are more than this number I simple analyse one frames and skip N frames.

 

Creating the final image

Now what we have to do is to create an image that have a vertical line for every color of our list of colors. To do this, I used another Python library to create images, graphs and color manipulation stuff, which is a pretty powerful library that can do various things as create an image of a certain size from a list (a matrix) of colors. Here is how the matrix is created.

 

Final results

I’m pretty happy with the results so far, so I started to analyse some Youtube videos and some films with this results:

 

It’s only a matter of install the right libraries and run this script with a video and you’ll have a nice barcode. I will definitely improve this code and try to make it more artistic. Maybe in the future there will be another post on this subject.

Source code

https://gist.github.com/plafone/aa6b84ae26372dad7c2c2d35be7ae217

I define myself as a creative developer.