I imagine that some of you might be wondering how I create some of my projects, so I have decided to put together a series of bite-sized tutorials based on a workshop I put together called Paint with Processing. In this series we will find out how to create generative painting and image making systems that we can use as a foundation to connect to our own artistic practice.

In this series I will be using Processing, but hopefully anyone will be able to follow along. If you haven’t downloaded Processing already, you can download it here.

In Part 1, we are going to be setting up the foundation for building our system which can be developed and adapted into future works. Let’s start by creating discussing what creating system-based art in terms of my own work.

Designing Behaviours

What would you do if you could create your own tool? While making traditional paintings, sculptures, or whatever media you use, we are often using tools that have been designed for a given purpose. The tools have history and have been shaped to solve a given task, perhaps applying paint in a particular manner, and can also be bent and misused to a certain degree. The question I often ask however, is what happens when we can design our own tools.

Programming in Processing opens up this world in a digital environment and changes the terms of what we consider art making. It gives us the opportunity to design our own tools, think of how we want them to behave, and open ourselves up to a world of possibility.

To demonstrate, I would like to show what I mean by creating a behavior:

int x;
int y;

void setup(){
size(500, 500);
background(0);

// Start at the center
x = width/2;
y = height/2;
}

void draw(){

// Draw an ellipse
noStroke();
fill(255);
ellipse(x, y, 2, 2);

// Move around in a circular motion
x = (int)map(sin(frameCount * 0.02), -1, 1, 0, width);
y = (int)map(cos(frameCount * 0.02), -1, 1, 0, height);

}

At the very basic we have a ellipse that moves across the screen in a circular motion, which is a great starting point. With very little code we already have a shape that seems to have factors that determine its own future. What is lacking from my perspective, is a human touch.

What can we now add that will allow me to collaborate with this new tool. My adding a simple line of code, I will setup my mouse position to change the ellipses movement across the screen.

int x;
int y;

void setup(){
size(500, 500);
background(0);

// Start at the center
x = width/2;
y = height/2;
}

void draw(){

// Draw an ellipse - add from mouseX and mouse Y location
noStroke();
fill(255);
ellipse(mouseX + x, mouseY + y, 2, 2);

// Move around in a circular motion
x = (int)map(sin(frameCount * 0.02), -1, 1, -100, 100);
y = (int)map(cos(frameCount * 0.02), -1, 1, -100, 100);

}

I admit this isn’t the most beautiful thing in the word. But now we have some element of control with the mouseX and mouseY position, but we are also giving up control to the circular motion. As we continue along with the tutorial, you will see that some magic lies in this letting go and is the fascinating aspects of designer your own systems and tools.

Feel free to ask any questions or post your own experiment on Patreon in the comments. See you in Part 2.

View on Github


Become a Patron

SaveSave