Creative Coding & Arts Led Exploration
Play Code Share

Hello World

The first lesson in learning how to code in #processing

The setup function in processing is executed once. We use this to define starting states for our program.. such as how big our canvas is and whether our background should be a particular colour. The draw function in processing is executed 30 times (frames) a second and the code is repeatedly run one step at time .. but very quick ! Over the playcodeshare lessons we will mostly be working in the draw function to update and make changes to the visuals on the screen so that they constantly change and evolve.

Processing draws to a canvas which is defined with a width and height in pixels. We can size our canvas to any width and height but usually it will be within the screen resolution of the computer you are currently working on.

The canvas is therefore a coordinate system – much a like a piece of squared/graph paper. We can draw many shapes to the canvas by defining a position using an X and Y coordinate. Several shapes require a start coordinate and an end coordinate. (0,0) is our top left hand corner of the canvas and increases to the right along the X axis and down along the Y axis. We can draw many basic shapes such as ellipse, rectangles and triangles using their named function.

Colour in processing is by default assigned using the R,G,B model. This relates to the Red, Green and Blue value held within the pixel. (Look closely at your TV and you will see these pixels that make up the larger images). We can fill a shape with a colour by using the fill() command and varying the amount of Red,Green and Blue – much like mixing pots of paint.

Lets experiment with drawing shapes of different colours to the screen. The example below features an interactive shape and several shapes drawn statically to the screen.

To make our work interactive, processing can make use of the devices attached to our computer with ease. The mouse for example is used to represent a position in a 2d X and Y space. By taking our mouseX and mouseY position we can map this into our shape instead of giving it fixed coordinates. This will draw our shape at the mouse position and update with every time the processing code runs the draw function. (We just made a painting tool much like a very very basic MSPaint!)

Live Demo

Raw Code

// PlayCodeShare
// processing workshop 001
// ashleyjamesbrown

void setup(){

background(0);
size(800,600);

}

void draw(){
stroke(38,170,45);
line(70,30,200,400);

noStroke();

fill(8,270,145);
triangle(30,90,50,300,200,200);

fill(255,10,5);
ellipse(mouseX,mouseY,50,50);

fill(8,0,45);
rect(450,350,100,100);
}
Back to Blog