├── README.md
└── examples
    ├── 10
        ├── 10-11.js
        ├── 10-13.js
        ├── 10-08.js
        ├── 10-09.js
        ├── 10-17.js
        ├── 10-10.js
        ├── 10-06.js
        ├── 10-05.js
        └── 10-21.js
    ├── 11
        ├── 11-03.js
        ├── 11-04.js
        └── 11-01.js
    ├── 12
        ├── 12-01.js
        ├── 12-02.js
        ├── 12-04.js
        ├── 12-06.js
        ├── 12-05.js
        ├── 12-07.js
        ├── 12-09.js
        ├── 12-08.js
        └── 12-11.js
    ├── 13
        ├── 13-01.js
        ├── 13-02.js
        ├── 13-03.js
        ├── 13-04.js
        ├── 13-05.js
        ├── 13-06.js
        ├── 13-07.js
        ├── 13-08-without-code-comments.js
        ├── 13-08.js
        └── 13-09.js
    ├── 02
        ├── 02-01.js
        ├── 02-02.js
        ├── 02-03.js
        └── 02-04.js
    ├── 05
        ├── 05-01.js
        ├── 05-03.js
        ├── 05-04.js
        ├── 05-02.js
        ├── 05-06.js
        ├── 05-07.js
        ├── 05-08.js
        ├── 05-05.js
        └── 05-09.js
    ├── 04
        ├── 04-02.js
        ├── 04-01.js
        ├── 04-03.js
        ├── 04-04.js
        ├── 04-05.js
        ├── 04-08.js
        ├── 04-06.js
        ├── 04-07.js
        ├── 04-09.js
        └── 04-10.js
    ├── 07
        ├── 07-02.js
        ├── 07-03.js
        ├── 07-04.js
        ├── 07-07.js
        ├── 07-08.js
        ├── 07-05.js
        ├── 07-09.js
        └── 07-10.js
    ├── 08
        ├── 08-04.js
        ├── 08-05.js
        └── 08-06.js
    ├── 06
        ├── 06-04.js
        ├── 06-05.js
        ├── 06-03.js
        ├── 06-01.js
        └── 06-02.js
    ├── 09
        ├── 09-07.js
        ├── 09-14.js
        ├── 09-18.js
        └── 09-19.js
    └── 03
        └── 03-01.js


/README.md:
--------------------------------------------------------------------------------
1 | # Coding for Visual Learners
2 | 
3 | Find more information at the [Coding for Visual Learners](https://www.codingforvisuallearners.com) website.


--------------------------------------------------------------------------------
/examples/02/02-01.js:
--------------------------------------------------------------------------------
1 | function setup() {
2 | 	 console.log('setup');
3 | }
4 | 
5 | function draw() {
6 | 	console.log('draw');
7 | }
8 | 
9 | console.log('hello');


--------------------------------------------------------------------------------
/examples/05/05-01.js:
--------------------------------------------------------------------------------
1 | function setup() {
2 |   createCanvas(400, 400);
3 | }
4 | 
5 | function draw() {
6 |   background(220);
7 |   console.log(frameRate());
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/02/02-02.js:
--------------------------------------------------------------------------------
1 | function setup() {
2 |   createCanvas(800, 300);
3 |   background(220, 220, 220);
4 | }
5 | 
6 | function draw() {
7 |   rect(50, 100, 200, 100);
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/10/10-11.js:
--------------------------------------------------------------------------------
1 | function setup() {
2 |   createCanvas(800, 300);
3 | }
4 | 
5 | function draw() {
6 |   background(200);
7 |   text("JavaScript", width / 2, height / 2);
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/02/02-03.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   background(220, 220, 220);
 4 |   rectMode(CENTER);
 5 | }
 6 | 
 7 | function draw() {
 8 |   rect(400, 150, 100, 100);
 9 | }
10 | 


--------------------------------------------------------------------------------
/examples/02/02-04.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   background(220, 220, 220);
 4 |   rectMode(CENTER);
 5 | }
 6 | 
 7 | function draw() {
 8 |   rect(400, 150, 100, 100);
 9 |   ellipse(350, 120, 100, 100);
10 | }
11 | 


--------------------------------------------------------------------------------
/examples/04/04-02.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(220);
 7 | 
 8 |   ellipse(100 + 150, 200, 50, 50);
 9 |   ellipse(200 + 150, 200, 50, 50);
10 |   rect(50 + 150, 160, 200, 20);
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/04/04-01.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(220);
 7 | 
 8 |   ellipse(100, 200, 50, 50); // left wheel
 9 |   ellipse(200, 200, 50, 50); // right wheel
10 |   rect(50, 160, 200, 20); // cart
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/05/05-03.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   textAlign(CENTER, CENTER);
 4 | }
 5 | 
 6 | function draw() {
 7 |   background(220);
 8 |   fill(237, 34, 93);
 9 |   textSize(36);
10 | 
11 |   text("frameCount: " + frameCount, width / 2, height / 2);
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/04/04-03.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(220);
 7 | 
 8 |   var offset = 150;
 9 |   ellipse(100 + offset, 200, 50, 50);
10 |   ellipse(200 + offset, 200, 50, 50);
11 |   rect(50 + offset, 160, 200, 20);
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/12/12-01.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 |   noStroke();
 5 | }
 6 | 
 7 | function draw() {
 8 |   background(220);
 9 |   fill(237, 34, 93);
10 |   rect(width / 2, height / 2, 50, 50);
11 |   rect(width / 2 + 50, height / 2 + 50, 50, 50);
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/10/10-13.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   textAlign(CENTER, CENTER); // centering the text
 4 | }
 5 | 
 6 | function draw() {
 7 |   background(200);
 8 |   fill(255); // text color
 9 |   textSize(45); // text size
10 |   text("JavaScript", width / 2, height / 2);
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/07/07-02.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(1, 75, 100);
 7 | 
 8 |   // circle properties
 9 |   fill(237, 34, 93);
10 |   noStroke();
11 | 
12 |   for (var i = 0; i < 10; i = i + 1) {
13 |     ellipse(0, 0, 50, 50);
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/07/07-03.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(1, 75, 100);
 7 | 
 8 |   // circle properties
 9 |   fill(237, 34, 93);
10 |   noStroke();
11 | 
12 |   for (var i = 0; i < 10; i = i + 1) {
13 |     ellipse(i * 50, 0, 50, 50);
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/12/12-02.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 |   noStroke();
 5 | }
 6 | 
 7 | function draw() {
 8 |   background(220);
 9 |   fill(237, 34, 93);
10 |   rotate(5);
11 |   rect(width / 2, height / 2, 50, 50);
12 |   rect(width / 2 + 50, height / 2 + 50, 50, 50);
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/08/08-04.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   sayHello();
 4 | }
 5 | 
 6 | function draw() {
 7 |   background(220);
 8 | }
 9 | 
10 | function sayHello() {
11 |   var message = "Hello World!";
12 |   console.log(message);
13 | }
14 | 
15 | console.log(message); // this line will throw an error
16 | 


--------------------------------------------------------------------------------
/examples/05/05-04.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   textAlign(CENTER, CENTER);
 4 |   frameRate(6); // make animation slower
 5 | }
 6 | 
 7 | function draw() {
 8 |   background(220);
 9 |   fill(237, 34, 93);
10 |   textSize(36);
11 | 
12 |   text("frameCount: " + frameCount, width / 2, height / 2);
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/08/08-05.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(1, 75, 100);
 7 |   squared(10);
 8 | }
 9 | 
10 | function squared(num) {
11 |   fill(237, 34, 93);
12 |   textSize(60);
13 |   textAlign(CENTER, CENTER);
14 |   text(num * num, width / 2, height / 2);
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/11/11-03.js:
--------------------------------------------------------------------------------
 1 | var pressed;
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 |   background(220);
 6 | }
 7 | 
 8 | function draw() {
 9 |   if (pressed === true) {
10 |     ellipse(random(width), random(height), 50, 50);
11 |   }
12 |   pressed = false;
13 | }
14 | 
15 | function keyPressed() {
16 |   pressed = true;
17 | }
18 | 


--------------------------------------------------------------------------------
/examples/04/04-04.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 | }
 5 | 
 6 | function draw() {
 7 |   background(1, 186, 240);
 8 | 
 9 |   // circle
10 |   fill(237, 34, 93);
11 |   noStroke();
12 |   ellipse(400, 150, 200, 200);
13 | 
14 |   // rectangle
15 |   fill(255);
16 |   rect(400, 150, 150, 30);
17 | }
18 | 


--------------------------------------------------------------------------------
/examples/10/10-08.js:
--------------------------------------------------------------------------------
 1 | var sizes = [200, 150, 100, 50, 25];
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 | }
 6 | 
 7 | function draw() {
 8 |   // circle properties
 9 |   fill(237, 34, 93);
10 |   strokeWeight(2);
11 | 
12 |   for (var i = 0; i < 5; i++) {
13 |     ellipse(width / 2, height / 2, sizes[i], sizes[i]);
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/12/12-04.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 |   noStroke();
 5 |   angleMode(DEGREES);
 6 | }
 7 | 
 8 | function draw() {
 9 |   background(220);
10 |   fill(237, 34, 93);
11 |   rotate(5);
12 |   rect(width / 2, height / 2, 50, 50);
13 |   rect(width / 2 + 50, height / 2 + 50, 50, 50);
14 | }
15 | 


--------------------------------------------------------------------------------
/examples/06/06-04.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(1, 75, 100);
 7 | 
 8 |   // declaration of variables
 9 |   var x = mouseX;
10 |   var y = mouseY;
11 |   var size = 50;
12 | 
13 |   // circle
14 |   fill(237, 34, 93);
15 |   noStroke();
16 |   ellipse(x, y, size, size);
17 | }
18 | 


