Basic Colour Functions
There are a number of functions used to add colour to our sketch images.
1. background(): The background function is used to change the background colour of the display window. It accepts either one or three parameters. Using one parameter, you can assign the colour using a grey-scale. Valid numbers are between 0 - 255.
background(150);
1. background(): The background function is used to change the background colour of the display window. It accepts either one or three parameters. Using one parameter, you can assign the colour using a grey-scale. Valid numbers are between 0 - 255.
background(150);
To choose a colour with three parameters, indicate the red, green and blue values, between 0-255 for each value.
background(100,45,200);
background(100,45,200);
2. fill(): To fill a shape with colour, use the fill() function - one parameter for grey-scale, three parameters for full colour. Remember you must choose the fill colour before drawing your shape.
Example: Create a display window 200 x 200 pixels. Draw a red circle.
size(200,200);
fill(255,0,0);
ellipse(100,100, 50,50);
Example: Create a display window 200 x 200 pixels. Draw a red circle.
size(200,200);
fill(255,0,0);
ellipse(100,100, 50,50);
3. stroke(): To change the "pen colour" or the line on the perimeter of your shape, use the stroke() function. One parameter for grey-scale and three parameters for full colour. Remember to select your pen colour before drawing your shape.
Example: Create a display window 200 x 200 pixels. Draw a white circle with a red border.
size(200,200);
stroke(255,0,0);
fill(255);
ellipse(100,100,50,50);
Example: Create a display window 200 x 200 pixels. Draw a white circle with a red border.
size(200,200);
stroke(255,0,0);
fill(255);
ellipse(100,100,50,50);
4. strokeWeight(): To change the thickness of the pen, or outside of the shape use the strokeWeight() function. The parameter indicates the number of pixels the line will be. The default is 4.
Create a sketch with a display window sized 400 x 400 pixels. Draw a blue line from (0,0) to (100,200). Change the pen weight to 8 pixels. Draw a black line from (50, 50) to (150, 250). Note the change in the line thickness.
size(400,400);
stroke(0,0,255);
line(0,0, 100,200);
strokeWeight(8);
stroke(0);
line(50,50,150,250);