Playing with shape & colour

Starting out with processing we began by learning the basics of static drawings using code. How to set up a canvas using the ‘void setup () {}’ function.

Everything in the curly brackets happens once, at the start.

In the void setup block we created a canvas using the ‘size’ function, giving it a width and height in a measurement of pixels and closing this off with a semicolon.

We then gave it a colour using ‘background’ and putting a number between 0-255 in the brackets, 0 being black and 255 being white with everything in between being various shades of grey.

Then we added shaped after being introduced to the functions rect, ellipses, line and point. In the brackets you have to but (X coordinate, Y coordinate, width, height) except with the line and point where you just use the coordinates indicating two points where the line will start and end.

Add colour to these we use the stroke and fill functions followed by values for red, green and blue all using the 0-255 scale of intensity for the colour.

We also looked at the ‘strokeWeight’ adding numerical values in the brackets to change the stroke and also using the noStroke(); function to have a shape without an outline.

This was my practicing:

void setup () {
size(800, 600);
 stroke(0, 0, 255);
 fill(0, 255, 0); 
 rect(200, 100, 400, 400); // rectangle x,y,w,h
 fill(100, 0, 100);
 ellipse(400, 300, 400, 400);
stroke(225, 0, 0);
 line(400, 100, 400, 500); // line x,y,x1,y1
point(100, 500);
Which looked something like this:

Screen Shot 2016-01-26 at 20.03.37


Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s