--------------------------------------------------------------------------------
/examples/06/06-05.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   background(1, 75, 100);
 4 | }
 5 | 
 6 | function draw() {
 7 |   // declaration of variables
 8 |   var x = mouseX;
 9 |   var y = mouseY;
10 |   var size = 25;
11 | 
12 |   // circle
13 |   fill(237, 34, 93, 100);
14 |   noStroke();
15 |   ellipse(x, y, size, size);
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/06/06-03.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(1, 75, 100);
 7 | 
 8 |   // declaration of variables
 9 |   var x = width / 2;
10 |   var y = height / 2;
11 |   var size = 50;
12 | 
13 |   // circle
14 |   fill(237, 34, 93);
15 |   noStroke();
16 |   ellipse(x, y, size, size);
17 | }
18 | 


--------------------------------------------------------------------------------
/examples/10/10-09.js:
--------------------------------------------------------------------------------
 1 | var sizes = [200, 150, 100, 50, 25];
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 | }
 6 | 
 7 | function draw() {
 8 |   // circle properties
 9 |   fill(237, 34, 93);
10 |   strokeWeight(2);
11 | 
12 |   for (var i = 0; i < sizes.length; i++) {
13 |     ellipse(width / 2, height / 2, sizes[i], sizes[i]);
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/13/13-01.js:
--------------------------------------------------------------------------------
 1 | var content;
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 |   textAlign(CENTER, CENTER);
 6 | }
 7 | 
 8 | function draw() {
 9 |   background(220);
10 | 
11 |   if (frameCount === 1 || frameCount % 100 === 0) {
12 |     content = parseInt(random(10), 10);
13 |   }
14 | 
15 |   text(content, width / 2, height / 2);
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/05/05-02.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   textAlign(CENTER, CENTER);
 4 | }
 5 | 
 6 | function draw() {
 7 |   background(220);
 8 |   fill(237, 34, 93);
 9 |   textSize(36);
10 | 
11 |   // get the current frame rate as an integer.
12 |   var fps = parseInt(frameRate(), 10);
13 |   text("frameRate: " + fps, width / 2, height / 2);
14 | }
15 | 


--------------------------------------------------------------------------------
/examples/12/12-06.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 |   noStroke();
 5 |   angleMode(DEGREES);
 6 | }
 7 | 
 8 | function draw() {
 9 |   background(220);
10 |   fill(237, 34, 93);
11 | 
12 |   // rotating the shape around it's origin
13 |   translate(width / 2, height / 2);
14 |   rotate(45);
15 |   rect(0, 0, 100, 100);
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/07/07-04.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(1, 75, 100);
 7 | 
 8 |   // circle properties
 9 |   fill(237, 34, 93);
10 |   noStroke();
11 |   var diameter = 50;
12 | 
13 |   for (var i = 0; i < width / diameter; i = i + 1) {
14 |     ellipse(diameter / 2 + i * diameter, 0, diameter, diameter);
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/05/05-06.js:
--------------------------------------------------------------------------------
 1 | var num;
 2 | 
 3 | function setup() {
 4 |   num = 1;
 5 |   createCanvas(800, 300);
 6 |   textAlign(CENTER, CENTER);
 7 | }
 8 | 
 9 | function draw() {
10 |   background(220);
11 |   fill(237, 34, 93);
12 |   textSize(48);
13 | 
14 |   if (num === 1) {
15 |     // this code gets executed only if num is equivalent to 1.
16 |     text("TRUE", width / 2, height / 2);
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/examples/12/12-05.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 |   noStroke();
 5 |   angleMode(DEGREES);
 6 | }
 7 | 
 8 | function draw() {
 9 |   background(220);
10 |   fill(237, 34, 93);
11 |   translate(150, 0); // using translate function
12 |   rotate(5);
13 |   rect(width / 2, height / 2, 50, 50);
14 |   rect(width / 2 + 50, height / 2 + 50, 50, 50);
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/08/08-06.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(1, 75, 100);
 7 |   var x = squared(10);
 8 |   console.log(x);
 9 | }
10 | 
11 | function squared(num) {
12 |   fill(237, 34, 93);
13 |   textSize(60);
14 |   textAlign(CENTER, CENTER);
15 |   var result = num * num;
16 |   text(result, width / 2, height / 2);
17 |   return result;
18 | }
19 | 


--------------------------------------------------------------------------------
/examples/04/04-05.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 | }
 5 | 
 6 | function draw() {
 7 |   background(1, 186, 240);
 8 | 
 9 |   // declaration of variables
10 |   var x = 400;
11 |   var y = 150;
12 | 
13 |   // circle
14 |   fill(237, 34, 93);
15 |   noStroke();
16 |   ellipse(x, y, 200, 200);
17 | 
18 |   // rectangle
19 |   fill(255);
20 |   rect(x, y, 150, 30);
21 | }
22 | 


--------------------------------------------------------------------------------
/examples/04/04-08.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 | }
 5 | 
 6 | function draw() {
 7 |   background(1, 186, 240);
 8 | 
 9 |   // declaration of variables
10 |   var x = width / 2;
11 |   var y = height / 2;
12 | 
13 |   // circle
14 |   fill(237, 34, 93);
15 |   noStroke();
16 |   ellipse(x, y, 200, 200);
17 | 
18 |   // rectangle
19 |   fill(255);
20 |   rect(x, y, 150, 30);
21 | }
22 | 


--------------------------------------------------------------------------------
/examples/12/12-07.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 |   noStroke();
 5 |   angleMode(DEGREES);
 6 | }
 7 | 
 8 | function draw() {
 9 |   background(220);
10 | 
11 |   translate(width / 2, height / 2);
12 |   rotate(45);
13 | 
14 |   // pink rectangle
15 |   fill(237, 34, 93);
16 |   rect(0, 0, 150, 150);
17 | 
18 |   // white rectangle
19 |   fill(255, 255, 255);
20 |   rect(0, 0, 75, 75);
21 | }
22 | 


