Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Spin-off of "Contest: Anatomy"
ID	5463569817845760
Created	11 months ago, 1706935833383
Updated	10 months ago, 1709092154321
Code	/ Contest: Anatomy I have completed 100% of Khan Academy's 'Intro to JS' and have been programming for 39 months. I would prefer to be placed in the [Intermediate] bracket TODO: - Fill out statements above - Save your entry as a spin-off of this program - Have fun! / smooth(); size(600, 600, P2D); var scene = "home";// current scene to display var quiz;// pre-defining var particles = [];// array to hold mouse particles // some setup rectMode(CENTER); imageMode(CENTER); textAlign(CENTER, CENTER); textFont(createFont('Trebuchet MS'));// changing font noStroke();// remove outline var clicked;// clicking event var mouseIsOver;// mouse over canvas event // mouse to rect collision function mouseRect(x, y, w, h) { return mouseX > x - w / 2 && mouseX < x + w / 2 && mouseY > y - h / 2 && mouseY < y + h / 2; } // left/right button function Button(sc, lr, x, y) { var w = 50;// button width var h = 60;// button height if (mouseRect(x, y, w, h)) { fill(100); if (clicked) { // reset quiz if (sc === "quiz") { quiz.resetQuiz(); } // change scene scene = sc; } } else { fill(0); } pushMatrix(); translate(x, y); scale(lr === "l" ? -1 : 1, 1);// flipping the triangle for left/right buttons stroke(0); strokeWeight(4); triangle(-w/2 + 5, -h/2, -w/2 + 5, h/2, w/2 - 5, 0); noStroke(); popMatrix(); } var CaravanAnimation = function() { this.animate = -600; this.timer = 0; this.dashes = []; this.pushed = false; this.trees = []; this.clouds = []; this.bounce = 0; this.r = 90;// rotation of sky }; CaravanAnimation.prototype.drawRoad = function() { pushMatrix(); translate(0, - this.animate); // bitumen fill(21, 22, 56); rect(300, 550, 600, 200);//550 - bounce, 600, 200); // road markings if (!this.pushed) { for (var i = 0; i < 13; i++) { this.dashes.push({x: i * 60}); } this.pushed = true; } for (var i = 0; i < this.dashes.length; i++) { var d = this.dashes[i]; fill(255); rect(d.x, 500, 24, 5); d.x -= 3; if (d.x <= -50) { d.x = 720; } } popMatrix(); }; CaravanAnimation.prototype.drawCaravan = function() { pushMatrix(); translate(30, 60 + this.bounce - this.animate); // car pushMatrix(); translate(410, 455); // bumper fill(180); rect(98, 20, 10, 10, 10, 10, 10, 0); // windows stroke(212, 109, 36); strokeWeight(4); fill(135, 204, 232); rect(0, -38, 40, 30); noStroke(); quad(-22, -24, -50, -24, -40, -52, -22, -52); quad(22, -24, 50, -24, 40, -52, 22, -52); // body fill(212, 109, 36); rect(0, 0, 200, 50, 50, 50, 10, 10); // roof fill(212, 109, 36); rect(0, -54, 80, 5, 5); // towing bar fill(110); rect(-94, 26, 50, 4); // tyres fill(70); ellipse(-50, 30, 40, 40); ellipse(50, 30, 40, 40); fill(100); ellipse(-50, 30, 25, 25); ellipse(50, 30, 25, 25); popMatrix(); // caravan pushMatrix(); translate(150, 400); // body fill(230, 223, 28); rect(0, 0, 250, 150, 40); // window fill(255); rect(40, 0, 50, 50, 10); fill(158, 227, 217); rect(40, 0, 40, 40, 6); // door fill(255); rect(-60, 25, 50, 100, 5, 5, 0, 0); fill(158, 227, 217); rect(-60, 0, 40, 40, 6); // behind wheel fill(160); quad(-30, 80, 30, 80, 20, 50, -20, 50); // wheel fill(70); ellipse(0, 80, 50, 50); fill(100); ellipse(0, 80, 30, 30); // underneath fill(140); rect(-65, 77, 70, 6, 5, 0, 0, 5); rect(90, 77, 120, 6, 0, 5, 5, 0); pushMatrix(); translate(-25, 64); rotate(-70); rect(0, 0, 32, 6, 5); popMatrix(); pushMatrix(); translate(25, 64); rotate(70); rect(0, 0, 32, 6, 5); popMatrix(); rect(0, 50, 44, 6, 5); popMatrix(); popMatrix(); // animate up & down this.bounce = sin(sin(frameCount) * 50) * 10; }; CaravanAnimation.prototype.drawHeadlight = function() { pushMatrix(); translate(440, 515 + this.bounce - this.animate); // headlight fill(255, 252, 66); arc(100, 2, 10, 14, -90, 90); // headlight beam fill(255, 252, 66, cos(this.r) * 50 + 50); quad(100, 9, 100, -5, 200, -50, 200, 50); popMatrix(); }; CaravanAnimation.prototype.drawTrees = function() { function tree(x, y, type) { pushMatrix(); translate(x, y); fill(107, 72, 31); rect(0, 40, 12, 40); fill(32, 89, 54); switch (type) { case 0: triangle(-25, 36, 25, 36, 0, -55); break; case 1: ellipse(0, -12, 60, 90); break; case 2: rect(0, -15, 60, 80, 10); break; } popMatrix(); } if (frameCount % 50 === 0) { this.trees.push({x: 650, y: 390, type: round(random(0, 2))}); } for (var i = 0; i < this.trees.length; i++) { var t = this.trees[i]; tree(t.x, t.y - this.animate, t.type); t.x -= 3; } for (var i = this.trees.length - 1; i >= 0; i--) { if (this.trees[i].x <= -100) { this.trees.splice(i, 1); } } }; CaravanAnimation.prototype.drawClouds = function() { function cloud(x, y, s, clr) { pushMatrix(); translate(x, y); scale(s); fill(clr); rect(0, 0, 100, 10, 10); rect(-20, -11, 30, 30, 10); rect(10, -6, 50, 20, 10); popMatrix(); } if (frameCount % 90 === 0) { this.clouds.push({x: 700, y: random(20, 200), s: random(0.1, 2)}); } for (var i = 0; i < this.clouds.length; i++) { var c = this.clouds[i]; cloud(c.x, c.y, c.s, 205 + sin(this.r - 90) * 50); c.x -= c.s * 1.5; } for (var i = this.clouds.length - 1; i >= 0; i--) { if (this.clouds[i].x <= -100) { this.clouds.splice(i, 1); } } }; CaravanAnimation.prototype.run = function() { // changing background color background(100 - cos(this.r) * 50, 150 - cos(this.r) * 50, 200 - cos(this.r) * 50); // the sun pushMatrix(); translate(300 + cos(this.r + 90) * 470, 600 + sin(this.r + 90) * 470); // sun rays fill(255, 217, 0); for (var i = 0; i < 10; i++) { pushMatrix(); translate(0, 0); rotate(frameCount / 4 + (i * 36)); rect(0, -70, 8, 20); popMatrix(); } // sun & sun's glow stroke(255, 166, 0, 20); for (var i = 0; i < 15; i++) { strokeWeight(i); ellipse(0, 0, 90, 90); } noStroke(); popMatrix(); // hills in the background pushMatrix(); translate(0, -this.animate); fill(71, 125, 68); arc(300, 450, 800, 400, 180, 360); fill(91, 168, 86); arc(0, 450, 400, 300, 180, 360); fill(81, 153, 76); arc(650, 450, 400, 500, 180, 360); popMatrix(); // adding the other elements this.drawTrees(); this.drawRoad(); this.drawCaravan(); // make everything but the moon and headlight appear dark at night fill(0, cos(this.r) * 50 + 50); rect(300, 300, 600, 600); // car headlight this.drawHeadlight(); // the moon pushMatrix(); translate(300 + cos(this.r + 90) * -550, 600 + sin(this.r + 90) * -550); fill(255, 255, 180); stroke(255, 255, 180, 15); // moon & moon's glow for (var i = 0; i < 10; i++) { strokeWeight(i * 2); ellipse(0, 0, 90, 90); } noStroke(); popMatrix(); // clouds appear over the moon this.drawClouds(); this.animate = lerp(this.animate, 0, 0.02);// animate everything smoothly onto the screen this.r += 0.1;// rotating the sky & fading to dark/light }; var caravanAnimation = new CaravanAnimation(); var Engine = function() { this.x = 300; this.y = 360; this.stroke = 4; this.speed = 0.8;// speed of cycle this.timer = 541;// timing everything // piston position this.piston = 0; // valve positions this.valves = { intake: 0, exhaust: 0, }; // colors this.steel = color(130); this.fuel = color(86, 84, 176); this.exhaust = color(128, 103, 88); // colors of ports & cyclinder mixture this.ports = { intake: color(130), exhaust: color(130), }; this.mixture = color(86, 84, 176); // captions for each stroke this.captions = [ { title: "1. Intake", txt: "The fuel is drawn into the cylinder\nthrough the intake port.", }, { title: "2. Compression", txt: "The piston compresses the fuel-air\nmixture, and the spark plug ignites it.", }, { title: "3. Combustion", txt: "The fuel-air mixture combusts,\n forcing the piston downward.", }, { title: "4. Exhaust", txt: "The exhaust is expelled through the exhaust\nport & the cycle begins again.", }, ]; // whether to show labels or not this.showLabels = true; // array of labels & their positions this.labels = [ { item: "Piston", labelPos: {x: 120, y: 350}, arrowPos: {x: 300, y: 360}, }, { item: "Cylinder", labelPos: {x: 480, y: 300}, arrowPos: {x: 300, y: 300}, }, { item: "Exhaust port", labelPos: {x: 120, y: 200}, arrowPos: {x: 225, y: 185}, }, { item: "Exhaust valve", labelPos: {x: 120, y: 280}, arrowPos: {x: 270, y: 255}, }, { item: "Intake port", labelPos: {x: 480, y: 200}, arrowPos: {x: 375, y: 185}, }, { item: "Intake valve", labelPos: {x: 480, y: 240}, arrowPos: {x: 330, y: 255}, }, { item: "Spark plug", labelPos: {x: 120, y: 240}, arrowPos: {x: 300, y: 235}, }, { item: "Connecting rod", labelPos: {x: 75, y: 420}, arrowPos: {x: 300, y: 400}, }, { item: "Crankshaft", labelPos: {x: 80, y: 500}, arrowPos: {x: 300, y: 500}, }, ]; }; Engine.prototype.display = function() { pushMatrix(); translate(this.x, this.y); // cylinder stroke(150); strokeWeight(50); fill(120); ellipse(0, 155, 250, 300); noStroke(); fill(150); rect(0, -60, 200, 180, 20, 20, 0, 0); fill(120); rect(0, -25, 100, 150); // crankshaft pushMatrix(); translate(0, 150); rotate(this.timer + 180); fill(80); arc(0, 0, 120, 120, 0, 180); rect(0, 0, 60, 100); popMatrix(); // connecting rod pushMatrix(); translate(0 - cos(this.timer - 90) * 30, 150 - sin(this.timer - 90) * 30); rotate(cos(this.timer - 90) * 10); fill(100); quad(-20, -20, 20, -20, 10, -160, -10, -160); rect(0, 0, 70, 60, 10); fill(200); ellipse(0, 0, 30, 30); popMatrix(); // mixture fill(this.mixture); rect(0, -50 + this.piston / 2, 100, this.piston + 100); // piston fill(70); rect(0, this.piston, 100, 50); // piston rings for (var i = 0; i < 3; i++) { fill(90); rect(0, this.piston + (i * 6) - 21, 100, 3); } // gudgeon pin/wrist pin fill(100); ellipse(0, this.piston + 6, 15, 15); // spark plug fill(100); beginShape(); vertex(-4, -100); vertex(0, -98); vertex(4, -100); bezierVertex(4, -100, 9, -120, 2, -160); vertex(-2, -160); bezierVertex(-2, -160, -9, -120, -4, -100); endShape(); // intake port fill(this.ports.intake); beginShape(); vertex(50, -100); bezierVertex(50, -150, 100, -175, 150, -175); vertex(150, -215); bezierVertex(60, -215, 10, -150, 10, -100); endShape(); // exhaust port fill(this.ports.exhaust); beginShape(); vertex(-50, -100); bezierVertex(-50, -150, -100, -175, -150, -175); vertex(-150, -215); bezierVertex(-60, -215, -10, -150, -10, -100); endShape(); // intake valve pushMatrix(); translate(-39 + this.valves.exhaust / 8, -155 + this.valves.exhaust); rotate(-10); fill(150); rect(0, 0, 10, 100, 2); fill(70); rect(0, 50, 40, 20, 20, 20, 4, 4); popMatrix(); // exhaust valve pushMatrix(); translate(39 - this.valves.intake / 8, -155 + this.valves.intake); rotate(10); fill(150); rect(0, 0, 10, 100, 2); fill(70); rect(0, 50, 40, 20, 4); popMatrix(); // spark if ((this.piston < -48 && this.stroke === 2) \|\| (this.piston < -48 && this.stroke === 3)) { fill(255, 115, 0, 150); ellipse(0, -95, 6, 6); } // labels option noFill(); stroke(0); strokeWeight(2); ellipse(160, 220, 20, 20); noStroke(); fill(0); if (this.showLabels) { ellipse(160, 220, 10, 10); } textSize(20); text("Show labels", 230, 220); popMatrix(); }; Engine.prototype.runText = function() { fill(0); textSize(30); text(this.captions[this.stroke - 1].title + "\n" + this.captions[this.stroke - 1].txt, 300, 70); }; Engine.prototype.runLabels = function() { fill(0); textSize(20); for (var i = 0; i < this.labels.length; i++) { var l = this.labels[i]; var movementX;// label x movement var movementY;// label y movement // drawing the label text(l.item, l.labelPos.x, l.labelPos.y); // movement of the arrows switch (l.item) { case "Piston": movementX = 0; movementY = this.piston; break; case "Cylinder": movementX = 0; movementY = this.piston / 2; break; case "Exhaust valve": movementX = 0; movementY = this.valves.exhaust; break; case "Intake valve": movementX = 0; movementY = this.valves.intake; break; case "Connecting rod": movementX = -cos(this.timer - 90) * 10; movementY = -sin(this.timer - 90) * 30; break; case "Crankshaft": movementX = -cos(this.timer - 90) * -25; movementY = -sin(this.timer - 90) * -25; break; default: movementX = 0; movementY = 0; break; } // arrows stroke(0); strokeWeight(2); line(l.labelPos.x + (l.labelPos.x < 300 ? textWidth(l.item) / 2 + 5 : -textWidth(l.item) / 2 - 5), l.labelPos.y, l.arrowPos.x + movementX, l.arrowPos.y + movementY); } noStroke(); }; Engine.prototype.update = function() { // show labels button functionality if (dist(mouseX, mouseY, this.x + 160, this.y + 220) <= 50 && clicked) { if (this.showLabels) { this.showLabels = false; } else if (!this.showLabels) { this.showLabels = true; } } // move piston this.piston = cos(this.timer) * 30 - 25; // changing colors & moving valves switch (this.stroke) { case 1: // closing exhaust valve this.valves.exhaust = lerp(this.valves.exhaust, 0, 0.2); // opening intake valve this.valves.intake = lerp(this.valves.intake, 10, 0.2); // fuel entering through intake port this.ports.intake = lerpColor(this.ports.intake, this.fuel, 0.1); // adding fuel this.mixture = lerpColor(this.mixture, this.fuel, 0.1); // exhaust port emptying this.ports.exhaust = lerpColor(this.ports.exhaust, this.steel, 0.1); break; case 2: // closing intake valve this.valves.intake = lerp(this.valves.intake, 0, 0.2); // compressing mixture this.mixture = lerpColor(this.mixture, color(0), 0.01); // intake port emptying this.ports.intake = lerpColor(this.ports.intake, this.steel, 0.1); break; case 3: // burning mixture, making exhaust this.mixture = lerpColor(this.mixture, this.exhaust, 0.1); break; case 4: // open exhaust valve this.valves.exhaust = lerp(this.valves.exhaust, 10, 0.2); // exhaust leaving cylinder this.ports.exhaust = lerpColor(this.ports.exhaust, this.exhaust, 0.1); break; } // increase timer this.timer += this.speed; // changing stroke if (this.timer > 0) { this.stroke = 2; } if (this.timer > 180) { this.stroke = 3; } if (this.timer > 360) { this.stroke = 4; } if (this.timer > 540) { this.stroke = 1; } // reset cycle if (this.timer > 720) { this.timer = 0; } }; Engine.prototype.run = function() { this.display(); this.runText(); if (this.showLabels) { this.runLabels(); } this.update(); }; var engine = new Engine(); var Quiz = function() { this.y = 0;// position of questions this.question = 0;// current question answering this.answered = "";// whether the question was answered correctly this.right = 0;// number of question answered correctly this.buttonWidth = 500; this.buttonHeight = 70; // Q&As this.questions = ["Which stroke is the\ncompression stroke?", "During which stroke does\nthe spark plug ignite the\nfuel-air mixture?", "For which stroke does the\nintake port open?", "For which stroke does\nthe exhaust port open?", "Which is the correct\nstroke order?"]; this.answers = [ [ ["Stroke 1", 0, "-"], ["Stroke 2", 1, "-"], ["Stroke 3", 0, "-"], ],// question 1 [ ["Second stroke", 1, "-"], ["Third stroke", 0, "-"], ["Fourth stroke", 0, "-"], ],// question 2 [ ["1st stroke", 1, "-"], ["2nd stroke", 0, "-"], ["3rd stroke", 0, "-"], ],// question 3 [ ["Stroke 1", 0, "-"], ["Stroke 3", 0, "-"], ["Stroke 4", 1, "-"], ],// question 4 [ ["Compression, Combustion, Exhaust, Intake", 0, "-"], ["Intake, Combustion, Compression, Exhaust", 0, "-"], ["Intake, Compression, Combustion, Exhaust", 1, "-"], ],// question 5 ]; // array to hold the confetti this.confetti = []; // different result responses this.responses = ["Did you read anything? 🤨", "Uh oh. Looks like you\nneed to revise. :/", "Keep on learning!", "Almost there!", "Great job!", "Excellent! 🥳"]; }; Quiz.prototype.optionButton = function(txt, x, y, result, whichQuestion, answer) {// mouse is hovering over the button & it is pressed if (mouseRect(x, y, this.buttonWidth, this.buttonHeight)) { if (clicked) { if (result === 0) { this.answered = "wrong";// user got answer wrong this.answers[this.question][answer][2] = "red"; x += random(-20, 20);// make button shake } else { if (this.answers[this.question][answer][2] === "-") { this.answers[this.question][answer][2] = "green";// change color to green this.question++; // only count correct answer if user did not get it wrong beforehand if (this.answered !== "wrong") { this.right++; } this.answered = "";// reset } } } } // changing button color switch (this.answers[whichQuestion][answer][2]) { case "-": // whether mouse is hovering over the button if (mouseRect(x, y, this.buttonWidth, this.buttonHeight)) { fill(170, 188, 207); } else { fill(150, 200, 255); } break; case "red": fill(242, 78, 78); break; case "green": fill(103, 191, 103); break; } // button strokeWeight(4); stroke(0); rect(x, y, this.buttonWidth, this.buttonHeight, 4); noStroke(); // button text fill(0); textSize(25); text(txt, x, y); }; Quiz.prototype.resetQuiz = function() { this.confetti.length = 0;// delete any confetti this.question = 0; this.right = 0; this.answered = ""; // reset all buttons colors to default for (var i = 0; i < this.answers.length; i++) { for (var j = 0; j < this.answers[i].length; j++) { this.answers[i][j][2] = "-"; } } }; Quiz.prototype.display = function() { // displaying the questions for (var i = 0; i < this.questions.length; i++) { fill(0); textSize(45); text(this.questions[i], 300, 100 + (i * 600) + this.y); } // displaying the answers for (var i = 0; i < this.answers.length; i++) { for (var j = 0; j < this.answers[i].length; j++) { this.optionButton(this.answers[i][j][0], 300, 300 + (j * 100) + (i * 600) + this.y, this.answers[i][j][1], i, j); } } // scroll questions this.y = ~~lerp(this.y, -600 * this.question, 0.05); // displaying results pushMatrix(); translate(0, (this.questions.length * 600) + this.y); fill(0); textSize(50); text(this.responses[this.right], 300, 125); textSize(40); text(this.right + "/" + this.questions.length, 300, 400); textSize(100); text(this.right / this.questions.length * 100 + "%", 300, 300); popMatrix(); // creating confetti if user has finished quiz with 4+ questions (80%+) right if (this.y <= -600 * (this.questions.length) + 600 && this.y >= -600 * (this.questions.length) + 20 && this.right >= 4) { this.confetti.push({ x: random(-50, 650), y: -50, r: random(0, 360),// angle of rotation w: random(6, 20), clr: color(random(0, 255), random(0, 255), random(0, 255)), xv: random(-1, 1),// x speed yv: random(2, 5),// y speed rv: random(-2, 2),// rotation speed }); } // drawing the confetti for (var i = 0; i < this.confetti.length; i++) { var c = this.confetti[i]; pushMatrix(); translate(c.x, c.y); rotate(c.r); scale(1, sin(frameCount + (i * 10))); fill(c.clr); rect(0, 0, c.w, c.w); popMatrix(); // moving the confetti c.x += c.xv; c.y += c.yv; c.r += c.rv; } // removing the confetti when it goes off the screen for (var i = this.confetti.length - 1; i >= 0; i--) { if (this.confetti[i].y >= 650) { this.confetti.splice(i, 1); } } // home button Button("home", "r", 575, (this.questions.length * 600) + 300 + this.y); }; Quiz.prototype.run = function() { this.display(); }; quiz = new Quiz(); // scenes object var Scenes = { // menu/home page home: function() { // running the caravan animation caravanAnimation.run(); // title fill(0); textSize(85); text("HOW", 275, 50); fill(50); textSize(100); text("PETROL", 383, 128); fill(255, 50, 50); text("PETROL", 380, 130); fill(0); textSize(50); text("ENGINES WORK", 320, 195); // right button Button("information", "r", 570, 300); }, // background information page information: function() { // title fill(0); textSize(45); text("BACKGROUND INFORMATION:", 300, 50); rect(300, 80, 540 + sin(frameCount) * 30, 4); // explanation textAlign(LEFT, CENTER); textSize(25); text("The following explanation is for a 4-stroke petrol engine.\n\nIn the petrol engine there are 1+ pistons that move up & down, turning the crankshaft. Every 4 strokes that each piston makes is a complete cycle.\n\nThe next page details each of the strokes in the cycle.", 75, 50, 450, 500); textAlign(CENTER, CENTER); // left/right buttons Button("home", "l", 30, 300); Button("explanation", "r", 570, 300); }, // explanation page explanation: function() { // title fill(0); textSize(60); text("HOW IT ALL WORKS:", 300, 50); rect(300, 80, 505 + sin(frameCount) * 30, 4); // explanation textSize(20); text("For each stroke of the cycle, the following occurs:", 300, 135); textAlign(LEFT, CENTER); textSize(17); text("1. Intake - the piston moves down, drawing a fuel-air mixture into the cylinder through the intake port.\n\n2. Compression - the intake port closes & the piston moves up, compressing the mixture, then the spark plug ignites the mixture.\n\n3. Combustion - the mixture combusts, forcing the piston downward. This downward force is what drives the engine.\n\n4. Exhaust - the exhaust port opens and the piston moves up, forcing the exhaust gases out of the cylinder.\n\n", 85, 90, 430, 500); textAlign(CENTER, CENTER); textSize(20); text("An animation of this process is shown on the next page.\nUse the toggle at the bottom to show/hide the labels.", 300, 545); // left/right buttons Button("information", "l", 30, 300); Button("animation", "r", 570, 300); }, // page for animation of 4-stroke petrol engine animation: function() { // run engine engine.run(); // left/right buttons Button("explanation", "l", 30, 300); Button("enter", "r", 570, 300); }, // enter quiz page enter: function() { // title & subtitle fill(0); textSize(100); text("QUIZ", 300, 75); textSize(20); text(quiz.questions.length + " questions", 300, 150); // paper graphic pushMatrix(); translate(275, 400); fill(175, 233, 242); stroke(0); strokeWeight(4); rect(0, 0, 150, 200); strokeWeight(2); for (var i = 0; i < 9; i++) { line(-60, -80 + i * 20, 60, -80 + i * 20); } popMatrix(); // pencil graphic pushMatrix(); translate(300, 320); rotate(30); // wood with stripes fill(242, 136, 61); rect(0, 0, 30, 150); for (var i = 0; i < 2; i++) { line(-7 + (i * 15), -74, -7 + (i * 15), 74); } // point fill(247, 196, 113); triangle(-15, 75, 15, 75, 0, 100); // tip fill(0); triangle(-3, 95, 2, 95, 0, 100); // eraser fill(207, 113, 217); rect(0, -90, 30, 20, 10, 10, 0, 0); // metal thing holding the eraser on fill(102, 101, 115); rect(0, -77, 30, 6); noStroke(); popMatrix(); // left button Button("animation", "l", 30, 300); // start quiz button Button("quiz", "r", 570, 300); }, // quiz page quiz: function() { quiz.run();// run the quiz }, }; // drawing everything function draw() { background(142, 186, 212); // remove cursor cursor("none"); // draw current scene Scenes[scene](); // creating cursor particles when the mouse is over the canvas if (mouseIsOver) { particles.push({ x: mouseX, y: mouseY, d: 20,// diameter dv: -2,// diameter velocity o: 100,// opacity }); } // creating mouse particles when user clicks if (clicked) { particles.push({ x: mouseX, y: mouseY, d: 20,// diameter dv: 5,// diameter velocity o: 150,// opacity }); } // drawing cursor particles for (var i = 0; i < particles.length; i++) { var p = particles[i]; fill(255, p.o); ellipse(p.x, p.y, p.d, p.d); p.d += p.dv;// shrinking/growing the particle p.o -= 5;// fading the particle } // removing cursor particles when they fade out for (var i = particles.length - 1; i >= 0; i--) { if (particles[i].o <= 0) { particles.splice(i, 1); } } // stop clicking clicked = false; } // event listeners mousePressed = function() { clicked = true; }; mouseOver = function() { mouseIsOver = true; }; mouseOut = function() { mouseIsOver = false; };
Folds	38,40,43,70,72,86,87,115,116,208,209,220,221,262,263,294,295,362,366,468,469,589,590,594,595,650,651,725,726,733,737,782,783,833,834,847,848,916,917,919,924,1055,1058,1107,1110,1112,1113,1115,1116,1118
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMvR56LaCQw
Votes	23
Spin-Offs	0
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6159659837865984","title":"Contest: Anatomy","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	TDJ
Author Name	tdj.ka
Author ID	kaid_682972421482671044758972
Author Profile Access	PUBLIC

Archive Data

Added	5 months ago, 1722841872686
Updated	25 days ago, 1734464279592
Source Deleted	unknown