ICS4U Give Me a Star!

Styling, Text & More Functions in Processing

Colouring the background

Sets the colour of a background to a specific colour.

background([0…255])

background(red, green, blue)

background(#hexcode)

The # should always be there!

size(500, 500);

// Colouring with RGB

background(209, 180, 250);

// Colouring with hex

background(#d1b4fa);

/* Since there's only one window, you'll only really need to call background() once

Processing will take the most recent call as your final background colour */

Colouring shapes

Fills in the colour of any shape you draw.

This colour will be for all shapes after fill() or noFill() is called, until one of them is called again to change the setting!

fill(red, green, blue)

fill(#hexcode)

noFill()

Takes no parameters; will only draw the outline of your shape, leaving the filling transparent.

size(500, 500);

fill(43, 5, 255);

rect(0, 0, 249, 249);

// Processing will keep the fill setting until you change it

// This rectangle along with the previous will be blue

rect(0, 250, 249, 249);

noFill();

rect(250, 0, 249, 249);

Custom lines and outlines

Change the colour of a line or outline of a shape.

Just like fill, the colour settings of a line will stay the same until you call one of the functions below to change it.

stroke(red, green, blue)

stroke(#hexcode)

strokeWeight(width)

strokeCap(style)

noStroke()

Takes no parameters; will make all lines and outlines transparent.

size(500, 500);

noStroke();

ellipse(250, 125, 100, 100);

stroke(100, 94, 7);

strokeWeight(4);

ellipse(250, 375, 100, 100);

strokeWeight(12);

line(10, 250, 490, 250);

strokeCap(ROUND);

stroke(10, 93, 100);

line(10, 270, 490, 270);

strokeCap(SQUARE);

line(10, 230, 490, 230);

Drawing a custom shape

Basically play connect-the-dots with Processing.

Allows you to draw any organic shape with vertices.

To create a custom shape, you will call the beginShape() to start, and endShape() to tell Processing that you are done. All vertices will go in between, like so:

vertex(x, y)

Processing will use a straight edge to connect vertices marked with vertex()

beginShape();

vertex(30,20);

vertex(85,20);

vertex(85,75);

vertex(30,75);

endShape();

         

beginShape();

vertex(30,20);

vertex(85,20);

vertex(85,75);

vertex(30,75);

endShape(CLOSE); // Notice CLOSE

         

beginShape();
vertex(30,20)
vertex(85,20)
vertex(85,75)
vertex(30,75)

endShape(CLOSE);

         

beginShape();
vertex(85,20)
vertex(30,20)
vertex(85,75)
vertex(30,75)

endShape(); // Order matters!

         

curveVertex(x, y)

Processing will use a curved edge to connect vertices marked with curveVertex()

beginShape();

curveVertex(336, 364); curveVertex(336, 364);

curveVertex(272, 76); curveVertex(84, 68); curveVertex(128, 400); curveVertex(128, 400); endShape(CLOSE);

         

Adding & styling text

text("text", x, y)

text("text", x1, y1, x2, y2)

textSize(fontSize)

To colour text, we just use fill(), like we did to colour shapes earlier!

size(300, 300);

// Notice that the styling comes before we use the text() function textSize(16);

fill(200, 0, 250); // purple

text("meep morp zeep robot captain engage", 10, 10, 200, 250);

fill(0, 255, 0); // green

// The text ends up being purple

// We don't see this green colour because it was called AFTER text()