--------------------------------------------------------------------------------
/examples/10/10-17.js:
--------------------------------------------------------------------------------
 1 | var words = ["I", "love", "programming", "with", "JavaScript"];
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 |   textAlign(CENTER, CENTER);
 6 |   frameRate(3); // using a lower frame rate to slowdown the text
 7 | }
 8 | 
 9 | function draw() {
10 |   var currentIndex = frameCount % words.length;
11 |   background(200);
12 |   fill(255);
13 |   textSize(45);
14 |   text(currentIndex, width / 2, height / 2);
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/10/10-10.js:
--------------------------------------------------------------------------------
 1 | var sizes = [];
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 600);
 5 |   noFill();
 6 | 
 7 |   // populating the sizes array with random values
 8 |   for (var i = 0; i < 100; i++) {
 9 |     var randomValue = random(5, 500);
10 |     sizes.push(randomValue);
11 |   }
12 | }
13 | 
14 | function draw() {
15 |   background(255);
16 |   for (var i = 0; i < sizes.length; i++) {
17 |     ellipse(width / 2, height / 2, sizes[i], sizes[i]);
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/examples/09/09-07.js:
--------------------------------------------------------------------------------
 1 | var colors;
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 | 
 6 |   colors = {
 7 |     black: 0,
 8 |     darkGray: 55,
 9 |     gray: 125,
10 |     lightGray: 175,
11 |     white: 255,
12 |     paintItBlack: function() {
13 |       background(this.black);
14 |     }
15 |   };
16 | }
17 | 
18 | function draw() {
19 |   background(220);
20 | 
21 |   // calling the paintItBlack method after frame 120.
22 |   if (frameCount > 120) {
23 |     colors.paintItBlack();
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/examples/04/04-06.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   var canvasWidth = 800;
 3 |   var canvasHeight = 300;
 4 | 
 5 |   createCanvas(canvasWidth, canvasHeight);
 6 |   rectMode(CENTER);
 7 | }
 8 | 
 9 | function draw() {
10 |   background(1, 186, 240);
11 | 
12 |   // declaration of variables
13 |   var x = canvasWidth / 2;
14 |   var y = canvasHeight / 2;
15 | 
16 |   // circle
17 |   fill(237, 34, 93);
18 |   noStroke();
19 |   ellipse(x, y, 200, 200);
20 | 
21 |   // rectangle
22 |   fill(255);
23 |   rect(x, y, 150, 30);
24 | }
25 | 


--------------------------------------------------------------------------------
/examples/05/05-07.js:
--------------------------------------------------------------------------------
 1 | var num;
 2 | 
 3 | function setup() {
 4 |   num = 2;
 5 |   createCanvas(800, 300);
 6 |   textAlign(CENTER, CENTER);
 7 | }
 8 | 
 9 | function draw() {
10 |   background(220);
11 |   fill(237, 34, 93);
12 |   textSize(48);
13 | 
14 |   if (num === 1) {
15 |     // this code gets executed only if num is equivalent to 1.
16 |     text("TRUE", width / 2, height / 2);
17 |   } else {
18 |     // this code gets executed if num is NOT equivalent to 1.
19 |     text("FALSE", width / 2, height / 2);
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/examples/05/05-08.js:
--------------------------------------------------------------------------------
 1 | var num;
 2 | 
 3 | function setup() {
 4 |   num = 3;
 5 |   createCanvas(400, 400);
 6 |   textAlign(CENTER, CENTER);
 7 | }
 8 | 
 9 | function draw() {
10 |   var value;
11 |   background(220);
12 |   fill(237, 34, 93);
13 | 
14 |   textSize(48);
15 |   if (num === 1) {
16 |     value = "TRUE";
17 |   } else if (num === 2) {
18 |     value = "TRUE 2";
19 |   } else if (num === 3) {
20 |     value = "TRUE 3";
21 |   } else {
22 |     value = "FALSE";
23 |   }
24 |   text(value, width / 2, height / 2);
25 | }
26 | 


--------------------------------------------------------------------------------
/examples/07/07-07.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   textAlign(CENTER, CENTER);
 4 |   fill(237, 34, 93);
 5 |   frameRate(1);
 6 | }
 7 | 
 8 | function draw() {
 9 |   var random_0 = random();
10 |   var random_1 = random(10);
11 |   var random_2 = random(100, 1000);
12 |   var offset = 40;
13 | 
14 |   textSize(24);
15 |   background(255);
16 |   text(random_0, width / 2, height / 2 - offset);
17 |   text(random_1, width / 2, height / 2 - 0);
18 |   text(random_2, width / 2, height / 2 + offset);
19 | }
20 | 


--------------------------------------------------------------------------------
/examples/10/10-06.js:
--------------------------------------------------------------------------------
 1 | var sizes = [200, 150, 100, 50, 25];
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 | }
 6 | 
 7 | function draw() {
 8 |   // circle properties
 9 |   fill(237, 34, 93);
10 |   strokeWeight(2);
11 | 
12 |   ellipse(width / 2, height / 2, sizes[0], sizes[0]);
13 |   ellipse(width / 2, height / 2, sizes[1], sizes[1]);
14 |   ellipse(width / 2, height / 2, sizes[2], sizes[2]);
15 |   ellipse(width / 2, height / 2, sizes[3], sizes[3]);
16 |   ellipse(width / 2, height / 2, sizes[4], sizes[4]);
17 | }
18 | 


--------------------------------------------------------------------------------
/examples/07/07-08.js:
--------------------------------------------------------------------------------
 1 | function setup() { 
 2 |     createCanvas(800, 300);
 3 | } 
 4 | 
 5 | function draw() {
 6 | 	background(1, 75, 100);
 7 | 
 8 | 	// circle properties
 9 | 	fill(237, 34, 93);
10 | 	noStroke();
11 | 	var diameter = 50;
12 | 	
13 | 	for (var i=0; i<width/diameter; i=i+1) { 
14 | 		for (var j=0; j<height/diameter; j=j+1) {
15 | 			ellipse(
16 | 				diameter/2 + i * diameter, 
17 | 				diameter/2 + j * diameter, 
18 | 				diameter * random() // using the random function, 
19 | 				diameter
20 | 			);
21 | 		}
22 | 	}
23 | }


--------------------------------------------------------------------------------
/examples/03/03-01.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 400);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(220);
 7 | 
 8 |   // circle 01
 9 |   fill(51, 51, 51);
10 |   strokeWeight(2);
11 |   stroke(75);
12 |   ellipse(400, 200, 300, 300);
13 | 
14 |   // circle 02
15 |   stroke(0);
16 |   fill(255, 53, 139);
17 |   ellipse(400, 200, 275, 275);
18 | 
19 |   // circle 03
20 |   fill(1, 176, 240);
21 |   ellipse(400, 200, 250, 250);
22 | 
23 |   // circle 04
24 |   fill(174, 238, 0);
25 |   ellipse(400, 200, 150, 150);
26 | }
27 | 


--------------------------------------------------------------------------------
/examples/05/05-05.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 | }
 5 | 
 6 | function draw() {
 7 |   background(1, 186, 240);
 8 | 
 9 |   // declaration of variables
10 |   var x = width / 2;
11 |   var y = height / 2;
12 |   // increment the size with the current frameCount value
13 |   var size = 200 + frameCount;
14 | 
15 |   // circle
16 |   fill(237, 34, 93);
17 |   noStroke();
18 |   ellipse(x, y, size, size);
19 | 
20 |   // rectangle
21 |   fill(255);
22 |   rect(x, y, size * 0.75, size * 0.15);
23 | }
24 | 


--------------------------------------------------------------------------------
/examples/07/07-05.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(1, 75, 100);
 7 | 
 8 |   // circle properties
 9 |   fill(237, 34, 93);
10 |   noStroke();
11 |   var diameter = 50;
12 | 
13 |   for (var i = 0; i < width / diameter; i = i + 1) {
14 |     for (var j = 0; j < height / diameter; j = j + 1) {
15 |       ellipse(
16 |         diameter / 2 + i * diameter,
17 |         diameter / 2 + j * diameter,
18 |         diameter,
19 |         diameter
20 |       );
21 |     }
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/examples/12/12-09.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 |   noStroke();
 5 |   angleMode(DEGREES);
 6 | }
 7 | 
 8 | function draw() {
 9 |   background(220);
10 | 
11 |   push();
12 |   translate(width / 2, height / 2);
13 |   rotate(45);
14 |   // pink rectangle
15 |   fill(237, 34, 93);
16 |   rect(0, 0, 150, 150);
17 |   pop();
18 | 
19 |   push();
20 |   translate(width / 2, height / 2);
21 |   rotate(30);
22 |   // white rectangle
23 |   fill(255, 255, 255);
24 |   rect(0, 0, 75, 75);
25 |   pop();
26 | }
27 | 


--------------------------------------------------------------------------------
/examples/04/04-07.js:
--------------------------------------------------------------------------------
 1 | // declaration of global variables
 2 | var canvasWidth = 800;
 3 | var canvasHeight = 300;
 4 | 
 5 | function setup() {
 6 |   createCanvas(canvasWidth, canvasHeight);
 7 |   rectMode(CENTER);
 8 | }
 9 | 
10 | function draw() {
11 |   background(1, 186, 240);
12 | 
13 |   // declaration of variables
14 |   var x = canvasWidth / 2;
15 |   var y = canvasHeight / 2;
16 | 
17 |   // circle
18 |   fill(237, 34, 93);
19 |   noStroke();
20 |   ellipse(x, y, 200, 200);
21 | 
22 |   // rectangle
23 |   fill(255);
24 |   rect(x, y, 150, 30);
25 | }
26 | 


--------------------------------------------------------------------------------
/examples/04/04-09.js:
--------------------------------------------------------------------------------
 1 | var count = 0; // initialize a counter variable
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 |   rectMode(CENTER);
 6 | }
 7 | 
 8 | function draw() {
 9 |   background(1, 186, 240);
10 | 
11 |   // declaration of variables
12 |   var x = width / 2 + count;
13 |   var y = height / 2;
14 | 
15 |   // circle
16 |   fill(237, 34, 93);
17 |   noStroke();
18 |   ellipse(x, y, 200, 200);
19 | 
20 |   // rectangle
21 |   fill(255);
22 |   rect(x, y, 150, 30);
23 | 
24 |   count = count + 1; // increment the counter variable
25 | }
26 | 


--------------------------------------------------------------------------------
/examples/10/10-05.js:
--------------------------------------------------------------------------------
 1 | var size1 = 200;
 2 | var size2 = 150;
 3 | var size3 = 100;
 4 | var size4 = 50;
 5 | var size5 = 25;
 6 | 
 7 | function setup() {
 8 |   createCanvas(800, 300);
 9 | }
10 | 
11 | function draw() {
12 |   // circle properties
13 |   fill(237, 34, 93);
14 |   strokeWeight(2);
15 | 
16 |   ellipse(width / 2, height / 2, size1, size1);
17 |   ellipse(width / 2, height / 2, size2, size2);
18 |   ellipse(width / 2, height / 2, size3, size3);
19 |   ellipse(width / 2, height / 2, size4, size4);
20 |   ellipse(width / 2, height / 2, size5, size5);
21 | }
22 | 


--------------------------------------------------------------------------------
/examples/12/12-08.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 |   noStroke();
 5 |   angleMode(DEGREES);
 6 | }
 7 | 
 8 | function draw() {
 9 |   background(220);
10 | 
11 |   // translation and rotation will be contained in between
12 |   // push and pop function calls.
13 |   push();
14 |   translate(width / 2, height / 2);
15 |   rotate(45);
16 |   // pink rectangle
17 |   fill(237, 34, 93);
18 |   rect(0, 0, 150, 150);
19 |   pop();
20 | 
21 |   // white rectangle
22 |   fill(255, 255, 255);
23 |   rect(0, 0, 75, 75);
24 | }
25 | 


