Start coding art with Processing – #LEAMULES 2.6

Posted by

Today’s suggested diversion is something that you can really get your teeth into as well as being a bit educational and incredibly fun and satisfying.

Processing is a computer language developed specially for making all sorts of art – could be static visual art, moving/animated art, audio art or a mix of all of these as well as a load more things.

Three great things about using Processing to make art are:

  1. You don’t need to have any artistic skills at all to make some great stuff.
  2. You can make art that includes random and generative elements, or that can respond to things like sound – so that each piece you make is different and unique.
  3. There is very little chance of getting dizzy from breathing in fumes from art supplies.

Here are some messy examples I’ve managed to knock up in the past in the form of a short instagram video…

Processing itself is completely free to download and use and there are loads of resources and tutorials all over the place. The only barrier to entry is that you are going to be learning to do some coding, this may sound scary and intimidating but it really isn’t. In fact. Processing is a great way to learn a bit about programming because you can immediately see what your code does and how changing things affect the art that you have made.

To get started, download Processing from Processing.org.

If you are a complete beginner to coding, then head to the getting started page – I also recommend that you check out the tutorials that you can find at funprogramming.org.

Don’t be discouraged if the learning curve seems a bit steep to begin with, it will all start to make sense quicker than you think.

If you want something to try out straight away, below is an example of some randomness that I knocked up.

If you paste the code at the bottom of this post into processing and press the run button, you’ll get an image generated from a whole bunch of straight lines, but each time you run it things like colour, line thickness and start and end points are different, so you’ll never get the same image twice, for example:

So, get cracking and don’t forget to share your creations around wildly, the world need more art at the moment.

Random straight line image generator by Jim

(copy all of the code below including the two curly brackets at the end and paste into an empty processing sketch)

float startx= random (800);
float starty= random (800);
float endx=random (800);
float endy=random (800);
float mstartx= random (-10,10);
float mstarty= random (-10,10);
float mendx= random (-10,10);
float mendy= random (-10,10);
float ceiling = -100;
float floor = 900;
float left = -100;
float right = 900;

size (800,800);
stroke (random (255),random(10,100));
strokeWeight (random(5));
background (random(255),random(255),random(255));
rectMode (CENTER);
noFill();

for (int i=1;i<random(1000,2500);i++){
//rect (startx,starty,100,100);
line(startx,starty,endx,endy);
startx=startx+mstartx;
starty=starty+mstarty;
endx=endx+mendx;
endy=endy+mendy;

if (startx>right){
mstartx=-mstartx;
}
if (startxfloor){
mstarty=-mstarty;
}
if (startyright){
mendx=-mendx;
}
if (endxfloor){
mendy=-mendy;
}
if (endy<ceiling){
mendy=-mendy;
}
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s