├── .gitignore ├── 02_Start ├── Ex_02_01.js └── Ex_02_02.js ├── 03_Draw ├── Example_03_01.js ├── Example_03_02.js ├── Example_03_03.js ├── Example_03_04.js ├── Example_03_05.js ├── Example_03_06.js ├── Example_03_07.js ├── Example_03_08.js ├── Example_03_09.js ├── Example_03_10.js ├── Example_03_11.js ├── Example_03_12.js ├── Example_03_13.js ├── Example_03_14.js ├── Example_03_15.js ├── Example_03_16.js ├── Example_03_17.js ├── Example_03_18.js ├── Example_03_19.js └── Example_03_20.js ├── 04_Variables ├── Ex_04_01.js ├── Ex_04_02.js ├── Ex_04_03.js ├── Ex_04_04.js ├── Ex_04_05.js ├── Ex_04_06.js ├── Ex_04_07.js ├── Ex_04_08.js ├── Ex_04_09.js ├── Ex_04_10.js ├── Ex_04_11.js ├── Ex_04_12.js └── Ex_04_13.js ├── 05_Response ├── Ex_05_01.js ├── Ex_05_02.js ├── Ex_05_03.js ├── Ex_05_04.js ├── Ex_05_05.js ├── Ex_05_06.js ├── Ex_05_07.js ├── Ex_05_08.js ├── Ex_05_09.js ├── Ex_05_10.js ├── Ex_05_11.js ├── Ex_05_12.js ├── Ex_05_13.js ├── Ex_05_14.js ├── Ex_05_15.js ├── Ex_05_16.js ├── Ex_05_17.js ├── Ex_05_18.js ├── Ex_05_19.js ├── Ex_05_20.js ├── Ex_05_21.js ├── Ex_05_22.js └── Ex_05_23.js ├── 06_Transform ├── Ex_06_01.js ├── Ex_06_02.js ├── Ex_06_03.js ├── Ex_06_04.js ├── Ex_06_05.js ├── Ex_06_06.js ├── Ex_06_07.js ├── Ex_06_08.js ├── Ex_06_09.js └── Ex_06_10.js ├── 07_Media ├── Ex_07_01.js ├── Ex_07_02.js ├── Ex_07_03.js ├── Ex_07_04.js ├── Ex_07_05.js ├── Ex_07_06.js ├── Ex_07_07.js ├── Ex_07_08.js ├── Ex_07_09.js ├── Ex_07_10.js ├── Ex_07_11.js ├── Ex_07_12.js └── Ex_07_13.js ├── 08_Motion ├── Ex_08_01.js ├── Ex_08_02.js ├── Ex_08_03.js ├── Ex_08_04.js ├── Ex_08_05.js ├── Ex_08_06.js ├── Ex_08_07.js ├── Ex_08_08.js ├── Ex_08_09.js ├── Ex_08_10.js ├── Ex_08_11.js ├── Ex_08_12.js ├── Ex_08_13.js ├── Ex_08_14.js └── Ex_08_15.js ├── 09_Functions ├── Ex_09_01.js ├── Ex_09_02.js ├── Ex_09_03.js ├── Ex_09_04.js ├── Ex_09_05.js ├── Ex_09_06.js ├── Ex_09_07.js └── Ex_09_08.js ├── 10_Objects ├── Ex_10_01.js └── Ex_10_02.js ├── 11_Arrays ├── Ex_11_01.js ├── Ex_11_02.js ├── Ex_11_03.js ├── Ex_11_04.js ├── Ex_11_05.js ├── Ex_11_06.js ├── Ex_11_07.js ├── Ex_11_08.js ├── Ex_11_09.js └── Ex_11_10.js ├── 12_Data ├── Ex_12_01.js ├── Ex_12_02.js ├── Ex_12_03.js ├── Ex_12_04.js ├── Ex_12_05.js ├── Ex_12_06.js └── Ex_12_07.js ├── 13_Extend ├── Ex_13_01.js ├── Ex_13_02.js ├── Ex_13_03.js ├── Ex_13_04.js ├── Ex_13_05.js └── Ex_13_06.js ├── README.md ├── Robots ├── Robot01_Draw.js ├── Robot02_Variables.js ├── Robot03_Response.js ├── Robot04_Transform.js ├── Robot05_Media.js ├── Robot06_Motion.js ├── Robot07_Functions.js ├── Robot08_Objects.js ├── Robot09_Arrays.js ├── Robot10_Data_a.js ├── Robot10_Data_b.js ├── Robot10_Data_c.js └── robotArmy.tsv └── media ├── AndaleMono-24.vlw ├── AndaleMono-36.vlw ├── capsule.jpg ├── clouds.gif ├── clouds.png ├── frame-0000.png ├── frame-0001.png ├── frame-0002.png ├── frame-0003.png ├── frame-0004.png ├── frame-0005.png ├── frame-0006.png ├── frame-0007.png ├── frame-0008.png ├── frame-0009.png ├── frame-0010.png ├── frame-0011.png ├── lunar.jpg ├── network.svg ├── robot1.svg └── robot2.svg /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | */.DS_Store -------------------------------------------------------------------------------- /02_Start/Ex_02_01.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | // put setup code here 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | ellipse(50, 50, 80, 80); 8 | } -------------------------------------------------------------------------------- /02_Start/Ex_02_02.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | if (mouseIsPressed) { 7 | fill(0); 8 | } else { 9 | fill(255); 10 | } 11 | ellipse(mouseX, mouseY, 80, 80); 12 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_01.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(800, 600); 3 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_02.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | point(240, 60); 8 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_03.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | line(20, 50, 420, 110); 8 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_04.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | quad(158, 55, 199, 14, 392, 66, 351, 107); 8 | triangle(347, 54, 392, 9, 392, 66); 9 | triangle(158, 55, 290, 91, 290, 112); 10 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_05.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | rect(180, 60, 220, 40); 8 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_06.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | ellipse(278, -100, 400, 400); 8 | ellipse(120, 100, 110, 110); 9 | ellipse(412, 60, 18, 18); 10 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_07.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | arc(90, 60, 80, 80, 0, HALF_PI); 8 | arc(190, 60, 80, 80, 0, PI+HALF_PI); 9 | arc(290, 60, 80, 80, PI, TWO_PI+HALF_PI); 10 | arc(390, 60, 80, 80, QUARTER_PI, PI+QUARTER_PI); 11 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_08.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | arc(90, 60, 80, 80, 0, radians(90)); 8 | arc(190, 60, 80, 80, 0, radians(270)); 9 | arc(290, 60, 80, 80, radians(180), radians(450)); 10 | arc(390, 60, 80, 80, radians(45), radians(225)); 11 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_09.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | angleMode(DEGREES); 4 | } 5 | 6 | function draw() { 7 | background(204); 8 | arc(90, 60, 80, 80, 0, 90); 9 | arc(190, 60, 80, 80, 0, 270); 10 | arc(290, 60, 80, 80, 180, 450); 11 | arc(390, 60, 80, 80, 45, 225); 12 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_10.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | ellipse(140, 0, 190, 190); 8 | // The rectangle draws on top of the ellipse 9 | // because it comes after in the code 10 | rect(160, 30, 260, 20); 11 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_11.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | rect(160, 30, 260, 20); 8 | // The ellipse draws on top of the rectangle 9 | // because it comes after in the code 10 | ellipse(140, 0, 190, 190); 11 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_12.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | ellipse(75, 60, 90, 90); 8 | strokeWeight(8); // Stroke weight to 8 pixels 9 | ellipse(175, 60, 90, 90); 10 | ellipse(279, 60, 90, 90); 11 | strokeWeight(20); // Stroke weight to 20 pixels 12 | ellipse(389, 60, 90, 90); 13 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_13.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | strokeWeight(12); 4 | } 5 | 6 | function draw() { 7 | background(204); 8 | strokeJoin(ROUND); // Round the stroke corners 9 | rect(40, 25, 70, 70); 10 | strokeJoin(BEVEL); // Bevel the stroke corners 11 | rect(140, 25, 70, 70); 12 | strokeCap(SQUARE); // Square the line endings 13 | line(270, 25, 340, 95); 14 | strokeCap(ROUND); // Round the line endings 15 | line(350, 25, 420, 95); 16 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_14.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(0); // Black 7 | fill(204); // Light gray 8 | ellipse(132, 82, 200, 200); // Light gray circle 9 | fill(153); // Medium gray 10 | ellipse(228, -16, 200, 200); // Medium gray circle 11 | fill(102); // Dark gray 12 | ellipse(268, 118, 200, 200); // Dark gray circle 13 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_15.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | fill(153); // Medium gray 8 | ellipse(132, 82, 200, 200); // Gray circle 9 | noFill(); // Turn off fill 10 | ellipse(228, -16, 200, 200); // Outline circle 11 | noStroke(); // Turn off stroke 12 | ellipse(268, 118, 200, 200); // Doesn’t draw! 13 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_16.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | noStroke(); 4 | } 5 | 6 | function draw() { 7 | background(0, 26, 51); // Dark blue color 8 | fill(255, 0, 0); // Red color 9 | ellipse(132, 82, 200, 200); // Red circle 10 | fill(0, 255, 0); // Green color 11 | ellipse(228, -16, 200, 200); // Green circle 12 | fill(0, 0, 255); // Blue color 13 | ellipse(268, 118, 200, 200); // Blue circle 14 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_17.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | noStroke(); 4 | } 5 | 6 | function draw() { 7 | background(204, 226, 225); // Light blue color 8 | fill(255, 0, 0, 160); // Red color 9 | ellipse(132, 82, 200, 200); // Red circle 10 | fill(0, 255, 0, 160); // Green color 11 | ellipse(228, -16, 200, 200); // Green circle 12 | fill(0, 0, 255, 160); // Blue color 13 | ellipse(268, 118, 200, 200); // Blue circle 14 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_18.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | beginShape(); 8 | vertex(180, 82); 9 | vertex(207, 36); 10 | vertex(214, 63); 11 | vertex(407, 11); 12 | vertex(412, 30); 13 | vertex(219, 82); 14 | vertex(226, 109); 15 | endShape(); 16 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_19.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | beginShape(); 8 | vertex(180, 82); 9 | vertex(207, 36); 10 | vertex(214, 63); 11 | vertex(407, 11); 12 | vertex(412, 30); 13 | vertex(219, 82); 14 | vertex(226, 109); 15 | endShape(CLOSE); 16 | } -------------------------------------------------------------------------------- /03_Draw/Example_03_20.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | 8 | // Left creature 9 | beginShape(); 10 | vertex(50, 120); 11 | vertex(100, 90); 12 | vertex(110, 60); 13 | vertex(80, 20); 14 | vertex(210, 60); 15 | vertex(160, 80); 16 | vertex(200, 90); 17 | vertex(140, 100); 18 | vertex(130, 120); 19 | endShape(); 20 | fill(0); 21 | ellipse(155, 60, 8, 8); 22 | 23 | // Right creature 24 | fill(255); 25 | beginShape(); 26 | vertex(370, 120); 27 | vertex(360, 90); 28 | vertex(290, 80); 29 | vertex(340, 70); 30 | vertex(280, 50); 31 | vertex(420, 10); 32 | vertex(390, 50); 33 | vertex(410, 90); 34 | vertex(460, 120); 35 | endShape(); 36 | fill(0); 37 | ellipse(345, 50, 10, 10); 38 | } -------------------------------------------------------------------------------- /04_Variables/Ex_04_01.js: -------------------------------------------------------------------------------- 1 | var y = 60; 2 | var d = 80; 3 | 4 | function setup() { 5 | createCanvas(480, 120); 6 | } 7 | 8 | function draw() { 9 | background(204); 10 | ellipse(75, y, d, d); // Left 11 | ellipse(175, y, d, d); // Middle 12 | ellipse(275, y, d, d); // Right 13 | } -------------------------------------------------------------------------------- /04_Variables/Ex_04_02.js: -------------------------------------------------------------------------------- 1 | var y = 100; 2 | var d = 130; 3 | 4 | function setup() { 5 | createCanvas(480, 120); 6 | } 7 | 8 | function draw() { 9 | background(204); 10 | ellipse(75, y, d, d); // Left 11 | ellipse(175, y, d, d); // Middle 12 | ellipse(275, y, d, d); // Right 13 | } -------------------------------------------------------------------------------- /04_Variables/Ex_04_03.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | line(0, 0, width, height); // Line from (0,0) to (480, 120) 8 | line(width, 0, 0, height); // Line from (480, 0) to (0, 120) 9 | ellipse(width/2, height/2, 60, 60); 10 | } -------------------------------------------------------------------------------- /04_Variables/Ex_04_04.js: -------------------------------------------------------------------------------- 1 | var x = 25; 2 | var h = 20; 3 | var y = 25; 4 | 5 | function setup() { 6 | createCanvas(480, 120); 7 | } 8 | 9 | function draw() { 10 | background(204); 11 | rect(x, y, 300, h); // Top 12 | x = x + 100; 13 | rect(x, y + h, 300, h); // Middle 14 | x = x - 250; 15 | rect(x, y + h*2, 300, h); // Bottom 16 | } -------------------------------------------------------------------------------- /04_Variables/Ex_04_05.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | strokeWeight(8); 4 | } 5 | 6 | function draw() { 7 | background(204); 8 | line(20, 40, 80, 80); 9 | line(80, 40, 140, 80); 10 | line(140, 40, 200, 80); 11 | line(200, 40, 260, 80); 12 | line(260, 40, 320, 80); 13 | line(320, 40, 380, 80); 14 | line(380, 40, 440, 80); 15 | } 16 | -------------------------------------------------------------------------------- /04_Variables/Ex_04_06.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | strokeWeight(8); 4 | } 5 | 6 | function draw() { 7 | background(204); 8 | for (var i = 20; i < 400; i += 60) { 9 | line(i, 40, i + 60, 80); 10 | } 11 | } -------------------------------------------------------------------------------- /04_Variables/Ex_04_07.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | strokeWeight(2); 4 | } 5 | 6 | function draw() { 7 | background(204); 8 | for (var i = 20; i < 400; i += 8) { 9 | line(i, 40, i + 60, 80); 10 | } 11 | } -------------------------------------------------------------------------------- /04_Variables/Ex_04_08.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | strokeWeight(2); 4 | } 5 | 6 | function draw() { 7 | background(204); 8 | for (var i = 20; i < 400; i += 20) { 9 | line(i, 0, i + i/2, 80); 10 | } 11 | } -------------------------------------------------------------------------------- /04_Variables/Ex_04_09.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | strokeWeight(2); 4 | } 5 | 6 | function draw() { 7 | background(204); 8 | for (var i = 20; i < 400; i += 20) { 9 | line(i, 0, i + i/2, 80); 10 | line(i + i/2, 80, i*1.2, 120); 11 | } 12 | } -------------------------------------------------------------------------------- /04_Variables/Ex_04_10.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | noStroke(); 4 | } 5 | 6 | function draw() { 7 | background(0); 8 | for (var y = 0; y <= height; y += 40) { 9 | for (var x = 0; x <= width; x += 40) { 10 | fill(255, 140); 11 | ellipse(x, y, 40, 40); 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /04_Variables/Ex_04_11.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | noStroke(); 4 | } 5 | 6 | function draw() { 7 | background(0); 8 | for (var y = 0; y < height+45; y += 40) { 9 | fill(255, 140); 10 | ellipse(0, y, 40, 40); 11 | } 12 | for (var x = 0; x < width+45; x += 40) { 13 | fill(255, 140); 14 | ellipse(x, 0, 40, 40); 15 | } 16 | } -------------------------------------------------------------------------------- /04_Variables/Ex_04_12.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | fill(255); 4 | stroke(102); 5 | } 6 | 7 | function draw() { 8 | background(0); 9 | for (var y = 20; y <= height-20; y += 10) { 10 | for (var x = 20; x <= width-20; x += 10) { 11 | ellipse(x, y, 4, 4); 12 | // Draw a line to the center of the display 13 | line(x, y, 240, 60); 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /04_Variables/Ex_04_13.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(0); 7 | for (var y = 32; y <= height; y += 8) { 8 | for (var x = 12; x <= width; x += 15) { 9 | ellipse(x + y, y, 16 - y/10.0, 16 - y/10.0); 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_01.js: -------------------------------------------------------------------------------- 1 | function draw() { 2 | // Displays the frame count to the Console 3 | print("I’m drawing"); 4 | print(frameCount); 5 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_02.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | print("I’m starting"); 3 | } 4 | 5 | function draw() { 6 | print("I’m running"); 7 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_03.js: -------------------------------------------------------------------------------- 1 | var x = 280; 2 | var y = -100; 3 | var diameter = 380; 4 | 5 | function setup() { 6 | createCanvas(480, 120); 7 | fill(102); 8 | } 9 | 10 | function draw() { 11 | background(204); 12 | ellipse(x, y, diameter, diameter); 13 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_04.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | fill(0, 102); 4 | noStroke(); 5 | } 6 | 7 | function draw() { 8 | ellipse(mouseX, mouseY, 9, 9); 9 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_05.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | fill(0, 102); 4 | noStroke(); 5 | } 6 | 7 | function draw() { 8 | background(204); 9 | ellipse(mouseX, mouseY, 9, 9); 10 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_06.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | strokeWeight(4); 4 | stroke(0, 102); 5 | } 6 | 7 | function draw() { 8 | line(mouseX, mouseY, pmouseX, pmouseY); 9 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_07.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | stroke(0, 102); 4 | } 5 | 6 | function draw() { 7 | var weight = dist(mouseX, mouseY, pmouseX, pmouseY); 8 | strokeWeight(weight); 9 | line(mouseX, mouseY, pmouseX, pmouseY); 10 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_08.js: -------------------------------------------------------------------------------- 1 | var x = 0; 2 | var easing = 0.01; 3 | 4 | function setup() { 5 | createCanvas(220, 120); 6 | } 7 | 8 | function draw() { 9 | var targetX = mouseX; 10 | x += (targetX - x) * easing; 11 | ellipse(x, 40, 12, 12); 12 | print(targetX + " : " + x); 13 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_09.js: -------------------------------------------------------------------------------- 1 | var x = 0; 2 | var y = 0; 3 | var px = 0; 4 | var py = 0; 5 | var easing = 0.05; 6 | 7 | function setup() { 8 | createCanvas(480, 120); 9 | stroke(0, 102); 10 | } 11 | 12 | function draw() { 13 | var targetX = mouseX; 14 | x += (targetX - x) * easing; 15 | var targetY = mouseY; 16 | y += (targetY - y) * easing; 17 | var weight = dist(x, y, px, py); 18 | strokeWeight(weight); 19 | line(x, y, px, py); 20 | py = y; 21 | px = x; 22 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_10.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(240, 120); 3 | strokeWeight(30); 4 | } 5 | 6 | function draw() { 7 | background(204); 8 | stroke(102); 9 | line(40, 0, 70, height); 10 | if (mouseIsPressed == true) { 11 | stroke(0); 12 | } 13 | line(0, 70, width, 50); 14 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_11.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(240, 120); 3 | strokeWeight(30); 4 | } 5 | 6 | function draw() { 7 | background(204); 8 | stroke(102); 9 | line(40, 0, 70, height); 10 | if (mouseIsPressed) { 11 | stroke(0); 12 | } else { 13 | stroke(255); 14 | } 15 | line(0, 70, width, 50); 16 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_12.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(120, 120); 3 | strokeWeight(30); 4 | } 5 | 6 | function draw() { 7 | background(204); 8 | stroke(102); 9 | line(40, 0, 70, height); 10 | if (mouseIsPressed) { 11 | if (mouseButton == LEFT) { 12 | stroke(255); 13 | } else { 14 | stroke(0); 15 | } 16 | line(0, 70, width, 50); 17 | } 18 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_13.js: -------------------------------------------------------------------------------- 1 | var x; 2 | var offset = 10; 3 | 4 | function setup() { 5 | createCanvas(240, 120); 6 | x = width/2; 7 | } 8 | 9 | function draw() { 10 | background(204); 11 | if (mouseX > x) { 12 | x += 0.5; 13 | offset = -10; 14 | } 15 | if (mouseX < x) { 16 | x -= 0.5; 17 | offset = 10; 18 | } 19 | line(x, 0, x, height); 20 | line(mouseX, mouseY, mouseX + offset, mouseY - 10); 21 | line(mouseX, mouseY, mouseX + offset, mouseY + 10); 22 | line(mouseX, mouseY, mouseX + offset*3, mouseY); 23 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_14.js: -------------------------------------------------------------------------------- 1 | var x = 120; 2 | var y = 60; 3 | var radius = 12; 4 | 5 | function setup() { 6 | createCanvas(240, 120); 7 | ellipseMode(RADIUS); 8 | } 9 | 10 | function draw() { 11 | background(204); 12 | var d = dist(mouseX, mouseY, x, y); 13 | if (d < radius) { 14 | radius++; 15 | fill(0); 16 | } else { 17 | fill(255); 18 | } 19 | ellipse(x, y, radius, radius); 20 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_15.js: -------------------------------------------------------------------------------- 1 | var x = 80; 2 | var y = 30; 3 | var w = 80; 4 | var h = 60; 5 | 6 | function setup() { 7 | createCanvas(240, 120); 8 | } 9 | 10 | function draw() { 11 | background(204); 12 | if ((mouseX > x) && (mouseX < x+w) && 13 | (mouseY > y) && (mouseY < y+h)) { 14 | fill(0); 15 | } 16 | else { 17 | fill(255); 18 | } 19 | rect(x, y, w, h); 20 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_16.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(240, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | line(20, 20, 220, 100); 8 | if (keyIsPressed) { 9 | line(220, 20, 20, 100); 10 | } 11 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_17.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(120, 120); 3 | textSize(64); 4 | textAlign(CENTER); 5 | } 6 | 7 | function draw() { 8 | background(0); 9 | text(key, 60, 80); 10 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_18.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(120, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | if (keyIsPressed) { 8 | if ((key == 'h') || (key == 'H')) { 9 | line(30, 60, 90, 60); 10 | } 11 | if ((key == 'n') || (key == 'N')) { 12 | line(30, 20, 90, 100); 13 | } 14 | } 15 | line(30, 20, 30, 100); 16 | line(90, 20, 90, 100); 17 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_19.js: -------------------------------------------------------------------------------- 1 | var x = 215; 2 | 3 | function setup() { 4 | createCanvas(480, 120); 5 | } 6 | 7 | function draw() { 8 | if (keyIsPressed) { 9 | if (keyCode == LEFT_ARROW) { // If it's the left arrow 10 | x--; 11 | } 12 | else if (keyCode == RIGHT_ARROW) { // If it's the right arrow 13 | x++; 14 | } 15 | } 16 | rect(x, 45, 50, 50); 17 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_20.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(240, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | line(20, 20, 220, 100); 8 | if (touchIsStarted) { 9 | line(220, 20, 20, 100); 10 | } 11 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_21.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | fill(0, 102); 4 | smooth(); 5 | noStroke(); 6 | } 7 | 8 | function draw() { 9 | ellipse(touchX, touchY, 15, 15); 10 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_22.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(240, 120); 3 | strokeWeight(12); 4 | } 5 | 6 | function draw() { 7 | background(204); 8 | stroke(102); 9 | line(mouseX, 0, mouseX, height); // Gray line 10 | stroke(0); 11 | var mx = mouseX/2 + 60; 12 | line(mx, 0, mx, height); // Black line 13 | } -------------------------------------------------------------------------------- /05_Response/Ex_05_23.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(240, 120); 3 | strokeWeight(12); 4 | } 5 | 6 | function draw() { 7 | background(204); 8 | stroke(255); 9 | line(120, 60, mouseX, mouseY); // White line 10 | stroke(0); 11 | var mx = map(mouseX, 0, width, 60, 180); 12 | line(120, 60, mx, mouseY); // Black line 13 | } -------------------------------------------------------------------------------- /06_Transform/Ex_06_01.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(120, 120); 3 | background(204); 4 | } 5 | 6 | function draw() { 7 | translate(mouseX, mouseY); 8 | rect(0, 0, 30, 30); 9 | } -------------------------------------------------------------------------------- /06_Transform/Ex_06_02.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(120, 120); 3 | } 4 | 5 | function draw() { 6 | translate(mouseX, mouseY); 7 | rect(0, 0, 30, 30); 8 | translate(35, 10); 9 | rect(0, 0, 15, 15); 10 | } -------------------------------------------------------------------------------- /06_Transform/Ex_06_03.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(120, 120); 3 | background(204); 4 | } 5 | 6 | function draw() { 7 | rotate(mouseX / 100.0); 8 | rect(40, 30, 160, 20); 9 | } -------------------------------------------------------------------------------- /06_Transform/Ex_06_04.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(120, 120); 3 | background(204); 4 | } 5 | 6 | function draw() { 7 | rotate(mouseX / 100.0); 8 | rect(-80, -10, 160, 20); 9 | } -------------------------------------------------------------------------------- /06_Transform/Ex_06_05.js: -------------------------------------------------------------------------------- 1 | var angle = 0.0; 2 | 3 | function setup() { 4 | createCanvas(120, 120); 5 | background(204); 6 | } 7 | 8 | function draw() { 9 | translate(mouseX, mouseY); 10 | rotate(angle); 11 | rect(-15, -15, 30, 30); 12 | angle += 0.1; 13 | } -------------------------------------------------------------------------------- /06_Transform/Ex_06_06.js: -------------------------------------------------------------------------------- 1 | var angle = 0.0; 2 | 3 | function setup() { 4 | createCanvas(120, 120); 5 | background(204); 6 | } 7 | 8 | function draw() { 9 | rotate(angle); 10 | translate(mouseX, mouseY); 11 | rect(-15, -15, 30, 30); 12 | angle += 0.1; 13 | } -------------------------------------------------------------------------------- /06_Transform/Ex_06_07.js: -------------------------------------------------------------------------------- 1 | var angle = 0.0; 2 | var angleDirection = 1; 3 | var speed = 0.005; 4 | 5 | function setup() { 6 | createCanvas(120, 120); 7 | } 8 | 9 | function draw() { 10 | background(204); 11 | translate(20, 25); // Move to start position 12 | rotate(angle); 13 | strokeWeight(12); 14 | line(0, 0, 40, 0); 15 | translate(40, 0); // Move to next joint 16 | rotate(angle * 2.0); 17 | strokeWeight(6); 18 | line(0, 0, 30, 0); 19 | translate(30, 0); // Move to next joint 20 | rotate(angle * 2.5); 21 | strokeWeight(3); 22 | line(0, 0, 20, 0); 23 | 24 | angle += speed * angleDirection; 25 | if ((angle > QUARTER_PI) || (angle < 0)) { 26 | angleDirection *= -1; 27 | } 28 | } -------------------------------------------------------------------------------- /06_Transform/Ex_06_08.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(120, 120); 3 | background(204); 4 | } 5 | 6 | function draw() { 7 | translate(mouseX, mouseY); 8 | scale(mouseX / 60.0); 9 | rect(-15, -15, 30, 30); 10 | } -------------------------------------------------------------------------------- /06_Transform/Ex_06_09.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(120, 120); 3 | background(204); 4 | } 5 | 6 | function draw() { 7 | translate(mouseX, mouseY); 8 | var scalar = mouseX / 60.0; 9 | scale(scalar); 10 | strokeWeight(1.0 / scalar); 11 | rect(-15, -15, 30, 30); 12 | } -------------------------------------------------------------------------------- /06_Transform/Ex_06_10.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(120, 120); 3 | background(204); 4 | } 5 | 6 | function draw() { 7 | push(); 8 | translate(mouseX, mouseY); 9 | rect(0, 0, 30, 30); 10 | pop(); 11 | translate(35, 10); 12 | rect(0, 0, 15, 15); 13 | } -------------------------------------------------------------------------------- /07_Media/Ex_07_01.js: -------------------------------------------------------------------------------- 1 | var img; 2 | 3 | function preload() { 4 | img = loadImage('lunar.jpg'); 5 | } 6 | 7 | function setup() { 8 | createCanvas(480, 120); 9 | } 10 | 11 | function draw() { 12 | image(img, 0, 0); 13 | } -------------------------------------------------------------------------------- /07_Media/Ex_07_02.js: -------------------------------------------------------------------------------- 1 | var img1; 2 | var img2; 3 | 4 | function preload() { 5 | img1 = loadImage('lunar.jpg'); 6 | img2 = loadImage('capsule.jpg'); 7 | } 8 | 9 | function setup() { 10 | createCanvas(480, 120); 11 | } 12 | 13 | function draw() { 14 | image(img1, -120, 0); 15 | image(img1, 130, 0, 240, 120); 16 | image(img2, 300, 0, 240, 120); 17 | } -------------------------------------------------------------------------------- /07_Media/Ex_07_03.js: -------------------------------------------------------------------------------- 1 | var img; 2 | 3 | function preload() { 4 | img = loadImage('lunar.jpg'); 5 | } 6 | 7 | function setup() { 8 | createCanvas(480, 120); 9 | } 10 | 11 | function draw() { 12 | background(0); 13 | image(img, 0, 0, mouseX * 2, mouseY * 2); 14 | } -------------------------------------------------------------------------------- /07_Media/Ex_07_04.js: -------------------------------------------------------------------------------- 1 | var img; 2 | 3 | function preload() { 4 | img = loadImage('clouds.gif'); 5 | } 6 | 7 | function setup() { 8 | createCanvas(480, 120); 9 | } 10 | function draw() { 11 | background(255); 12 | image(img, 0, 0); 13 | image(img, 0, mouseY * -1); 14 | } -------------------------------------------------------------------------------- /07_Media/Ex_07_05.js: -------------------------------------------------------------------------------- 1 | var img; 2 | 3 | function preload() { 4 | img = loadImage('clouds.png'); 5 | } 6 | 7 | function setup() { 8 | createCanvas(480, 120); 9 | } 10 | 11 | function draw() { 12 | background(204); 13 | image(img, 0, 0); 14 | image(img, 0, mouseY * -1); 15 | } -------------------------------------------------------------------------------- /07_Media/Ex_07_06.js: -------------------------------------------------------------------------------- 1 | var img; 2 | 3 | function preload() { 4 | img = loadImage("network.svg"); 5 | } 6 | 7 | function setup() { 8 | createCanvas(480, 120); 9 | } 10 | 11 | function draw() { 12 | background(0); 13 | image(img, 0, 0); 14 | image(img, mouseX, 0); 15 | } -------------------------------------------------------------------------------- /07_Media/Ex_07_07.js: -------------------------------------------------------------------------------- 1 | var img; 2 | 3 | function setup() { 4 | createCanvas(480, 120); 5 | img = loadImage('lunar.jpg'); 6 | noLoop(); 7 | } 8 | 9 | function draw() { 10 | background(200); 11 | image(img, 0, 0); 12 | } -------------------------------------------------------------------------------- /07_Media/Ex_07_08.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | loadImage('lunar.jpg', drawImage); 4 | noLoop(); 5 | } 6 | 7 | function draw() { 8 | background(200); 9 | } 10 | 11 | function drawImage(img) { 12 | image(img, 0, 0); 13 | } -------------------------------------------------------------------------------- /07_Media/Ex_07_09.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | textFont("Arial"); 4 | } 5 | 6 | function draw() { 7 | background(102); 8 | textSize(32); 9 | text("one small step for man...", 25, 60); 10 | textSize(16); 11 | text("one small step for man...", 27, 90); 12 | } -------------------------------------------------------------------------------- /07_Media/Ex_07_10.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | textFont("Source Code Pro"); 4 | } 5 | 6 | function draw() { 7 | background(102); 8 | textSize(28); 9 | text("one small step for man...", 25, 60); 10 | textSize(16); 11 | text("one small step for man...", 27, 90); 12 | } -------------------------------------------------------------------------------- /07_Media/Ex_07_11.js: -------------------------------------------------------------------------------- 1 | var font; 2 | 3 | function preload() { 4 | font = loadFont("SourceCodePro-Regular.ttf"); 5 | } 6 | 7 | function setup() { 8 | createCanvas(480, 120); 9 | textFont(font); 10 | } 11 | 12 | function draw() { 13 | background(102); 14 | textSize(28); 15 | text("one small step for man...", 25, 60); 16 | textSize(16); 17 | text("one small step for man...", 27, 90); 18 | } -------------------------------------------------------------------------------- /07_Media/Ex_07_12.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | textFont("Source Code Pro"); 4 | fill(0); 5 | stroke(255); 6 | } 7 | 8 | function draw() { 9 | background(102); 10 | textSize(28); 11 | text("one small step for man...", 25, 60); 12 | textSize(16); 13 | text("one small step for man...", 27, 90); 14 | } -------------------------------------------------------------------------------- /07_Media/Ex_07_13.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | textFont("Source Code Pro"); 4 | textSize(24); 5 | } 6 | 7 | function draw() { 8 | background(102); 9 | text("one small step for man...", 26, 24, 240, 100); 10 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_01.js: -------------------------------------------------------------------------------- 1 | function draw() { 2 | var fr = frameRate(); 3 | print(fr); 4 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_02.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | frameRate(30); // Thirty frames each second 3 | //frameRate(12); // Twelve frames each second 4 | //frameRate(2); // Two frames each second 5 | //frameRate(0.5); // One frame every two seconds 6 | } 7 | 8 | function draw() { 9 | var fr = frameRate(); 10 | print(fr); 11 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_03.js: -------------------------------------------------------------------------------- 1 | var radius = 40; 2 | var x = -radius; 3 | var speed = 0.5; 4 | 5 | function setup() { 6 | createCanvas(240, 120); 7 | ellipseMode(RADIUS); 8 | } 9 | 10 | function draw() { 11 | background(0); 12 | x += speed; // Increase the value of x 13 | arc(x, 60, radius, radius, 0.52, 5.76); 14 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_04.js: -------------------------------------------------------------------------------- 1 | var radius = 40; 2 | var x = -radius; 3 | var speed = 0.5; 4 | 5 | function setup() { 6 | createCanvas(240, 120); 7 | ellipseMode(RADIUS); 8 | } 9 | 10 | function draw() { 11 | background(0); 12 | x += speed; // Increase the value of x 13 | if (x > width+radius) { // If the shape is off screen 14 | x = -radius; // move to the left edge 15 | } 16 | arc(x, 60, radius, radius, 0.52, 5.76); 17 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_05.js: -------------------------------------------------------------------------------- 1 | var radius = 40; 2 | var x = 110; 3 | var speed = 0.5; 4 | var direction = 1; 5 | 6 | function setup() { 7 | createCanvas(240, 120); 8 | ellipseMode(RADIUS); 9 | } 10 | 11 | function draw() { 12 | background(0); 13 | x += speed * direction; 14 | if ((x > width-radius) || (x < radius)) { 15 | direction = -direction; // Flip direction 16 | } 17 | if (direction == 1) { 18 | arc(x, 60, radius, radius, 0.52, 5.76); // Face right 19 | } else { 20 | arc(x, 60, radius, radius, 3.67, 8.9); // Face left 21 | } 22 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_06.js: -------------------------------------------------------------------------------- 1 | var startX = 20; // Initial x-coordinate 2 | var stopX = 160; // Final x-coordinate 3 | var startY = 30; // Initial y-coordinate 4 | var stopY = 80; // Final y-coordinate 5 | var x = startX; // Current x-coordinate 6 | var y = startY; // Current y-coordinate 7 | var step = 0.005; // createCanvas of each step (0.0 to 1.0) 8 | var pct = 0.0; // Percentage traveled (0.0 to 1.0) 9 | 10 | function setup() { 11 | createCanvas(240, 120); 12 | } 13 | 14 | function draw() { 15 | background(0); 16 | if (pct < 1.0) { 17 | x = startX + ((stopX-startX) * pct); 18 | y = startY + ((stopY-startX) * pct); 19 | pct += step; 20 | } 21 | ellipse(x, y, 20, 20); 22 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_07.js: -------------------------------------------------------------------------------- 1 | function draw() { 2 | var r = random(0, mouseX); 3 | print(r); 4 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_08.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(240, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | for (var x = 20; x < width; x += 20) { 8 | var mx = mouseX / 10; 9 | var offsetA = random(-mx, mx); 10 | var offsetB = random(-mx, mx); 11 | line(x + offsetA, 20, x - offsetB, 100); 12 | } 13 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_09.js: -------------------------------------------------------------------------------- 1 | var speed = 2.5; 2 | var diameter = 20; 3 | var x; 4 | var y; 5 | 6 | function setup() { 7 | createCanvas(240, 120); 8 | background(204); 9 | x = width/2; 10 | y = height/2; 11 | } 12 | 13 | function draw() { 14 | x += random(-speed, speed); 15 | y += random(-speed, speed); 16 | ellipse(x, y, diameter, diameter); 17 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_10.js: -------------------------------------------------------------------------------- 1 | function draw() { 2 | var timer = millis(); 3 | print(timer); 4 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_11.js: -------------------------------------------------------------------------------- 1 | var time1 = 2000; 2 | var time2 = 4000; 3 | var x = 0; 4 | 5 | function setup() { 6 | createCanvas(480, 120); 7 | } 8 | 9 | function draw() { 10 | var currentTime = millis(); 11 | background(204); 12 | if (currentTime > time2) { 13 | x -= 0.5; 14 | } else if (currentTime > time1) { 15 | x += 2; 16 | } 17 | ellipse(x, 60, 90, 90); 18 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_12.js: -------------------------------------------------------------------------------- 1 | var angle = 0.0; 2 | 3 | function setup() { 4 | createCanvas(480, 120); 5 | } 6 | 7 | function draw() { 8 | var sinval = sin(angle); 9 | print(sinval); 10 | var gray = map(sinval, -1, 1, 0, 255); 11 | background(gray); 12 | angle += 0.1; 13 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_13.js: -------------------------------------------------------------------------------- 1 | var angle = 0.0; 2 | var offset = 60; 3 | var scalar = 40; 4 | var speed = 0.05; 5 | 6 | function setup() { 7 | createCanvas(240, 120); 8 | } 9 | 10 | function draw() { 11 | background(0); 12 | var y1 = offset + sin(angle) * scalar; 13 | var y2 = offset + sin(angle + 0.4) * scalar; 14 | var y3 = offset + sin(angle + 0.8) * scalar; 15 | ellipse( 80, y1, 40, 40); 16 | ellipse(120, y2, 40, 40); 17 | ellipse(160, y3, 40, 40); 18 | angle += speed; 19 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_14.js: -------------------------------------------------------------------------------- 1 | var angle = 0.0; 2 | var offset = 60; 3 | var scalar = 30; 4 | var speed = 0.05; 5 | 6 | function setup() { 7 | createCanvas(120, 120); 8 | background(204); 9 | } 10 | 11 | function draw() { 12 | var x = offset + cos(angle) * scalar; 13 | var y = offset + sin(angle) * scalar; 14 | ellipse( x, y, 40, 40); 15 | angle += speed; 16 | } -------------------------------------------------------------------------------- /08_Motion/Ex_08_15.js: -------------------------------------------------------------------------------- 1 | var angle = 0.0; 2 | var offset = 60; 3 | var scalar = 2; 4 | var speed = 0.05; 5 | 6 | function setup() { 7 | createCanvas(120, 120); 8 | fill(0); 9 | } 10 | 11 | function draw() { 12 | var x = offset + cos(angle) * scalar; 13 | var y = offset + sin(angle) * scalar; 14 | ellipse( x, y, 2, 2); 15 | angle += speed; 16 | scalar += speed; 17 | } -------------------------------------------------------------------------------- /09_Functions/Ex_09_01.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | print("Ready to roll!"); 3 | rollDice(20); 4 | rollDice(20); 5 | rollDice(6); 6 | print("Finished."); 7 | } 8 | 9 | function rollDice(numSides) { 10 | var d = 1 + int(random(numSides)); 11 | print("Rolling... " + d); 12 | } -------------------------------------------------------------------------------- /09_Functions/Ex_09_02.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | print("Ready to roll!"); 3 | var d1 = 1 + int(random(20)); 4 | print("Rolling... " + d1); 5 | var d2 = 1 + int(random(20)); 6 | print("Rolling... " + d2); 7 | var d3 = 1 + int(random(6)); 8 | print("Rolling... " + d3); 9 | print("Finished."); 10 | } -------------------------------------------------------------------------------- /09_Functions/Ex_09_03.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | translate(110, 110); 8 | stroke(0); 9 | strokeWeight(70); 10 | line(0, -35, 0, -65); // Body 11 | noStroke(); 12 | fill(255); 13 | ellipse(-17.5, -65, 35, 35); // Left eye dome 14 | ellipse(17.5, -65, 35, 35); // Right eye dome 15 | arc(0, -65, 70, 70, 0, PI); // Chin 16 | fill(0); 17 | ellipse(-14, -65, 8, 8); // Left eye 18 | ellipse(14, -65, 8, 8); // Right eye 19 | quad(0, -58, 4, -51, 0, -44, -4, -51); // Beak 20 | } -------------------------------------------------------------------------------- /09_Functions/Ex_09_04.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | 8 | // Left owl 9 | translate(110, 110); 10 | stroke(0); 11 | strokeWeight(70); 12 | line(0, -35, 0, -65); // Body 13 | noStroke(); 14 | fill(255); 15 | ellipse(-17.5, -65, 35, 35); // Left eye dome 16 | ellipse(17.5, -65, 35, 35); // Right eye dome 17 | arc(0, -65, 70, 70, 0, PI); // Chin 18 | fill(0); 19 | ellipse(-14, -65, 8, 8); // Left eye 20 | ellipse(14, -65, 8, 8); // Right eye 21 | quad(0, -58, 4, -51, 0, -44, -4, -51); // Beak 22 | 23 | // Right owl 24 | translate(70, 0); 25 | stroke(0); 26 | strokeWeight(70); 27 | line(0, -35, 0, -65); // Body 28 | noStroke(); 29 | fill(255); 30 | ellipse(-17.5, -65, 35, 35); // Left eye dome 31 | ellipse(17.5, -65, 35, 35); // Right eye dome 32 | arc(0, -65, 70, 70, 0, PI); // Chin 33 | fill(0); 34 | ellipse(-14, -65, 8, 8); // Left eye 35 | ellipse(14, -65, 8, 8); // Right eye 36 | quad(0, -58, 4, -51, 0, -44, -4, -51); // Beak 37 | } -------------------------------------------------------------------------------- /09_Functions/Ex_09_05.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | owl(110, 110); 8 | owl(180, 110); 9 | } 10 | 11 | function owl(x, y) { 12 | push(); 13 | translate(x, y); 14 | stroke(0); 15 | strokeWeight(70); 16 | line(0, -35, 0, -65); // Body 17 | noStroke(); 18 | fill(255); 19 | ellipse(-17.5, -65, 35, 35); // Left eye dome 20 | ellipse(17.5, -65, 35, 35); // Right eye dome 21 | arc(0, -65, 70, 70, 0, PI); // Chin 22 | fill(0); 23 | ellipse(-14, -65, 8, 8); // Left eye 24 | ellipse(14, -65, 8, 8); // Right eye 25 | quad(0, -58, 4, -51, 0, -44, -4, -51); // Beak 26 | pop(); 27 | } -------------------------------------------------------------------------------- /09_Functions/Ex_09_06.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | for (var x = 35; x < width + 70; x += 70) { 8 | owl(x, 110); 9 | } 10 | } 11 | 12 | function owl(x, y) { 13 | push(); 14 | translate(x, y); 15 | stroke(0); 16 | strokeWeight(70); 17 | line(0, -35, 0, -65); // Body 18 | noStroke(); 19 | fill(255); 20 | ellipse(-17.5, -65, 35, 35); // Left eye dome 21 | ellipse(17.5, -65, 35, 35); // Right eye dome 22 | arc(0, -65, 70, 70, 0, PI); // Chin 23 | fill(0); 24 | ellipse(-14, -65, 8, 8); // Left eye 25 | ellipse(14, -65, 8, 8); // Right eye 26 | quad(0, -58, 4, -51, 0, -44, -4, -51); // Beak 27 | pop(); 28 | } -------------------------------------------------------------------------------- /09_Functions/Ex_09_07.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(480, 120); 3 | } 4 | 5 | function draw() { 6 | background(204); 7 | randomSeed(0); 8 | for (var i = 35; i < width + 40; i += 40) { 9 | var gray = int(random(0, 102)); 10 | var scalar = random(0.25, 1.0); 11 | owl(i, 110, gray, scalar); 12 | } 13 | } 14 | 15 | function owl(x, y, g, s) { 16 | push(); 17 | translate(x, y); 18 | scale(s); // Set the createCanvas 19 | stroke(g); // Set the gray value 20 | strokeWeight(70); 21 | line(0, -35, 0, -65); // Body 22 | noStroke(); 23 | fill(255-g); 24 | ellipse(-17.5, -65, 35, 35); // Left eye dome 25 | ellipse(17.5, -65, 35, 35); // Right eye dome 26 | arc(0, -65, 70, 70, 0, PI); // Chin 27 | fill(g); 28 | ellipse(-14, -65, 8, 8); // Left eye 29 | ellipse(14, -65, 8, 8); // Right eye 30 | quad(0, -58, 4, -51, 0, -44, -4, -51); // Beak 31 | pop(); 32 | } -------------------------------------------------------------------------------- /09_Functions/Ex_09_08.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | var yourWeight = 132; 3 | var marsWeight = calculateMars(yourWeight); 4 | print(marsWeight); 5 | } 6 | 7 | function calculateMars(w) { 8 | var newWeight = w * 0.38; 9 | return newWeight; 10 | } -------------------------------------------------------------------------------- /10_Objects/Ex_10_01.js: -------------------------------------------------------------------------------- 1 | var bug; 2 | 3 | function setup() { 4 | createCanvas(480, 120); 5 | background(204); 6 | // Create object and pass in parameters 7 | bug = new JitterBug(width/2, height/2, 20); 8 | } 9 | 10 | function draw() { 11 | bug.move(); 12 | bug.display(); 13 | } 14 | 15 | function JitterBug(tempX, tempY, tempDiameter) { 16 | this.x = tempX; 17 | this.y = tempY; 18 | this.diameter = tempDiameter; 19 | this.speed = 2.5; 20 | 21 | this.move = function() { 22 | this.x += random(-this.speed, this.speed); 23 | this.y += random(-this.speed, this.speed); 24 | } 25 | 26 | this.display = function() { 27 | ellipse(this.x, this.y, this.diameter, this.diameter); 28 | } 29 | } -------------------------------------------------------------------------------- /10_Objects/Ex_10_02.js: -------------------------------------------------------------------------------- 1 | var jit; 2 | var bug; 3 | 4 | function setup() { 5 | createCanvas(480, 120); 6 | background(204); 7 | jit = new JitterBug(width * 0.33, height/2, 50); 8 | bug = new JitterBug(width * 0.66, height/2, 10); 9 | } 10 | 11 | function draw() { 12 | jit.move(); 13 | jit.display(); 14 | bug.move(); 15 | bug.display(); 16 | } 17 | 18 | 19 | function JitterBug(tempX, tempY, tempDiameter) { 20 | this.x = tempX; 21 | this.y = tempY; 22 | this.diameter = tempDiameter; 23 | this.speed = 2.5; 24 | 25 | this.move = function() { 26 | this.x += random(-this.speed, this.speed); 27 | this.y += random(-this.speed, this.speed); 28 | } 29 | 30 | this.display = function() { 31 | ellipse(this.x, this.y, this.diameter, this.diameter); 32 | } 33 | } -------------------------------------------------------------------------------- /11_Arrays/Ex_11_01.js: -------------------------------------------------------------------------------- 1 | var x1 = -20; 2 | var x2 = 20; 3 | 4 | function setup() { 5 | createCanvas(240, 120); 6 | noStroke(); 7 | } 8 | 9 | function draw() { 10 | background(0); 11 | x1 += 0.5; 12 | x2 += 0.5; 13 | arc(x1, 30, 40, 40, 0.52, 5.76); 14 | arc(x2, 90, 40, 40, 0.52, 5.76); 15 | } -------------------------------------------------------------------------------- /11_Arrays/Ex_11_02.js: -------------------------------------------------------------------------------- 1 | var x1 = -10; 2 | var x2 = 10; 3 | var x3 = 35; 4 | var x4 = 18; 5 | var x5 = 30; 6 | 7 | function setup() { 8 | createCanvas(240, 120); 9 | noStroke(); 10 | } 11 | 12 | function draw() { 13 | background(0); 14 | x1 += 0.5; 15 | x2 += 0.5; 16 | x3 += 0.5; 17 | x4 += 0.5; 18 | x5 += 0.5; 19 | arc(x1, 20, 20, 20, 0.52, 5.76); 20 | arc(x2, 40, 20, 20, 0.52, 5.76); 21 | arc(x3, 60, 20, 20, 0.52, 5.76); 22 | arc(x4, 80, 20, 20, 0.52, 5.76); 23 | arc(x5, 100, 20, 20, 0.52, 5.76); 24 | } -------------------------------------------------------------------------------- /11_Arrays/Ex_11_03.js: -------------------------------------------------------------------------------- 1 | var x = []; 2 | 3 | function setup() { 4 | createCanvas(240, 120); 5 | noStroke(); 6 | fill(255, 200); 7 | for (var i = 0; i < 3000; i++) { 8 | x[i] = random(-1000, 200); 9 | } 10 | } 11 | 12 | function draw() { 13 | background(0); 14 | for (var i = 0; i < x.length; i++) { 15 | x[i] += 0.5; 16 | var y = i * 0.4; 17 | arc(x[i], y, 12, 12, 0.52, 5.76); 18 | } 19 | } -------------------------------------------------------------------------------- /11_Arrays/Ex_11_04.js: -------------------------------------------------------------------------------- 1 | var x = []; // Declare the array 2 | 3 | function setup() { 4 | createCanvas(200, 200); 5 | x[0] = 12; // Assign the first value 6 | x[1] = 2; // Assign the second value 7 | } -------------------------------------------------------------------------------- /11_Arrays/Ex_11_05.js: -------------------------------------------------------------------------------- 1 | var x = [12, 2]; // Declare and assign 2 | 3 | function setup() { 4 | createCanvas(200, 200); 5 | } -------------------------------------------------------------------------------- /11_Arrays/Ex_11_06.js: -------------------------------------------------------------------------------- 1 | var x = [-20, 20]; 2 | 3 | function setup() { 4 | createCanvas(240, 120); 5 | noStroke(); 6 | } 7 | 8 | function draw() { 9 | background(0); 10 | x[0] += 0.5; // Increase the first element 11 | x[1] += 0.5; // Increase the second element 12 | arc(x[0], 30, 40, 40, 0.52, 5.76); 13 | arc(x[1], 90, 40, 40, 0.52, 5.76); 14 | } -------------------------------------------------------------------------------- /11_Arrays/Ex_11_07.js: -------------------------------------------------------------------------------- 1 | var gray = []; 2 | 3 | function setup() { 4 | createCanvas(240, 120); 5 | for (var i = 0; i < width; i++) { 6 | gray[i] = random(0, 255); 7 | } 8 | } 9 | 10 | function draw() { 11 | for (var i = 0; i < gray.length; i++) { 12 | stroke(gray[i]); 13 | line(i, 0, i, height); 14 | } 15 | } -------------------------------------------------------------------------------- /11_Arrays/Ex_11_08.js: -------------------------------------------------------------------------------- 1 | var num = 60; 2 | var x = []; 3 | var y = []; 4 | 5 | function setup() { 6 | createCanvas(240, 120); 7 | noStroke(); 8 | 9 | for (var i = 0; i < num; i++) { 10 | x[i] = 0; 11 | y[i] = 0; 12 | } 13 | } 14 | 15 | function draw() { 16 | background(0); 17 | // Copy array values from back to front 18 | for (var i = x.length-1; i > 0; i--) { 19 | x[i] = x[i-1]; 20 | y[i] = y[i-1]; 21 | } 22 | x[0] = mouseX; // Set the first element 23 | y[0] = mouseY; // Set the first element 24 | for (var i = 0; i < x.length; i++) { 25 | fill(i * 4); 26 | ellipse(x[i], y[i], 40, 40); 27 | } 28 | } -------------------------------------------------------------------------------- /11_Arrays/Ex_11_09.js: -------------------------------------------------------------------------------- 1 | var bugs = []; 2 | 3 | function setup() { 4 | createCanvas(240, 120); 5 | for (var i = 0; i < 33; i++) { 6 | var x = random(width); 7 | var y = random(height); 8 | var r = i + 2; 9 | bugs[i] = new JitterBug(x, y, r); 10 | } 11 | background(204); 12 | } 13 | 14 | function draw() { 15 | for (var i = 0; i < bugs.length; i++) { 16 | bugs[i].move(); 17 | bugs[i].display(); 18 | } 19 | } 20 | 21 | function JitterBug(tempX, tempY, tempDiameter) { 22 | this.x = tempX; 23 | this.y = tempY; 24 | this.diameter = tempDiameter; 25 | this.speed = 2.5; 26 | 27 | this.move = function() { 28 | this.x += random(-this.speed, this.speed); 29 | this.y += random(-this.speed, this.speed); 30 | } 31 | 32 | this.display = function() { 33 | ellipse(this.x, this.y, this.diameter, this.diameter); 34 | } 35 | } -------------------------------------------------------------------------------- /11_Arrays/Ex_11_10.js: -------------------------------------------------------------------------------- 1 | var numFrames = 12; // The number of frames 2 | var images = []; // Make the array 3 | var currentFrame = 0; 4 | 5 | function preload() { 6 | for (var i = 0; i < numFrames; i++) { 7 | var imageName = "frame-" + nf(i, 4) + ".png"; 8 | images[i] = loadImage(imageName); // Load each image 9 | } 10 | } 11 | 12 | function setup() { 13 | createCanvas(240, 120); 14 | frameRate(24); 15 | } 16 | 17 | function draw() { 18 | image(images[currentFrame], 0, 0); 19 | currentFrame++; // Next frame 20 | if (currentFrame == images.length) { 21 | currentFrame = 0; // Return to first frame 22 | } 23 | } -------------------------------------------------------------------------------- /12_Data/Ex_12_01.js: -------------------------------------------------------------------------------- 1 | var stats; 2 | 3 | function preload() { 4 | stats = loadTable("ortiz.csv"); 5 | } 6 | 7 | function setup() { 8 | for (var i = 0; i < stats.getRowCount(); i++) { 9 | // Gets the value from row i, column 0 in the file 10 | var year = stats.get(i, 0); 11 | // Gets the value from row i, column 1 12 | var homeRuns = stats.get(i, 1); 13 | var rbi = stats.get(i, 2); 14 | var average = stats.get(i, 3); 15 | print(year, homeRuns, rbi, average); 16 | } 17 | } -------------------------------------------------------------------------------- /12_Data/Ex_12_02.js: -------------------------------------------------------------------------------- 1 | var stats; 2 | var homeRuns = []; 3 | 4 | function preload() { 5 | stats = loadTable("ortiz.csv"); 6 | } 7 | 8 | function setup() { 9 | createCanvas(480, 120); 10 | var rowCount = stats.getRowCount(); 11 | homeRuns = []; 12 | for (var i = 0; i < rowCount; i++) { 13 | homeRuns[i] = stats.getNum(i, 1); 14 | } 15 | } 16 | 17 | function draw() { 18 | background(204); 19 | // Draw background grid for data 20 | stroke(153); 21 | line(20, 100, 20, 20); 22 | line(20, 100, 460, 100); 23 | for (var i = 0; i < homeRuns.length; i++) { 24 | var x = map(i, 0, homeRuns.length-1, 20, 460); 25 | line(x, 20, x, 100); 26 | } 27 | // Draw lines based on home run data 28 | noFill(); 29 | stroke(0); 30 | beginShape(); 31 | for (var i = 0; i < homeRuns.length; i++) { 32 | var x = map(i, 0, homeRuns.length-1, 20, 460); 33 | var y = map(homeRuns[i], 0, 60, 100, 20); 34 | vertex(x, y); 35 | } 36 | endShape(); 37 | } -------------------------------------------------------------------------------- /12_Data/Ex_12_03.js: -------------------------------------------------------------------------------- 1 | var cities; 2 | 3 | function preload() { 4 | cities = loadTable("cities.csv", "header"); 5 | } 6 | 7 | function setup() { 8 | createCanvas(480, 240); 9 | fill(255, 150); 10 | noStroke(); 11 | } 12 | 13 | function draw() { 14 | background(0); 15 | var xoffset = map(mouseX, 0, width, -width*3, -width); 16 | translate(xoffset, -600); 17 | scale(10); 18 | for (var i = 0; i < cities.getRowCount(); i++) { 19 | var latitude = cities.getNum(i, "lat"); 20 | var longitude = cities.getNum(i, "lng"); 21 | setXY(latitude, longitude); 22 | } 23 | } 24 | 25 | function setXY(lat, lng) { 26 | var x = map(lng, -180, 180, 0, width); 27 | var y = map(lat, 90, -90, 0, height); 28 | ellipse(x, y, 0.25, 0.25); 29 | } 30 | -------------------------------------------------------------------------------- /12_Data/Ex_12_04.js: -------------------------------------------------------------------------------- 1 | var film; 2 | 3 | function preload() { 4 | film = loadJSON("film.json"); 5 | } 6 | 7 | function setup() { 8 | var title = film.title; 9 | var dir = film.director; 10 | var year = film.year; 11 | var rating = film.rating; 12 | print(title + " by " + dir + ", " + year + ". Rating: " + rating); 13 | } -------------------------------------------------------------------------------- /12_Data/Ex_12_05.js: -------------------------------------------------------------------------------- 1 | var films = []; 2 | var filmData; 3 | 4 | function preload() { 5 | filmData = loadJSON("films.json"); 6 | } 7 | 8 | function setup() { 9 | createCanvas(480, 120); 10 | for (var i = 0; i < filmData.length; i++) { 11 | var o = filmData[i]; 12 | films[i] = new Film(o); 13 | } 14 | noStroke(); 15 | } 16 | 17 | function draw() { 18 | background(0); 19 | for (var i = 0; i < films.length; i++) { 20 | var x = i*32 + 32; 21 | films[i].display(x, 105); 22 | } 23 | } 24 | 25 | function Film(f) { 26 | this.title = f.title; 27 | this.director = f.director; 28 | this.year = f.year; 29 | this.rating = f.rating; 30 | 31 | this.display = function(x, y) { 32 | var ratingGray = map(this.rating, 6.5, 8.1, 102, 255); 33 | push(); 34 | translate(x, y); 35 | rotate(-QUARTER_PI); 36 | fill(ratingGray); 37 | text(this.title, 0, 0); 38 | pop(); 39 | } 40 | } -------------------------------------------------------------------------------- /12_Data/Ex_12_06.js: -------------------------------------------------------------------------------- 1 | var weatherData; 2 | 3 | function preload() { 4 | weatherData = loadJSON("test.json"); 5 | } 6 | 7 | function setup() { 8 | var temp = getTemp(weatherData); 9 | print(temp); 10 | } 11 | 12 | function getTemp(data) { 13 | var list = data.list; 14 | var item = list[0]; 15 | var main = item.main; 16 | var temp = main.temp; 17 | return temp; 18 | } -------------------------------------------------------------------------------- /12_Data/Ex_12_07.js: -------------------------------------------------------------------------------- 1 | var weatherData; 2 | 3 | function preload() { 4 | weatherData = loadJSON("cincinnati.json"); 5 | } 6 | 7 | function setup() { 8 | var temp = getTemp(weatherData); 9 | print(temp); 10 | } 11 | 12 | function getTemp(data) { 13 | return data.list[0].main.temp; 14 | } -------------------------------------------------------------------------------- /13_Extend/Ex_13_01.js: -------------------------------------------------------------------------------- 1 | var blip; 2 | 3 | var radius = 120; 4 | var x = 0; 5 | var speed = 1.0; 6 | var direction = 1; 7 | 8 | function preload() { 9 | blip = loadSound('blip.wav'); 10 | } 11 | 12 | function setup() { 13 | createCanvas(440, 440); 14 | ellipseMode(RADIUS); 15 | x = width/2; // Start in the center 16 | } 17 | 18 | function draw() { 19 | background(0); 20 | x += speed * direction; 21 | if ((x > width-radius) || (x < radius)) { 22 | direction = -direction; // Flip direction 23 | blip.play(); 24 | } 25 | if (direction == 1) { 26 | arc(x, 220, radius, radius, 0.52, 5.76); // Face right 27 | } else { 28 | arc(x, 220, radius, radius, 3.67, 8.9); // Face left 29 | } 30 | } -------------------------------------------------------------------------------- /13_Extend/Ex_13_02.js: -------------------------------------------------------------------------------- 1 | var mic; 2 | var amp; 3 | 4 | var scale = 1.0; 5 | 6 | function setup() { 7 | createCanvas(440, 440); 8 | background(0); 9 | // Create an audio input and start it 10 | mic = new p5.AudioIn(); 11 | mic.start(); 12 | // Create a new amplitude analyzer and patch into input 13 | amp = new p5.Amplitude(); 14 | amp.setInput(mic); 15 | } 16 | 17 | 18 | function draw() { 19 | // Draw a background that fades to black 20 | noStroke(); 21 | fill(0, 10); 22 | rect(0, 0, width, height); 23 | // The analyze() method returns values between 0 and 1,  24 | // so map() is used to convert the values to larger numbers 25 | scale = map(amp.getLevel(), 0, 1.0, 10, width); 26 | // Draw the circle based on the volume 27 | fill(255); 28 | ellipse(width/2, height/2, scale, scale); 29 | } -------------------------------------------------------------------------------- /13_Extend/Ex_13_03.js: -------------------------------------------------------------------------------- 1 | var sine; 2 | 3 | var freq = 400; 4 | 5 | function setup() { 6 | createCanvas(440, 440); 7 | // Create and start the sine oscillator 8 | sine = new p5.SinOsc(); 9 | sine.start(); 10 | } 11 | 12 | function draw() { 13 | background(0); 14 | // Map the mouseX value from 20Hz to 440Hz for frequency 15 | var hertz = map(mouseX, 0, width, 20.0, 440.0); 16 | sine.freq(hertz); 17 | // Draw a wave to visualize the frequency of the sound 18 | stroke(204); 19 | for (var x = 0; x < width; x++) { 20 | var angle = map(x, 0, width, 0, TWO_PI * hertz); 21 | var sinValue = sin(angle) * 120; 22 | line(x, 0, x, height/2 + sinValue); 23 | } 24 | } -------------------------------------------------------------------------------- /13_Extend/Ex_13_04.js: -------------------------------------------------------------------------------- 1 | var capture; 2 | 3 | function setup() { 4 | createCanvas(480, 120); 5 | capture = createCapture(); 6 | capture.hide(); 7 | } 8 | 9 | function draw() { 10 | image(capture, 0, 0, width, width*capture.height/capture.width); 11 | filter(INVERT); 12 | } -------------------------------------------------------------------------------- /13_Extend/Ex_13_05.js: -------------------------------------------------------------------------------- 1 | var slider; 2 | 3 | function setup() { 4 | createCanvas(480, 120); 5 | slider = createSlider(0, 255, 100); 6 | slider.position(20, 20); 7 | } 8 | 9 | function draw() { 10 | var gray = slider.value(); 11 | background(gray); 12 | } -------------------------------------------------------------------------------- /13_Extend/Ex_13_06.js: -------------------------------------------------------------------------------- 1 | var button; 2 | var input; 3 | 4 | function setup() { 5 | createCanvas(480, 120); 6 | input = createInput(); 7 | input.position(20, 30); 8 | button = createButton('submit'); 9 | button.position(160, 30); 10 | button.mousePressed(drawName); 11 | 12 | background(100); 13 | noStroke(); 14 | text('Enter your name.', 20, 20); 15 | } 16 | 17 | function drawName() { 18 | background(100); 19 | textSize(30); 20 | var name = input.value(); 21 | for (var i=0; i<30; i++) { 22 | fill(random(255)); 23 | text(name, random(width), random(height)); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gswp5.js-code 2 | gswp5.js code examples 3 | -------------------------------------------------------------------------------- /Robots/Robot01_Draw.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(720, 480); 3 | strokeWeight(2); 4 | ellipseMode(RADIUS); 5 | } 6 | 7 | function draw() { 8 | background(204); 9 | 10 | // Neck 11 | stroke(102); // Set stroke to gray 12 | line(266, 257, 266, 162); // Left 13 | line(276, 257, 276, 162); // Middle 14 | line(286, 257, 286, 162); // Right 15 | 16 | // Antennae 17 | line(276, 155, 246, 112); // Small 18 | line(276, 155, 306, 56); // Tall 19 | line(276, 155, 342, 170); // Medium 20 | 21 | // Body 22 | noStroke(); // Disable stroke 23 | fill(102); // Set fill to gray 24 | ellipse(264, 377, 33, 33); // Antigravity orb 25 | fill(0); // Set fill to black 26 | rect(219, 257, 90, 120); // Main body 27 | fill(102); // Set fill to gray 28 | rect(219, 274, 90, 6); // Gray stripe 29 | 30 | // Head 31 | fill(0); // Set fill to black 32 | ellipse(276, 155, 45, 45); // Head 33 | fill(255); // Set fill to white 34 | ellipse(288, 150, 14, 14); // Large eye 35 | fill(0); // Set fill to black 36 | ellipse(288, 150, 3, 3); // Pupil 37 | fill(153); // Set fill to light gray 38 | ellipse(263, 148, 5, 5); // Small eye 1 39 | ellipse(296, 130, 4, 4); // Small eye 2 40 | ellipse(305, 162, 3, 3); // Small eye 3 41 | } -------------------------------------------------------------------------------- /Robots/Robot02_Variables.js: -------------------------------------------------------------------------------- 1 | var x = 60; // X-coordinate 2 | var y = 420; // Y-coordinate 3 | var bodyHeight = 110; // Body Height 4 | var neckHeight = 140; // Neck Height 5 | var radius = 45; 6 | var ny = y - bodyHeight - neckHeight - radius; // Neck Y 7 | 8 | function setup() { 9 | createCanvas(170, 480); 10 | strokeWeight(2); 11 | ellipseMode(RADIUS); 12 | } 13 | 14 | function draw() { 15 | background(204); 16 | 17 | // Neck 18 | stroke(102); 19 | line(x+2, y-bodyHeight, x+2, ny); 20 | line(x+12, y-bodyHeight, x+12, ny); 21 | line(x+22, y-bodyHeight, x+22, ny); 22 | 23 | // Antennae 24 | line(x+12, ny, x-18, ny-43); 25 | line(x+12, ny, x+42, ny-99); 26 | line(x+12, ny, x+78, ny+15); 27 | 28 | // Body 29 | noStroke(); 30 | fill(102); 31 | ellipse(x, y-33, 33, 33); 32 | fill(0); 33 | rect(x-45, y-bodyHeight, 90, bodyHeight-33); 34 | fill(102); 35 | rect(x-45, y-bodyHeight+17, 90, 6); 36 | 37 | // Head 38 | fill(0); 39 | ellipse(x+12, ny, radius, radius); 40 | fill(255); 41 | ellipse(x+24, ny-6, 14, 14); 42 | fill(0); 43 | ellipse(x+24, ny-6, 3, 3); 44 | fill(153); 45 | ellipse(x, ny-8, 5, 5); 46 | ellipse(x+30, ny-26, 4, 4); 47 | ellipse(x+41, ny+6, 3, 3); 48 | } -------------------------------------------------------------------------------- /Robots/Robot03_Response.js: -------------------------------------------------------------------------------- 1 | var x = 60; // X-coordinate 2 | var y = 440; // Y-coordinate 3 | var radius = 45; // Head Radius 4 | var bodyHeight = 160; // Body Height 5 | var neckHeight = 70; // Neck Height 6 | 7 | var easing = 0.04; 8 | 9 | function setup() { 10 | createCanvas(360, 480); 11 | strokeWeight(2); 12 | ellipseMode(RADIUS); 13 | } 14 | 15 | function draw() { 16 | 17 | var targetX = mouseX; 18 | x += (targetX - x) * easing; 19 | 20 | if (mouseIsPressed) { 21 | neckHeight = 16; 22 | bodyHeight = 90; 23 | } else { 24 | neckHeight = 70; 25 | bodyHeight = 160; 26 | } 27 | 28 | var neckY = y - bodyHeight - neckHeight - radius; 29 | 30 | background(204); 31 | 32 | // Neck 33 | stroke(102); 34 | line(x+12, y-bodyHeight, x+12, neckY); 35 | 36 | // Antennae 37 | line(x+12, neckY, x-18, neckY-43); 38 | line(x+12, neckY, x+42, neckY-99); 39 | line(x+12, neckY, x+78, neckY+15); 40 | 41 | // Body 42 | noStroke(); 43 | fill(102); 44 | ellipse(x, y-33, 33, 33); 45 | fill(0); 46 | rect(x-45, y-bodyHeight, 90, bodyHeight-33); 47 | 48 | // Head 49 | fill(0); 50 | ellipse(x+12, neckY, radius, radius); 51 | fill(255); 52 | ellipse(x+24, neckY-6, 14, 14); 53 | fill(0); 54 | ellipse(x+24, neckY-6, 3, 3); 55 | } -------------------------------------------------------------------------------- /Robots/Robot04_Transform.js: -------------------------------------------------------------------------------- 1 | var x = 60; // X-coordinate 2 | var y = 440; // Y-coordinate 3 | var radius = 45; // Head Radius 4 | var bodyHeight = 180; // Body Height 5 | var neckHeight = 40; // Neck Height 6 | 7 | var easing = 0.04; 8 | 9 | function setup() { 10 | createCanvas(360, 480); 11 | strokeWeight(2); 12 | ellipseMode(RADIUS); 13 | } 14 | 15 | function draw() { 16 | 17 | var neckY = -1 * (bodyHeight + neckHeight + radius); 18 | 19 | background(204); 20 | 21 | translate(mouseX, y); // Move all to (mouseX, y) 22 | 23 | if (mouseIsPressed) { 24 | scale(1.0); 25 | } else { 26 | scale(0.6); // 60% size when mouse is pressed 27 | } 28 | 29 | // Body 30 | noStroke(); 31 | fill(102); 32 | ellipse(0, -33, 33, 33); 33 | fill(0); 34 | rect(-45, -bodyHeight, 90, bodyHeight-33); 35 | 36 | // Neck 37 | stroke(102); 38 | line(12, -bodyHeight, 12, neckY); 39 | 40 | // Hair 41 | push(); 42 | translate(12, neckY); 43 | var angle = -PI/30.0; 44 | for (var i = 0; i <= 30; i++) { 45 | line(80, 0, 0, 0); 46 | rotate(angle); 47 | } 48 | pop(); 49 | 50 | // Head 51 | noStroke(); 52 | fill(0); 53 | ellipse(12, neckY, radius, radius); 54 | fill(255); 55 | ellipse(24, neckY-6, 14, 14); 56 | fill(0); 57 | ellipse(24, neckY-6, 3, 3); 58 | 59 | } -------------------------------------------------------------------------------- /Robots/Robot05_Media.js: -------------------------------------------------------------------------------- 1 | var bot1; 2 | var bot2; 3 | var bot3; 4 | var landscape; 5 | 6 | var easing = 0.05; 7 | var offset = 0; 8 | 9 | // Preload the images 10 | function preload() { 11 | bot1 = loadImage("robot1.svg"); 12 | bot2 = loadImage("robot2.svg"); 13 | bot3 = loadImage("robot3.svg"); 14 | landscape = loadImage("alpine.png"); 15 | } 16 | 17 | function setup() { 18 | createCanvas(720, 480); 19 | } 20 | 21 | function draw() { 22 | // Set the background to the "landscape" image; this image 23 | // must be the same width and height as the program 24 | background(landscape); 25 | 26 | // Set the left/right offset and apply easing to make 27 | // the transition smooth 28 | var targetOffset = map(mouseY, 0, height, -40, 40); 29 | offset += (targetOffset - offset) * easing; 30 | 31 | // Draw the left robot 32 | image(bot1, 85 + offset, 65); 33 | 34 | // Draw the right robot smaller and give it a smaller offset 35 | var smallerOffset = offset * 0.7; 36 | image(bot2, 510 + smallerOffset, 140, 78, 248); 37 | 38 | // Draw the smallest robot, give it a smaller offset 39 | smallerOffset *= -0.5; 40 | image(bot3, 410 + smallerOffset, 225, 39, 124); 41 | } -------------------------------------------------------------------------------- /Robots/Robot06_Motion.js: -------------------------------------------------------------------------------- 1 | var x = 180; // X-coordinate 2 | var y = 400; // Y-coordinate 3 | var bodyHeight = 153; // Body Height 4 | var neckHeight = 56; // Neck Height 5 | var radius = 45; // Head Radius 6 | var angle = 0.0; // Angle for motion 7 | 8 | function setup() { 9 | createCanvas(360, 480); 10 | ellipseMode(RADIUS); 11 | background(204); 12 | } 13 | 14 | function draw() { 15 | // Change position by a small random amount 16 | x += random(-4, 4); 17 | y += random(-1, 1); 18 | 19 | // Change height of neck 20 | neckHeight = 80 + sin(angle) * 30; 21 | angle += 0.05; 22 | 23 | // Adjust the height of the head 24 | var ny = y - bodyHeight - neckHeight - radius; 25 | 26 | // Neck 27 | stroke(102); 28 | line(x+2, y-bodyHeight, x+2, ny); 29 | line(x+12, y-bodyHeight, x+12, ny); 30 | line(x+22, y-bodyHeight, x+22, ny); 31 | 32 | // Antennae 33 | line(x+12, ny, x-18, ny-43); 34 | line(x+12, ny, x+42, ny-99); 35 | line(x+12, ny, x+78, ny+15); 36 | 37 | // Body 38 | noStroke(); 39 | fill(102); 40 | ellipse(x, y-33, 33, 33); 41 | fill(0); 42 | rect(x-45, y-bodyHeight, 90, bodyHeight-33); 43 | fill(102); 44 | rect(x-45, y-bodyHeight+17, 90, 6); 45 | 46 | // Head 47 | fill(0); 48 | ellipse(x+12, ny, radius, radius); 49 | fill(255); 50 | ellipse(x+24, ny-6, 14, 14); 51 | fill(0); 52 | ellipse(x+24, ny-6, 3, 3); 53 | } -------------------------------------------------------------------------------- /Robots/Robot07_Functions.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(720, 480); 3 | strokeWeight(2); 4 | ellipseMode(RADIUS); 5 | } 6 | 7 | function draw() { 8 | background(204); 9 | drawRobot(120, 420, 110, 140); 10 | drawRobot(270, 460, 260, 95); 11 | drawRobot(420, 310, 80, 10); 12 | drawRobot(570, 390, 180, 40); 13 | } 14 | 15 | function drawRobot(x, y, bodyHeight, neckHeight) { 16 | 17 | var radius = 45; 18 | var ny = y - bodyHeight - neckHeight - radius; 19 | 20 | // Neck 21 | stroke(102); 22 | line(x+2, y-bodyHeight, x+2, ny); 23 | line(x+12, y-bodyHeight, x+12, ny); 24 | line(x+22, y-bodyHeight, x+22, ny); 25 | 26 | // Antennae 27 | line(x+12, ny, x-18, ny-43); 28 | line(x+12, ny, x+42, ny-99); 29 | line(x+12, ny, x+78, ny+15); 30 | 31 | // Body 32 | noStroke(); 33 | fill(102); 34 | ellipse(x, y-33, 33, 33); 35 | fill(0); 36 | rect(x-45, y-bodyHeight, 90, bodyHeight-33); 37 | fill(102); 38 | rect(x-45, y-bodyHeight+17, 90, 6); 39 | 40 | // Head 41 | fill(0); 42 | ellipse(x+12, ny, radius, radius); 43 | fill(255); 44 | ellipse(x+24, ny-6, 14, 14); 45 | fill(0); 46 | ellipse(x+24, ny-6, 3, 3); 47 | fill(153); 48 | ellipse(x, ny-8, 5, 5); 49 | ellipse(x+30, ny-26, 4, 4); 50 | ellipse(x+41, ny+6, 3, 3); 51 | } -------------------------------------------------------------------------------- /Robots/Robot08_Objects.js: -------------------------------------------------------------------------------- 1 | var img1; 2 | var img2; 3 | 4 | var bot1; 5 | var bot2; 6 | 7 | function preload() { 8 | img1 = loadImage("robot1.svg"); 9 | img2 = loadImage("robot2.svg"); 10 | } 11 | 12 | function setup() { 13 | createCanvas(720, 480); 14 | bot1 = new Robot(img1, 90, 80); 15 | bot2 = new Robot(img2, 440, 30); 16 | } 17 | 18 | function draw() { 19 | background(204); 20 | 21 | // Update and display first robot 22 | bot1.update(); 23 | bot1.display(); 24 | 25 | // Update and display second robot 26 | bot2.update(); 27 | bot2.display(); 28 | } 29 | 30 | function Robot(img, tempX, tempY) { 31 | // Set initial values for properties 32 | this.xpos = tempX; 33 | this.ypos = tempY; 34 | this.angle = random(0, TWO_PI); 35 | this.botImage = img; 36 | this.yoffset = 0.0; 37 | 38 | // Update the properties 39 | this.update = function() { 40 | this.angle += 0.05; 41 | this.yoffset = sin(this.angle) * 20; 42 | } 43 | 44 | // Draw the robot to the screen 45 | this.display = function() { 46 | image(this.botImage, this.xpos, this.ypos + this.yoffset); 47 | } 48 | } -------------------------------------------------------------------------------- /Robots/Robot09_Arrays.js: -------------------------------------------------------------------------------- 1 | var robotImage; 2 | var bots = []; // Declare array to hold Robot objects 3 | 4 | function preload() { 5 | robotImage = loadImage("robot1.svg"); 6 | } 7 | 8 | function setup() { 9 | createCanvas(720, 480); 10 | 11 | var numRobots = 20; 12 | 13 | // Create each object 14 | for (var i = 0; i < numRobots; i++) { 15 | // Create a random x-coordinate 16 | var x = random(-40, width-40); 17 | // Assign the y-coordinate based on the order 18 | var y = map(i, 0, numRobots, -100, height-200); 19 | bots[i] = new Robot(robotImage, x, y); 20 | } 21 | } 22 | 23 | function draw() { 24 | background(204); 25 | // Update and display each bot in the array 26 | for (var i = 0; i < bots.length; i++) { 27 | bots[i].update(); 28 | bots[i].display(); 29 | } 30 | } 31 | 32 | function Robot(img, tempX, tempY) { 33 | // Set initial values for properties 34 | this.xpos = tempX; 35 | this.ypos = tempY; 36 | this.angle = random(0, TWO_PI); 37 | this.botImage = img; 38 | this.yoffset = 0.0; 39 | 40 | // Update the properties 41 | this.update = function() { 42 | this.angle += 0.05; 43 | this.yoffset = sin(this.angle) * 20; 44 | } 45 | 46 | // Draw the robot to the screen 47 | this.display = function() { 48 | image(this.botImage, this.xpos, this.ypos + this.yoffset); 49 | } 50 | } -------------------------------------------------------------------------------- /Robots/Robot10_Data_a.js: -------------------------------------------------------------------------------- 1 | var output; 2 | 3 | function setup() { 4 | createCanvas(720, 480); 5 | // Create the new file 6 | output = createWriter("botArmy.tsv"); 7 | // Write a header line with the column titles 8 | output.println("type\tx\ty"); 9 | for (var y = 0; y <= height; y += 60) { 10 | for (var x = 0; x <= width; x += 20) { 11 | var robotType = int(random(1, 4)); 12 | output.println(robotType + "\t" + x + "\t" + y); 13 | ellipse(x, y, 12, 12); 14 | } 15 | } 16 | output.close(); // Finish the file 17 | } -------------------------------------------------------------------------------- /Robots/Robot10_Data_b.js: -------------------------------------------------------------------------------- 1 | var robots; 2 | var bot1; 3 | var bot2; 4 | var bot3; 5 | 6 | function preload() { 7 | bot1 = loadImage("robot1.png"); 8 | bot2 = loadImage("robot2.png"); 9 | bot3 = loadImage("robot3.png"); 10 | robots = loadTable("botArmy.tsv", "header"); 11 | } 12 | 13 | function setup() { 14 | createCanvas(720, 480); 15 | imageMode(CENTER); 16 | for (var i = 0; i < robots.getRowCount(); i++) { 17 | var bot = robots.getNum(i, "type"); 18 | var x = robots.getNum(i, "x"); 19 | var y = robots.getNum(i, "y"); 20 | var sc = 0.15; 21 | if (bot == 1) { 22 | image(bot1, x, y, bot1.width*sc, bot1.height*sc); 23 | } else if (bot == 2) { 24 | image(bot2, x, y, bot2.width*sc, bot2.height*sc); 25 | } else { 26 | image(bot3, x, y, bot3.width*sc, bot3.height*sc); 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /Robots/Robot10_Data_c.js: -------------------------------------------------------------------------------- 1 | var numRobotTypes = 3; 2 | var images = []; 3 | var scaling = 0.15; 4 | var botArmy; 5 | 6 | function preload() { 7 | for (var i = 0; i < numRobotTypes; i++) { 8 | images[i] = loadImage("robot" + (i+1) + ".png"); 9 | } 10 | botArmy = loadTable("botArmy.tsv", "header"); 11 | } 12 | 13 | function setup() { 14 | createCanvas(720, 480); 15 | imageMode(CENTER); 16 | for (var i = 0; i < botArmy.getRowCount(); i++) { 17 | var robotType = botArmy.getNum(i, "type"); 18 | var x = botArmy.getNum(i, "x"); 19 | var y = botArmy.getNum(i, "y"); 20 | 21 | var bot = images[robotType - 1]; 22 | image(bot, x, y, bot.width*scaling, bot.height*scaling); 23 | } 24 | } -------------------------------------------------------------------------------- /Robots/robotArmy.tsv: -------------------------------------------------------------------------------- 1 | 3 0 0 2 | 1 20 0 3 | 2 40 0 4 | 1 60 0 5 | 3 80 0 -------------------------------------------------------------------------------- /media/AndaleMono-24.vlw: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/AndaleMono-24.vlw -------------------------------------------------------------------------------- /media/AndaleMono-36.vlw: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/AndaleMono-36.vlw -------------------------------------------------------------------------------- /media/capsule.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/capsule.jpg -------------------------------------------------------------------------------- /media/clouds.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/clouds.gif -------------------------------------------------------------------------------- /media/clouds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/clouds.png -------------------------------------------------------------------------------- /media/frame-0000.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/frame-0000.png -------------------------------------------------------------------------------- /media/frame-0001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/frame-0001.png -------------------------------------------------------------------------------- /media/frame-0002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/frame-0002.png -------------------------------------------------------------------------------- /media/frame-0003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/frame-0003.png -------------------------------------------------------------------------------- /media/frame-0004.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/frame-0004.png -------------------------------------------------------------------------------- /media/frame-0005.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/frame-0005.png -------------------------------------------------------------------------------- /media/frame-0006.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/frame-0006.png -------------------------------------------------------------------------------- /media/frame-0007.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/frame-0007.png -------------------------------------------------------------------------------- /media/frame-0008.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/frame-0008.png -------------------------------------------------------------------------------- /media/frame-0009.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/frame-0009.png -------------------------------------------------------------------------------- /media/frame-0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/frame-0010.png -------------------------------------------------------------------------------- /media/frame-0011.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/frame-0011.png -------------------------------------------------------------------------------- /media/lunar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/gswp5.js-code/f39cccc3777c9e5aaeb6aa4bb9407ff27e8a483e/media/lunar.jpg -------------------------------------------------------------------------------- /media/robot1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 20 | 29 | 38 | 47 | 56 | 65 | 74 | 83 | 92 | 93 | 94 | 103 | 104 | 113 | 114 | 115 | 124 | 133 | 142 | 151 | 160 | 169 | 178 | 187 | 196 | 205 | 206 | 207 | 216 | 225 | 234 | 243 | 252 | 261 | 270 | 279 | 288 | 297 | 298 | 299 | 308 | 317 | 326 | 335 | 344 | 353 | 362 | 371 | 380 | 389 | 390 | 391 | 400 | 409 | 418 | 427 | 436 | 445 | 454 | 463 | 472 | 481 | 482 | 483 | 492 | 501 | 510 | 519 | 528 | 537 | 546 | 555 | 564 | 573 | 574 | 575 | 584 | 593 | 602 | 611 | 620 | 629 | 638 | 647 | 656 | 665 | 666 | 667 | 676 | 685 | 694 | 703 | 712 | 721 | 730 | 739 | 748 | 757 | 758 | 759 | 768 | 777 | 786 | 795 | 804 | 813 | 822 | 831 | 840 | 849 | 850 | 851 | 852 | 861 | 870 | 879 | 888 | 897 | 906 | 915 | 924 | 933 | 942 | 943 | 944 | 945 | 946 | 947 | 948 | 949 | 950 | 951 | 953 | 954 | 955 | 956 | 957 | 958 | 959 | 960 | 961 | 962 | 963 | 964 | 966 | 968 | 970 | 972 | 974 | 976 | 978 | 980 | 982 | 984 | 985 | 986 | 987 | 989 | 991 | 993 | 994 | 996 | 997 | 999 | 1001 | 1003 | 1004 | 1005 | 1007 | 1009 | 1010 | 1011 | 1012 | 1013 | 1014 | 1015 | 1016 | 1017 | 1018 | 1019 | 1020 | 1021 | 1022 | 1023 | 1024 | 1025 | 1026 | 1027 | 1028 | 1029 | 1030 | 1031 | 1032 | 1033 | 1034 | --------------------------------------------------------------------------------