--------------------------------------------------------------------------------
/examples/06/06-01.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 | }
 5 | 
 6 | function draw() {
 7 |   background(1, 186, 240);
 8 | 
 9 |   // declaration of variables
10 |   var x = width / 2;
11 |   var y = height / 2;
12 |   var size = 200; // control the size of the shapes
13 | 
14 |   // circle
15 |   fill(237, 34, 93);
16 |   noStroke();
17 |   ellipse(x, y, size, size);
18 | 
19 |   // conditionally display rectangle on mouse press
20 |   if (mouseIsPressed === true) {
21 |     fill(255);
22 |     rect(x, y, size * 0.75, size * 0.15);
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/examples/09/09-14.js:
--------------------------------------------------------------------------------
 1 | var circle;
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 | 
 6 |   circle = {
 7 |     x: width / 2,
 8 |     y: height / 2,
 9 |     size: 50,
10 |     draw: function() {
11 |       ellipse(this.x, this.y, this.size, this.size);
12 |     },
13 |     grow: function() {
14 |       if (this.size < 200) {
15 |         this.size += 1;
16 |       }
17 |     }
18 |   };
19 | }
20 | 
21 | function draw() {
22 |   background(220);
23 | 
24 |   // circle properties
25 |   fill(237, 34, 93);
26 |   noStroke();
27 | 
28 |   circle.draw();
29 |   circle.grow();
30 | }
31 | 


--------------------------------------------------------------------------------
/examples/04/04-10.js:
--------------------------------------------------------------------------------
 1 | var count = 0; // initialize a counter variable
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 |   rectMode(CENTER);
 6 | }
 7 | 
 8 | function draw() {
 9 |   background(1, 186, 240);
10 | 
11 |   // declaration of variables
12 |   var x = width / 2;
13 |   var y = height / 2;
14 |   var size = 200 + count; // control the size of the shapes
15 | 
16 |   // circle
17 |   fill(237, 34, 93);
18 |   noStroke();
19 |   ellipse(x, y, size, size);
20 | 
21 |   // rectangle
22 |   fill(255);
23 |   rect(x, y, size * 0.75, size * 0.15);
24 | 
25 |   count = count + 1; // increment the counter variable
26 | }
27 | 


--------------------------------------------------------------------------------
/examples/07/07-09.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(1, 75, 100);
 7 | 
 8 |   // circle properties
 9 |   fill(237, 34, 93);
10 |   noStroke();
11 |   var diameter = 50;
12 | 
13 |   for (var i = 0; i < width / diameter; i = i + 1) {
14 |     for (var j = 0; j < height / diameter; j = j + 1) {
15 |       ellipse(
16 |         diameter / 2 + i * diameter,
17 |         diameter / 2 + j * diameter,
18 |         diameter * noise(frameCount / 100), // using then noise function
19 |         diameter * noise(frameCount / 100) // using then noise function
20 |       );
21 |     }
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/examples/12/12-11.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 |   noStroke();
 5 |   angleMode(DEGREES);
 6 | }
 7 | 
 8 | function draw() {
 9 |   background(220);
10 | 
11 |   // pink rectangle
12 |   fill(237, 34, 93);
13 |   rectC(width / 2, height / 2, 150, 150, 45);
14 | 
15 |   // white rectangle
16 |   fill(255, 255, 255);
17 |   rectC(width / 2, height / 2, 75, 75, 30);
18 | }
19 | 
20 | function rectC(x, y, width, height, rotation) {
21 |   if (rotation === undefined) {
22 |     rotation = 0;
23 |   }
24 |   push();
25 |   translate(x, y);
26 |   rotate(rotation);
27 |   rect(0, 0, width, height);
28 |   pop();
29 | }
30 | 


--------------------------------------------------------------------------------
/examples/05/05-09.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 |   rectMode(CENTER);
 4 | }
 5 | 
 6 | function draw() {
 7 |   background(1, 186, 240);
 8 | 
 9 |   // declaration of variables
10 |   var x = width / 2;
11 |   var y = height / 2;
12 |   // increment the size with the current frameCount value
13 |   var size = 200;
14 |   var limit = 30;
15 |   if (frameCount < limit) {
16 |     size = size + frameCount;
17 |   } else {
18 |     size = size + limit;
19 |   }
20 | 
21 |   // circle
22 |   fill(237, 34, 93);
23 |   noStroke();
24 |   ellipse(x, y, size, size);
25 | 
26 |   // rectangle
27 |   fill(255);
28 |   rect(x, y, size * 0.75, size * 0.15);
29 | }
30 | 


--------------------------------------------------------------------------------
/examples/10/10-21.js:
--------------------------------------------------------------------------------
 1 | var words = ["I", "love", "programming", "with", "JavaScript"];
 2 | var colors = [
 3 |   [63, 184, 175],
 4 |   [127, 199, 175],
 5 |   [218, 216, 167],
 6 |   [255, 158, 157],
 7 |   [255, 61, 127]
 8 | ];
 9 | 
10 | function setup() {
11 |   createCanvas(800, 300);
12 |   textAlign(CENTER, CENTER);
13 |   frameRate(3); // using a lower frame rate to slowdown the text
14 | }
15 | 
16 | function draw() {
17 |   var currentIndex = frameCount % words.length;
18 |   var currentColor = colors[currentIndex];
19 |   var currentWord = words[currentIndex];
20 |   background(currentColor);
21 |   fill(255);
22 |   textSize(45);
23 |   text(currentWord, width / 2, height / 2);
24 | }
25 | 


--------------------------------------------------------------------------------
/examples/09/09-18.js:
--------------------------------------------------------------------------------
 1 | var circle;
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 |   // instantiating a new circle using the Circle constructor function
 6 |   circle = new Circle();
 7 | }
 8 | 
 9 | function draw() {
10 |   background(220);
11 | 
12 |   // circle properties
13 |   fill(237, 34, 93);
14 |   noStroke();
15 | 
16 |   circle.draw();
17 |   circle.grow();
18 | }
19 | 
20 | var Circle = function() {
21 |   this.x = width / 2;
22 |   this.y = height / 2;
23 |   this.size = 50;
24 |   this.draw = function() {
25 |     ellipse(this.x, this.y, this.size, this.size);
26 |   };
27 |   this.grow = function() {
28 |     if (this.size < 200) {
29 |       this.size += 1;
30 |     }
31 |   };
32 | };
33 | 


--------------------------------------------------------------------------------
/examples/11/11-04.js:
--------------------------------------------------------------------------------
 1 | var pressed;
 2 | var colors = [];
 3 | 
 4 | function setup() {
 5 |   createCanvas(800, 300);
 6 |   background(0);
 7 |   colors = [
 8 |     [245, 3, 155],
 9 |     [13, 159, 215],
10 |     [148, 177, 191],
11 |     [100, 189, 167],
12 |     [242, 226, 133],
13 |     [176, 230, 110],
14 |     [123, 90, 240]
15 |   ];
16 | }
17 | 
18 | function draw() {
19 |   noStroke();
20 |   if (pressed === true) {
21 |     var randomIndex = parseInt(random(colors.length), 10);
22 |     var randomSize = random(200);
23 | 
24 |     fill(colors[randomIndex]);
25 |     ellipse(random(width), random(height), randomSize, randomSize);
26 |   }
27 |   pressed = false;
28 | }
29 | 
30 | function keyPressed() {
31 |   pressed = true;
32 | }
33 | 


--------------------------------------------------------------------------------
/examples/07/07-10.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(800, 300);
 3 | }
 4 | 
 5 | function draw() {
 6 |   background(1, 75, 100);
 7 | 
 8 |   // circle properties
 9 |   fill(237, 34, 93);
10 |   noStroke();
11 |   var diameter = 50;
12 | 
13 |   for (var i = 0; i < width / diameter; i = i + 1) {
14 |     for (var j = 0; j < height / diameter; j = j + 1) {
15 |       ellipse(
16 |         diameter / 2 + i * diameter,
17 |         diameter / 2 + j * diameter,
18 |         // applying a different animation to each circle
19 |         diameter * noise(frameCount / 100 + j * 10000 + i * 10000),
20 |         // applying a different animation to each circle
21 |         diameter * noise(frameCount / 100 + j * 10000 + i * 10000)
22 |       );
23 |     }
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/examples/06/06-02.js:
--------------------------------------------------------------------------------
 1 | var toggle = true;
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 |   rectMode(CENTER);
 6 | }
 7 | 
 8 | function draw() {
 9 |   // change the toggle value based on mouse press.
10 |   if (mouseIsPressed === true) {
11 |     toggle = !toggle;
12 |   }
13 | 
14 |   // display a different bg color based on the toggle value
15 |   if (toggle === true) {
16 |     background(1, 186, 240);
17 |   } else {
18 |     background(250, 150, 50);
19 |   }
20 | 
21 |   // declaration of variables
22 |   var x = width / 2;
23 |   var y = height / 2;
24 |   var size = 200;
25 | 
26 |   // circle
27 |   fill(237, 34, 93);
28 |   noStroke();
29 |   ellipse(x, y, size, size);
30 | 
31 |   // rectangle
32 |   fill(255);
33 |   rect(x, y, size * 0.75, size * 0.15);
34 | }
35 | 


--------------------------------------------------------------------------------
/examples/13/13-02.js:
--------------------------------------------------------------------------------
 1 | var guessItem;
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 | }
 6 | 
 7 | function draw() {
 8 |   if (frameCount === 1 || frameCount % 100 === 0) {
 9 |     background(220);
10 |     guessItem = new GuessItem(width / 2, height / 2, 1);
11 |   }
12 | 
13 |   guessItem.render();
14 | }
15 | 
16 | function GuessItem(x, y, scl) {
17 |   this.x = x;
18 |   this.y = y;
19 |   this.scale = scl;
20 |   this.content = getContent();
21 | 
22 |   function getContent() {
23 |     // generate a random integer in between 0 and 9
24 |     return parseInt(random(10), 10);
25 |   }
26 | 
27 |   this.render = function() {
28 |     push();
29 |     textAlign(CENTER, CENTER);
30 |     translate(this.x, this.y);
31 |     scale(this.scale);
32 |     text(this.content, 0, 0);
33 |     pop();
34 |   };
35 | }
36 | 


