Viewing Program

Program Data

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

Title	Tales of the Avatars - Leafers
ID	5694288244408320
Created	6 years ago, 1548187872713
Updated	1 years ago, 1732231667853
Code	/* I've been programming 28 months, and I have learned 100% of Intro to JS. TODO: Fill that out ^ TODO: Remove starter code below. A large animation project. The guy's name is Joe. Started 1/15/2019 Finished 1/22/2019 Released 1/22/2019 / // Sets up some stuff. smooth(); frameRate(60); randomSeed(25); // Variables for the mouse. var overButton = false; var click = false; /* Background for the menu / // { var div = 3; var loaded = loaded \|\| false; var noiseX = 0; var noiseCanvas = noiseCanvas \|\| createGraphics(600, 600, P2D); if (!loaded) { noiseCanvas.background(255, 255, 255, 0); noiseCanvas.noStroke(); noiseCanvas.noiseSeed(30); noiseCanvas.noiseDetail(3, 0.55); } var dots = ""; // } // Fonts and text var fonts = [ createFont("sans-serif"), createFont("serif"), createFont("sans-serif Bold"), createFont("monospace") ]; var stretchText = function(txt, x, y, w, h) { pushMatrix(); translate(x, y); scale(w / 100, h / 100); text(txt, 0, 0); popMatrix(); }; var title = function(xPlus, yPlus, color) { pushMatrix(); translate(xPlus, yPlus); fill(color); textAlign(CENTER, CENTER); textFont(fonts[2], 80); stretchText("TALES", 300, 130, 125, 90); textFont(fonts[1], 100); stretchText("of the", 300, 220, 100, 70); textFont(fonts[2], 100); stretchText("AVATARS", 300, 320, 70, 100); textFont(fonts[3], 40); text("~ L E A F E R S ~", 300, 420); stroke(color); strokeWeight(5); strokeCap(SQUARE); line(130, 175, 470, 175); line(130, 265, 470, 265); line(90, 380, 510, 380); noStroke(); popMatrix(); }; // Preloads images var images = [ getImage("avatars/leafers-seed"), getImage("avatars/leafers-seedling"), getImage("avatars/leafers-sapling"), getImage("avatars/leafers-tree"), getImage("avatars/leafers-ultimate"), getImage("avatars/leaf-grey") ]; // Controls the scene, true for video, false for menu. var playing = false; // Current scene for the video. var curScene = 0; // Timer to keep track of when to change the scene. var timer = 0; // Smooth scene transition. var fade = 0; var fadeOut = true; var setFade = function(out) { if (out && !fadeOut) { fade = 255; } else if (fadeOut) { fade = 0; } fadeOut = out; }; // Placeholder for the function that resets the animation. var reset; // Smooth motion function. var Smooth = function(pos, dest, div) { return (dest - pos) / div; }; / Buttons / // { var Button = function(txt, x, y, func) { this.txt = txt; this.x = x; this.y = y; this.w = 250; this.h = 60; this.func = func; this.over = false; }; Button.prototype.display = function() { fill(100, 90, 110); stroke(255, 255, 255); strokeWeight(3); if (!this.over) { rect(this.x, this.y + 10, this.w, this.h); fill(120, 110, 130); rect(this.x, this.y, this.w, this.h); } else { fill(120, 110, 130); rect(this.x, this.y + 10, this.w, this.h); } fill(255, 255, 255); textFont(fonts[0], 40); text(this.txt, this.x + this.w / 2, this.y + this.h / 2 + (this.over ? 10 : 0)); }; Button.prototype.check = function() { return Math.abs(mouseX - this.x - this.w / 2) < this.w / 2 && Math.abs(mouseY - this.y - this.h / 2) < this.h / 2; }; Button.prototype.pack = function() { this.over = false; if (this.check()) { overButton = true; this.over = true; if (click) { this.func(); } } this.display(); }; var playB = new Button("START", 175, 500, function() { playing = true; reset(); fade = 255; }); var backB = new Button("BACK", 175, 500, function() { playing = false; }); // } / Graphic functions */ // { // Draws a rounded or inverted rectangle to make a cloud shape. var cloud = function(x, y, w, mode) { noStroke(); if (mode === 0) { rect(x, y, w, 30, 30); } else { rect(x + 15, y + 30, w - 30, -30, 30); } }; // Draws two circles to add some highlighting. var ball = function(x, y, s) { ellipse(x, y, s, s); pushStyle(); fill(255, 255, 255, 40); ellipse(x + s 0.04, y - s * 0.04, s * 0.85, s * 0.85); popStyle(); }; // Draws a speech bubble. var speechBubble = function(txt, x1, y1, x2, y2, w, h) { textAlign(CENTER, CENTER); fill(255, 255, 255); ellipse(x1, y1, w, h); triangle(x1 - w / 10, y1, x1 + w / 10, y1, x2, y2); fill(0, 0, 0); textFont(fonts[0], w / txt.length * 3.5); text(txt, x1, y1); }; // Draws a leaf for Leafers and Malterra. var leaf = function(x, y, r, s, shadeAmount, color) { fill(color[2]); pushMatrix(); translate(x, y); scale(s / 100); rotate(r); beginShape(); vertex(0, 0); bezierVertex(-5, -50, 25, -60, 50, -60); bezierVertex(30, -45, 40, -10, 5, 0); endShape(); if (shadeAmount === 0) { fill(color[0]); beginShape(); vertex(0, 0); bezierVertex(-5, -50, 25, -60, 50, -60); bezierVertex(-5, -50, 10, -10, 5, 0); endShape(); } else { fill(color[3]); beginShape(); vertex(0, 0); bezierVertex(-5, -50, 25, -55, 30, -57); bezierVertex(30, -50, 20, -10, 5, 0); endShape(); } popMatrix(); }; // } / Character rig / // { // Makes a new character rig, taking parameters for each body part. var Rig = function(head, body, lArm1, lArm2, rArm1, rArm2, lLeg1, lLeg2, rLeg1, rLeg2) { this.x = 0; this.y = 0; this.head = head; this.body = body; this.lArm1 = lArm1; this.lArm2 = lArm2; this.rArm1 = rArm1; this.rArm2 = rArm2; this.lLeg1 = lLeg1; this.lLeg2 = lLeg2; this.rLeg1 = rLeg1; this.rLeg2 = rLeg2; this.headR = 0; this.bodyR = 0; this.arm1R = 0; this.arm2R = 0; this.arm1L = 0; this.arm2L = 0; this.leg1R = 0; this.leg2R = 0; this.leg1L = 0; this.leg2L = 0; this.size = 100; this.direc = "left"; this.bounce = 10; this.walkAmount = 0; }; // Draws and rotates the body parts of the character. Rig.prototype.display = function() { pushMatrix(); translate(this.x, this.y); scale(this.size / 100); scale(this.direc === "right" ? -1 : 1, 1 + Math.abs(sin(this.walkAmount - 90) / 30)); rotate(this.bodyR); pushMatrix(); this.rArm1(this.arm1R); this.rArm2(this.arm2R); popMatrix(); pushMatrix(); this.rLeg1(this.leg1R); this.rLeg2(this.leg2R); popMatrix(); this.body(this.bounce); pushMatrix(); this.head(this.headR, this.bounce); popMatrix(); pushMatrix(); this.lLeg1(this.leg1L); this.lLeg2(this.leg2L); popMatrix(); pushMatrix(); this.lArm1(this.arm1L); this.lArm2(this.arm2L); popMatrix(); popMatrix(); }; // Sets the position of the character rig. Rig.prototype.setPos = function(x, y) { this.x = x; this.y = y; }; // Changes the direction of scale of the character rig. Rig.prototype.setDirec = function(direc, size) { if (direc) { this.direc = direc; } if (size) { this.size = size; } }; // Animates the character rig. Rig.prototype.animate = function(speed) { this.bounce = (this.bounce + speed) % 360; this.walkAmount = (this.walkAmount + speed) % 360; this.arm1L = sin(this.walkAmount) * 30 - 10; this.arm2L = sin(this.walkAmount) * 20 + 30; this.arm1R = sin(-this.walkAmount) * 30 - 10; this.arm2R = sin(-this.walkAmount) * 20 + 30; this.leg1L = -this.walkAmount + 180; this.leg2L = sin(-this.walkAmount) * 10 - (speed > 0 ? 10 : 0); this.leg1R = -this.walkAmount; this.leg2R = sin(-this.walkAmount - 180) * 10 - (speed > 0 ? 10 : 0); }; // Moves the character rig. Rig.prototype.move = function(xDest, yDest, xSpeed, ySpeed) { // Moves the x position. if (xSpeed > 0) { this.setDirec("right", 100); if (this.x < xDest) { this.x += xSpeed; } } else { this.setDirec("left", 100); if (this.x > xDest) { this.x += xSpeed; } } // Moves the y position. if (ySpeed > 0) { if (this.y < yDest) { this.y += ySpeed; } } else { if (this.y > yDest) { this.y += ySpeed; } } if (dist(this.x, this.y, xDest, yDest) > 1) { this.animate((Math.abs(xSpeed) + Math.abs(ySpeed)) * 1.5); } else { if (this.walkAmount > 180) { this.walkAmount += Smooth(this.walkAmount, 360, 8); } else { this.walkAmount += Smooth(this.walkAmount, 0, 8); } if (this.bounce > 180) { this.bounce += Smooth(this.bounce, 360, 8); } else { this.bounce += Smooth(this.bounce, 0, 8); } this.animate(0); } }; // Sets the rotations of the character rig. Rig.prototype.setRot = function(headR, bodyR, arm1R, arm2R, arm1L, arm2L, leg1R, leg2R, leg1L, leg2L) { this.headR = headR; this.bodyR = bodyR; this.arm1R = arm1R; this.arm2R = arm2R; this.arm1L = arm1L; this.arm2L = arm2L; this.leg1R = leg1R; this.leg2R = leg2R; this.leg1L = leg1L; this.leg2L = leg2L; }; // Slides the rotations of the character rig. Rig.prototype.slideRot = function(headR, bodyR, arm1R, arm2R, arm1L, arm2L, leg1R, leg2R, leg1L, leg2L, div) { this.headR += Smooth(this.headR, headR, div); this.bodyR += Smooth(this.bodyR, bodyR, div); this.arm1R += Smooth(this.arm1R, arm1R, div); this.arm2R += Smooth(this.arm2R, arm2R, div); this.arm1L += Smooth(this.arm1L, arm1L, div); this.arm2L += Smooth(this.arm2L, arm2L, div); this.leg1R += Smooth(this.leg1R, leg1R, div); this.leg2R += Smooth(this.leg2R, leg2R, div); this.leg1L += Smooth(this.leg1L, leg1L, div); this.leg2L += Smooth(this.leg2L, leg2L, div); }; // Resets the rotations of the character rig's joints. Rig.prototype.reset = function() { this.headR = 0; this.bodyR = 0; this.arm1R = 0; this.arm2R = 0; this.arm1L = 0; this.arm2L = 0; this.leg1R = 0; this.leg2R = 0; this.leg1L = 0; this.leg2L = 0; }; // } // Colors for Leafers taken from the Leafers image. var leafColor = [ color(142, 197, 0), color(181, 215, 0), color(109, 159, 0), color(90, 126, 0), color(121, 177, 0) ]; var stepSize = 10; // Leafers rig var Leafers = new Rig( function(r, b) { b = Math.abs(sin(b)) * 10; translate(-13 - b / 5, 30); rotate(r); translate(-35, 10); noStroke(); fill(leafColor[0]); beginShape(); vertex(-5, 0); bezierVertex(-20, -10, -25, -35, 5, -50); bezierVertex(50, -50, 50, 0, -2, -5); vertex(-5, 0); endShape(); pushMatrix(); translate(10, -23); rotate(-30); fill(leafColor[3]); ellipse(0, 0, 7, 6); fill(leafColor[1]); ellipse(-1, -1, 3, 2); popMatrix(); beginShape(); vertex(-2, -5); vertex(15, -5); vertex(25, -2); vertex(35, -15); vertex(30, -15); vertex(20, -10); vertex(-2, -10); vertex(-4, -5); vertex(-4, -2); endShape(); leaf(8, -50, 35 + sin(this.bounce) * 2, 100, 1, leafColor); leaf(5, -45, sin(this.bounce + 1) * 2, 100, 0, leafColor); }, // Head function(b) { b = Math.abs(sin(b)) * 12; noStroke(); fill(leafColor[2]); pushMatrix(); translate(100, 123 + b / 1.5); rotate(b / 2 - 30); beginShape(); vertex(0, 0); bezierVertex(-5, -30, 40, 5, 40, -20); bezierVertex(50, 15, 0, 20, 0, 0); endShape(); fill(leafColor[3]); beginShape(); vertex(20, 0); bezierVertex(15, 7, 6, 7, 3, 7); bezierVertex(1, 4, 1, 0, 7, -2); bezierVertex(6, 0, 16, -1, 20, 0); endShape(); popMatrix(); fill(leafColor[0]); beginShape(); vertex(-40, 10); vertex(-40, -5); bezierVertex(-25, -15, -10, -10, 5, -5); bezierVertex(50, 10, 60, 40, 60, 100); bezierVertex(80, 120, 110, 125, 120, 110 + b); bezierVertex(115, 130, 80, 135, 50, 120); vertex(16, 120); bezierVertex(8, 105, 15, 90, 0, 80); bezierVertex(-30, 60, -25, 60, -25, 0); vertex(-25, 10); endShape(); fill(leafColor[1]); beginShape(); vertex(13, 100); bezierVertex(13, 95, 13, 90, 0, 80); bezierVertex(-30, 60, -25, 60, -25, 20); bezierVertex(15, 40, 15, 60, 13, 100); endShape(); fill(leafColor[2]); beginShape(); vertex(-40, -10); bezierVertex(-25, -15, -10, -10, 5, -5); bezierVertex(50, 10, 60, 40, 60, 100); bezierVertex(60, 100, 65, 105, 65, 105); bezierVertex(60, 130, 110, 130, 120, 110 + b); bezierVertex(115, 130, 80, 135, 50, 120); vertex(40, 120); bezierVertex(60, 60, 45, 15, 0, 0); endShape(); for (var i = 3; i >= 1; i--) { leaf(sin(i * 10) * 130 - 40, -15 + i * 5, 45 + i * i * 6 + sin(this.bounce + i) * 2, 100 - i * 15, 1, leafColor); } }, // Body function(r) { fill(leafColor[0]); translate(-10, 25); rotate(r); noStroke(); beginShape(); vertex(0, 0); vertex(10, 0); bezierVertex(15, 20, 15, 35, 10, 50); vertex(-5, 45); bezierVertex(0, 35, 0, 20, 0, 0); endShape(); fill(leafColor[4]); beginShape(); vertex(0, 0); vertex(10, 0); bezierVertex(15, 20, 15, 35, 10, 50); vertex(7, 50); bezierVertex(11, 35, 12, 20, 10, 0); endShape(); translate(0, 40); }, // Left arm 1 function(r) { rotate(r); fill(leafColor[0]); noStroke(); beginShape(); vertex(0, 0); vertex(13, 0); bezierVertex(20, 35, 20, 35, 10, 50); bezierVertex(5, 60, 5, 60, 10, 70); bezierVertex(-20, 60, -20, 20, 0, 0); endShape(); fill(leafColor[4]); beginShape(); vertex(9, 0); vertex(13, 0); bezierVertex(20, 20, 20, 35, 10, 50); bezierVertex(5, 60, 5, 60, 10, 70); bezierVertex(-15, 60, 25, 30, 9, 0); endShape(); }, // Left arm 2 function(r) { fill(leafColor[2]); translate(-10, 25); rotate(r); noStroke(); beginShape(); vertex(0, 0); vertex(10, 0); bezierVertex(15, 20, 15, 35, 10, 50); vertex(-5, 45); bezierVertex(0, 35, 0, 20, 0, 0); endShape(); translate(0, 40); }, // Right arm 1 function(r) { rotate(r); fill(leafColor[2]); noStroke(); beginShape(); vertex(0, 0); vertex(13, 0); bezierVertex(20, 35, 20, 35, 10, 50); bezierVertex(5, 60, 5, 60, 10, 70); bezierVertex(-20, 60, -20, 20, 0, 0); endShape(); }, // Right arm 2 function(r) { translate(32 + sin(r) * stepSize, 110 - cos(r) * 2); fill(leafColor[0]); beginShape(); vertex(-20 - sin(r) * stepSize, 0); vertex(18, 7); bezierVertex(15, 25, 10, 30, 10, 30); vertex(-5, 35); vertex(-20, 20); endShape(); fill(leafColor[2]); beginShape(); vertex(18, 7); bezierVertex(15, 25, 10, 30, 10, 30); vertex(5, 35); bezierVertex(5, 25, 7, 15, 10 - sin(r) * stepSize, 4); endShape(); translate(0, 30); }, // Left leg 1 function(r) { rotate(r); fill(leafColor[0]); beginShape(); vertex(10, 0); bezierVertex(13, 5, 13, 10, 10, 20); vertex(-8, 20); vertex(-4, 13); vertex(-20 - sin(r / 2 - 30) * 15, -25 + cos(r / 2 - 30) * 15); endShape(); fill(leafColor[2]); beginShape(); vertex(10, 0); bezierVertex(13, 5, 13, 10, 10, 20); vertex(-8, 20); vertex(6, 17); bezierVertex(10, 10, 10, 5, 6, 0); endShape(); }, // Left leg 2 function(r) { translate(32 + sin(r) * stepSize, 110 - cos(r) * 2); fill(leafColor[2]); beginShape(); vertex(-20 - sin(r) * stepSize, 0); vertex(18, 7); bezierVertex(15, 25, 10, 30, 10, 30); vertex(-5, 35); vertex(-20, 20); endShape(); translate(0, 30); }, // Right leg 1 function(r) { rotate(r); fill(leafColor[2]); beginShape(); vertex(10, 0); bezierVertex(13, 5, 13, 10, 10, 20); vertex(-8, 20); vertex(-4, 13); vertex(-20 - sin(r / 2 - 30) * 15, -25 + cos(r / 2 - 30) * 15); endShape(); } // Right leg 2 ); // Colors for Malterra. var malColor = [ color(50, 50, 50), color(75, 75, 70), color(30, 30, 35), color(15, 15, 20), color(40, 40, 45), color(255, 0, 0), color(255, 250, 250) ]; // Malterra rig var Malterra = new Rig( function(r, b) { b = Math.abs(sin(b)) * 10; translate(-13 - b / 5, 30); rotate(r); translate(-35, 10); noStroke(); fill(malColor[0]); beginShape(); vertex(-5, -5); bezierVertex(-20, -10, -25, -35, 5, -50); bezierVertex(50, -50, 50, 0, -2, -5); endShape(); pushMatrix(); translate(10, -23); rotate(-30); fill(malColor[5]); arc(0, 0, 7, 6, 0, 180); popMatrix(); fill(malColor[1]); beginShape(); vertex(-7, -5); vertex(15, -5); vertex(25, -2); vertex(35, -15); vertex(30, -15); vertex(20, -10); vertex(-15, -10); endShape(); fill(malColor[6]); beginShape(); vertex(-15, -14); bezierVertex(-14, -12, -13, -10, -10, -9); vertex(4, -9); vertex(-1, -14); endShape(); noFill(); stroke(malColor[1]); beginShape(); strokeWeight(1.5); for (var i = 0; i < 8; i++) { vertex(-13 + i * 2, -14 + (i % 2) * 5); } endShape(); noStroke(); leaf(8, -50, 35 + sin(this.bounce) * 2, 100, 1, malColor); leaf(5, -45, sin(this.bounce + 1) * 2, 100, 0, malColor); }, // Head function(b) { b = Math.abs(sin(b)) * 12; noStroke(); fill(malColor[2]); pushMatrix(); translate(100, 123 + b / 1.5); rotate(b / 2 - 30); beginShape(); vertex(0, 0); bezierVertex(-5, -30, 20, 5, 40, -20); bezierVertex(30, 15, 0, 20, 0, 0); endShape(); fill(malColor[3]); beginShape(); vertex(20, 0); bezierVertex(15, 7, 6, 7, 3, 7); bezierVertex(1, 4, 1, 0, 7, -2); bezierVertex(6, 0, 16, -1, 20, 0); endShape(); popMatrix(); fill(malColor[0]); beginShape(); vertex(-40, 10); vertex(-40, -5); bezierVertex(-25, -15, -10, -10, 5, -5); bezierVertex(50, 10, 60, 40, 60, 100); bezierVertex(80, 120, 110, 125, 120, 110 + b); bezierVertex(115, 130, 80, 135, 50, 120); vertex(16, 120); bezierVertex(8, 105, 15, 90, 0, 80); bezierVertex(-30, 60, -25, 60, -25, 0); vertex(-25, 10); endShape(); fill(malColor[1]); beginShape(); vertex(13, 100); bezierVertex(13, 95, 13, 90, 0, 80); bezierVertex(-30, 60, -25, 60, -25, 20); bezierVertex(15, 40, 15, 60, 13, 100); endShape(); fill(malColor[2]); beginShape(); vertex(-40, -10); bezierVertex(-25, -15, -10, -10, 5, -5); bezierVertex(50, 10, 60, 40, 60, 100); bezierVertex(60, 100, 65, 105, 65, 105); bezierVertex(60, 130, 110, 130, 120, 110 + b); bezierVertex(115, 130, 80, 135, 50, 120); vertex(40, 120); bezierVertex(60, 60, 45, 15, 0, 0); endShape(); for (var i = 3; i >= 1; i--) { leaf(sin(i * 10) * 130 - 40, -15 + i * 5, 45 + i * i * 6 + sin(this.bounce + i) * 2, 100 - i * 15, 1, malColor); } }, // Body function(r) { fill(malColor[0]); translate(-10, 25); rotate(r); noStroke(); beginShape(); vertex(0, 0); vertex(10, 0); bezierVertex(15, 20, 15, 35, 10, 50); vertex(-5, 45); bezierVertex(0, 35, 0, 20, 0, 0); endShape(); fill(malColor[4]); beginShape(); vertex(0, 0); vertex(10, 0); bezierVertex(15, 20, 15, 35, 10, 50); vertex(7, 50); bezierVertex(11, 35, 12, 20, 10, 0); endShape(); translate(0, 40); }, // Left arm 1 function(r) { rotate(r); fill(malColor[0]); noStroke(); beginShape(); vertex(0, 0); vertex(13, 0); bezierVertex(20, 35, 20, 35, 10, 50); bezierVertex(5, 60, 5, 60, 10, 70); bezierVertex(-20, 60, -20, 20, 0, 0); endShape(); arc(-5, 50, 20, 35, 90, 270); fill(malColor[4]); beginShape(); vertex(9, 0); vertex(13, 0); bezierVertex(20, 20, 20, 35, 10, 50); bezierVertex(5, 60, 5, 60, 10, 70); bezierVertex(-15, 60, 25, 30, 9, 0); endShape(); }, // Left arm 2 function(r) { fill(malColor[2]); translate(-10, 25); rotate(r); noStroke(); beginShape(); vertex(0, 0); vertex(10, 0); bezierVertex(15, 20, 15, 35, 10, 50); vertex(-5, 45); bezierVertex(0, 35, 0, 20, 0, 0); endShape(); translate(0, 40); }, // Right arm 1 function(r) { rotate(r); fill(malColor[2]); noStroke(); beginShape(); vertex(0, 0); vertex(13, 0); bezierVertex(20, 35, 20, 35, 10, 50); bezierVertex(5, 60, 5, 60, 10, 70); bezierVertex(-20, 60, -20, 20, 0, 0); endShape(); arc(-5, 50, 20, 35, 90, 270); }, // Right arm 2 function(r) { translate(32 + sin(r) * stepSize, 110 - cos(r) * 2); fill(malColor[0]); beginShape(); vertex(-20 - sin(r) * stepSize, 0); vertex(18, 7); bezierVertex(15, 25, 10, 30, 10, 30); vertex(-5, 35); vertex(-20, 20); endShape(); fill(malColor[2]); beginShape(); vertex(18, 7); bezierVertex(15, 25, 10, 30, 10, 30); vertex(5, 35); bezierVertex(5, 25, 7, 15, 10 - sin(r) * stepSize, 4); endShape(); translate(0, 30); }, // Left leg 1 function(r) { rotate(r); fill(malColor[0]); beginShape(); vertex(10, 0); bezierVertex(13, 5, 13, 10, 10, 20); vertex(-8, 20); vertex(-4, 13); vertex(-20 - sin(r / 2 - 30) * 15, -25 + cos(r / 2 - 30) * 15); endShape(); fill(malColor[2]); beginShape(); vertex(10, 0); bezierVertex(13, 5, 13, 10, 10, 20); vertex(-8, 20); vertex(6, 17); bezierVertex(10, 10, 10, 5, 6, 0); endShape(); }, // Left leg 2 function(r) { translate(32 + sin(r) * stepSize, 110 - cos(r) * 2); fill(malColor[2]); beginShape(); vertex(-20 - sin(r) * stepSize, 0); vertex(18, 7); bezierVertex(15, 25, 10, 30, 10, 30); vertex(-5, 35); vertex(-20, 20); endShape(); translate(0, 30); }, // Right leg 1 function(r) { rotate(r); fill(malColor[2]); beginShape(); vertex(10, 0); bezierVertex(13, 5, 13, 10, 10, 20); vertex(-8, 20); vertex(-4, 13); vertex(-20 - sin(r / 2 - 30) * 15, -25 + cos(r / 2 - 30) * 15); endShape(); } // Right leg 2 ); // Joe rig var Joe = new Rig( function(r, b) { b = Math.abs(sin(b)) * 8; translate(-13 - b / 5, 25); rotate(r); translate(20, -20); fill(220, 210, 190); ball(0, 0, 40); fill(0, 0, 0); ellipse(-10, 0, 6, 6); fill(255, 255, 255, 100); ellipse(-9, -2, 3, 3); noFill(); stroke(220, 180, 100); strokeWeight(2); arc(-17, -4, 20, 4, 270, 330); stroke(0, 0, 0); strokeWeight(2); arc(-17, 8, 20, 4, 30, 90); noStroke(); fill(220, 180, 100); beginShape(); vertex(20, 5); vertex(16, 7); bezierVertex(15, -4, 11, -2, 11, 4); vertex(9, 5); bezierVertex(5, -8, -9, -8, -18, -9); vertex(-30, -19); vertex(-20, -17); vertex(-28, -25); vertex(-16, -20); vertex(-17, -26); vertex(-4, -21); vertex(0, -23); vertex(4, -20); bezierVertex(20, -17, 19, -5, 20, 0); endShape(); }, // Head function(b) { b = Math.abs(sin(b)) * 12; noStroke(); fill(100, 0, 0); (rect)(-15, 25, 45, 30, 10, 10, 0, 0); quad(-15, 54, 30, 54, 25, 85, -5, 85); fill(255, 255, 255, 20); (rect)(-5, 29, 30, 45, 10, 10, 0, 0); fill(120, 150, 200); (rect)(-5, 85, 30, 20, 0, 0, 30, 30); }, // Body function(r) { translate(5, 30); rotate(r); noStroke(); fill(220, 210, 190); rect(-7, 20, 14, 25); ellipse(0, 45, 14, 14); fill(90, 0, 0); (rect)(-10, 0, 20, 40, 10, 10, 0, 0); fill(100, 0, 0); (rect)(-8, 5, 17, 35, 10, 10, 0, 0); translate(0, 40); }, // Left arm 1 function(r) { rotate(r); fill(220, 210, 190); quad(-7, 5, 11, 3, 9, 40, -5, 40); ball(2, 40, 17); }, // Left arm 2 function(r) { translate(5, 30); rotate(r); noStroke(); fill(220, 210, 190); rect(-7, 20, 14, 25); ellipse(0, 45, 14, 14); fill(90, 0, 0); (rect)(-10, 0, 20, 40, 10, 10, 0, 0); fill(100, 0, 0); (rect)(-8, 5, 17, 35, 10, 10, 0, 0); translate(0, 40); }, // Right arm 1 function(r) { rotate(r); fill(220, 210, 190); ball(2, 40, 17); quad(-7, 5, 11, 3, 9, 40, -5, 40); }, // Right arm 2 function(r) { translate(10, 100); rotate(sin(-r) * 10); fill(120, 150, 200); rect(-10, 0, 20, 25); ellipse(0, 25, 20, 20); translate(0, 25); }, // Left leg 1 function(r) { rotate(r); fill(120, 150, 200); rect(-10, 0, 20, 20); fill(20, 20, 20); (rect)(-15, 20, 25, 10, 5, 0, 0, 0); }, // Left leg 2 function(r) { translate(10, 100); rotate(sin(-r) * 10); fill(100, 130, 180); rect(-10, 0, 20, 25); ellipse(0, 25, 20, 20); translate(0, 25); }, // Right leg 1 function(r) { rotate(r); fill(100, 130, 180); rect(-10, 0, 20, 20); fill(20, 20, 20); (rect)(-15, 20, 25, 10, 5, 0, 0, 0); } // Right leg 2 ); // Makes a simpler rig for the younger versions of Leafers. They just bounce up and down. var curLeafers = 0; var smallLeafers = new Rig(function() {}, function() { image(images[curLeafers], 0, 0); }, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}); // Translates and scales the screen. var screen = { x : 0, y : 0, sX : 300, sY : 100, scale : 1 }; // Returns a particle. var particle = function(x, y, s, color, angle, speed) { return {x: x, y: y, s: s, color: color, angle: angle, speed: speed, display: function() { fill(this.color); ellipse(this.x, this.y, this.s, this.s); this.x += sin(this.angle) * this.speed; this.y -= cos(this.angle) * this.speed; if (this.x < -this.s) { this.x = width + this.s; } if (this.x > width + this.s) { this.x = -this.s; } if (this.y < -this.s) { this.y = height + this.s; } if (this.y > height + this.s) { this.y = -this.s; } }}; }; // List that holds snow. var snow = []; for (var i = 0; i < 40; i++) { snow.push(particle(random(width), random(height), random(5, 10), color(255, 255, 255, 100), 135, random(2, 4))); } // List that holds stars. var stars = []; for (var i = 0; i < 200; i++) { stars.push(particle(random(width), random(height), random(2, 4), color(255, 255, 255, random(50, 100)), 0, 0)); } // List that holds sparks. var sparks = []; for (var i = 0; i < 30; i++) { sparks.push(particle(random(320, 520), random(350, 390), random(4, 8), color(255, 120, 0), random(340, 380), random(3, 10))); sparks[i].opac = random(40, 100); } // List that holds particles for Malterra. var mParticles = []; for (var i = 0; i < 50; i++) { mParticles.push(particle(300, 300, random(8, 14), color(0, 0, 0, 70), random(360), random(7, 12))); } // Lines for a background texture. var lines = []; for (var i = 0; i < 40; i++) { lines.push({x1: random(200), y1: random(height), x2: random(400, 600), y2: random(height)}); } // Changes the scene. var nextScene = function() { curScene ++; timer = 0; screen.x = 0; screen.y = 0; screen.scale = 1; }; // Draws the story teller. var drawStoryTeller = function(x, y, size) { pushMatrix(); translate(x, y); scale(size / 100); fill(90, 0, 0); (rect)(-60, 35, 120, 160, 60, 60, 0, 0); ellipse(0, 90, 140, 100); fill(220, 210, 190); ball(0, 0, 100); fill(0, 0, 0); ellipse(-20, 4, 15, 15); ellipse(20, 4, 15, 15); fill(255, 255, 255, 60); ellipse(-17, 2, 5, 5); ellipse(23, 2, 5, 5); fill(220, 210, 190); ellipse(0, 12, 60, 6); noFill(); strokeWeight(5); stroke(170, 170, 170); arc(-23, -4, 18, 18, 240, 300); arc(23, -4, 18, 18, 240, 300); stroke(200, 190, 170); strokeWeight(3); arc(-19, 8, 18, 18, 60, 120); arc(19, 8, 18, 18, 60, 120); beginShape(); vertex(-15, -20); bezierVertex(-10, -20, -5, -17, 0, -17); bezierVertex(5, -17, 10, -20, 15, -20); endShape(); beginShape(); vertex(-16, -25); bezierVertex(-10, -25, -5, -22, 0, -22); bezierVertex(5, -22, 10, -25, 16, -25); endShape(); noStroke(); fill(155, 155, 155); beginShape(); vertex(-25, 40); bezierVertex(-15, 15, 15, 15, 25, 40); bezierVertex(10, 100, -10, 100, -25, 40); endShape(); fill(170, 170, 170); pushMatrix(); translate(0, 20); rotate(40 + sin(frameCount * 8) * 5); ellipse(20, 0, 40, 15); popMatrix(); pushMatrix(); translate(0, 20); rotate(-40 - sin(frameCount * 8) * 5); ellipse(-20, 0, 40, 15); popMatrix(); fill(140, 110, 70); beginShape(); vertex(-80, 80); vertex(0, 120); vertex(80, 80); vertex(70, 160); vertex(0, 205); vertex(-70, 160); endShape(); pushMatrix(); translate(40, 140); scale(0.4, 0.7); rotate(-15); image(images[5], 0, 0); popMatrix(); fill(220, 210, 190); ball(-75, 130, 35); ball(75, 130, 35); popMatrix(); }; // Draws the Fairy King. var drawFairyKing = function(x, y, size, c) { noStroke(); pushMatrix(); translate(x, y); scale(size / 100); if (!c) { fill(0, 0, 0); } if (c) { if (curScene !== 16) { fill(170, 150, 100); pushMatrix(); translate(-150, -40); rotate(-5); rect(-5, 0, 10, 130); ball(0, 0, 30); ball(-10, -10, 10); ball(0, -15, 10); ball(10, -10, 10); popMatrix(); } noFill(); stroke(60, 0, 150); strokeWeight(30); arc(-100, 20, 100, 100, 30, 130); noStroke(); fill(60, 0, 150); ball(0, 90, 150); noFill(); stroke(60, 0, 150); arc(35, 90, 100, 100, -60, 40); fill(60, 0, 150); stroke(40, 0, 130); strokeWeight(3); arc(-30, 140, 130, 100, 161, 300); noStroke(); rect(-93, 140, 130, 25); fill(lerpColor(color(60, 0, 150), 255, 0.16)); ellipse(-5, 123, 100, 50); fill(225, 215, 180); ellipse(-140, 50, 30, 30); ellipse(70, 130, 30, 30); if (curScene !== 16) { fill(170, 150, 100); pushMatrix(); translate(-150, -40); rotate(-5); rect(-5, 100, 10, 15); popMatrix(); } } else { pushMatrix(); translate(-150, -40); rotate(-5); rect(-5, 0, 10, 130); ellipse(0, 0, 30, 30); ellipse(-10, -10, 10, 10); ellipse(0, -15, 10, 10); ellipse(10, -10, 10, 10); popMatrix(); ellipse(0, 90, 150, 150); stroke(0, 0, 0); strokeWeight(3); arc(-30, 140, 130, 100, 161, 300); noStroke(); rect(-93, 140, 130, 25); noFill(); stroke(0, 0, 0); strokeWeight(30); arc(-100, 20, 100, 100, 30, 130); arc(35, 90, 100, 100, -60, 40); noStroke(); fill(0, 0, 0); ellipse(-140, 50, 30, 30); ellipse(70, 130, 30, 30); } if (c) { fill(225, 215, 180); ball(0, 0, 100); } else { ellipse(0, 0, 100, 100); } if (c) { if (curScene === 16) { fill(255, 255, 255); ellipse(-23, 0, 25, 25); ellipse(13, 0, 25, 25); fill(0, 0, 0); ellipse(-23, 0, 8, 8); ellipse(13, 0, 8, 8); strokeWeight(5); stroke(100, 70, 40); line(-10, -18, -30, -15); line(0, -18, 20, -15); noStroke(); } else { fill(0, 0, 0); ellipse(-23, 0, 15, 15); ellipse(13, 0, 15, 15); fill(255, 255, 255, 60); ellipse(-21, -1, 10, 10); ellipse(16, -1, 10, 10); fill(225, 215, 180); ellipse(-5, 8, 55, 5); ellipse(-5, -8, 55, 5); strokeWeight(5); stroke(100, 70, 40); line(-10, -10, -30, -15); line(0, -10, 20, -15); noStroke(); } } fill(c ? color(170, 150, 100) : 0); beginShape(); vertex(-45, -25); bezierVertex(-20, -40, 20, -38, 45, -23); vertex(50, -60); vertex(40, -65); vertex(35, -50); bezierVertex(40, -50, 20, -55, 15, -55); vertex(14, -70); vertex(-14, -70); vertex(-15, -56); bezierVertex(-20, -56, -40, -51, -35, -51); vertex(-40, -66); vertex(-47, -63); endShape(); fill(c ? color(245, 20, 50) : 0); ellipse(0, -55, 10, 10); arc(-45, -50, 10, 10, -90, 90); arc(-45, -50, 5, 10, 90, 270); arc(48, -50, 10, 10, 90, 270); arc(48, -50, 5, 10, -90, 90); if (c) { fill(0, 0, 0); if (curScene === 16) { ellipse(-5, 30, 35, 30); } else { pushMatrix(); translate(5, 20); rotate(-25); arc(0, 0, 40, 30 + sin(frameCount * 5) * 5, 0, 180); popMatrix(); } } popMatrix(); }; // Draws the stars and lines. var nightBackground = function() { background(0, 0, 50); strokeWeight(3); stroke(255, 255, 255, 10); for (var i = 0; i < lines.length; i++) { line(lines[i].x1, lines[i].y1, lines[i].x2, lines[i].y2); } noStroke(); for (var i = 0; i < stars.length; i++) { stars[i].display(); } }; // Backgrounds for when Joe and Leafers travel. var drawBackground = function(x, bgNum) { pushMatrix(); translate(x, 0); switch(bgNum) { case 0: // Mountains pushMatrix(); translate(-100, 0); scale(1.3, 1.3); nightBackground(); popMatrix(); fill(255, 255, 255, 50); cloud(-70, 50, 220, 0); cloud(-50, 80, 80, 1); cloud(-70, 110, 320, 0); cloud(420, 40, 200, 0); cloud(460, 70, 120, 1); cloud(340, 100, 310, 0); fill(40, 40, 60); beginShape(); vertex(-100, 100); vertex(0, 150); vertex(100, 45); vertex(280, 170); vertex(450, 60); vertex(600, 150); vertex(700, 110); vertex(700, 600); vertex(-100, 600); endShape(); fill(0, 0, 10, 40); beginShape(); vertex(-100, 200); bezierVertex(150, 150, 450, 290, 700, 200); vertex(700, 600); vertex(-100, 600); endShape(); fill(0, 50, 30); rect(-100, 300, 800, 300); fill(0, 10, 0, 60); beginShape(); vertex(-100, 400); bezierVertex(150, 490, 450, 350, 700, 400); vertex(700, 600); vertex(-100, 600); endShape(); break; case 1: // Forest background(160, 200, 255); noStroke(); fill(255, 255, 255, 60); cloud(100, 35, 150, 0); cloud(110, 65, 120, 1); cloud(-20, 95, 450, 0); cloud(250, 125, 100, 1); cloud(90, 155, 300, 0); fill(0, 150, 30); rect(-100, 300, 800, 300); for (var i = -1; i < width / 150 + 2; i++) { fill(120, 60, 20); rect(i * 150 - 20, 200, 40, 110); fill(0, 120, 30); ball(i * 150, 200, 140); } fill(0, 10, 0, 60); beginShape(); vertex(-100, 400); bezierVertex(150, 490, 450, 350, 700, 400); vertex(700, 600); vertex(-100, 600); endShape(); break; case 2: // Swamp background(140, 180, 140); noStroke(); fill(0, 0, 0, 40); rect(-100, 180, 800, 150); stroke(100, 70, 40); strokeWeight(20); noFill(); bezier(50, 200, 50, 150, 70, 100, 150, 100); bezier(450, 200, 450, 150, 400, 150, 400, 100); bezier(650, 200, 680, 150, 680, 150, 700, 100); noStroke(); fill(0, 60, 20); ellipse(100, 50, 600, 100); ellipse(500, 60, 600, 100); fill(10, 80, 30); ellipse(300, 100, 200, 50); ellipse(120, 50, 200, 50); ellipse(550, 70, 200, 50); ellipse(-100, 45, 200, 50); fill(100, 110, 100); beginShape(); vertex(-100, 200); vertex(100, 150); vertex(120, 270); vertex(280, 300); vertex(300, 300); vertex(320, 200); vertex(380, 200); vertex(400, 160); vertex(500, 160); vertex(620, 180); vertex(700, 240); vertex(700, 600); vertex(-100, 600); endShape(); fill(60, 35, 10); rect(-100, 300, 800, 300); for (var i = 0; i < 60; i++) { fill(40 - constrain(tan(i * 150), -1, 1) * 5, 25 - constrain(tan(i * 150), -1, 1) * 2, -constrain(tan(i * 150), -1, 1) * 2); ellipse(300 + sin(i * 15) * 300, 450 + sin(i * 55) * 110, 200, 80); } break; case 3: // Desert background(200, 190, 170); pushMatrix(); translate(-100, 0); scale(1.3, 1.3); strokeWeight(3); stroke(255, 255, 255, 10); for (var i = 0; i < lines.length; i++) { line(lines[i].x1, lines[i].y1, lines[i].x2, lines[i].y2); } popMatrix(); noStroke(); fill(255, 235, 100); ellipse(40, 100, 100, 100); fill(240, 220, 160); beginShape(); vertex(-120, 300); bezierVertex(100, 120, 150, 270, 300, 280); bezierVertex(500, 280, 620, 120, 800, 300); endShape(); fill(250, 230, 130); rect(-100, 300, 800, 300); fill(140, 130, 50, 50); triangle(-150, 600, 800, 600, 800, 320); break; case 4: // City background(170, 160, 140); noStroke(); fill(135, 130, 120); quad(0, 150, 0, 300, 400, 300, 400, 100); fill(90, 80, 70); (rect)(140 + timer / 12, 260, 25, 40, 5, 5, 0, 0); ellipse(153 + timer / 12, 249, 24, 24); (rect)(110, 260, 25, 40, 5, 5, 0, 0); ellipse(123, 249, 24, 24); rect(335, 100, 10, 100); pushMatrix(); translate(320, 140); for (var i = 0; i < 2; i++) { beginShape(); vertex(0, 0); vertex(0, 20); bezierVertex(-20, 15, -60, 50, -55, 80); vertex(-70, 78); bezierVertex(-60, 40, -10, 2, 0, 0); endShape(); translate(0, 74); rotate(-10); } popMatrix(); ball(340, 100, 50); ellipse(330, 100, 10, 8); ellipse(345, 100, 10, 8); ball(340, 160, 50); ball(340, 222, 50); fill(130, 120, 110); rect(-100, 0, 200, 300); rect(350, 0, 300, 300); fill(110, 105, 100); rect(-100, 300, 800, 300); fill(0, 0, 0, 20); triangle(-100, 450, -100, 600, 700, 600); break; } popMatrix(); }; // Draws the Fairy King's castle. var castle = function() { noStroke(); fill(110, 80, 50); arc(300, 600, 1200, 600, 180, 360); fill(85, 80, 80); rect(230, 0, 140, 150); fill(0, 0, 0, 100); rect(285, 80, 10, 40); rect(305, 80, 10, 40); fill(105, 100, 100); for (var i = 0; i < 5; i++) { rect(200 + i * 45, 130, 20, 20); } rect(200, 150, 200, 200); rect(150, 170, 50, 40); arc(150, 170, 80, 80, 90, 180); rect(110, 130, 40, 40); rect(400, 220, 50, 40); arc(450, 220, 80, 80, 0, 90); rect(450, 180, 40, 40); fill(100, 40, 10); triangle(100, 130, 160, 130, 130, 60); triangle(440, 180, 500, 180, 470, 110); fill(0, 0, 0, 100); rect(285, 180, 10, 40); rect(305, 180, 10, 40); rect(275, 270, 50, 80); arc(300, 270, 50, 50, 181, 360); fill(0, 0, 0, 50); quad(275, 350, 325, 350, 370, 600, 230, 600); }; // List that holds leaves. var leaves = []; for (var i = 0; i < 5; i++) { leaves.push({s : 0, r : 0, rTo : i * 30 - 60}); } // Controls the size of position of baby leafers. var babyLeafers = { x: 300, y: 500, s: 0 }; // Scrolls the credits. var creditScroll = 0; var credits = "Directed, written,\nand animated by\nGreen Ghost\n\n\nLeafers originally\ncreated by\nKhan Academy\n\n\nThis animation was\ncreated for the \"Avatars\"\ncontest by the\nKACP Challenge Council\nin January, 2019"; // Actions for Leafers and Malterra. var leafAct = 0, malAct = 0; // Draws the video. var video = [ function() { background(0, 0, 0); textFont(fonts[0], 30); fill(255, 255, 255); text("Green Ghost Presents...", 300, 300); if (timer > 140) { setFade(false); } if (fade > 255) { nextScene(); setFade(true); } }, // Green Ghost Presents... function() { background(0, 0, 0); textFont(fonts[0], 30); fill(255, 255, 255); text("~ Tales of the Avatars ~", 300, 260); fill(50, 180, 50); textSize(80); text("LEAFERS", 300, 340); if (timer > 140) { setFade(false); } if (fade > 255) { nextScene(); setFade(true); } }, // Tales of the Avatars - Leafers function() { background(180, 180, 200); fill(255, 255, 255, 200); cloud(-50, 100, 250, 0); cloud(-50, 130, 150, 1); cloud(-50, 160, 350, 0); cloud(450, 200, 200, 0); cloud(520, 230, 200, 1); cloud(490, 260, 200, 0); fill(100, 150, 125); arc(300, 640, 300, 300, 180, 360); fill(140, 170, 230); rect(0, 580, 600, 20); fill(130, 60, 30); beginShape(); vertex(280, 350); vertex(320, 350); vertex(350, 520); vertex(325, 510); vertex(300, 525); vertex(275, 510); vertex(250, 520); endShape(); fill(170, 50, 0); ball(300, 350, 200); ellipse(230, 380, 15, 20); ellipse(270, 370, 15, 20); ellipse(290, 420, 15, 20); ellipse(260, 405, 15, 20); ellipse(300, 390, 15, 20); fill(160, 120, 50); rect(250, 200, 100, 70); fill(230, 230, 255, 150); rect(270, 220, 60, 30); fill(160, 120, 50); rect(298, 220, 4, 30); fill(140, 80, 20); triangle(240, 200, 360, 200, 300, 150); fill(170, 50, 0); for (var i = 0; i < snow.length; i++) { snow[i].display(); } if (timer > 180) { screen.scale += Smooth(screen.scale, 2, 40); } if (timer > 400) { fadeOut = false; setFade(true); nextScene(); } }, // Tree house scene function() { background(130, 80, 40); noStroke(); fill(0, 0, 0, 30); quad(0, 100, 0, 600, 600, 600, 600, 500); drawStoryTeller(300, 300, 155); if (timer < 200) { speechBubble("Would you like\nto hear a story?", 200, 130, 250, 230, 230, 120); } else if (timer < 480) { speechBubble("This one's about\na humble avatar\nnamed Leafers...", 200, 130, 250, 230, 280, 130); } if (timer > 400) { setFade(false); } if (fade > 255 && timer > 100) { nextScene(); setFade(true); Joe.setPos(260, 300); Joe.setDirec("right", 100); } }, // Storyteller function() { drawBackground(50, 0); fill(0, 0, 90); ellipse(600, 430, 600, 200); Joe.display(); fill(255, 255, 255); textSize(30); textAlign(CENTER, CENTER); text("Once upon a time...", 300, 100); if (timer > 200) { setFade(false); } if (fade > 255 && timer > 100) { nextScene(); setFade(true); Joe.reset(); } }, // Once upon a time... function() { background(40, 10, 10); noStroke(); for (var i = 0; i < stars.length; i++) { stars[i].display(); } fill(35, 30, 30); rect(0, 320, 600, 280); for (var i = 0; i < 10; i++) { fill(255, 120, 0, 100 + sin(frameCount * 10 + i * 45) * 20); triangle(300 + i * 20 + sin(i * 120) * 5, 390, 300 + i * 20 + 60, 390, 300 + i * 20 + 30 + sin(frameCount * 3 + i * 130) * 20, 260 + sin(frameCount * 5 + i * 145) * 45); } for (var i = 0; i < sparks.length; i++) { fill(sparks[i].color, sparks[i].opac); ellipse(sparks[i].x, sparks[i].y, sparks[i].s, sparks[i].s); sparks[i].x += sin(sparks[i].angle) * sparks[i].speed; sparks[i].y -= cos(sparks[i].angle) * sparks[i].speed; sparks[i].opac -= 3; if (sparks[i].opac < 0) { sparks[i] = particle(random(320, 520), random(350, 390), random(4, 8), color(255, 120, 0), random(340, 380), random(3, 10)); sparks[i].opac = random(40, 100); } } fill(0, 0, 0); rect(400, 350, 50, 40); triangle(395, 350, 455, 350, 425, 330); rect(350, 350, 40, 40); pushMatrix(); translate(325, 390); rotate(-60); rect(0, 0, 45, 5); popMatrix(); pushMatrix(); scale(-1, 1); drawFairyKing(-10, 280, 130, false); popMatrix(); triangle(0, 400, 0, 600, 600, 700); fill(255, 255, 255); textSize(30); textAlign(CENTER, CENTER); text("The Fairy King's\nrule was oppressive...", 300, 100); if (timer > 340) { nextScene(); screen.y = -600; } }, // Fairy King intro function() { background(0, 0, 50); pushMatrix(); translate(0, -200); strokeWeight(3); stroke(255, 255, 255, 10); for (var i = 0; i < lines.length; i++) { line(lines[i].x1, lines[i].y1, lines[i].x2, lines[i].y2); } noStroke(); for (var i = 0; i < stars.length; i++) { stars[i].display(); } fill(0, 0, 180, 100); beginShape(); vertex(0, 590); vertex(0, 1200); vertex(600, 1200); vertex(600, 590); bezierVertex(400, 590 + sin(frameCount * 2) * 20, 200, 590 + sin(frameCount * 2 + 180) * 20, 0, 590); endShape(); fill(0, 0, 70, 100); quad(0, 890 + sin(frameCount * 2) * 20, 0, 1200, 600, 1200, 600, 890 + sin(frameCount * 2 + 180) * 20); if (timer > 30) { screen.y += constrain(Smooth(screen.y, 0, 100), 0, 10); } fill(120, 110, 80); rect(0, 1170, 600, 230); fill(80, 70, 50); rect(0, 1260, 600, 140); fill(20, 10, 10); rect(0, 1350, 600, 50); noFill(); strokeWeight(25); stroke(0, 100, 60); beginShape(); for (var i = Math.abs((600 + screen.y) / 50) + 1; i >= 0; i--) { vertex(315 + sin(i * 50 + 50) * 40, 1180 - i * 50); } vertex(315, 1190); endShape(); imageMode(CENTER); pushMatrix(); translate(babyLeafers.x, babyLeafers.y); noStroke(); fill(150, 255, 100, babyLeafers.s / 3); if (Math.abs(leaves[0].r - leaves[0].rTo) < 3) { for (var i = 0; i < 10; i++) { ellipse(0, -50, 50 + i * 15, 50 + i * 15); } } scale(babyLeafers.s / 100); image(images[0], 0, -babyLeafers.s / 2); popMatrix(); if (Math.abs(leaves[0].r - leaves[0].rTo) < 3) { babyLeafers.s += Smooth(babyLeafers.s, 100, 10); } if (screen.y > -15) { for (var i = 0; i < leaves.length; i++) { fill(120 - sin(i * 36) * 10, 230 - sin(i * 36) * 10, 100 - sin(i * 36) * 10); pushMatrix(); translate(300, 535); rotate(leaves[i].r); ellipse(0, -leaves[i].s / 2, leaves[i].s / 2.5, leaves[i].s); leaves[i].s += Smooth(leaves[i].s, 70, 10); if (leaves[i].s > 60) { leaves[i].r += Smooth(leaves[i].r, leaves[i].rTo, 10); } popMatrix(); } } popMatrix(); fill(255, 255, 255); textSize(25); textAlign(CENTER, CENTER); text("But there was\nstill hope...", 300, 100 - screen.y); if (timer > 560) { nextScene(); } }, // Leafers is born function() { nightBackground(); fill(220, 210, 190); quad(160, 350, 300, 350, 0, 700, 0, 480); quad(295, 420, 405, 420, 430, 600, 270, 600); ball(230, 350, 140); pushMatrix(); translate(300, 290); rotate(10); scale(2 + sin(frameCount * 2) / 20, 2 + sin(frameCount * 2) / 20); image(images[0], 0, 0); popMatrix(); ball(350, 400, 140); speechBubble(" Oh my, \na seedling!", 280, 150, -200, 300, 400, 180); if (timer > 200) { nextScene(); } }, // Joe finds Leafers function() { drawBackground(-50, 0); if (timer === 1) { Joe.setRot(0, 0, 0, 0, 20, 60, 0, 0, 0, 0); Joe.setPos(280, 300); Joe.setDirec("right", 100); } pushMatrix(); translate(330, 364); rotate(15); scale(0.3, 0.3); image(images[0], 0, 0); popMatrix(); Joe.display(); fill(0, 0, 0); arc(290, 315, 20, 5 + sin(frameCount * 4) * 3, 90, 200); speechBubble("Now I have\na chance against\nthe Fairy King!", 300, 150, 290, 270, 450, 180); if (timer > 200) { Joe.reset(); nextScene(); } }, // Joe talks function() { if (timer === 1 && curLeafers === 0) { Joe.setDirec("right", 200); Joe.setPos(210, 290); smallLeafers.setDirec("right", 70); smallLeafers.setPos(350, 580); Leafers.setDirec("right", 200); Leafers.setPos(350, 280); } drawBackground(50 - timer / 4, curLeafers); if (curLeafers < 4) { smallLeafers.animate(8); smallLeafers.display(); } else { Leafers.animate(5); Leafers.display(); } Joe.animate(7); Joe.display(); if (timer > 400) { curLeafers ++; if (curLeafers > 4) { curLeafers = 4; if (timer > 560) { nextScene(); } } else { smallLeafers.setDirec("right", 90 + curLeafers * 30); smallLeafers.setPos(350, 560 - curLeafers * 20); timer = 0; } } }, // Joe & Leafers walking function() { if (timer === 1) { screen.scale = 1; } screen.sX = 300; screen.sY = 200; screen.scale += 0.001; nightBackground(); castle(); if (timer > 250) { nextScene(); } }, // Castle front view function() { background(100, 0, 0); noStroke(); fill(0, 0, 0, 50); beginShape(); vertex(560, 0); vertex(600, 0); vertex(600, 600); vertex(100, 600); vertex(460, 450); endShape(); fill(180, 140, 60); beginShape(); vertex(300, 160); vertex(400, 160); vertex(440, 450); vertex(440, 500); vertex(470, 500); vertex(480, 600); vertex(150, 600); vertex(240, 450); endShape(); drawFairyKing(300, 320, 180, true); speechBubble("Do you have what\nit takes to defeat\nmy CHAMPION?", 160, 100, 200, 270, 300, 150); if (timer > 280) { nextScene(); } }, // Fairy king function() { if (timer === 1) { Malterra.setPos(300, 200); Malterra.setDirec("right", 200); Malterra.setRot(5, 5, 65, 20, -30, 100, -90, 0, 90, -10); } background(20, 20, 20); fill(255, 255, 255, 50); ellipse(300, 300, 550, 550); for (var i = 0; i < mParticles.length; i++) { mParticles[i].display(); mParticles[i].angle += 5; } Malterra.display(); if (timer > 200) { nextScene(); } }, // Malterra function() { background(120, 120, 120); if (timer === 1) { Leafers.setDirec("right", 110); Malterra.setDirec("left", 150); Leafers.setPos(120, 200); Malterra.setPos(410, 380); Leafers.setRot(5, -20, 0, 110, 10, 110, 0, 0, 90, 0); Malterra.setRot(10, 0, -30, 40, -40, 40, 90, -10, 0, -10); } fill(255, 255, 255, random(100)); noStroke(); rect(0, 0, width, height); pushMatrix(); translate(150, 150); for (var i = 0; i < mParticles.length; i++) { mParticles[i].display(); mParticles[i].angle += 5; } popMatrix(); Leafers.display(); Malterra.display(); screen.scale += 0.0001; if (timer > 180) { nextScene(); Leafers.setDirec("right", 100); Malterra.setDirec("left", 100); Leafers.setPos(20, 300); Malterra.setPos(540, 300); Leafers.setRot(0, 0, 10, 10, 0, 10, 0, 0, 90, 0); Malterra.setRot(0, 0, -30, 40, -40, 40, 90, -10, 0, -10); } }, // Fighting 1 function() { background(120, 120, 120); noStroke(); fill(255, 255, 255, 40); rect(0, 350, 600, 250); if (leafAct === 0) { Leafers.move(230, 300, 10, 0); if (Leafers.x > 229) { leafAct = 1; } } else if (leafAct === 1) { if (Leafers.arm2L > 69) { leafAct = 2; } else if (Leafers.arm2L > 33) { Leafers.slideRot(5, 5, -50, 10, 50, 70, 0, 0, 90, 0, 5); } else { Leafers.slideRot(5, 0, -20, 60, 50, 35, 0, 0, 50, 0, 2); } } else if (leafAct === 2) { Leafers.slideRot(5, 0, 10, 60, 10, 80, 90, 0, 90, 0, 6); } else if (leafAct === 3) { Leafers.slideRot(15, 5, 10, 60, 10, 80, 90, 0, 90, 0, 6); } else if (leafAct === 4) { Leafers.x += Smooth(Leafers.x, 80, 5); Leafers.y += Smooth(Leafers.y, 400, 5); Leafers.slideRot(-15, 100, 100, 30, 100, 50, 0, -20, 10, -20, 6); if (Leafers.x < 82) { malAct = 4; } } if (malAct === 0) { Malterra.move(370, 300, -9, 0); if (Malterra.x < 371) { malAct = 1; } } else if (malAct === 1) { Malterra.slideRot(5, -5, -20, 60, 50, 10, 0, 0, 90, 0, 2); if (Leafers.arm2L > 33) { malAct = 2; } } else if (malAct === 2) { Malterra.x += Smooth(Malterra.x, 500, 6); Malterra.slideRot(-10, 10, 5, 80, 5, 70, 0, -10, 90, -10, 2); if (Malterra.x > 499.3) { malAct = 3; leafAct = 3; Malterra.grav = -14; } } else if (malAct === 3) { Malterra.y += Malterra.grav; Malterra.grav += 0.7; Malterra.y = constrain(Malterra.y, 0, 300); if (Malterra.y === 300) { Malterra.grav = 0; if (Malterra.arm2L > 55) { leafAct = 4; Malterra.slideRot(-10, 10, -15, 40, 15, 75, 0, -10, 90, -10, 6); } else { Malterra.slideRot(-10, 10, -15, 40, 10, 65, 0, -10, 90, -10, 2); } } else { Malterra.move(370, Malterra.y, -4, 0); } } else if (malAct === 4) { Malterra.slideRot(10, 10, 80 + sin(frameCount * 5) * 15, 60 + sin(frameCount * 5 + 180) * 15, 80 + sin(frameCount * 5 + 180) * 15 , 60 + sin(frameCount * 5) * 15, 0, -10, 0, -10, 6); } Leafers.display(); Malterra.display(); if (timer > 300) { nextScene(); leafAct = 0; malAct = 0; Leafers.setPos(-300, 360); Malterra.setPos(300, 300); Leafers.setRot(40, -45, 55, 65, 55, 55, 0, 20, 90, 20); Malterra.setRot(0, 0, 0, 0, 0, 0, 0, 0, 0, 0); } }, // Fighting 2 function() { background(120, 120, 120); screen.x = 300 - Leafers.x; if (leafAct === 0 && timer > 15) { Leafers.y += Smooth(Leafers.y, 300, 8); Leafers.slideRot(0, 0, 5, 10, 5, 20, 90, 0, -90, 0, 8); if (Leafers.headR < 1) { leafAct = 1; } } else if (leafAct === 1) { Leafers.move(250, 300, 8, 0); if (Leafers.x > 248) { leafAct = 2; } } else if (leafAct === 2) { Leafers.slideRot(0, 0, 45, 50, 50, 60, 90, 0, -90, 0, 3); if (Leafers.arm2L > 48) { malAct = 1; leafAct = 3; } } else if (leafAct === 3) { Leafers.slideRot(0, 0, 5, 15, 5, 5, 90, 0, -90, 0, 6); } if (malAct === 0) { Malterra.slideRot(10, 10, 80 + sin(frameCount * 5) * 15, 60 + sin(frameCount * 5 + 180) * 15, 80 + sin(frameCount * 5 + 180) * 15 , 60 + sin(frameCount * 5) * 15, 0, -10, 0, -10, 6); } else if (malAct === 1) { Malterra.x += Smooth(Malterra.x, 600, 6); Malterra.y += Smooth(Malterra.y, 420, 7); Malterra.slideRot(40, 90, 50, 20, 50, 30, 0, -10, 0, -10, 7); } noStroke(); fill(255, 255, 255, 40); rect(-600, 350, 1200, 250); Leafers.display(); Malterra.display(); if (timer > 240) { nextScene(); } }, // Fighting 3 & Leafers wins function() { background(lerpColor(color(100, 0, 0), 0, constrain(timer / 100, 0, 1))); noStroke(); fill(0, 0, 0, 50); beginShape(); vertex(560, 0); vertex(600, 0); vertex(600, 600); vertex(100, 600); vertex(460, 450); endShape(); fill(180, 140, 60, 255 - timer * 2); beginShape(); vertex(300, 160); vertex(400, 160); vertex(440, 450); vertex(440, 500); vertex(470, 500); vertex(480, 600); vertex(150, 600); vertex(240, 450); endShape(); drawFairyKing(280, 320, 180, true); fill(50, 50, 50); noStroke(); for (var i = 0; i < 6; i++) { rect(i * width / 6, constrain(timer * 8, 0, height) - height, width / 18, height); } if (timer > 200) { nextScene(); fadeOut = false; setFade(true); } }, // Fairy king & jail function() { if (timer === 1) { Leafers.setPos(60, 420); Leafers.setDirec("right", 120); Leafers.setRot(20, 0, -5, 5, -5, 5, 0, 0, 0, 0); Joe.setPos(150, 470); Joe.setDirec("right", 100); Joe.setRot(10, 0, -5, 5, -5, 5, 0, 0, 0, 0); } nightBackground(); for (var i = 0; i < width / 10; i++) { fill(0, 200, 100, 7 + sin(frameCount / 2 + i * 175) * 2); ellipse(i * 10, 100 + i * 3, 160 + sin(i * 115) * 40, 160 + sin(i * 1275) * 40); } fill(0, 70, 40); ellipse(0, 700, 1500, 400); Leafers.display(); Joe.display(); textAlign(CENTER, TOP); textFont(fonts[0], 40); fill(0, 0, 0, 60); stretchText(credits, 300, 625 + creditScroll, 80, 100); fill(255, 255, 255); stretchText(credits, 300, 620 + creditScroll, 80, 100); creditScroll -= 2; if (creditScroll < -1200) { setFade(false); } if (fade > 255) { nextScene(); setFade(true); } }, // Final scene & credits function() { textAlign(CENTER, CENTER); background(0, 0, 0); image(noiseCanvas, 300, 300); textFont(fonts[2], 100); fill(0, 0, 0, 60); stretchText("THE\nEND", 300, 255, 80, 100); fill(255, 255, 255); stretchText("THE\nEND", 300, 250, 80, 100); textFont(fonts[3], 30); text("Thanks for watching!", 300, 440); backB.pack(); } // THE END ]; // Main menu function. var menu = function() { background(0, 0, 0); image(noiseCanvas, 300, 300); title(0, 5, color(0, 0, 0, 60)); title(0, 0, color(255, 255, 255)); pushMatrix(); translate(10, 280); scale(-1.5, 1.5); image(images[4], 0, 0); popMatrix(); playB.pack(); }; // Sets the reset variable to a function that resets the animation. var reset = function() { Leafers.reset(); Malterra.reset(); Joe.reset(); timer = 0; screen = { x : 0, y : 0, sX : 300, sY : 100, scale : 1 }; fade = 0; fadeOut = true; creditScroll = 0; curScene = 0; leaves = []; for (var i = 0; i < 5; i++) { leaves.push({s : 0, r : 0, rTo : i * 30 - 60}); } babyLeafers = { x: 300, y: 500, s: 0 }; leafAct = 0; malAct = 0; }; // Loads background image for the menu. var load = function() { for (var j = 0; j < height / div; j++) { var n = noise(noiseX / 50 * div, j / 50 * div); var n2 = map(noise(n * 11), 0, 1, 0, 130); noiseCanvas.fill(50, 100 + n2, 300 - n2 * 2); noiseCanvas.ellipse(noiseX * div, j * div, div * 2, div * 2); } noiseX ++; if (noiseX > width / div) { noiseCanvas.filter(BLUR, 5); noiseCanvas.fill(255, 255, 255, 100); for (var i = 0; i < 70; i++) { var s = random(3, 7); noiseCanvas.ellipse(random(width), random(height), s, s); } for (var i = 0; i < 10; i++) { noiseCanvas.fill(255, 255, 255, 60); noiseCanvas.pushMatrix(); noiseCanvas.translate(random(width), random(height)); noiseCanvas.rotate(random(360)); var s = random(3, 7); noiseCanvas.ellipse(0, 0, s, s); noiseCanvas.strokeWeight(s / 2); noiseCanvas.stroke(255, 255, 255, 60); noiseCanvas.line(0, -s, 0, s); noiseCanvas.line(-s, 0, s, 0); noiseCanvas.noStroke(); noiseCanvas.rotate(45); noiseCanvas.fill(255, 255, 255, 30); noiseCanvas.rect(-s * 0.6, -s * 0.6, s * 1.2, s * 1.2); noiseCanvas.popMatrix(); } noiseCanvas.filter(BLUR, 1); for (var i = 0; i < 300; i++) { noiseCanvas.fill(0, 0, 80, i / 2); noiseCanvas.rect(0, 300 + i, width, 1); } loaded = true; } background(0, 0, 0); fill(255, 255, 255); textAlign(CENTER, CENTER); textFont(fonts[0], 30); text("LOADING" + dots, 300, 300); if (frameCount % 10 === 0) { dots = dots + "."; dots = dots.length > 3 ? "" : dots; } noFill(); strokeWeight(2); stroke(255, 255, 255); arc(300, 300, 200, 200, map(noiseX, 0, width / div, 0, 90), map(noiseX, 0, width / div, 0, 450)); }; /* // Puts everything together draw = function() { imageMode(CENTER); if (!loaded) { load(); } else { if (playing) { timer ++; pushMatrix(); translate(screen.x + screen.sX, screen.y + screen.sY); scale(screen.scale); translate(-screen.sX, -screen.sY); video[curScene](); popMatrix(); noStroke(); fill(0, 0, 0, fade); rect(0, 0, width, height); if (fadeOut) { fade -= 5; } else { fade += 5; } fade = constrain(fade, 0, 256); } else { menu(); } } click = false; cursor(overButton ? "pointer" : "default"); overButton = false; }; */ // Checks for when the mouse is clicked. mouseClicked = function() { click = true; }; println("Yooo go play this game instead loll ty \nkhanacademy.org/cs/i/6449281631830016");
Folds	22,35,38,43,44,50,52,73,76,83,97,104,110,112,115,168,171,231,234,407,410,416,422,456,457,511,512,533,534,553,554,567,568,579,580,598,599,617,618,629,630,640,644,652,656,702,703,757,758,779,780,800,801,814,815,827,828,846,847,865,866,877,878,888,893,929,930,940,941,953,954,959,960,972,973,978,979,986,987,993,994,1001,1002,1008,1013,1015,1018,1024,1027,1046,1050,1052,1056,1058,1062,1065,1069,1071,1075,1077,1080,1086,1089,1162,1165,1317,1320,1330,1333,1514,1517,1547,1551,1553,1556,1560,1570,2209,2212,2223,2226,2253,2256,2308,2311,2342,2345,2347
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLrgzN2OCgw
Votes	621
Spin-Offs	25
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	{"id":"4511522971090944","title":"Contest: Avatars","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Green Ghost
Author Name	GreenGhost1
Author ID	kaid_145655330786057731504264
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739400882766
Updated	8 months ago, 1744820715818
Source Deleted	unknown