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)

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

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)

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

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

Let us code the square growing sketch using these predefined variables

                        Sketch – square growing using width and height predefined variables

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

17

18

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 .

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

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

17

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

 1

 2

 3

 4

 5

 6

 7

 8

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

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

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.  


                        Sketch – Comparison operators

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

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 .......    

    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

 1

 2

 3

 4

 5

 6

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

 1

 2

 3

 4

 5

 6

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

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

17

18

19

20

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