--------------------------------------------------------------------------------
/examples/11/11-01.js:
--------------------------------------------------------------------------------
 1 | var toggle = true;
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 |   rectMode(CENTER);
 6 | }
 7 | 
 8 | function draw() {
 9 |   // display a different bg color based on the toggle value
10 |   if (toggle === true) {
11 |     background(1, 186, 240);
12 |   } else {
13 |     background(250, 150, 50);
14 |   }
15 | 
16 |   // declaration of variables
17 |   var x = width / 2;
18 |   var y = height / 2;
19 |   var size = 200;
20 | 
21 |   if (frameCount < 60) {
22 |     size = size + frameCount;
23 |   } else {
24 |     size = size + 60;
25 |   }
26 | 
27 |   // circle
28 |   fill(237, 34, 93);
29 |   noStroke();
30 |   ellipse(x, y, size, size);
31 | 
32 |   // rectangle
33 |   fill(255);
34 |   rect(x, y, size * 0.75, size * 0.15);
35 | }
36 | 
37 | function mousePressed() {
38 |   toggle = !toggle; // change the toggle value to be opposite.
39 | }
40 | 


--------------------------------------------------------------------------------
/examples/09/09-19.js:
--------------------------------------------------------------------------------
 1 | var circle_1;
 2 | var circle_2;
 3 | var circle_3;
 4 | 
 5 | function setup() {
 6 |   createCanvas(800, 300);
 7 | 
 8 |   // instantiating circles
 9 |   circle_1 = new Circle();
10 |   circle_2 = new Circle();
11 |   circle_3 = new Circle();
12 | }
13 | 
14 | function draw() {
15 |   background(220);
16 | 
17 |   // circle properties
18 |   fill(237, 34, 93);
19 |   noStroke();
20 | 
21 |   circle_1.draw();
22 |   circle_1.grow();
23 | 
24 |   circle_2.x = 150;
25 |   circle_2.draw();
26 |   circle_2.grow();
27 | 
28 |   circle_3.x = 650;
29 |   circle_3.draw();
30 |   circle_3.grow();
31 | }
32 | 
33 | var Circle = function() {
34 |   this.x = width / 2;
35 |   this.y = height / 2;
36 |   this.size = 50;
37 |   this.draw = function() {
38 |     ellipse(this.x, this.y, this.size, this.size);
39 |   };
40 |   this.grow = function() {
41 |     if (this.size < 200) {
42 |       this.size += 1;
43 |     }
44 |   };
45 | };
46 | 


--------------------------------------------------------------------------------
/examples/13/13-03.js:
--------------------------------------------------------------------------------
 1 | var guessItem;
 2 | 
 3 | function setup() {
 4 |   createCanvas(800, 300);
 5 | }
 6 | 
 7 | function draw() {
 8 |   background(220);
 9 |   if (frameCount === 1 || frameCount % 100 === 0) {
10 |     guessItem = new GuessItem(width / 2, height / 2, 1);
11 |   }
12 | 
13 |   guessItem.render();
14 | }
15 | 
16 | function GuessItem(x, y, scl) {
17 |   this.x = x;
18 |   this.y = y;
19 |   this.scale = scl;
20 |   this.scaleIncrement = 1;
21 |   this.content = getContent();
22 | 
23 |   function getContent() {
24 |     // generate a random integer in between 0 and 9
25 |     return parseInt(random(10), 10);
26 |   }
27 | 
28 |   this.render = function() {
29 |     push();
30 |     textAlign(CENTER, CENTER);
31 |     translate(this.x, this.y);
32 |     scale(this.scale);
33 |     text(this.content, 0, 0);
34 |     // increase the scale value by the increment value with each render
35 |     this.scale = this.scale + this.scaleIncrement;
36 |     pop();
37 |   };
38 | }
39 | 


--------------------------------------------------------------------------------
/examples/13/13-04.js:
--------------------------------------------------------------------------------
 1 | var guessItem;
 2 | // controls the frequency that a new random number is generated.
 3 | var interval = 100;
 4 | 
 5 | function setup() {
 6 |   createCanvas(800, 300);
 7 | }
 8 | 
 9 | function draw() {
10 |   background(220);
11 |   if (frameCount === 1 || frameCount % interval === 0) {
12 |     guessItem = new GuessItem(width / 2, height / 2, 1);
13 |   }
14 | 
15 |   guessItem.render();
16 | }
17 | 
18 | function GuessItem(x, y, scl) {
19 |   this.x = x;
20 |   this.y = y;
21 |   this.scale = scl;
22 |   this.scaleIncrement = 0.5;
23 |   this.content = getContent();
24 |   this.alpha = 255;
25 |   this.alphaDecrement = 3;
26 | 
27 |   function getContent() {
28 |     // generate a random integer in between 0 and 9
29 |     return parseInt(random(10), 10);
30 |   }
31 | 
32 |   this.render = function() {
33 |     push();
34 |     fill(0, this.alpha);
35 |     textAlign(CENTER, CENTER);
36 |     translate(this.x, this.y);
37 |     scale(this.scale);
38 |     text(this.content, 0, 0);
39 |     // increase the scale value by the increment value with each render
40 |     this.scale = this.scale + this.scaleIncrement;
41 |     // decrease the alpha value by the decrement value with each render
42 |     this.alpha = this.alpha - this.alphaDecrement;
43 |     pop();
44 |   };
45 | }
46 | 


--------------------------------------------------------------------------------
/examples/13/13-05.js:
--------------------------------------------------------------------------------
 1 | var guessItem = null;
 2 | // controls the frequency that a new random number is generated.
 3 | var interval = 100;
 4 | var solution = null;
 5 | 
 6 | function setup() {
 7 |   createCanvas(800, 300);
 8 | }
 9 | 
10 | function draw() {
11 |   background(220);
12 |   if (frameCount === 1 || frameCount % interval === 0) {
13 |     solution = null;
14 |     guessItem = new GuessItem(width / 2, height / 2, 1);
15 |   }
16 | 
17 |   if (guessItem) {
18 |     guessItem.render();
19 |   }
20 | 
21 |   if (solution === true) {
22 |     background(255);
23 |   } else if (solution === false) {
24 |     background(0);
25 |   }
26 | }
27 | 
28 | function keyPressed() {
29 |   if (guessItem !== null) {
30 |     // check to see if the pressed key matches to the displayed number.
31 |     // if so set the solution global variable to a corresponding value.
32 |     console.log("you pressed: ", key);
33 |     solution = guessItem.solve(key);
34 |     console.log(solution);
35 |     guessItem = null;
36 |   } else {
37 |     console.log("nothing to be solved");
38 |   }
39 | }
40 | 
41 | function GuessItem(x, y, scl) {
42 |   this.x = x;
43 |   this.y = y;
44 |   this.scale = scl;
45 |   this.scaleIncrement = 0.5;
46 |   this.content = getContent();
47 |   this.alpha = 255;
48 |   this.alphaDecrement = 3;
49 |   this.solved = null;
50 | 
51 |   function getContent() {
52 |     // generate a random integer in between 0 and 9
53 |     return parseInt(random(10), 10);
54 |   }
55 | 
56 |   this.solve = function(input) {
57 |     // check to see if the given input is equivalent to the content.
58 |     // set solved to the corresponding value.
59 |     var solved;
60 |     if (input === this.content) {
61 |       solved = true;
62 |     } else {
63 |       solved = false;
64 |     }
65 |     this.solved = solved;
66 |     return solved;
67 |   };
68 | 
69 |   this.render = function() {
70 |     push();
71 |     if (this.solved === false) {
72 |       return;
73 |     }
74 |     fill(0, this.alpha);
75 |     textAlign(CENTER, CENTER);
76 |     translate(this.x, this.y);
77 |     scale(this.scale);
78 |     text(this.content, 0, 0);
79 |     // increase the scale value by the increment value with each render
80 |     this.scale = this.scale + this.scaleIncrement;
81 |     // decrease the alpha value by the decrement value with each render
82 |     this.alpha = this.alpha - this.alphaDecrement;
83 |     pop();
84 |   };
85 | }
86 | 


