Conditionals – If clause

Adding colour to your drawing

We can use the fill() command to set the colour of the brush used to paint our rectangles and circles

In a computer colour is defined as a range of numbers from 0 to 255. Let's start with the simplest case: black & white - 0 means black, 255 means white. In between, every other number :- 50, 87, 162, 209, and so on—is a shade of gray ranging from black to white. See figure below

Sketch - cart with colour (grayscale)

function setup() {

createCanvas(600, 400);

rectMode(CENTER);

}

function draw() {

background(220);

fill(100);

ellipse(240, 200, 50, 50);

ellipse(360, 200, 50, 50);

fill(180);

rect(300, 175, 200, 20);

}

RGB colour

Every computer has 3 primary colours – red, green and blue. Each primary colour has a range from 0 to 255 where 0 is no colour and 255 is the brightest shade of the colour. We can obtain any colour using a combination of these 3 primary colours in different shades. For example if we mix red with green we get yellow. See figure

RGB stands for Red, Green, Blue

There is a version of the fill() command which takes 3 parameters

fill(R,G,B); //Each parameter is a value between 0 and 255

fill(255,0,0); // red
fill(0,0,255); // blue
fill(255,255,0); // yellow
fill(255,130,0); // orange
fill(0,0,0); // black
fill(255,255,255); // white

Go ahead experiment with the fill command and see what colours you get. Draw a cart with color.

Sketch - cart with colour (RGB)

function setup() {

createCanvas(600, 400);

rectMode(CENTER);

}

function draw() {

background(220);

fill(0, 65, 100);

ellipse(240, 200, 50, 50);

ellipse(360, 200, 50, 50);

fill(0, 150, 200);

rect(300, 175, 200, 20);

}

You can open a ‘Color picker’ in google to find out the RGB values of different colours.

Predefined variables width and height

Processing makes 2 predefined global variables available to us. They are

width – stores the width of the canvas
height – stores the height of the canvas

Let us code the square growing sketch using these predefined variables

Sketch – square growing using width and height predefined variables

var squareSize = 10;

function setup() {

createCanvas(600, 400);

rectMode(CENTER);

}

function draw() {

background(225);

var y = height / 2;

var x = width / 2;

// draw square

fill(237, 34, 93); // set color of drawing brush

rect(x, y, squareSize, squareSize);

// increase size

squareSize=squareSize+1;

}

Drawing Text – text() command

To draw text on the canvas we use the text() command which receives 3 parameters .

text(txt, x, y) -

txt – the text to draw
x – the position on the x axis where the text should be drawn
y – the position on the y axis where the text should be drawn

You can use the textSize() command to set the size of the text to be drawn and the textAlign() command to set the horizontal alignment and vertical alignment of the text

Sketch – drawing text on the canvas

function setup() {

createCanvas(600, 400);

textAlign(CENTER, CENTER);

}

function draw() {

background(225);

// set brush color to red

fill(255, 0, 0);

textSize(20);

text("small", 300, 150);

textSize(50);

text("large", 300, 250);

}

Increment and decrement operators ++ and --

The ++ operator increases the value of a variable by 1.

The - - operator decreases the value of a variable by 1.

Sketch – increment and decrement operators

function setup() {

var age=21;

print(age); // prints 21 to the console

age++; // shortcut for age = age + 1;

print(age); // prints 22 on the console;

age--; // shortcut for age = age - 1;

print(age); // prints 21 on the console

}

Let us code a sketch which keeps growing number 1 on the canvas as shown below.

Sketch – Number growing

var numberSize=20;

var number=1;

function setup() {

createCanvas(600, 400);

textAlign(CENTER, CENTER);

}

function draw() {

background(220);

fill(255, 0, 0);

var x = width / 2;

var y = height / 2;

textSize(numberSize);

text(number, x, y);

numberSize++;// shortcut for size = size + 1

}

Comparison operators

Comparison operators compare 2 values and return boolean result i.e. true or false.

< ( is less than)
<= (is less than or equal to)
> (is greater than)
>= (is greater than or equal to)
== (is equal to)
!= (is not equal to)

Sketch – Comparison operators

function setup() {

var age=35;

print(50 > 10); // prints true

print(50 < 50); // prints false

print(age < 60); // prints true

print(60 >= 50); // prints true

print(50 <= 50); // prints true

print(age >= 50); // prints false

print(50 == 40); // prints false

print(age == 35); // prints true

print(50 != 40); // prints true

}

if clause – taking decisions

The if clause allows the computer to take decisions. Based on a test (or condition) the computer will decide whether to execute some lines of code or skip executing those lines of code.

The structure of the if clause is as follows

if(test){

some code .......

}

The code between the curly braces will be executed only if the answer to the question (test) between the round brackets is yes i.e. results to true

if the answer is no the code will be skipped by the computer

Sketch – if clause

var marks=50;

function setup() {

if (marks>=40) {

print("congrats you passed");

}

When computer reaches line 3 in the above sketch it will perform the test (i.e. ask the question) - is marks >= 40? If the answer is yes ( the result of the test is true) then the code which is in the body of the if clause between the open curly bracket ‘{ ‘ at line 3 and the close curly bracket ‘}’ at line 5 will be executed by the computer otherwise the code will be skipped and the computer will jump to line 6

When you run the sketch you will see ‘congrats you passed’ on the console.

Now go ahead and change the value of the variable marks to 30 and then run the sketch.

Sketch – if clause 2

var marks=30;

function setup() {

if (marks>=40) {

print("congrats you passed");

}

You will see nothing on the console because the test - is (marks >= 40) results in false and the computer skips the body of the if clause.

Exercise - In the number growing sketch that we did earlier change the value of the variable numberSize to 20 if the value of the variable numberSize is greater than 120.

Sketch – Number growing with if

var numberSize=20;

var number=1;

function setup() {

createCanvas(600, 400);

textAlign(CENTER, CENTER);

}

function draw() {

background(220);

fill(255, 0, 0);

var x = width / 2;

var y = height / 2;

textSize(numberSize);

text(number, x, y);

numberSize++;// shortcut for size=size+1

if (numberSize>=120) {

numberSize=20;

}

When you run the sketch you will see that once the number reaches the size of 120 on the canvas, it will become small again.

Practice Assignments

1. Sketch a red square which keeps growing till it reaches reaches a size of 300.

Hint : Increase the size of the square only if the size is less than 300

2. Code a sketch where a ball (circle) moves from left to right. When the ball touches the right edge of the canvas, the ball should stop moving.

Hint: Move the ball (i.e. change the value of x) only if the ball’s right edge is left of the canvas’ right edge.

See the 2 figures below

Figure of ball not touching the canvas right edge

Figure of ball touching the canvas right edge

Recap

fill(R, G, B); // sets the colour of the paint brush used for drawing
width - predefined global variable which stores the width of the canvas
height - predefined global variable which stores the height of the canvas
text(txt, x, y) command – draws text on the canvas
textAlign(hAlign, vAlign) command– sets the horizontal and vertical alignment of text to be drawn
textSize(size) command – sets the size of text to be drawn
++ operator – increments value of variable by 1. var++ is shortcut for var = var + 1
-- operator – decrements value of variable by 1. var-- is shortcut for var = var - 1
< comparison operator – is less than
<= comparison operator – is less than or equal to
> comparison operator – is greater than
>= comparison operator – is greater than or equal to
== comparison operator – is equal to
!= comparison operator – is not equal to
if clause – allows the computer to take decisions - if( test ) { code .......... }