Learning Processing; coding and more

The idea of learning processing was a daunting experience. I had never learnt any form of coding before and as an artist the possibility of using code to create art and design work is an existing world to discover.

The processing website: https://processing.org/ allows you download the processing software and also has tutorials and examples to play around with. If like me you have never used processing before, the beginners tutorials are the best way to start. I recommend Hello Processing by Daniel Shiffman et al.  http://hello.processing.org/ It teaches you the basics and shows the beginning possibilities what processing can do.

After downloading the processing software, you can copy and paste some open source examples into the processing and run the software to see what will happen. As well as the processing, the Form+Code  website http://formandcode.com/ has a range of examples that you can play around with.

I have created a very simple example of code that anyone can use for processing.

Screen Shot 2015-04-05 at 11.54.39

This uses a range of ellipses to create horizontal and vertical lines when you move your mouse over the screen. The first piece I have created and although it is simple it has opened me up the what processing can achieve.

Have a go yourself and copy and paste this into processing, then play around with it and see what you can achieve!

//ellipse drawing

void setup (){
size (800,800);
background (0);
}
void draw (){

//ellipse going horizontal

fill (220,0,0);
stroke (0,0,155);
ellipse(mouseX,12,35,35);
fill(190,246,245);
stroke(255,0,0);
ellipse(mouseX,43,80,10);
fill(255);
stroke(255,255,0);
ellipse(mouseX,65,49,10);
fill(255,250,0);
stroke(255);
ellipse(mouseX,79,10,40);
fill(130,90,67);
stroke(255,0,0);
ellipse (mouseX,90,50,50);
fill(40,0,90);
stroke(40,90,4);
ellipse (mouseX,200,25,25);
fill(255,0,0);
stroke(39,90,0);
ellipse (mouseX,240,15,15);
fill(255);
stroke(255,0,0);
ellipse (mouseX,290,37,37);
fill(0,230,255);
stroke(255);
ellipse(mouseX, 350,70,70);
fill(255,240,140);
stroke(0,0,255);
ellipse (mouseX,420,10,60);
fill(140,255,140);
stroke(255,0,0);
ellipse (mouseX, 490,90,15);
fill(255,90,100);
stroke(255,255,0);
ellipse (mouseX,550,5,30);
fill(0);
stroke(255);
ellipse (mouseX,600,10,10);
fill (200);
stroke(0,0,255);
ellipse(mouseX,700,50,50);

// ellipse going vertical

fill (255,0,0);
stroke(255);
ellipse (2,mouseY,10,10);
fill(0,0,255);
stroke(255);
ellipse (40,mouseY,35,35);
fill(0,255,0);
stroke(255);
ellipse(150,mouseY,20,20);
fill (100,100,100);
stroke(255);
ellipse(600,mouseY,4,4);
fill(250,200,90);
stroke (255);
ellipse(300,mouseY,50,50);
fill(50,35,90);
stroke(255);
ellipse(700, mouseY,1,1);
fill(145,0,90);
stroke(255);
ellipse(300,mouseY,90,90);
fill(90,80,40);
stroke(255);
ellipse(500,mouseY,46,46);
fill(255,255,0);
stroke(255);
ellipse(600,mouseY,40,20);
fill(255,196,200);
stroke(0,0,255);
ellipse(750,mouseY,50,50);
fill (57,90,255);
stroke(0,255,0);
ellipse(400,mouseY,15,15);
fill(0);
stroke(255);
ellipse(128,mouseY,36,36);

}

Don’t forget to check out the processing website and have a go for yourself.

Advertisement

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 )

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