--------------------------------------------------------------------------------
/examples/13/13-06.js:
--------------------------------------------------------------------------------
 1 | var guessItem = null;
 2 | // controls the frequency that a new random number is generated.
 3 | var interval = 100;
 4 | // an array to store solution values
 5 | var results = [];
 6 | var solution = null;
 7 | 
 8 | function setup() {
 9 |   createCanvas(800, 300);
10 | }
11 | 
12 | function draw() {
13 |   background(220);
14 |   if (frameCount === 1 || frameCount % interval === 0) {
15 |     solution = null;
16 |     guessItem = new GuessItem(width / 2, height / 2, 1);
17 |   }
18 | 
19 |   if (guessItem) {
20 |     guessItem.render();
21 |   }
22 | 
23 |   if (solution === true) {
24 |     background(255);
25 |   } else if (solution === false) {
26 |     background(0);
27 |   }
28 | }
29 | 
30 | function keyPressed() {
31 |   if (guessItem !== null) {
32 |     // check to see if the pressed key matches to the displayed number.
33 |     // if so set the solution global variable to a corresponding value.
34 |     console.log("you pressed: ", key);
35 |     solution = guessItem.solve(key);
36 |     console.log(solution);
37 |     if (solution) {
38 |       results.push(true);
39 |     } else {
40 |       results.push(false);
41 |     }
42 |     guessItem = null;
43 |   } else {
44 |     console.log("nothing to be solved");
45 |   }
46 | }
47 | 
48 | function GuessItem(x, y, scl) {
49 |   this.x = x;
50 |   this.y = y;
51 |   this.scale = scl;
52 |   this.scaleIncrement = 0.5;
53 |   this.content = getContent();
54 |   this.alpha = 255;
55 |   this.alphaDecrement = 3;
56 |   this.solved = null;
57 | 
58 |   function getContent() {
59 |     // generate a random integer in between 0 and 9
60 |     return String(parseInt(random(10), 10));
61 |   }
62 | 
63 |   this.solve = function(input) {
64 |     // check to see if the given input is equivalent to the content.
65 |     // set solved to the corresponding value.
66 |     var solved;
67 |     if (input === this.content) {
68 |       solved = true;
69 |     } else {
70 |       solved = false;
71 |     }
72 |     this.solved = solved;
73 |     return solved;
74 |   };
75 | 
76 |   this.render = function() {
77 |     push();
78 |     if (this.solved === false) {
79 |       return;
80 |     }
81 |     fill(0, this.alpha);
82 |     textAlign(CENTER, CENTER);
83 |     translate(this.x, this.y);
84 |     scale(this.scale);
85 |     text(this.content, 0, 0);
86 |     // increase the scale value by the increment value with each render
87 |     this.scale = this.scale + this.scaleIncrement;
88 |     // decrease the alpha value by the decrement value with each render
89 |     this.alpha = this.alpha - this.alphaDecrement;
90 |     pop();
91 |   };
92 | }
93 | 


--------------------------------------------------------------------------------
/examples/13/13-07.js:
--------------------------------------------------------------------------------
  1 | var guessItem = null;
  2 | // controls the frequency that a new random number is generated.
  3 | var interval = 100;
  4 | // an array to store solution values
  5 | var results = [];
  6 | var solution = null;
  7 | 
  8 | function setup() {
  9 |   createCanvas(800, 300);
 10 | }
 11 | 
 12 | function draw() {
 13 |   // if there are 3 losses or 10 attempts stop the game.
 14 |   var gameScore = getGameScore(results);
 15 |   if (gameScore.loss === 3 || gameScore.total === 10) {
 16 |     return;
 17 |   }
 18 |   background(220);
 19 |   if (frameCount === 1 || frameCount % interval === 0) {
 20 |     solution = null;
 21 |     guessItem = new GuessItem(width / 2, height / 2, 1);
 22 |   }
 23 | 
 24 |   if (guessItem) {
 25 |     guessItem.render();
 26 |   }
 27 | 
 28 |   if (solution === true) {
 29 |     background(255);
 30 |   } else if (solution === false) {
 31 |     background(0);
 32 |   }
 33 | }
 34 | 
 35 | function getGameScore(score) {
 36 |   // given a score array, calculate the number of wins and losses.
 37 |   var wins = 0;
 38 |   var losses = 0;
 39 |   var total = score.length;
 40 | 
 41 |   for (var i = 0; i < total; i++) {
 42 |     var item = score[i];
 43 |     if (item === true) {
 44 |       wins = wins + 1;
 45 |     } else {
 46 |       losses = losses + 1;
 47 |     }
 48 |   }
 49 | 
 50 |   return { win: wins, loss: losses, total: total };
 51 | }
 52 | 
 53 | function keyPressed() {
 54 |   if (guessItem !== null) {
 55 |     // check to see if the pressed key matches to the displayed number.
 56 |     // if so set the solution global variable to a corresponding value.
 57 |     console.log("you pressed: ", key);
 58 |     solution = guessItem.solve(key);
 59 |     console.log(solution);
 60 |     if (solution) {
 61 |       results.push(true);
 62 |     } else {
 63 |       results.push(false);
 64 |     }
 65 |     guessItem = null;
 66 |   } else {
 67 |     console.log("nothing to be solved");
 68 |   }
 69 | }
 70 | 
 71 | function GuessItem(x, y, scl) {
 72 |   this.x = x;
 73 |   this.y = y;
 74 |   this.scale = scl;
 75 |   this.scaleIncrement = 0.5;
 76 |   this.content = getContent();
 77 |   this.alpha = 255;
 78 |   this.alphaDecrement = 3;
 79 |   this.solved = null;
 80 | 
 81 |   function getContent() {
 82 |     // generate a random integer in between 0 and 9
 83 |     return String(parseInt(random(10), 10));
 84 |   }
 85 | 
 86 |   this.solve = function(input) {
 87 |     // check to see if the given input is equivalent to the content.
 88 |     // set solved to the corresponding value.
 89 |     var solved;
 90 |     if (input === this.content) {
 91 |       solved = true;
 92 |     } else {
 93 |       solved = false;
 94 |     }
 95 |     this.solved = solved;
 96 |     return solved;
 97 |   };
 98 | 
 99 |   this.render = function() {
100 |     push();
101 |     if (this.solved === false) {
102 |       return;
103 |     }
104 |     fill(0, this.alpha);
105 |     textAlign(CENTER, CENTER);
106 |     translate(this.x, this.y);
107 |     scale(this.scale);
108 |     text(this.content, 0, 0);
109 |     // increase the scale value by the increment value with each render
110 |     this.scale = this.scale + this.scaleIncrement;
111 |     // decrease the alpha value by the decrement value with each render
112 |     this.alpha = this.alpha - this.alphaDecrement;
113 |     pop();
114 |   };
115 | }
116 | 


