Creative Coding is one of the best ways to start learning how to code. Using a selection of great (and easy) tools with some artistic vision, we can come up with some stunning & creative output. Creative Coding can be used for Art Installations, Live Visuals, Interactive Applications, Data Visualisation and many more. Here, we will use one of the most popular tools to give an introduction to creative coding. There are many libraries and software applications which can be used for Creative Coding. We will be using one of the most popular ones, processing.

Download and extract processing from here & then extract the contents into a suitable folder. Inside, click on processing.exe to start it and you will be greeted with the following. This is the main interface of processing and all the code for the exercise will be written here.

01_processing_init_screen

We will start with a basic piece of code and draw an ellipse on middle of the output screen. Enter the following on the editor and then hit the play button.

size (400, 300);
ellipse(200, 150, 100, 100);

We get the following output. To stop the program you can also press the stop button.

02_first_code

The first line of the code specifies the size of the output window (800 X 600 pixels) and the second line specifies that we want to draw an ellipse. The first two numbers in the second line (200 and 150) tell the program where the centre of the ellipse will be and the last two numbers (100, 100) define the radius of the ellipse that is to be drawn. Try to play around with these numbers and see what results you get.

Both these lines are calling functions which have been written to allow end-users to easily specify the parameters of the output they are trying to produce. You will find a lot of functions in processing (as well as in most other languages).

The code we wrote is going to draw the ellipse and then it will remain static without ever changing or updating. Needless to say, this is not that exciting at all and don’t really show the true power of processing. Let us look at another piece of code which allows for some user interaction.

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

void draw() {
  line (pmouseX, pmouseY, mouseX, mouseY);
}

02_second_code

When you run this piece of code, you will notice that you can draw shapes when you move the mouse pointer over the output window. We can broadly divide the program into two sections, setup() and draw(). The code inside setup() is only executed once and here, it is used to set the size of the output window. The draw() section is where the real action takes place, this section is continuously executed until the program is terminated and in our code, this is used to draw a line between the last known position of the mouse (pmouseX and pmouseY) and the current position of the mouse (mouseX, mouseY). Since the code is continuously executed, the line is always going to be generated as soon as you move the mouse in the output window. You will find that most code and examples in processing will have at least these two sections.

We hope that this post was interesting enough to give you a brief understanding about creative coding and hopefully, it made you want to explore the world of processing and create something amazing. If you want to explore further, we can point you to the tutorials, and examples in the official processing site. Happy coding and creating.

Other creative Coding tools.

Advertisements