├── README.md └── examples ├── 10 ├── 10-05.js ├── 10-06.js ├── 10-08.js ├── 10-09.js ├── 10-10.js ├── 10-11.js ├── 10-13.js ├── 10-17.js └── 10-21.js ├── 11 ├── 11-01.js ├── 11-03.js └── 11-04.js ├── 12 ├── 12-01.js ├── 12-02.js ├── 12-04.js ├── 12-05.js ├── 12-06.js ├── 12-07.js ├── 12-08.js ├── 12-09.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 ├── 03 └── 03-01.js ├── 04 ├── 04-01.js ├── 04-02.js ├── 04-03.js ├── 04-04.js ├── 04-05.js ├── 04-06.js ├── 04-07.js ├── 04-08.js ├── 04-09.js └── 04-10.js ├── 05 ├── 05-01.js ├── 05-02.js ├── 05-03.js ├── 05-04.js ├── 05-05.js ├── 05-06.js ├── 05-07.js ├── 05-08.js └── 05-09.js ├── 06 ├── 06-01.js ├── 06-02.js ├── 06-03.js ├── 06-04.js └── 06-05.js ├── 07 ├── 07-02.js ├── 07-03.js ├── 07-04.js ├── 07-05.js ├── 07-07.js ├── 07-08.js ├── 07-09.js └── 07-10.js ├── 08 ├── 08-04.js ├── 08-05.js └── 08-06.js └── 09 ├── 09-07.js ├── 09-14.js ├── 09-18.js └── 09-19.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/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/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/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/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/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-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/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/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-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/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-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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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 120) { 23 | colors.paintItBlack(); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/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/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/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/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/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-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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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 | --------------------------------------------------------------------------------