--------------------------------------------------------------------------------
/examples/13/13-08-without-code-comments.js:
--------------------------------------------------------------------------------
  1 | var guessItem = null;
  2 | var interval = 60;
  3 | var results = [];
  4 | var solution = null;
  5 | var gameOver = false;
  6 | 
  7 | function setup() {
  8 |   createCanvas(800, 300);
  9 | }
 10 | 
 11 | function draw() {
 12 |   var gameScore = getGameScore(results);
 13 |   if (gameScore.loss === 3 || gameScore.total === 10) {
 14 |     gameOver = true;
 15 |     displayGameOver(gameScore);
 16 |     return;
 17 |   }
 18 | 
 19 |   background(220);
 20 |   if (frameCount === 1 || frameCount % interval === 0) {
 21 |     solution = null;
 22 |     guessItem = new GuessItem(width / 2, height / 2, 1);
 23 |   }
 24 | 
 25 |   if (guessItem) {
 26 |     guessItem.render();
 27 |   }
 28 | 
 29 |   if (solution == true || solution === false) {
 30 |     solutionMessage(gameScore.total, solution);
 31 |   }
 32 | }
 33 | 
 34 | function solutionMessage(seed, solution) {
 35 |   var trueMessages = [
 36 |     "GOOD JOB!",
 37 |     "DOING GREAT!",
 38 |     "OMG!",
 39 |     "SUCH WIN!",
 40 |     "I APPRECIATE YOU",
 41 |     "IMPRESSIVE",
 42 |   ];
 43 | 
 44 |   var falseMessages = ["OH NO!", "BETTER LUCK NEXT TIME!", "PFTTTT", ":("];
 45 | 
 46 |   var messages;
 47 | 
 48 |   push();
 49 |   textAlign(CENTER, CENTER);
 50 |   fill(237, 34, 93);
 51 |   textSize(36);
 52 |   randomSeed(seed * 10000);
 53 | 
 54 |   if (solution === true) {
 55 |     background(255);
 56 |     messages = trueMessages;
 57 |   } else if (solution === false) {
 58 |     background(0);
 59 |     messages = falseMessages;
 60 |   }
 61 | 
 62 |   text(messages[parseInt(random(messages.length), 10)], width / 2, height / 2);
 63 |   pop();
 64 | }
 65 | 
 66 | function displayGameOver(score) {
 67 |   push();
 68 |   background(255);
 69 |   textSize(24);
 70 |   textAlign(CENTER, CENTER);
 71 |   translate(width / 2, height / 2);
 72 |   fill(237, 34, 93);
 73 |   text("GAME OVER!", 0, 0);
 74 |   translate(0, 36);
 75 |   fill(0);
 76 |   text("You have " + score.win + " correct guesses", 0, 0);
 77 |   translate(0, 100);
 78 |   textSize(16);
 79 |   var alternatingValue = map(sin(frameCount / 10), -1, 1, 0, 255);
 80 |   fill(237, 34, 93, alternatingValue);
 81 |   text("PRESS ENTER", 0, 0);
 82 |   pop();
 83 | }
 84 | 
 85 | function getGameScore(score) {
 86 |   var wins = 0;
 87 |   var losses = 0;
 88 |   var total = score.length;
 89 | 
 90 |   for (var i = 0; i < total; i++) {
 91 |     var item = score[i];
 92 |     if (item === true) {
 93 |       wins = wins + 1;
 94 |     } else {
 95 |       losses = losses + 1;
 96 |     }
 97 |   }
 98 | 
 99 |   return {
100 |     win: wins,
101 |     loss: losses,
102 |     total: total,
103 |   };
104 | }
105 | 
106 | function restartTheGame() {
107 |   results = [];
108 |   solution = null;
109 |   gameOver = false;
110 | }
111 | 
112 | function keyPressed() {
113 |   if (gameOver === true) {
114 |     if (keyCode === ENTER) {
115 |       console.log("restart the game");
116 |       restartTheGame();
117 |       return;
118 |     }
119 |   }
120 | 
121 |   if (guessItem !== null) {
122 |     console.log("you pressed: ", key);
123 |     solution = guessItem.solve(key);
124 |     console.log(solution);
125 |     if (solution) {
126 |       results.push(true);
127 |     } else {
128 |       results.push(false);
129 |     }
130 |     guessItem = null;
131 |   } else {
132 |     console.log("nothing to be solved");
133 |   }
134 | }
135 | 
136 | function GuessItem(x, y, scl) {
137 |   this.x = x;
138 |   this.y = y;
139 |   this.scale = scl;
140 |   this.scaleIncrement = 0.25;
141 |   this.clr = 0;
142 |   this.content = getContent();
143 |   this.alpha = 255;
144 |   this.alphaDecrement = 6;
145 |   this.solved = null;
146 |   this.contentMap = {
147 |     1: "one",
148 |     2: "two",
149 |     3: "three",
150 |     4: "four",
151 |     5: "five",
152 |     6: "six",
153 |     7: "seven",
154 |     8: "eight",
155 |     9: "nine",
156 |     0: "zero",
157 |   };
158 |   this.colors = [
159 |     [63, 184, 175],
160 |     [127, 199, 175],
161 |     [218, 216, 167],
162 |     [255, 158, 157],
163 |     [255, 61, 127],
164 |     [55, 191, 211],
165 |     [159, 223, 82],
166 |     [234, 209, 43],
167 |     [250, 69, 8],
168 |     [194, 13, 0],
169 |   ];
170 | 
171 |   function getContent() {
172 |     return String(parseInt(random(10), 10));
173 |   }
174 | 
175 |   this.solve = function (input) {
176 |     var solved;
177 |     if (input === this.content) {
178 |       solved = true;
179 |     } else {
180 |       solved = false;
181 |     }
182 |     this.solved = solved;
183 |     return solved;
184 |   };
185 | 
186 |   this.render = function () {
187 |     push();
188 |     fill(this.clr, this.alpha);
189 |     textAlign(CENTER, CENTER);
190 |     translate(this.x, this.y);
191 |     scale(this.scale);
192 |     text(this.contentMap[this.content], 0, 0);
193 |     this.scale = this.scale + this.scaleIncrement;
194 |     this.alpha = this.alpha - this.alphaDecrement;
195 |     pop();
196 |   };
197 | }
198 | 


--------------------------------------------------------------------------------
/examples/13/13-08.js:
--------------------------------------------------------------------------------
  1 | var guessItem = null;
  2 | // controls the frequency that a new random number is generated.
  3 | var interval = 60; // changing this to make the game feel faster.
  4 | // an array to store solution values
  5 | var results = [];
  6 | var solution = null;
  7 | // stores if the game is over or not.
  8 | var gameOver = false;
  9 | 
 10 | function setup() {
 11 |   createCanvas(800, 300);
 12 | }
 13 | 
 14 | function draw() {
 15 |   // if there are 3 losses or 10 attempts stop the game.
 16 |   var gameScore = getGameScore(results);
 17 |   if (gameScore.loss === 3 || gameScore.total === 10) {
 18 |     gameOver = true;
 19 |     displayGameOver(gameScore);
 20 |     return;
 21 |   }
 22 | 
 23 |   background(220); // black background
 24 |   if (frameCount === 1 || frameCount % interval === 0) {
 25 |     solution = null;
 26 |     guessItem = new GuessItem(width / 2, height / 2, 1);
 27 |   }
 28 | 
 29 |   if (guessItem) {
 30 |     guessItem.render();
 31 |   }
 32 | 
 33 |   if (solution == true || solution === false) {
 34 |     // displaying a text on screen instead of flat color.
 35 |     solutionMessage(gameScore.total, solution);
 36 |   }
 37 | }
 38 | 
 39 | function solutionMessage(seed, solution) {
 40 |   // display a random message based on a true of false solution.
 41 |   var trueMessages = [
 42 |     "GOOD JOB!",
 43 |     "DOING GREAT!",
 44 |     "OMG!",
 45 |     "SUCH WIN!",
 46 |     "I APPRECIATE YOU",
 47 |     "IMPRESSIVE",
 48 |   ];
 49 | 
 50 |   var falseMessages = ["OH NO!", "BETTER LUCK NEXT TIME!", "PFTTTT", ":("];
 51 | 
 52 |   var messages;
 53 | 
 54 |   push();
 55 |   textAlign(CENTER, CENTER);
 56 |   fill(237, 34, 93);
 57 |   textSize(36);
 58 |   randomSeed(seed * 10000);
 59 | 
 60 |   if (solution === true) {
 61 |     background(255);
 62 |     messages = trueMessages;
 63 |   } else if (solution === false) {
 64 |     background(0);
 65 |     messages = falseMessages;
 66 |   }
 67 | 
 68 |   text(messages[parseInt(random(messages.length), 10)], width / 2, height / 2);
 69 |   pop();
 70 | }
 71 | 
 72 | function displayGameOver(score) {
 73 |   // create the Game Over screen
 74 |   push();
 75 |   background(255);
 76 |   textSize(24);
 77 |   textAlign(CENTER, CENTER);
 78 |   translate(width / 2, height / 2);
 79 |   fill(237, 34, 93);
 80 |   text("GAME OVER!", 0, 0);
 81 |   translate(0, 36);
 82 |   fill(0);
 83 |   // have spaces inside the string for the text to look proper.
 84 |   text("You have " + score.win + " correct guesses", 0, 0);
 85 |   translate(0, 100);
 86 |   textSize(16);
 87 |   var alternatingValue = map(sin(frameCount / 10), -1, 1, 0, 255);
 88 |   fill(237, 34, 93, alternatingValue);
 89 |   text("PRESS ENTER", 0, 0);
 90 |   pop();
 91 | }
 92 | 
 93 | function getGameScore(score) {
 94 |   // given a score array, calculate the number of wins and losses.
 95 |   var wins = 0;
 96 |   var losses = 0;
 97 |   var total = score.length;
 98 | 
 99 |   for (var i = 0; i < total; i++) {
100 |     var item = score[i];
101 |     if (item === true) {
102 |       wins = wins + 1;
103 |     } else {
104 |       losses = losses + 1;
105 |     }
106 |   }
107 | 
108 |   return {
109 |     win: wins,
110 |     loss: losses,
111 |     total: total,
112 |   };
113 | }
114 | 
115 | function restartTheGame() {
116 |   // sets the game state to start.
117 |   results = [];
118 |   solution = null;
119 |   gameOver = false;
120 | }
121 | 
122 | function keyPressed() {
123 |   // if game is over, then restart the game on ENTER key press.
124 |   if (gameOver === true) {
125 |     if (keyCode === ENTER) {
126 |       console.log("restart the game");
127 |       restartTheGame();
128 |       return;
129 |     }
130 |   }
131 | 
132 |   if (guessItem !== null) {
133 |     // check to see if the pressed key matches to the displayed number.
134 |     // if so set the solution global variable to a corresponding value.
135 |     console.log("you pressed: ", key);
136 |     solution = guessItem.solve(key);
137 |     console.log(solution);
138 |     if (solution) {
139 |       results.push(true);
140 |     } else {
141 |       results.push(false);
142 |     }
143 |     guessItem = null;
144 |   } else {
145 |     console.log("nothing to be solved");
146 |   }
147 | }
148 | 
149 | function GuessItem(x, y, scl) {
150 |   this.x = x;
151 |   this.y = y;
152 |   this.scale = scl;
153 |   this.scaleIncrement = 0.25;
154 |   this.clr = 0;
155 |   this.content = getContent();
156 |   this.alpha = 255;
157 |   this.alphaDecrement = 6;
158 |   this.solved = null;
159 |   this.contentMap = {
160 |     1: "one",
161 |     2: "two",
162 |     3: "three",
163 |     4: "four",
164 |     5: "five",
165 |     6: "six",
166 |     7: "seven",
167 |     8: "eight",
168 |     9: "nine",
169 |     0: "zero",
170 |   };
171 |   this.colors = [
172 |     [63, 184, 175],
173 |     [127, 199, 175],
174 |     [218, 216, 167],
175 |     [255, 158, 157],
176 |     [255, 61, 127],
177 |     [55, 191, 211],
178 |     [159, 223, 82],
179 |     [234, 209, 43],
180 |     [250, 69, 8],
181 |     [194, 13, 0],
182 |   ];
183 | 
184 |   function getContent() {
185 |     // generate a random integer in between 0 and 9
186 |     return String(parseInt(random(10), 10));
187 |   }
188 | 
189 |   this.solve = function (input) {
190 |     // check to see if the given input is equivalent to the content.
191 |     // set solved to the corresponding value.
192 |     var solved;
193 |     if (input === this.content) {
194 |       solved = true;
195 |     } else {
196 |       solved = false;
197 |     }
198 |     this.solved = solved;
199 |     return solved;
200 |   };
201 | 
202 |   this.render = function () {
203 |     push();
204 |     fill(this.clr, this.alpha);
205 |     textAlign(CENTER, CENTER);
206 |     translate(this.x, this.y);
207 |     scale(this.scale);
208 |     // display the word for the corresponding number
209 |     text(this.contentMap[this.content], 0, 0);
210 |     // increase the scale value by the increment value with each render
211 |     this.scale = this.scale + this.scaleIncrement;
212 |     // decrease the alpha value by the decrement value with each render
213 |     this.alpha = this.alpha - this.alphaDecrement;
214 |     pop();
215 |   };
216 | }
217 | 


--------------------------------------------------------------------------------
/examples/13/13-09.js:
--------------------------------------------------------------------------------
  1 | var guessItem = null;
  2 | // controls the frequency that a new random number is generated.
  3 | var interval = 60; // changing this to make the game feel faster.
  4 | // an array to store solution values
  5 | var results = [];
  6 | var solution = null;
  7 | // stores if the game is over or not.
  8 | var gameOver = false;
  9 | 
 10 | function setup() {
 11 |   createCanvas(800, 300);
 12 | }
 13 | 
 14 | function draw() {
 15 |   // if there are 3 losses or 10 attempts stop the game.
 16 |   var gameScore = getGameScore(results);
 17 |   if (gameScore.loss === 3 || gameScore.total === 10) {
 18 |     gameOver = true;
 19 |     displayGameOver(gameScore);
 20 |     return;
 21 |   }
 22 |   background(0); // black background
 23 |   if (frameCount === 1 || frameCount % interval === 0) {
 24 |     solution = null;
 25 |     guessItem = new GuessItem(width / 2, height / 2, 1);
 26 |   }
 27 | 
 28 |   if (guessItem) {
 29 |     guessItem.render();
 30 |   }
 31 | 
 32 |   if (solution == true || solution === false) {
 33 |     // displaying a text on screen instead of flat color.
 34 |     solutionMessage(gameScore.total, solution);
 35 |   }
 36 | }
 37 | 
 38 | function solutionMessage(seed, solution) {
 39 |   // display a random message based on a true of false solution.
 40 |   var trueMessages = [
 41 |     "GOOD JOB!",
 42 |     "DOING GREAT!",
 43 |     "OMG!",
 44 |     "SUCH WIN!",
 45 |     "I APPRECIATE YOU",
 46 |     "IMPRESSIVE"
 47 |   ];
 48 | 
 49 |   var falseMessages = ["OH NO!", "BETTER LUCK NEXT TIME!", "PFTTTT", ":("];
 50 | 
 51 |   var messages;
 52 | 
 53 |   push();
 54 |   textAlign(CENTER, CENTER);
 55 |   fill(237, 34, 93);
 56 |   textSize(36);
 57 |   randomSeed(seed * 10000);
 58 | 
 59 |   if (solution === true) {
 60 |     background(255);
 61 |     messages = trueMessages;
 62 |   } else if (solution === false) {
 63 |     background(0);
 64 |     messages = falseMessages;
 65 |   }
 66 | 
 67 |   text(messages[parseInt(random(messages.length), 10)], width / 2, height / 2);
 68 |   pop();
 69 | }
 70 | 
 71 | function displayGameOver(score) {
 72 |   // create the Game Over screen
 73 |   push();
 74 |   background(255);
 75 |   textSize(24);
 76 |   textAlign(CENTER, CENTER);
 77 |   translate(width / 2, height / 2);
 78 |   fill(237, 34, 93);
 79 |   text("GAME OVER!", 0, 0);
 80 |   translate(0, 36);
 81 |   fill(0);
 82 |   // have spaces inside the string for the text to look proper.
 83 |   text("You have " + score.win + " correct guesses", 0, 0);
 84 |   translate(0, 100);
 85 |   textSize(16);
 86 |   var alternatingValue = map(sin(frameCount / 10), -1, 1, 0, 255);
 87 |   fill(237, 34, 93, alternatingValue);
 88 |   text("PRESS ENTER", 0, 0);
 89 |   pop();
 90 | }
 91 | 
 92 | function getGameScore(score) {
 93 |   // given a score array, calculate the number of wins and losses.
 94 |   var wins = 0;
 95 |   var losses = 0;
 96 |   var total = score.length;
 97 | 
 98 |   for (var i = 0; i < total; i++) {
 99 |     var item = score[i];
100 |     if (item === true) {
101 |       wins = wins + 1;
102 |     } else {
103 |       losses = losses + 1;
104 |     }
105 |   }
106 | 
107 |   return {
108 |     win: wins,
109 |     loss: losses,
110 |     total: total
111 |   };
112 | }
113 | 
114 | function restartTheGame() {
115 |   // sets the game state to start.
116 |   results = [];
117 |   solution = null;
118 |   gameOver = false;
119 | }
120 | 
121 | function keyPressed() {
122 |   // if game is over, then restart the game on ENTER key press.
123 |   if (gameOver === true) {
124 |     if (keyCode === ENTER) {
125 |       console.log("restart the game");
126 |       restartTheGame();
127 |       return;
128 |     }
129 |   }
130 | 
131 |   if (guessItem !== null) {
132 |     // check to see if the pressed key matches to the displayed number.
133 |     // if so set the solution global variable to a corresponding value.
134 |     console.log("you pressed: ", key);
135 |     solution = guessItem.solve(key);
136 |     console.log(solution);
137 |     if (solution) {
138 |       results.push(true);
139 |     } else {
140 |       results.push(false);
141 |     }
142 |     guessItem = null;
143 |   } else {
144 |     console.log("nothing to be solved");
145 |   }
146 | }
147 | 
148 | function GuessItem(x, y, scl) {
149 |   this.x = x;
150 |   this.y = y;
151 |   this.scale = scl;
152 |   this.scaleIncrement = 0.25;
153 |   this.clr = 255;
154 |   this.content = getContent();
155 |   this.alpha = 255;
156 |   this.alphaDecrement = 6;
157 |   this.solved = null;
158 |   this.contentMap = {
159 |     "1": "one",
160 |     "2": "two",
161 |     "3": "three",
162 |     "4": "four",
163 |     "5": "five",
164 |     "6": "six",
165 |     "7": "seven",
166 |     "8": "eight",
167 |     "9": "nine",
168 |     "0": "zero"
169 |   };
170 |   this.colors = [
171 |     [63, 184, 175],
172 |     [127, 199, 175],
173 |     [218, 216, 167],
174 |     [255, 158, 157],
175 |     [255, 61, 127],
176 |     [55, 191, 211],
177 |     [159, 223, 82],
178 |     [234, 209, 43],
179 |     [250, 69, 8],
180 |     [194, 13, 0]
181 |   ];
182 | 
183 |   function getContent() {
184 |     // generate a random integer in between 0 and 9
185 |     return String(parseInt(random(10), 10));
186 |   }
187 | 
188 |   this.solve = function(input) {
189 |     // check to see if the given input is equivalent to the content.
190 |     // set solved to the corresponding value.
191 |     var solved;
192 |     if (input === this.content) {
193 |       solved = true;
194 |     } else {
195 |       solved = false;
196 |     }
197 |     this.solved = solved;
198 |     return solved;
199 |   };
200 | 
201 |   this.drawEllipse = function(size, strkWeight, speedMultiplier, seed) {
202 |     // draw an animated ellipse with a random color to the screen.
203 |     push();
204 |     randomSeed(seed);
205 |     translate(this.x, this.y);
206 |     var ellipseSize = this.scale * speedMultiplier;
207 |     scale(ellipseSize);
208 |     var clr = this.colors[parseInt(random(this.colors.length), 10)];
209 |     stroke(clr);
210 |     noFill();
211 |     strokeWeight(strkWeight);
212 |     ellipse(0, 0, size, size);
213 |     pop();
214 |   };
215 | 
216 |   this.render = function() {
217 |     push();
218 |     this.drawEllipse(100, 15, 2, 1 * this.content * 1000);
219 |     this.drawEllipse(60, 7, 2, 1 * this.content * 2000);
220 |     this.drawEllipse(35, 3, 1.2, 1 * this.content * 3000);
221 |     pop();
222 | 
223 |     push();
224 |     fill(this.clr, this.alpha);
225 |     textAlign(CENTER, CENTER);
226 |     translate(this.x, this.y);
227 |     scale(this.scale);
228 |     // display the word for the corresponding number
229 |     text(this.contentMap[this.content], 0, 0);
230 |     // increase the scale value by the increment value with each render
231 |     this.scale = this.scale + this.scaleIncrement;
232 |     // decrease the alpha value by the decrement value with each render
233 |     this.alpha = this.alpha - this.alphaDecrement;
234 |     pop();
235 |   };
236 | }
237 | 


--------------------------------------------------------------------------------