Viewing Program

Program Data

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

Title	Life of a Leafer: Seed
ID	5719343477194752
Created	6 years ago, 1548617493024
Updated	5 years ago, 1586893699856
Code	/* I've been programming bla bla bla put me in advanced again. In case anyone is really wondering, I got the JS coloring badge in June 2015, meaning I've been programming for almost four years. That's longer than I thought I had been by a year. / var noReflections = !true; /* IF THE PROGRAM CRASHES somewhere after page 20, try restarting the program after removing the exclamation point in the above line. I'm not sure what causes it to crash for some people, but it might be the reflections. This took too much time to make again. I need to stop making oversized contest entries. https://www.khanacademy.org/cs/-/4937609149677568 This is an idea I came up with when I started learning JS. I made the beginnings of a program for it (linked above) but eventually lost interest, so it only has some background graphics and a nonfunctional menu. I didn't have a story made up, just knowing that it started in a clearing with a nest. Aside from that, the only other inspiration taken from that project are the name "Life of a Leafer", the rough UI idea, and that there is a waterfall nearby the leafers' home. It's possible that each "chapter" of the program would have corresponded to a visual stage in the main character's life, or that (closer to what I'd do nowadays) there would have been a separate program for each stage. Perhaps at some point someone else will take up completing (or entirely rewriting) this story, going off of what is here. As for making this program, I wrote the whole narrative in a notebook and drew sketches of the poses. The custom drawings aren't as morphologically consistent as I would have liked (and they look so cringy); just before writing this I made some improvements to several poses (mainly by making the heads larger). I made the mistake of not writing a list of the things the animation and UI system would need and then planning out the program's structure based on that, so I think the code is lacking. I usually don't actually plan out my programs like that, but I think it really would have helped here. I still spend a lot of time obsessing over such things in my head, though. I wrote a bit of code in the new program page so I could easily make the character illustrations. It has view area translation, a mouseClicked function that prints the mouse position (taking the translation into account), and the clr and img variables from this program. I would say a simple script like that is essential when making graphics on KA for a large program, at least so it's not laggy and you don't have to repeatedly restart. Printing the mouse position makes things faster but a lot of tweaking is necessary. */ // if (mouseJustReleased && mouseY < 500) { println(round(mouseX / cMult) + ", " + round(mouseY / cMult)); } // Simple variables and short setup { smooth(); imageMode(CENTER); var cMult = width / 1000; scale(cMult); // map 1000 to canvas width var mouseJustReleased = false; // whether the mouse was released on the current frame mouseReleased = function() { mouseJustReleased = true; }; var pages, setPage; // Oh Noes fix var page; // the index of the current page var pageDraw; // the index of the page with the active draw function var timeScale = 0.06; // Virtual frame rate (60 FPS) over 1000 milliseconds // The ideal number of 60 FPS frames that have passed since the page draw function changed; this is not the actual number of elapsed frames if any took longer than 1/60 seconds. This variable is used for timing in animation that must stop at the end of a page. var frame = 0; var localFrame = 0; // the same as frame except this one resets on every page change var pFrame = 0; // millis() timeScale, in other words a perpetual timer for animation that doesn't stop when a page ends var maxFrame = 0; var frameStart; // the millisecond the first frame of the page draw function was on var pageStart; // the millisecond the first frame of the page was on var delta = 0; // how much of 1/60 seconds the last real frame lasted; used for ongoing simulation var endMillis = millis(); // used to set delta // } /* smoothInt(x), smoothInt(smoothness, x) Smooth interpolation Returns a value from 0 to 1 given an x value also in that interval. Values outside that are extended (e.g. when x = 2, the output is 1). If smoothness is not a number or omitted, 0.5 is used. A graph of y = smoothInt(x) would be a curve with a range of 0 to 1, with a linear part in the middle when the smoothness is less than 1, and with quadratic curves occupying the rest of the output where 0 < x < 1. A smoothness of 0 results in y = x. Graph: https://www.desmos.com/calculator/275do32oly / var smoothInt = function(a, b) { // Get variables var x, s = 0.5; if (arguments.length === 1) { x = a; } else { x = b; if (typeof a === "number") { s = a; } } // Outside 0 to 1 if (x >= 1) { return 1; } else if (x <= 0) { return 0; } // Curve var int = 1 / (1 / s + 1); if (x < int) { return (s + 1 / s + 2) x * x / 2; } else if (x > 1 - int) { x = 1 - x; return 1 - (s + 1 / s + 2) * x * x / 2; } else if (x >= 0 && x <= 1) { return s * x + x - s / 2; } }; /* Returns a pseudorandom number given a seed: sRandom(s) 0 to 1 sRandom(s, a) 0 to a sRandom(s, a, b) a to b / var sRandom = function(s, a, b) { if (b === undefined) { if (a === undefined) { b = 1; } else { b = a; } a = 0; } s += 9.44; return abs(s s * s * s * 2.34 % 1) * (b - a) + a; }; // Older version, presumably slower but I have no idea. /var sRandom = function(s, a, b) { if (arguments.length === 1) { s += 9.44; return abs(s s * s * s * 2.34 % 1); } else if (arguments.length === 2) { return sRandom(s) * a; } else { return sRandom(s) * (b - a) + a; } };/ var ui = { autoPlay: true, // whether to automatically increment the page number font: createFont("Georgia"), fontSize: 34, sansFont: createFont("Open Sans Bold"), buttonSize: 70, // the diameter of a button // Update and draw all of the UI draw: function() { // Base noStroke(); fill(40); rect(0, 750, 1000, 250); // Page number fill(255, 40); textAlign(LEFT, CENTER); textFont(this.sansFont 0.8, this.fontSize); text("page " + page, 50, 950); //textAlign(RIGHT, CENTER); //text("frame " + frame, 950, 950); // Buttons // Loop through all the buttons for (var i = 0; i < this.buttons.length; i++) { var x = 500 - (this.buttons.length - 1) * 40 + i * 80; var interaction = 0; // graphic function argument if (dist(mouseX / cMult, mouseY / cMult, x, 950) < this.buttonSize / 2) { if (mouseIsPressed) { interaction = 2; } else { interaction = 1; } if (mouseJustReleased) { this.buttons[i][0](); } } pushMatrix(); translate(x, 950); scale(this.buttonSize / 200); this.buttons[i][1](interaction); popMatrix(); } // Page text if (this.text) { textAlign(LEFT, TOP); textFont(this.font, this.fontSize); fill(200); text(this.text.slice(0, this.shownText), 100, 775, 800, 1000); if (this.delay === 0) { // display the next character or idle if (this.shownText < this.text.length) { // Set the next delay var char = this.text[this.shownText]; // the last displayed character if (".?;".includes(char)) { this.delay = 12; } else if (",!:".includes(char)) { this.delay = 6; } else { this.delay = 0; } // Display the next character this.shownText++; } } else { // wait this.delay--; } } // Auto play if (this.autoPlay && frame >= maxFrame) { setPage(); } }, // All buttons // Format: [ on-press function, graphic function (coords -100 to 100) ] // The on-press function is called with the given argument when the button is pressed. // Graphic function argument: 1 for hovered, 2 for pressed, 0 for neither buttons: [ /* Page decrement / [ function() { setPage(-1); }, function(i) { noStroke(); if (!page) { fill(100); } else if (i === 2) { fill(232, 121, 188); } else if (i) { fill(194, 95, 154); } else { fill(140, 70, 112); } ellipse(0, 0, 200, 200); stroke(255, 170); strokeWeight(25); beginShape(); vertex(15, -40); vertex(-35, 0); vertex(15, 40); endShape(); } ], / Play or pause / [ function() { ui.autoPlay = !ui.autoPlay; }, function(i) { noStroke(); if (i === 2) { fill(170, 186, 247); } else if (i) { fill(117, 133, 199); } else { fill(84, 97, 150); } ellipse(0, 0, 200, 200); stroke(255, 170); strokeWeight(25); if (ui.autoPlay) { line(-30, -35, -30, 35); line(30, -35, 30, 35); } else { triangle(45, 0, -15, -40, -15, 40); } } ], / Page increment / [ function() { if (ui.shownText === ui.text.length) { setPage(); } else { ui.shownText = ui.text.length; } }, function(i) { noStroke(); if (!pages[page + 1] && ui.shownText === ui.text.length) { fill(100); } else if (i === 2) { fill(124, 207, 152); } else if (i) { fill(91, 166, 116); } else { fill(64, 117, 82); } ellipse(0, 0, 200, 200); stroke(255, 170); strokeWeight(25); beginShape(); vertex(-15, -40); vertex(35, 0); vertex(-15, 40); endShape(); } ] ], text: "", // the currently displayed text shownText: 0, // the length of the displayed text delay: 0, // how many frames to wait before incrementing the index // Sets the text to display. setText: function(t) { this.text = t; this.shownText = 0; this.delay = 0; } }; // Raster images var img = { leaferSeed: getImage("avatars/leafers-seed"), leaferSapling: getImage("avatars/leafers-sapling"), leaferTree: getImage("avatars/leafers-tree"), leaferUltimate: getImage("avatars/leafers-ultimate"), aqualineTree: getImage("avatars/aqualine-tree") }; // Commonly used colors // It turns out that some of the colors in the bitmaps given in the PJS environment are different from those in the actual vector avatars. This variable mostly has the colors from the vector versions. var clr = { // Ultimate and tree (or adult) leafers al: { body: 0xff8ec65e, belly: 0xffc5dd7c, bellyShadow: 0xff99b259, leaf: 0xff6ea041, leafShadow: 0xff5a7f39, eye: 0xff5a7f39, redLeaf: color(189, 137, 110), mouth: color(71, 74, 41) }, // Sapling and seed (or baby) leafers bl: { body: 0xffa3d174, bodyShadow: 0xff6ea041, // also backlit leaf leaf: 0xff85c55a, leafShadow: 0xff5a7f39, eye: 0xff557635 }, // Tree aqualine aa: { body: 0xff8dd4f0, bodyShadow: 0xff6786c4, // also fins finShadow: 0xff5273b8, eye: 0xff5273b8 } }; / Draws a commonly used graphic d at (x, y) with size s Extra arguments may be used Graphics: grass: a tuft of what appears to be grass leafy: a light plant with long stems and a leaf on each one trunk: a simple tree trunk bush: a dark green bush bedding: dry foliage for nests leafer with seed: A leafer tree standing on its hind legs holding a seed and facing to the right. A first extra argument determines the position of the legs: 1: right leg forward and left leg back 2: the opposite anything else: still A second extra argument is used as an alternate leaf color. leafer tree mouth: a talking leafer tree mouth facing left / var graphic = function(d, x, y, s, a1, a2) { pushMatrix(); translate(x, y); scale(s / 200); switch (d) { case "grass": strokeCap(ROUND); noiseDetail(2, 0.5); noFill(); strokeWeight(14); for (var i = 0; i < 20; i++) { stroke(lerpColor( color(96, 150, 92), color(56, 99, 70), sRandom(i))); var x = sRandom(x + y + i, -1, 1); bezier(x 70, sRandom(i + y, 10), x * 70, 0, x * 80, -40, x * 120 + noise(-i) * 200 + noise(pFrame / 150, i) * 50 - 90, abs(x) * 120 + noise(i) * 250 - 300); } break; case "leafy": noiseDetail(2, 0.5); for (var i = 0; i < 8; i++) { noFill(); strokeWeight(10); stroke(117, 156, 95); var x = sRandom(x + y + i, -1, 1); var tx = x * 120 + noise(-i) * 200 - 70; var ty = abs(x) * 120 + noise(i) * 250 + noise(-pFrame / 150, i) * 50 - 300; bezier(x * 24, sRandom(i + y, 10), x * 24, 0, x * 50, -40, tx, ty); noStroke(); fill(lerpColor( color(111, 156, 87), color(66, 94, 48), sRandom(i))); ellipse(tx, ty, sRandom(x + y + i, 40, 90), sRandom(x + y - i, 40, 90)); } break; case "trunk": strokeCap(SQUARE); strokeWeight(sRandom(x - y, 15, 35)); stroke(lerpColor( color(105, 94, 77), color(54, 49, 43), sRandom(x + y))); line(0, 0, sRandom(y - x, -10, 10), -200); break; case "bush": noStroke(); for (var i = 0; i < 28; i++) { fill(lerpColor( color(71, 125, 76), color(38, 69, 48), sRandom(i))); ellipse(sRandom(x + i, -80, 80), sRandom(x + y + i, -90, 0), 45, 40); } break; case "bedding": noStroke(); for (var i = 0; i < 1; i += 1 / 28) { fill(lerpColor( color(156, 150, 102), color(85, 110, 72), sRandom(i))); ellipse(sRandom(x + i, -90, 90), (i - 1) * 150, 45, 100 - i * 35); } break; case "leafer with seed": noStroke(); fill(clr.al.bellyShadow); if (a1 === 1) { // far leg quad(-35, -4, -31, 98, -15, 100, 12, 61); } else if (a1 === 2) { quad(-12, 66, 7, 100, 26, 97, 28, 33); } else { quad(-19, 42, -9, 100, 13, 100, 23, 45); } triangle(17, -40, 63, 9, 22, 15); // far arm fill(clr.al.belly); ellipse(0, 15, 69, 118); // chest ellipse(30, -54, 80, 57); // chin image(img.leaferSeed, 65, -4, 110, 110); // seed fill(clr.al.body); beginShape(); curveVertex(24, -26); // beak vertex(71, -39); vertex(71, -75); vertex(37, -92); // top of head vertex(-8, -75); vertex(-42, -23); // back vertex(-42, 40); // base of tail if (a1 === 1) { vertex(-22, 70); vertex(-3, 97); // foot vertex(9, 100); vertex(20, 98); vertex(20, 91); vertex(13, 43); // hip } else if (a1 === 2) { vertex(-37, 70); vertex(-32, 92); // foot vertex(-25, 97); vertex(-14, 100); vertex(-8, 97); vertex(3, 72); vertex(16, 32); } else { vertex(-29, 70); vertex(-15, 94); // foot vertex(-9, 100); vertex(8, 100); vertex(10, 86); vertex(14, 39); } vertex(15, 33); vertex(50, 46); // wrist vertex(73, 41); // hand vertex(81, 24); vertex(61, 22); // wrist vertex(24, -15); vertex(20, -46); // cheek vertex(39, -40); vertex(63, -41); endShape(CLOSE); fill(a2 \|\| clr.al.leaf); // crest and tail beginShape(); curveVertex(144, -65); // front vertex(50, -90); vertex(22, -96); vertex(-40, -62); vertex(-51, 48); // base of tail vertex(-84, 72); vertex(-73, 80); vertex(-39, 57); // base of tail vertex(-35, 3); vertex(-7, -69); vertex(45, -88); endShape(CLOSE); arc(-11, -73, 105, 100, 225, 334); arc(-33, -47, 75, 85, 196, 311); arc(-45, -5, 45, 95, 171, 303); arc(-94, 77, 56, 22, 183, 312); // far tail tip half arc(-96, 74, 56, 31, -20, 174); // near tail tip half fill(clr.al.eye); // eye ellipse(47, -58, 10, 8); fill(255); ellipse(48, -57.5, 3, 3); break; case "leafer tree mouth": noStroke(); fill(clr.al.mouth); if (pFrame % 32 < 20 && pFrame % 25 < 15) { bezier(-11, 16, -149, 42, 25, 62, 42, -21); } else if (pFrame % 45 < 20) { ellipse(-18, 26, 62, 19); } break; default: throw { message: "Unknown graphic \"" + d + "\"." }; } popMatrix(); }; // Ranges from (0, 0) to (1500, 750) var forestBkg = function() { background(75, 94, 72); // Ground noStroke(); fill(138, 113, 87); rect(0, 400, 1600, 400); for (var i = 0; i < 100; i++) { var y = pow(sRandom(-i), 1.5) * 300 + 450; if (y > 520) { fill(199, 180, 127, 80); } else { fill(117, 98, 69, 80); } ellipse(sRandom(i, 1500), y, (y - 200), (y - 400) / 4); } // Plants for (var i = 0; i < 1; i += 1/40) { var x = sRandom(i, 1500); var d = sRandom(-i, 200, 400); graphic("trunk", x, i * 50 + 450, i * 400 + 300); noStroke(); fill(lerpColor( color(39, 66, 50), color(69, 130, 77), sRandom(i + 100))); ellipse(x, 100 - i * 150, d * 1.3, d); if (sRandom(i * 2) < 0.5) { graphic(["leafy", "grass"][floor(sRandom(i, 2))], sRandom(-i, 1500), i * 50 + 430, i * 150 + 100); } } }; // Draws mossy rocks for around the waterfall from an array of (x, y, width, height) properties var drawRocks = function(a) { noStroke(); for (var i = 0; i < a.length; i += 4) { var f = i / 1.2435 % 2; var c = f < 1 ? lerpColor( color(82, 79, 76), color(48, 46, 45), f) : lerpColor( color(30, 66, 42), color(104, 179, 113), f - 1); fill(lerpColor(c, 0, 0.2)); ellipse(a[i], a[i + 1], a[i + 2], a[i + 3]); fill(c); ellipse(a[i], a[i + 1] - a[i + 3] / 6.7, a[i + 2] * 0.87, a[i + 3] * 0.7); } }; // Draws a waterfall from an array of arrays of coordinates var drawWaterfall = function(a) { noiseDetail(2, 0.5); for (var i = 0; i < a.length; i++) { var path = a[i]; fill(lerpColor( color(82, 145, 161, 140), color(204, 224, 245, 140), i / (a.length - 1))); beginShape(); for (var j = 0; j < path.length; j += 2) { curveVertex(path[j] + noise(pFrame / 8 - j / 3) * 40, path[j + 1] + noise(pFrame / 8 - j / 4) * 40); } endShape(); } }; // Draws leaves within an area var leaves = function(x1, y1, x2, y2) { noStroke(); var increment = 1 / ((x2 - x1) * (y2 - y1) / 2400); for (var i = 0; i < 1; i += increment) { var y = sRandom(i + 1); y = (1 - y) * (1 - pow(y - 1, 2)) + y * y * y; // pull towards the middle var d = (1 - i) * 120 + 80; fill(lerpColor( color(39, 66, 50), color(78, 145, 87), (sRandom(i, 0.7) + 0.3) * (1 - y * 0.8))); ellipse(sRandom(i + 2, x1, x2) + noise(pFrame / 100, i * 100) * 40, y * (y2 - y1) + y1 + noise(pFrame / 100, -i * 100) * 40, d, d); } }; // Returns reflection for water given the y-coordinate of the top and the opacity var getReflection = function(y, a) { if (noReflections) { return get(y, 500, 10, 10); } var temp = get(0, 0, width, height); // remember the original canvas filter(BLUR, 3); // blur var r = get(0, 0, width, y); // get the reflection area background(a); // set opacity r.mask(get(0, 0, width, y)); // apply opacity image(temp, 500, 500, 1000, 1000); // replace with the original canvas return r; }; // The shot with the tangles var tangleShot = { // Things above the water that should still be drawn in the reflection reflected: function() { // Terrain noStroke(); fill(82, 78, 72); beginShape(); curveVertex(-10, 279); vertex(-10, 268); vertex(135, 283); vertex(396, 300); vertex(392, 405); vertex(214, 477); vertex(70, 493); vertex(-10, 530); vertex(-10, 551); endShape(); beginShape(); curveVertex(1010, 226); vertex(1010, 241); vertex(883, 271); vertex(524, 305); vertex(654, 395); vertex(830, 432); vertex(907, 488); vertex(1010, 525); vertex(1010, 527); endShape(); // Foliage leaves(-10, 0, 1000, 120); for (var i = 0; i < 1; i += 1/5) { var y = 300 + i * i * 150; graphic("trunk", sRandom(3 - i, 350), y, 800 + i * i * 500); graphic("trunk", sRandom(i + 13, 590, 1000), y, 800 + i * i * 500); if (sRandom(i) < 0.6) { var t = sRandom(i) < 0.3 ? "leafy" : "grass"; graphic(t, sRandom(i, 370), y, 150 + i * 120); graphic(t, sRandom(-i, 590, 1000), y, 150 + i * 120); } // Tangle if (i === 1/5 * 3) { noFill(); strokeWeight(32); for (var j = 0; j < this.tangles.length; j++) { stroke(lerpColor( color(122, 108, 87), color(71, 64, 53), sRandom(j))); bezier.apply(null, this.tangles[j]); } } } }, init: function() { if (!this.visited) { this.visited = true; // Seed image background(0, 0); image(img.leaferSeed, 55, 120, 200, 200); var d = round(width * 0.1); this.seed = get(0, 0, d, d); background(0xff4a6161); // this is visible for a frame // Tangles this.tangles = []; for (var i = 0; i < 14; i++) { var a = []; for (var j = 0; j < 4; j++) { a.push(sRandom(j - i + 1, 100, 900), sRandom(i - j + 2, -100, 420)); } this.tangles.push(a); } } }, draw: function() { background(76, 99, 72); noStroke(); fill(75, 89, 84); rect(-10, 198, 1020, 700); // Water fill(62, 98, 105); rect(-10, 300, 1020, 800); // Reflection if (!this.reflection) { this.reflected(); this.reflection = getReflection(round(width * 0.3), 80); } pushMatrix(); scale(1, -1); image(this.reflection, 500, -525, 1000, 450); popMatrix(); if (!this.aqualine) { // Seed var f = frame / this.duration; var d = f * f * 100 + 25; image(this.seed, 500, 300 + f * 200, d, d); } // Everything else this.reflected(); if (this.aqualine) { // Aqualine if (!this.cover) { this.cover = get(round(width * 0.4), round(width / 2), round(width * 0.2), round(width * 0.2)); } pushMatrix(); translate(500, 600 - smoothInt(frame / 50 - 0.1) * 125); scale(frame > 70 && frame < 130 ? 1 : -1, 1); image(img.aqualineTree, 0, 0, 200, 200); popMatrix(); image(this.cover, 500, 600, 200, 200); } } }; /* Contains most story and animation data Don't take too much inspiration from this system... I started making it for book-like functionality without planning it out first. Format: { caption: optional string containing the caption duration: how many frames the page lasts init: optional function containing code to run on the page's first frame; this is ignored if there is no draw function pre: optional function containing code to run before the page draw function and independently of it draw: optional function containing code to run on every frame; if this function is omitted, the last previous draw function is used, and the frame number is set to the number of frames since the beginning of the draw function's page post: optional function with the same purpose as pre but called after page draw } / var pages = [ { duration: 200, titleFont: createFont("Times New Roman Bold"), subtitleFont: createFont("Times New Roman Italic"), subtitle: "seed", // Returns the animated offset for a word getOffset: function(lastFrame) { return smoothInt(1, (lastFrame - frame) / 80) 1000; }, // Draws bevelled text using the color this.textColor text: function(t, x, y) { fill(lerpColor(this.textColor, 255, 0.4)); // light text(t, x, y - 3); fill(lerpColor(this.textColor, 0, 0.4)); // dark text(t, x, y + 3); fill(this.textColor); text(t, x, y); }, // x, y, width, height rocks: [ // back [ 727, 1072, 88, 103, 861, 1063, 96, 71, 792, 1063, 91, 84, 678, 1150, 80, 121, 615, 1203, 89, 93, 665, 1260, 115, 191, 553, 1267, 125, 148, 462, 1313, 102, 120, 523, 1355, 114, 109, 682, 1324, 105, 128, 609, 1348, 92, 117, 392, 1368, 92, 70, 442, 1371, 80, 84, 350, 1385, 103, 63, 16, 1408, 80, 112 ], // front [ 905, 1100, 94, 122, 967, 1105, 103, 111, 995, 1188, 95, 133, 917, 1196, 105, 145, 893, 1295, 112, 174, 962, 1307, 101, 149, 840, 1343, 109, 103, 923, 1365, 123, 136, 981, 1435, 96, 101, 803, 1413, 80, 94, 885, 1419, 92, 99 ] ], // The positions of the vertices for the waterfall paths wfPaths: [ [907, 1053, 907, 1053, 767, 1065, 717, 1082, 705, 1130, 716, 1218, 717, 1283, 713, 1319, 761, 1361, 819, 1361, 835, 1268, 872, 1212, 874, 1125, 905, 1070, 905, 1070], [912, 1055, 918, 1055, 833, 1048, 797, 1053, 747, 1058, 723, 1130, 709, 1210, 697, 1255, 710, 1281, 718, 1365, 800, 1382, 817, 1272, 853, 1255, 837, 1205, 857, 1137, 857, 1093, 928, 1060, 935, 1048], [912, 1057, 912, 1057, 758, 1062, 742, 1125, 735, 1193, 737, 1292, 698, 1356, 760, 1364, 803, 1350, 792, 1241, 838, 1218, 833, 1162, 870, 1088, 932, 1060, 942, 1048], [907, 1068, 903, 1064, 822, 1060, 763, 1083, 770, 1157, 752, 1223, 753, 1305, 715, 1364, 781, 1365, 794, 1309, 851, 1247, 850, 1173, 848, 1103, 878, 1058, 912, 1058, 933, 1048], [885, 1082, 872, 1077, 827, 1082, 795, 1122, 788, 1190, 790, 1257, 757, 1383, 823, 1322, 833, 1225, 860, 1177, 920, 1150, 980, 1090] ], // The positions for the stream path stream: [ 840, 1335, 805, 1337, 723, 1357, 697, 1362, 659, 1357, 648, 1365, 612, 1377, 573, 1375, 554, 1381, 533, 1392, 493, 1377, 475, 1382, 447, 1392, 405, 1380, 380, 1383, 280, 1400, 152, 1400, -100, 1428, 0, 1512, 252, 1515, 932, 1433, 987, 1305 ], // Returns random x and y values for a streamCircle newStreamCircle: function() { var x = random(-50, 800); return { x: x, y: random(1415, 1520) - x / 18 }; }, init: function() { if (!this.visited) { this.visited = true; // Clouds in x, y, diameter this.clouds = []; for (var i = 0; i < 30; i++) { this.clouds.push(random(-20, 1020), random(-270, 700), random(100, 200)); } // Stream reflection particles in x, y, time from 0 - 1 this.streamCircles = []; for (var i = 0; i < 40; i++) { var n = this.newStreamCircle(); this.streamCircles.push(n.x, n.y, random()); } // Plants and tree trunks // x, y, type ("trunk", "grass" or "leafy") this.flora = []; for (var i = 0; i < 1; i += 1/16) { var y = 1150 + i * i * 180; // One tree trunk // Make sure they're spread out evenly but don't try for too long var x, valid = false; for (var tries = 0; !valid && tries < 10; tries++) { x = random(-10, 700); valid = true; for (var j = 0; j < this.flora.length; j += 3) { if (this.flora[j + 2] === "trunk" && abs(this.flora[j] - x) < 20) { valid = false; } } } this.flora.push(x, y, "trunk"); // Ground foliage this.flora.push(random(-10, 700), y, "grass"); if (random() < 0.4) { this.flora.push(random(-10, 700), y, "leafy"); } } } }, draw: function() { var panFactor = smoothInt(0.5, (frame - 200) / 400); // Sky noStroke(); for (var i = 1; i > 0; i -= 1 / 60) { fill(lerpColor( color(67, 93, 145), color(201, 226, 242), i * i)); ellipse(500, -panFactor * 300, 1000 + i * 1000 + panFactor * panFactor * 10000, 500 + i * 2000 - panFactor * 1100); } pushMatrix(); // panning transformation translate(0, 250 - panFactor * 1000); // Behind the trees noStroke(); fill(48, 69, 41); rect(0, 800, 1000, 1000); // Mountains /noiseDetail(5, 0.5); strokeWeight(30); for (var i = 0; i <= 1; i += 0.5) { noStroke(); fill(lerpColor( color(138, 164, 209), color(45, 87, 61), i)); beginShape(); vertex(1000, 2000); vertex(0, 2000); for (var j = 0; j <= 1000; j += 20) { vertex(j, 455 + noise(j / 700, i / 3) 1000 + i * 50); } vertex(1000, 2000); endShape(); stroke(0, 10); for (var j = -50; j <= 1050; j += 20) { line(j, 470 + noise(j / 700, i / 3) * 1000 + i * 50, j + (noise(j / 350 + i / 3) - 0.5) * 8000, 2000); } }/ // Clouds noStroke(); for (var i = 0; i < this.clouds.length; i += 3) { var x = this.clouds[i], y = this.clouds[i + 1], s = this.clouds[i + 2]; fill(151, 177, 204); ellipse(x, y, s, s); fill(116, 142, 173); ellipse(x + s / 34, y + s / 6, s 0.9, s * 0.7); } // Everything on the ground if (panFactor > 0) { // Terrain blocking out fill(64, 61, 59); rect(-100, 1338, 1200, 1000); // waterfall area bottom fill(97, 85, 72); rect(-100, 1150, 1200, 190); // far bottom // Ground circles for (var i = 0; i < 10; i++) { fill(lerpColor( color(86, 140, 86, 200), color(69, 69, 69, 200), sRandom(i + 100))); ellipse(sRandom(i, 600), sRandom(-i, 1150, 1350), 350, 40); } // Foliage and tree trunks for (var i = 0; i < this.flora.length; i += 3) { var type = this.flora[i + 2]; if (type === "trunk") { graphic(this.flora[i + 2], this.flora[i], this.flora[i + 1], (this.flora[i + 1] - 800)); } else if (type === "leafy") { graphic(this.flora[i + 2], this.flora[i], this.flora[i + 1], (this.flora[i + 1] - 1000) / 1.3); } else { graphic(this.flora[i + 2], this.flora[i], this.flora[i + 1], (this.flora[i + 1] - 1000) / 2); } } // Tree leaves leaves(-50, 570, 1050, 970); // Stream area blocking out noStroke(); fill(115, 101, 86); quad(657, 1117, 709, 1053, 884, 1043, 923, 1088); // top face of waterfall fill(61, 58, 55); quad(900, 1080, 656, 1100, 639, 1370, 900, 1408); // waterfall face fill(74, 70, 65); quad(495, 1390, 400, 1334, 203, 1338, -100, 1410); // far far shore fill(92, 88, 85); quad(394, 1393, 275, 1427, -200, 1425, 187, 1367); // near far shore drawRocks(this.rocks[0]); // Stream noiseDetail(2, 0.5); fill(53, 87, 94, 200); beginShape(); for (var i = 0; i < this.stream.length; i += 2) { curveVertex(this.stream[i] + (noise(pFrame / 70 - i / 4) - 0.5) * 40, this.stream[i + 1] + (noise(pFrame / 64 - i / 4) - 0.5) * 40); } endShape(); for (var i = 0; i < this.streamCircles.length; i += 3) { if (this.streamCircles[i + 2] >= 1) { var n = this.newStreamCircle(); this.streamCircles[i] = n.x; this.streamCircles[i + 1] = n.y; this.streamCircles[i + 2] = 0; } var factor = 1 - 3 * pow(abs(this.streamCircles[i + 2] - 0.5), 1.5); fill(255, 20); ellipse(this.streamCircles[i], this.streamCircles[i + 1], factor * 300, factor * 20); this.streamCircles[i + 2] += delta / 75; } // Waterfall drawWaterfall(this.wfPaths); // Aqualine image(img.aqualineTree, 950, 1030, 120, 120); // More blocking out fill(105, 98, 91); quad(874, 1110, 890, 1045, 1010, 1040, 1010, 1090); // top side of waterfall drawRocks(this.rocks[1]); fill(92, 91, 87); quad(1197, 1508, 888, 1427, 583, 1446, 408, 1507); // near shore graphic("leafy", 1000, 1600, 350); graphic("grass", 600, 1550, 250); } popMatrix(); // Text if (panFactor < 0.5) { pushMatrix(); // panning transformation on text translate(500, -panFactor * 1500); scale(1 + panFactor, 1 - panFactor / 2); translate(-500, 0); // Title textAlign(CENTER, CENTER); textFont(this.titleFont, 150); this.textColor = color(156, 217, 123); this.text("Life", 360, 290 - this.getOffset(120)); this.text("Leafer", 540, 410 - this.getOffset(60)); textSize(120); this.text(":", 770, 410 - this.getOffset(140)); textSize(80); this.text("of", 545, 300 - this.getOffset(125)); this.text("a", 625, 300 - this.getOffset(80)); // Subtitle textFont(this.subtitleFont, 120); this.textColor = color(70, 70, 156); for (var i = 0; i < this.subtitle.length; i++) { var s = 1 - pow(constrain((325 - frame + i * 4) / 200, 0, 1), 18); if (s) { pushMatrix(); translate(500, 520); scale(s); this.text(this.subtitle[i], -this.subtitle.length * 30 + i * 60, 0); popMatrix(); } } popMatrix(); } } }, // title { duration: 550, init: function() { pages[0].init(); } }, { duration: 500, draw: function() { var panFactor = smoothInt(frame / 600 + 0.1); pushMatrix(); if (page < pageDraw + 2) { scale(panFactor * panFactor * panFactor + 1); translate((sqrt(panFactor) - 1) * 470 - 30, panFactor * panFactor * -250); } else { var f = smoothInt((frame - 2170) / 200); scale(1.5 + f * 0.6); translate(f * 50 - 70, -200 - f * 80); } forestBkg(); // Shadows noStroke(); fill(0, 50); ellipse(250, 650, 420, 120); ellipse(250, 650, 370, 90); ellipse(600, 590, 300, 40); ellipse(1300, 550, 320, 40); ellipse(950, 500, 500, 40); ellipse(250, 500, 500, 40); ellipse(620, 655, 200, 40); ellipse(920, 670, 300, 50); // Extra plants graphic("leafy", 1100, 500, 250); graphic("bush", 1300, 550, 370); graphic("grass", 770, 520, 200); graphic("grass", 250, 500, 250); graphic("grass", 400, 510, 170); graphic("bush", 580, 550, 320); graphic("bush", 17, 533, 370); // Front leafer ultimate image(img.leaferUltimate, 850, 410, 450, 450); fill(clr.al.eye); ellipse(684, 370, 14, 12); // ultimate fill(255); ellipse(682, 371, 4, 4); // ultimate // Nest back graphic("bedding", 250, 600, 150); graphic("bedding", 100, 640, 150); graphic("bedding", 360, 630, 150); // Custom character illustrations pushMatrix(); translate(0, 35); // DARN IT // Mother if (page < pageDraw + 8) { noStroke(); fill(clr.al.leaf); // leaves if (page < 9) { // holding seed arc(240, 279, 53, 127, 196, 391); ellipse(230, 349, 82, 148); } else { // giving beginShape(); vertex(286, 292); bezierVertex(232, 216, 135, 252, 122, 297); bezierVertex(168, 272, 182, 348, 252, 285); endShape(); arc(191, 376, 128, 143, 162, 332); arc(182, 452, 89, 143, 151, 332); } fill(clr.al.bellyShadow); // underside shadow ellipse(238, 458, 162, 231); fill(clr.al.belly); // lit underside ellipse(309, 542, 77, 100); ellipse(207, 547, 102, 92); ellipse(177, 519, 42, 108); // belly if (page < 9) { // holding seed ellipse(264, 423, 53, 94); // chest ellipse(247, 359, 86, 74); // chin fill(clr.al.body); pushMatrix(); translate(275, 451); rotate(32); image(img.leaferSeed, 0, 0, 180, 180); popMatrix(); beginShape(); // left arm (right side of screen) curveVertex(295, 452); // thumb thing vertex(295, 452); vertex(298, 476); vertex(289, 503); // other point vertex(308, 492); vertex(329, 458); vertex(323, 398); // elbow vertex(286, 349); vertex(243, 347); vertex(293, 397); vertex(307, 436); vertex(295, 452); vertex(295, 452); endShape(); beginShape(); // head, back and right arm curveVertex(249, 403); // beak vertex(253, 403); vertex(270, 386); vertex(298, 355); vertex(290, 299); vertex(245, 276); // top of head vertex(190, 311); vertex(151, 417); vertex(156, 569); vertex(238, 584); vertex(217, 516); // knee vertex(168, 513); vertex(174, 460); vertex(205, 477); vertex(231, 493); vertex(247, 493); vertex(235, 470); // foot crease vertex(233, 449); vertex(223, 440); vertex(201, 389); vertex(207, 365); // right cheek vertex(223, 381); vertex(239, 390); vertex(257, 400); endShape(); fill(clr.al.eye); // eyes if (frame < 720 \|\| frame > 1400) { // low ellipse(234, 361, 11, 8); // right ellipse(283, 361, 9, 7); fill(255); ellipse(234, 363, 5, 4); // right ellipse(283, 363, 4, 4); } else { // excuse me what the jeff ellipse(234, 361, 11, 16); // right ellipse(283, 361, 9, 15); fill(255); ellipse(236, 364, 7, 8); // right ellipse(284, 364, 5, 7); } fill(clr.al.leafShadow); // leaf edge stroke(clr.al.leaf); strokeWeight(20); arc(245, 279, 36, 127, 232, 397); } else { // giving ellipse(266, 467, 89, 101); // chest ellipse(256, 340, 103, 86); // chin beginShape(); curveVertex(292, 311); vertex(294, 368); vertex(390, 355); vertex(407, 387); vertex(335, 431); vertex(312, 493); vertex(283, 369); vertex(174, 307); endShape(); pushMatrix(); translate(388, 360); rotate(26); image(img.leaferSeed, 0, 0, 180, 180); popMatrix(); fill(clr.al.body); beginShape(); curveVertex(236, 324); vertex(217, 371); // shoulder vertex(283, 381); vertex(340, 373); vertex(351, 381); vertex(356, 394); // foot crease vertex(374, 406); vertex(356, 417); vertex(289, 437); vertex(223, 460); vertex(210, 498); vertex(199, 504); vertex(229, 516); // knee vertex(244, 579); vertex(163, 572); vertex(160, 418); // back vertex(200, 309); vertex(261, 284); vertex(307, 306); vertex(323, 344); // beak vertex(308, 342); vertex(281, 349); vertex(250, 351); vertex(227, 353); vertex(229, 381); vertex(302, 371); endShape(); fill(clr.al.eye); // eye ellipse(268, 323, 13, 9); fill(255); ellipse(271, 324, 5, 3); } } else if (page === pageDraw + 8) { noStroke(); fill(clr.al.leaf); // back leaves arc(213, 376, 105, 143, 178, 332); arc(191, 452, 77, 143, 170, 332); fill(clr.al.bellyShadow); // underside shadow ellipse(238, 458, 162, 231); fill(clr.al.belly); // lit underside ellipse(309, 542, 77, 100); ellipse(207, 547, 102, 92); ellipse(212, 519, 42, 130); // side ellipse(266, 440, 80, 102); // chest fill(clr.al.body); // left foreleg beginShape(); curveVertex(64, 189); vertex(287, 385); vertex(272, 516); vertex(307, 520); vertex(325, 464); // elbow vertex(324, 415); vertex(307, 363); vertex(325, 322); endShape(); fill(clr.al.belly); // chin ellipse(266, 346, 103, 91); fill(clr.al.body); beginShape(); curveVertex(278, 415); // beak vertex(295, 382); vertex(316, 359); vertex(315, 326); vertex(284, 294); // top of head vertex(227, 302); vertex(174, 382); // back of neck vertex(153, 570); vertex(249, 580); vertex(233, 520); // knee vertex(198, 495); vertex(201, 463); vertex(256, 541); // front foot vertex(269, 515); vertex(232, 385); vertex(234, 355); // cheek vertex(258, 369); vertex(295, 382); endShape(CLOSE); fill(clr.al.leaf); // top leaf beginShape(); vertex(289, 313); bezierVertex(301, 206, 181, 239, 170, 306); bezierVertex(191, 287, 199, 307, 223, 306); bezierVertex(258, 285, 281, 307, 289, 313); endShape(); fill(clr.al.eye); // eyes ellipse(270, 352, 13, 9); ellipse(315, 351, 5, 9); fill(255); ellipse(272, 352, 3.5, 3); ellipse(315.8, 351, 1.5, 3); } else { // faint noStroke(); fill(clr.al.leaf); // back leaves ellipse(101, 475, 67, 101); fill(clr.al.body); // head arc(158, 473, 160, 162, 154, 257); strokeWeight(7); // mouth stroke(clr.al.body); fill(clr.al.mouth); bezier(91, 458, 110, 432, 131, 351, 177, 434); noStroke(); fill(clr.al.belly); // lit underside arc(146, 473, 107, 112, 150, 360); // chin arc(189, 524, 264, 168, 182, 400); // chest beginShape(); curveVertex(213, 394); vertex(95, 465); // shoulder vertex(25, 510); // digit vertex(18, 519); vertex(28, 528); // crease vertex(32, 539); // digit vertex(45, 538); vertex(150, 522); vertex(455, 498); endShape(); ellipse(320, 536, 118, 101); // left leg fill(153, 147, 84); // tongue bezier(127, 421, 162, 382, 149, 481, 127, 421); fill(clr.al.body); // right leg beginShape(); vertex(98, 528); bezierVertex(192, 512, 239, 425, 323, 587); vertex(174, 578); endShape(); } // Other tree (popMatrix() is in these) if (page < 9) { popMatrix(); image(img.leaferTree, 600, 450, 350, 350); noStroke(); if (this.treeTalking) { // mouth graphic("leafer tree mouth", 505, 547, 80); } fill(clr.al.eye); // eye ellipse(494, 521, 15, 14); if (this.treeLookingAtSapling) { // looking at sapling fill(255); ellipse(496, 524, 5, 5); } else { // looking at mother fill(255); ellipse(492, 520, 5, 5); } } else if (page === pageDraw + 7) { // taking the seed noStroke(); fill(clr.al.leaf); // leaves arc(544, 247, 155, 155, 132, 310); arc(581, 291, 136, 137, 220, 368); arc(579, 359, 110, 141, 267, 385); fill(clr.al.belly); ellipse(524, 405, 109, 217); ellipse(473, 318, 78, 56); triangle(511, 336, 428, 362, 427, 397); fill(clr.al.leaf); beginShape(); curveVertex(535, 520); vertex(540, 543); vertex(545, 593); vertex(574, 594); vertex(595, 592); vertex(587, 531); vertex(590, 555); // first tail vertex vertex(645, 582); vertex(673, 595); vertex(713, 586); vertex(733, 556); vertex(736, 548); // tail tip vertex(711, 551); vertex(671, 556); vertex(653, 576); vertex(696, 580); vertex(643, 563); // leaf goes into tail or something vertex(591, 498); vertex(602, 368); vertex(581, 271); vertex(521, 225); vertex(536, 496); endShape(); fill(clr.al.body); beginShape(); curveVertex(447, 434); vertex(392, 415); // lower down digit vertex(394, 403); vertex(417, 388); vertex(426, 368); vertex(495, 346); vertex(498, 308); // back of cheek vertex(479, 319); vertex(458, 329); vertex(438, 331); vertex(429, 338); // beak vertex(424, 317); vertex(436, 259); vertex(504, 230); vertex(568, 272); vertex(584, 387); // back vertex(546, 561); // back of foot vertex(532, 594); vertex(506, 597); vertex(490, 593); // front of foot vertex(492, 562); vertex(498, 441); vertex(486, 425); vertex(433, 422); vertex(392, 415); vertex(386, 401); endShape(); fill(clr.al.eye); // eye ellipse(457, 304, 13, 12); fill(255); ellipse(456, 305, 5, 5); popMatrix(); } else { popMatrix(); if (page === pageDraw + 8) { // walking away graphic("leafer with seed", 530 + localFrame * 1.5, 440, 340, frame % 60 < 30 ? 1 : 2); } } // Nest front graphic("bedding", 180, 670, 150); graphic("bedding", 370, 670, 150); graphic("bedding", 250, 680, 150); // Other leafers image(img.leaferSapling, 630, 530, 300, 300); image(img.leaferSapling, 994, 503, 300, 300); image(img.leaferTree, 920, 530, 370, 370); image(img.leaferUltimate, 1254, 542, 450, 450); // Static facial features noStroke(); fill(clr.al.eye); ellipse(808, 606, 15, 14); // rightmost tree fill(clr.bl.eye); ellipse(554, 613, 11, 12); // sapling fill(255); ellipse(552, 612, 6, 6); // sapling ellipse(805, 605, 4, 4); // rightmost tree // Sapling mouth if (this.saplingTalking) { fill(clr.al.mouth); if (frame % 23 < 10) { bezier(537, 645, 552, 643, 566, 649, 567, 635); } else if (frame % 32 < 10) { ellipse(550, 642, 20, 8); } } // Foreground plants pushMatrix(); scale(1 + panFactor * panFactor * 0.3); graphic("bush", 1250, 770, 550); graphic("grass", 650, 850, 350); popMatrix(); /// Frames noFill(); strokeWeight(4); stroke(255, 200); rect(0, 300, 500, 375); rect(500, 0, 1000, 750); // Grid strokeWeight(1); stroke(255, 20); fill(255, 100); textAlign(TOP, LEFT); textSize(24); for (var i = 0; i < 1600; i += 100) { for (var j = 0; j < 1300; j += 100) { line(i, 0, i, 2000); line(0, j, 2000, j); text(i / 100 + ",\n" + j / 100, i + 2, j + 22); } }/ popMatrix(); } }, // clearing { caption: "Blueleaf.", duration: 170, init: function() { pages[pageDraw].saplingTalking = false; } }, { caption: "May I water him?", duration: 220, init: function() { pages[pageDraw].treeTalking = false; pages[pageDraw].treeLookingAtSapling = false; pages[pageDraw].saplingTalking = true; } }, { caption: "I'm sorry, but newborns are too fragile. You will have the opportunity to help with many before long.", duration: 400, post: function() { pages[pageDraw].saplingTalking = false; pages[pageDraw].treeLookingAtSapling = true; pages[pageDraw].treeTalking = localFrame < 350; } }, { caption: ". . . Well, I suppose it depends on how long \"long\" is to you.", duration: 340, post: function() { pages[pageDraw].treeLookingAtSapling = true; pages[pageDraw].treeTalking = localFrame > 50 && localFrame < 300; } }, { caption: "May I, Summerleaf?", duration: 200, post: function() { pages[pageDraw].treeTalking = localFrame < 100; pages[pageDraw].treeLookingAtSapling = false; } }, { caption: "Yes.", duration: 150, init: function() { pages[pageDraw].treeTalking = false; } }, { duration: 150 }, { duration: 230 }, { duration: 130 }, { duration: 250, cliffRocks: [ 740, 340, 124, 90, 733, 267, 87, 92, 845, 270, 93, 105, 972, 300, 85, 98, 930, 343, 85, 106, 972, 407, 94, 98, 42, 323, 90, 89, 122, 292, 83, 107, 50, 257, 88, 67, 175, 253, 94, 93, 243, 285, 94, 91, 167, 343, 102, 105, 57, 372, 92, 92, 93, 408, 90, 93 ], rocks: [ 362, 273, 98, 80, 320, 315, 98, 101, 373, 325, 85, 63, 388, 393, 62, 68, 330, 373, 98, 100, 358, 453, 91, 81, 290, 412, 73, 108, 243, 443, 82, 114, 322, 452, 53, 91, 178, 442, 84, 61, 28, 467, 91, 99, 148, 492, 52, 69, 200, 492, 50, 62, 280, 498, 68, 102, 360, 493, 94, 69, 403, 477, 60, 67, 597, 255, 81, 94, 570, 300, 90, 85, 637, 307, 52, 95, 593, 357, 86, 66, 663, 365, 70, 109, 552, 412, 66, 118, 590, 442, 76, 107, 640, 420, 90, 87, 448, 335, 99, 87, 483, 430, 51, 106, 700, 420, 77, 60, 625, 477, 62, 119, 687, 478, 92, 86, 832, 482, 75, 110, 971, 481, 95, 64, 745, 483, 58, 93, 98, 505, 98, 69, 888, 492, 84, 95 ], wfPaths: [ [407, 252, 400, 250, 400, 293, 403, 318, 389, 350, 408, 372, 410, 398, 387, 418, 400, 442, 423, 463, 408, 505, 437, 512, 478, 500, 487, 522, 537, 498, 572, 513, 605, 508, 565, 477, 525, 432, 523, 373, 547, 345, 555, 317, 537, 292, 558, 255, 535, 240, 507, 245, 482, 237, 437, 247, 407, 253, 407, 253], [402, 288, 402, 290, 390, 322, 395, 353, 405, 377, 392, 418, 397, 432, 413, 463, 407, 517, 448, 510, 452, 487, 487, 513, 518, 498, 533, 505, 567, 498, 580, 495, 553, 468, 562, 413, 582, 387, 565, 352, 563, 323, 552, 303, 557, 262, 560, 247, 538, 242, 468, 245, 445, 233, 425, 253, 397, 260, 402, 295, 405, 298], [557, 245, 562, 245, 530, 248, 483, 233, 428, 243, 403, 268, 417, 308, 443, 370, 427, 422, 425, 500, 465, 477, 487, 515, 502, 440, 483, 405, 502, 380, 510, 433, 510, 492, 543, 493, 538, 413, 547, 355, 542, 335, 525, 278, 558, 250, 553, 242], [473, 292, 447, 292, 420, 315, 435, 353, 415, 437, 445, 508, 398, 503, 415, 450, 395, 422, 408, 378, 407, 332, 405, 257, 443, 257, 473, 235, 512, 250, 545, 237, 540, 282, 568, 333, 537, 370, 542, 435, 532, 502, 503, 492, 517, 407, 485, 378, 484, 413, 487, 463, 470, 492, 461, 432, 465, 382, 473, 302, 452, 290, 390, 293], [515, 253, 515, 253, 532, 287, 522, 335, 520, 362, 500, 342, 477, 372, 490, 318, 475, 270, 507, 247, 507, 247] ], init: function() { this.aqualineFactor = 0; }, draw: function() { background(108, 149, 184); noStroke(); fill(70, 102, 85); rect(-10, 100, 1020, 400); // Trees for (var i = 0; i < 1; i += 1/40) { graphic("trunk", sRandom(i, 1000), 300, i * 150 + 200); } leaves(-10, -50, 1000, 100); // Far terrain blocking out fill(77, 69, 62); beginShape(); curveVertex(-20, 600); vertex(-5, 541); vertex(-37, 233); vertex(77, 214); vertex(177, 236); vertex(285, 219); vertex(392, 263); vertex(594, 242); vertex(670, 213); vertex(762, 236); vertex(920, 221); vertex(1041, 223); vertex(1030, 541); vertex(1030, 600); endShape(); fill(102, 91, 76); quad(342, 522, 360, 261, 585, 257, 603, 522); // Plants and cliff rocks graphic("bush", 237, 230, 249); graphic("leafy", 87, 230, 106); graphic("leafy", 788, 237, 136); graphic("grass", 917, 240, 117); drawRocks(this.cliffRocks); graphic("grass", 161, 439, 134); graphic("leafy", 869, 465, 134); // Water noStroke(); fill(61, 105, 107); rect(-10, 500, 1020, 550); // Aqualine pushMatrix(); translate(550, 240 - this.aqualineFactor * 30); rotate(this.aqualineFactor * 10 - (this.aqualineFactor ? 0 : 20)); if (!this.aqualineFactor) { scale(-1, 1); } image(img.aqualineTree, 0, 0); popMatrix(); // Rocks drawRocks(this.rocks); // Waterfall pushMatrix(); translate(-15, -15); drawWaterfall(this.wfPaths); popMatrix(); // Get reflection if (!this.reflection) { this.reflection = getReflection(round(width / 2), 50); } // Draw reflection pushMatrix(); scale(1, -1); image(this.reflection, 500, -750, 1000, 500); popMatrix(); // Near terrain fill(84, 79, 73); beginShape(); curveVertex(1033, 526); vertex(1025, 497); vertex(883, 508); vertex(835, 539); vertex(899, 563); vertex(930, 602); vertex(1007, 642); vertex(1021, 654); endShape(); beginShape(); curveVertex(-30, 487); vertex(-2, 487); vertex(53, 503); vertex(125, 511); vertex(180, 495); vertex(236, 488); vertex(253, 510); vertex(255, 527); vertex(199, 537); vertex(221, 568); vertex(138, 578); vertex(118, 626); vertex(57, 644); vertex(67, 675); vertex(-2, 701); vertex(-5, 729); endShape(); // Get the area that will cover up the lower half of the leafer if (!this.cover) { this.cover = get(round(180 * cMult), round(590 * cMult), round(370 * cMult), round(100 * cMult)); } // Leafer going into the water var f = smoothInt(0.2, frame / 450 + 0.5); pushMatrix(); translate(100 + f * 350, 510 + f * 50); scale(-1, 1); rotate(f * 45); image(img.leaferTree, 0, 0, 180, 180); popMatrix(); image(img.leaferSeed, 145 + f * 390, 575, 80, 80); image(this.cover, 180 + 370 / 2, 590 + 100 / 2, 370, 100); // The leafers on the shore pushMatrix(); scale(-1, 1); image(img.leaferTree, -80, 480, 140, 140); image(img.leaferSapling, -150, 520, 120, 120); image(img.leaferUltimate, 20, 500, 200, 200); image(img.leaferTree, -20, 550, 170, 170); popMatrix(); } }, // going into water { duration: 150, pre: function() { pages[pageDraw].aqualineFactor = smoothInt((localFrame - 30) / 50); var f = smoothInt(localFrame / 70); pushMatrix(); translate(-1100 * f, -300 * f); scale(f * 2 + 1); }, post: function() { popMatrix(); } }, { duration: 100, rocks: [ 32, 353, 104, 92, 748, 348, 102, 105, 377, 343, 117, 83, 915, 271, 89, 75, 843, 315, 94, 88, 942, 347, 132, 104, 292, 323, 72, 90, 190, 345, 121, 113, 650, 377, 139, 76, 505, 350, 109, 85 ], init: function() { this.aqualineFactor = 0; this.leaferPose = "w"; if (!this.bkg) { // Forest background pushMatrix(); scale(2/3); translate(0, -100); forestBkg(); popMatrix(); // Shore darkening (and a bit of water gradient) noStroke(); fill(43, 34, 23, 40); for (var i = 0; i < 1; i += 1/12) { rect(-10, 240 + i * 120, 1020, 200 + i * 200); } // Water fill(61, 105, 107, 100); for (var i = 0; i < 1; i += 1/4) { rect(-10, 330 + i * 50, 1020, 1000); } // Rocks drawRocks(this.rocks); // Reflection var reflection = getReflection(round(width * 0.4), 70); pushMatrix(); scale(1, -1); image(reflection, 500, -550, 1000, 500); popMatrix(); // Unfocus (smoother if two calls are used) filter(BLUR, 2); filter(BLUR, 4); // Get background this.bkg = get(0, 0, width, height); } }, draw: function() { image(this.bkg, 500, 500, 1000, 1000); // Get cover if (!this.cover) { this.cover = get(0, round(width * 0.6), width, round(width * 0.2)); } // Leafer and seed pushMatrix(); if (this.leaferPose === "w") { // both poses holding the seed translate(-80, 110); noStroke(); fill(clr.al.belly); ellipse(670, 565, 203, 360); fill(clr.al.bellyShadow); ellipse(670, 390, 123, 139); fill(clr.al.belly); ellipse(670, 382, 132, 129); fill(page === pageDraw ? clr.al.body : clr.al.leaf); arc(670, 387, 168, 174, 180, 360); // head fill(clr.al.body); beginShape(); if (page === pageDraw) { curveVertex(662, 459); // beak vertex(671, 434); vertex(697, 423); vertex(715, 410); } else { curveVertex(660, 450); // beak vertex(671, 420); vertex(707, 408); } vertex(726, 395); // left cheek vertex(727, 413); vertex(726, 460); vertex(726, 569); vertex(723, 632); // left hip vertex(788, 635); vertex(780, 520); vertex(761, 422); vertex(733, 345); // left side of head vertex(604, 364); // right side of head vertex(581, 412); vertex(558, 514); vertex(561, 633); vertex(610, 630); // right hip vertex(613, 586); vertex(624, 516); vertex(617, 433); vertex(616, 396); // cheek if (page === pageDraw) { vertex(632, 414); vertex(648, 422); vertex(671, 434); endShape(CLOSE); triangle(646, 630, 613, 399, 584, 630); // arms triangle(700, 630, 730, 399, 772, 630); fill(clr.al.leaf); arc(673, 346, 31, 257, 189, 352); // leaf } else { vertex(637, 408); vertex(671, 420); endShape(CLOSE); strokeWeight(20); stroke(clr.al.leaf); line(657, 317, 626, 396); line(687, 321, 720, 394); noStroke(); image(img.leaferSeed, 674, 266, 200, 200); beginShape(); // right arm curveVertex(620, 466); // inside vertex(620, 489); vertex(647, 332); vertex(634, 302); vertex(611, 276); // uppermost digit vertex(569, 472); vertex(577, 506); endShape(); beginShape(); // left arm curveVertex(723, 466); // inside vertex(726, 482); vertex(703, 332); vertex(705, 307); vertex(730, 276); // uppermost digit vertex(769, 472); vertex(761, 506); endShape(); } fill(clr.al.eye); ellipse(644, 385, 12, 14); ellipse(704, 384, 12, 14); fill(255); if (page === pageDraw) { ellipse(644, 388, 6, 6); ellipse(704, 387, 6, 6); } else { ellipse(644, 382, 6, 6); ellipse(704, 381, 6, 6); } } else if (this.leaferPose === "c") { // chasing the seed translate(520 + smoothInt(0.2, localFrame / 150) * 500, 520); scale(-1, 1); rotate(30); image(img.leaferTree, 0, 0, 450, 450); noStroke(); // eyes fill(clr.al.eye); ellipse(-135, 93, 22, 20); fill(255); ellipse(-139, 95, 14, 12); } else { // both freaked out and looking away var f = this.leaferPose === "AAA" ? 1 - smoothInt((localFrame - 20) / 15) : 0; translate(-80 - f * 120, f * 170 + 50 + cos(pFrame * 6) * 1000 / constrain(frame - 220, 0, 1000)); rotate(f * -15); noStroke(); fill(clr.al.belly); ellipse(670, 565, 214, 360); fill(clr.al.bellyShadow); ellipse(675, 397, 147, 165); fill(clr.al.belly); ellipse(679, 397, 143, 123); fill(clr.al.body); beginShape(); curveVertex(610, 384); // right shoulder vertex(610, 384); vertex(571, 461); vertex(553, 627); vertex(599, 633); // inner part of right hip vertex(583, 586); // first arm node vertex(590, 565); vertex(617, 563); vertex(637, 543); vertex(683, 541); // digit vertex(684, 535); vertex(661, 517); // crease vertex(669, 493); // digit vertex(657, 490); vertex(633, 485); vertex(609, 503); vertex(598, 467); vertex(613, 425); vertex(612, 421); endShape(); if (this.leaferPose === "AAA") { // looking at the aqualine fill(clr.al.leaf); // leaves arc(708, 316, 159, 149, 150, 343); arc(728, 383, 106, 150, 213, 382); fill(clr.al.body); beginShape(); // head and right arm curveVertex(617, 427); vertex(607, 436); vertex(636, 420); vertex(656, 426); vertex(678, 413); vertex(697, 417); vertex(717, 389); // cheek vertex(729, 447); vertex(760, 538); vertex(771, 637); // hidden behind left arm vertex(783, 510); vertex(754, 373); vertex(707, 317); vertex(641, 319); vertex(608, 364); // forehead vertex(601, 421); vertex(555, 461); endShape(); stroke(clr.al.leaf); // head outline strokeWeight(4); bezier(604, 439, 607, 416, 603, 417, 601, 400); noStroke(); fill(clr.al.eye); // eye ellipse(659, 383, 37, 29); fill(255); ellipse(655, 385, 24, 22); pushMatrix(); // seed var f = (localFrame - 20) / 25; translate(780 + pow(f, 0.7) * 250, 180 + pow(f - 0.5, 2) * 250); rotate(f * 200); image(img.leaferSeed, 0, 0, 200, 200); popMatrix(); } else { beginShape(); curveVertex(731, 463); vertex(715, 461); vertex(741, 434); vertex(743, 459); // left cheek vertex(766, 530); vertex(770, 734); // hip vertex(786, 501); vertex(759, 425); vertex(744, 343); vertex(680, 303); // top of head vertex(610, 343); vertex(578, 448); // shoulder vertex(616, 394); // cheek vertex(632, 429); vertex(646, 428); vertex(676, 436); vertex(715, 461); vertex(710, 482); endShape(); fill(clr.al.leaf); // leaf arc(672, 305, 62, 157, 194, 399); fill(clr.al.eye); // eye ellipse(651, 405, 14, 12); ellipse(737, 403, 11, 12); fill(255); ellipse(654, 408, 7, 7); ellipse(739, 406, 6, 7); } fill(clr.al.belly); beginShape(); // left arm curveVertex(712, 446); vertex(732, 457); vertex(754, 455); vertex(781, 446); vertex(806, 451); vertex(828, 435); // digit vertex(834, 440); vertex(842, 461); // crease vertex(869, 474); // digit vertex(871, 478); vertex(843, 501); vertex(824, 523); vertex(786, 519); vertex(762, 588); vertex(763, 742); endShape(); } popMatrix(); // Aqualine pushMatrix(); translate(250, 750 - this.aqualineFactor * 190 + cos(pFrame * 3) * 10); scale(-1, 1); rotate(20); image(img.aqualineTree, 0, 0, 300, 300); popMatrix(); image(this.cover, 500, 700, 1000, 200); } }, // watering { duration: 120, init: function() { pages[pageDraw].aqualineFactor = 0; pages[pageDraw].leaferPose = "w"; }, caption: "The first watering of Blueleaf!" }, { duration: 80, caption: "Hi.", pre: function() { pages[pageDraw].aqualineFactor = smoothInt(localFrame / 40); pages[pageDraw].leaferPose = localFrame < 20 ? "w" : "AAA"; } }, { duration: 70, init: function() { pages[pageDraw].aqualineFactor = 1; pages[pageDraw].leaferPose = "l"; } }, { duration: 100, init: function() { pages[pageDraw].leaferPose = "c"; } }, { duration: 120, caption: "Oh! A seed?", init: function() { this.aqFlip = true; if (!this.rocks) { this.rocks = []; for (var i = 0; i < 1; i += 1/22) { this.rocks.push(sRandom(i, 100, 900), sRandom(-i, 350, 450), sRandom(i/2, 50, 80), sRandom(-i/2, 50, 80)); } } }, draw: function() { if (!this.bkg) { background(108, 149, 184); // Far terrain noStroke(); fill(70, 102, 85); rect(-10, 200, 1020, 400); fill(79, 73, 62); rect(-10, 350, 1020, 400); // Far tree trunks for (var i = 0; i < 1; i += 1/24) { graphic("trunk", sRandom(i, 1000), 355, 200); } // Rocks drawRocks(this.rocks); // Near tree trunks for (var i = 0; i < 1; i += 1/7) { graphic("trunk", sRandom(i, 250), 500, 200); graphic("trunk", sRandom(i, 750, 1000), 500, 200); } // Leaves leaves(150, 100, 750, 250); leaves(-20, -20, 150, 290); leaves(750, -20, 1000, 270); // Waterfall fill(121, 174, 184); quad(433, 467, 436, 347, 534, 345, 554, 460); // Water for (var i = 0; i < 1; i += 1/10) { fill(lerpColor( color(93, 128, 135), color(59, 100, 112), i)); rect(-10, 450 + i * i * 200, 1020, 550); } // Reflection var reflection = getReflection(round(width * 0.44), 80); pushMatrix(); scale(1, -1); image(reflection, 500, -695, 1000, 500); popMatrix(); // Near terrain fill(87, 85, 81); quad(-10, 408, 452, 450, 177, 473, -10, 487); quad(1010, 408, 574, 450, 862, 473, 1010, 478); // Leafers pushMatrix(); scale(-1, 1); image(img.leaferSapling, -300, 420, 100, 100); image(img.leaferUltimate, -110, 380, 170, 170); image(img.leaferTree, -200, 400, 150, 150); popMatrix(); fill(255); ellipse(170, 360, 14, 14); filter(BLUR, 2); filter(BLUR, 4); this.bkg = get(0, 0, width, height); } image(this.bkg, 500, 500, 1000, 1000); if (!this.cover) { this.cover = get(0, round(width * 0.6), width, round(width * 0.2)); } // Aqualine pushMatrix(); translate(250, 560 + sin(pFrame * 3) * 12); if (this.aqFlip) { scale(-1, 1); } rotate(10 + sin(pFrame * 2) * 5); image(img.aqualineTree, 0, 0, 400, 400); if (!this.aqFlip) { // closed eye noStroke(); fill(clr.aa.body); ellipse(-24, -28, 40, 40); } popMatrix(); // Draw cover image(this.cover, 500, 700, 1000, 200); // Leafer pushMatrix(); translate(-150, -100 - cos(pFrame * 3) * 5); scale(1.2); noStroke(); fill(clr.al.belly); arc(670, 603, 267, 356, 182, 359); fill(clr.al.bellyShadow); ellipse(670, 479, 191, 192); fill(clr.al.belly); ellipse(670, 465, 193, 186); fill(clr.al.body); beginShape(); curveVertex(621, 618); vertex(520, 602); // rightmost part (relative to leafer) vertex(513, 580); vertex(551, 472); // right shoulder vertex(592, 382); vertex(670, 351); // top of head vertex(752, 387); vertex(795, 486); // left shoulder vertex(834, 586); vertex(827, 600); // leftmost part vertex(784, 600); vertex(774, 589); vertex(765, 501); vertex(758, 462); // left cheek vertex(739, 491); vertex(701, 514); vertex(678, 532); // beak vertex(674, 531); vertex(649, 511); vertex(602, 488); vertex(586, 459); // right cheek vertex(571, 521); vertex(530, 601); vertex(530, 628); endShape(); var c = cos(-pFrame * 6 + 90) * 40, s = sin(-pFrame * 6 + 90) * 15; // arms quad(578, 456, 597 + c, 624 - s, 539 + c, 624 - s, 508, 599); var c = cos(pFrame * 6) * 40, s = sin(pFrame * 6) * 15; quad(766, 476, 734 + c, 624 - s, 793 + c, 624 - s, 835, 600); fill(clr.al.leaf); // leaf arc(671, 407, 34, 334 - cos(pFrame * 6) * 12, 189, 353); fill(clr.al.eye); // eyes ellipse(626, 469, 17, 15); ellipse(722, 471, 17, 14); fill(255); ellipse(626, 470, 9, 9); ellipse(722, 472, 9, 9); popMatrix(); } }, // chasing the seed { duration: 150, caption: "A newborn seed, Haze.", init: function() { pages[pageDraw].init(); } }, { duration: 250, caption: "I'm sorry. I'm obligated to help you recover him.", init: function() { pages[pageDraw].init(); pages[pageDraw].aqFlip = false; } }, { duration: 200, caption: "No worries!", draw: function() { background(108, 149, 184); // Far terrain noStroke(); fill(70, 102, 85); rect(-10, 200, 1020, 400); fill(79, 69, 53); ellipse(100, 427, 349, 100); ellipse(337, 448, 300, 100); ellipse(597, 447, 300, 100); ellipse(852, 423, 300, 100); // Tree trunks for (var i = 0; i < 1; i += 1/32) { graphic("trunk", i * 950 + sRandom(i, 100), 450, 300 - i * 250 + sRandom(-i, 50)); } // Leaves leaves(400, 100, 1000, 300); leaves(-20, -20, 370, 290); // Water for (var i = 0; i < 1; i += 1/10) { fill(lerpColor( color(63, 108, 115), color(84, 130, 140), i)); rect(-10, 450 + i * i * 200, 1020, 550); } // Reflection if (!this.reflection) { this.reflection = getReflection(round(width * 0.44), 80); } pushMatrix(); scale(1, -1); image(this.reflection, 500, -697, 1000, 500); popMatrix(); // Terrain fill(87, 85, 81); beginShape(); curveVertex(-10, 398); vertex(-10, 398); vertex(75, 415); vertex(212, 390); vertex(293, 423); vertex(413, 422); vertex(542, 429); vertex(780, 449); vertex(546, 455); vertex(300, 474); vertex(105, 473); vertex(-10, 480); vertex(-10, 493); endShape(); fill(79, 77, 75); // terrain right behind the near tree quad(1010, 422, 752, 432, 721, 462, 1010, 546); graphic("trunk", 943, 500, 500); // near tree pushMatrix(); // leaves scale(2); leaves(320, -40, 500, 40); popMatrix(); noStroke(); // near shore fill(97, 94, 88); beginShape(); curveVertex(1017, 450); vertex(1010, 474); vertex(820, 503); vertex(847, 545); vertex(635, 570); vertex(691, 644); vertex(596, 799); vertex(988, 788); vertex(1020, 805); endShape(); // Waterlogged avatars if (!this.cover) { this.cover = get(round(width * 0.4), round(width * 0.48), round(width * 0.4), round(width * 0.1)); } pushMatrix(); scale(-1, 1); image(img.aqualineTree, -609, 460 - sin(pFrame * 3 - 80) * 15, 100, 100); pushMatrix(); translate(-500, 460); rotate(30); image(img.leaferTree, 0, 0, 120, 120); popMatrix(); popMatrix(); fill(clr.al.body); quad(547, 452, 561, 467, 527, 498, 523, 457); image(this.cover, 600, 530, 400, 100); // The leafers on the shore image(img.leaferTree, 912, 411, 430, 350); // farther tree image(img.leaferSapling, 772, 467, 300, 300); // sapling fill(clr.bl.bodyShadow); quad(725, 566, 738, 595, 745, 595, 767, 566); quad(788, 565, 818, 593, 830, 593, 826, 555); fill(clr.bl.body); quad(712, 528, 708, 596, 725, 596, 766, 527); quad(760, 547, 767, 597, 786, 598, 822, 551); ellipse(700, 550, 30, 30); image(img.leaferTree, 1048, 531, 430, 430); // closer tree fill(clr.al.belly); quad(945, 650, 986, 710, 1011, 710, 1010, 667); fill(clr.al.body); quad(945, 600, 925, 714, 962, 715, 1010, 606); ellipse(922, 620, 30, 30); } }, // yelling back { duration: 300, reflected: tangleShot.reflected, init: function() { tangleShot.init.call(this); this.aqualine = false; }, draw: tangleShot.draw }, // tangle { duration: 170, init: function() { if (!this.bkg) { background(141, 193, 204); // Reflection pushMatrix(); // leaves scale(3, 2); leaves(-10, 0, 300, 250); popMatrix(); for (var i = 0; i < 4; i++) { // tree trunks graphic("trunk", random(1000), random(400), 1500); } // Noise noStroke(); fill(51, 70, 74, 40); for (var i = 0; i < 20; i++) { ellipse(random(1000), random(1000), 350, 200); } // Dim the reflection fill(93, 130, 138, 150); rect(0, 0, 1000, 1000); filter(BLUR, 12); this.bkg = get(0, 0, width, height); // Cover this.cover = get(0, floor(width / 2), width, floor(width / 2)); } }, draw: function() { image(this.bkg, 500, 500, 1000, 1000); noStroke(); // Right arm var f = smoothInt(0.2, 1.8 - frame / 80); pushMatrix(); translate(f * 700, -f * 400); fill(clr.al.belly); quad(672, -10, 399, 340, 556, 473, 1010, -10); popMatrix(); // Seed var x = smoothInt(0.1, frame / 150) * 600 - 100; image(img.leaferSeed, x, 550, 1200, 1200); image(this.cover, 500, 750, 1000, 500); fill(clr.bl.body); arc(x - 16, 500, 590, 200, 0, 180); arc(x + 70, 580, 450, 400, 200, 337); // Left arm pushMatrix(); translate(f * 900, -f * 300); fill(clr.al.body); beginShape(); vertex(1000, -200); vertex(535, 427); vertex(494, 517); vertex(600, 595); vertex(613, 720); vertex(1100, 455); endShape(); popMatrix(); } }, // taking the seed out of the water { duration: 100, caption: "Oh my.", init: function() { if (!this.bkg) { // Forest background pushMatrix(); scale(1.2); translate(-300, -200); forestBkg(); popMatrix(); // Shore darkening noStroke(); fill(61, 53, 46, 40); for (var i = 0; i < 1; i += 1/4) { rect(-10, 340 + i * 120, 1020, 200 + i * 200); } // Water fill(69, 121, 122); rect(-10, 450, 1020, 600); // Reflection var reflection = getReflection(round(width * 0.43), 70); pushMatrix(); scale(1, -1); image(reflection, 500, -650, 1000, 400); popMatrix(); // Unfocus filter(BLUR, 2); filter(BLUR, 3); // Get background this.bkg = get(0, 0, width, height); } }, draw: function() { if (!this.bkg) { this.init(); } image(this.bkg, 500, 500, 1000, 1000); // Leafer pushMatrix(); if (page !== pageDraw) { var f = pow(smoothInt(0.1, localFrame / pages[page].duration / 1.2), 2); translate(-f * 800, 0); scale(1 + f / 3); } noStroke(); fill(clr.al.redLeaf); // back leaf bezier(646, 335, 781, 339, 735, 372, 732, 502); fill(clr.al.belly); beginShape(); curveVertex(640, 651); vertex(646, 638); vertex(694, 446); vertex(568, 376); vertex(530, 415); // cheek vertex(513, 472); // shoulder vertex(424, 586); vertex(509, 637); vertex(520, 650); endShape(); fill(clr.al.bellyShadow); bezier(525, 424, 547, 482, 571, 548, 669, 474); triangle(544, 452, 498, 545, 506, 550); fill(clr.al.belly); // chin ellipse(611, 416, 170, 160); image(img.leaferSeed, 477, 573, 230, 230); // seed fill(clr.al.body); beginShape(); curveVertex(773, 940); // lower back vertex(746, 636); vertex(720, 489); // shoulder vertex(706, 401); vertex(676, 350); vertex(614, 327); // top of head vertex(548, 356); vertex(524, 423); vertex(549, 449); vertex(566, 468); // beak vertex(573, 470); vertex(604, 461); vertex(648, 455); vertex(678, 442); // cheek vertex(650, 512); vertex(525, 578); // digit vertex(508, 588); vertex(508, 612); vertex(478, 641); // digit vertex(586, 637); vertex(642, 638); vertex(589, 755); endShape(); fill(clr.al.eye); // eyes ellipse(544, 409, 14, 13); ellipse(633, 421, 18, 15); fill(255); ellipse(543, 411, 6, 6); ellipse(630, 424, 7, 6); fill(clr.al.redLeaf); // top leaf beginShape(); curveVertex(596, 392); vertex(590, 363); vertex(610, 303); vertex(674, 289); vertex(722, 347); vertex(685, 435); // point vertex(675, 439); vertex(669, 352); vertex(597, 365); vertex(569, 380); endShape(); noFill(); strokeWeight(5); stroke(clr.al.body); bezier(591, 367, 618, 238, 690, 326, 671, 417); popMatrix(); } }, // holding the seed in the water { duration: 200 }, { duration: 200, reflected: tangleShot.reflected, init: function() { tangleShot.init.call(this); this.aqualine = true; }, draw: tangleShot.draw }, // tangle { duration: 170, draw: function() { pushMatrix(); translate(-500, -50); scale(1.2); forestBkg(); popMatrix(); // Pebbles noStroke(); for (var i = 0; i < 1; i += 0.003) { fill(lerpColor( color(57, 58, 64), color(125, 112, 105), sRandom(i))); ellipse(sRandom(-i, 1000), 550 + i * 220, 60 + i * 60, 10 + i * 15); } // Leafers fill(0, 60); // shadows if (page < pageDraw + 2) { var llx = -50 + smoothInt(0.2, frame / 150) * 300; // left leafer X coordinate // Left leafer ellipse(llx - 30, 630, 300, 50); // shadow graphic("leafer with seed", llx, 440, 390, frame < 150 ? (frame % 60 < 30 ? 1 : 2) : false, clr.al.redLeaf); // Right leafer var rlx = 1350 - smoothInt(0.2, frame / 150) * 600; // right leafer X coordinate fill(0, 60); // shadow ellipse(rlx, 625, 330, 50); image(img.leaferTree, rlx, 450, 450, 450); if (frame > 150) { // eye fill(clr.al.eye); ellipse(615, 544, 19, 19); fill(255); ellipse(613, 543, 7, 7); } if (page === pageDraw + 1) { graphic("leafer tree mouth", 630, 575, 120); } } else { ellipse(250, 625, 330, 50); // shadow pushMatrix(); scale(-1, 1); // Left leafer image(img.leaferTree, -210, 450, 450, 450); fill(clr.al.eye); ellipse(-345, 543, 19, 17); fill(255); ellipse(-347, 542, 7, 6); if (page === pageDraw + 2 \|\| page === pageDraw + 4) { graphic("leafer tree mouth", -330, 575, 120); } // Right leafer fill(0, 60); // shadow ellipse(-730, 640, 300, 50); graphic("leafer with seed", -700, 440, 400); if (page === pageDraw + 3) { fill(clr.al.mouth); if (frame % 40 < 10 \|\| frame % 53 < 10) { arc(-595, 358, 50, 14, 0, 170); } else if (frame % 30 < 10) { arc(-590, 358, 30, 24, 0, 170); } } popMatrix(); // Left leafer red noFill(); // arc strokeWeight(18); stroke(clr.al.redLeaf); arc(257, 580, 250, 280, 168, 260); noStroke(); fill(clr.al.redLeaf); beginShape(); vertex(153, 490); bezierVertex(130, 522, 112, 527, 100, 525); bezierVertex(98, 462, 60, 503, 0, 427); bezierVertex(10, 577, -5, 565, 132, 543); endShape(); beginShape(); // small leaf vertex(228, 385); bezierVertex(205, 385, 167, 389, 145, 411); bezierVertex(210, 417, 202, 489, 288, 463); endShape(); fill(0, 40); triangle(237, 382, 189, 388, 275, 453); fill(clr.al.redLeaf); beginShape(); // medium leaf vertex(293, 350); bezierVertex(258, 349, 225, 349, 182, 359); bezierVertex(248, 378, 223, 487, 373, 477); endShape(); fill(0, 40); triangle(293, 350, 242, 350, 342, 452); fill(clr.al.redLeaf); beginShape(); // largest leaf vertex(383, 489); bezierVertex(424, 368, 373, 280, 255, 270); bezierVertex(308, 343, 247, 375, 380, 485); endShape(); } } }, // the two leafers meet { duration: 140, caption: "Thank the heavens!" }, { duration: 200, caption: "I saw him floating downstream while I was washing." }, { duration: 320, caption: "Thank you so much, Tailfrond. Did you see Haze? He was swimming downstream in search of this child." }, { duration: 220, caption: "No. I'll find and inform him." }, { duration: 200, draw: function() { var lPos = constrain(frame * 1.5 - 100, -200, 200); // the x coordinate of the leafer with the seed // Background pushMatrix(); translate(-250, 0); forestBkg(); popMatrix(); // Extra plants graphic("bush", 142, 500, 300); graphic("bush", 848, 502, 330); // Shadows fill(0, 40); ellipse(lPos - 20, 600, 200, 50); ellipse(500, 585, 250, 50); ellipse(660, 625, 200, 35); ellipse(867, 680, 280, 60); // Leafer with seed if (page === pageDraw) { // walking graphic("leafer with seed", lPos, 450, 320, frame % 60 < 30 ? 1 : 2); } else { noFill(); // tail stroke(clr.al.leaf); strokeWeight(25); arc(163, 491, 63, 171, 386, 477); noStroke(); fill(clr.al.body); // left arm beginShape(); curveVertex(228, 182); vertex(241, 360); vertex(293, 478); // wrist vertex(231, 492); vertex(235, 377); vertex(220, 309); endShape(); fill(clr.al.belly); beginShape(); curveVertex(137, 330); // where the right cheek is vertex(117, 407); vertex(139, 566); // right foot vertex(157, 608); vertex(181, 537); vertex(189, 535); vertex(216, 604); // left foot vertex(220, 609); vertex(242, 609); vertex(247, 608); vertex(250, 590); vertex(257, 447); // chest vertex(241, 369); vertex(205, 240); endShape(); fill(clr.al.bellyShadow); ellipse(190, 355, 104, 120); // chin ellipse(208, 483, 111, 88); // seed shadow fill(clr.al.belly); ellipse(190, 351, 112, 113); image(img.leaferSeed, 231, 447, 190, 190); fill(clr.al.body); beginShape(); curveVertex(210, 410); // beak vertex(216, 388); vertex(173, 374); vertex(148, 362); // right cheek vertex(153, 386); vertex(183, 451); // digit vertex(195, 468); vertex(192, 482); // crease vertex(189, 480); vertex(206, 501); // digit vertex(204, 508); vertex(165, 493); vertex(138, 470); // hip vertex(137, 481); vertex(158, 591); // foot vertex(157, 608); vertex(143, 609); vertex(128, 608); vertex(122, 584); vertex(107, 438); // back vertex(134, 317); vertex(191, 288); // top of head vertex(240, 309); vertex(249, 363); vertex(216, 388); endShape(CLOSE); arc(263, 483, 61, 51, 290, 498); // left hand fill(clr.al.leaf); // top leaf arc(186, 289, 63, 128, 187, 395); noFill(); stroke(clr.al.body); strokeWeight(12); arc(186, 294, 63, 128, 292, 395); noStroke(); // eyes fill(clr.al.eye); ellipse(184, 351, 13, 11); ellipse(245, 351, 8, 11); fill(255); ellipse(186, 351, 5, 5); ellipse(246, 351, 3, 5); } // Other leafers image(img.leaferTree, 520, 450, 350, 350); image(img.leaferSapling, 670, 500, 300, 300); image(img.leaferUltimate, 880, 480, 480, 480); // Facial features noStroke(); fill(clr.al.mouth); if (frame > 210 && frame < 540 \|\| frame > 970 && frame < 1200) { // ultimate if (pFrame % 40 < 10) { arc(681, 463, 70, 20, 10, 100); } else if (pFrame % 30 < 10) { ellipse(691, 469, 20, 10); } } else if (frame > 640 && frame < 920) { // tree if (pFrame % 61 < 10 \|\| pFrame % 45 < 10) { arc(197, 380, 50, 20, 32, 212); } else if (pFrame % 23 < 10) { ellipse(200, 385, 25, 14); } } else if (frame > 1300 && frame < 1600) { // sapling if (frame % 23 < 10) { bezier(577, 615, 592, 613, 606, 619, 607, 605); } else if (frame % 32 < 10) { ellipse(590, 612, 20, 8); } } fill(clr.al.eye); ellipse(415, 523, 15, 14); // tree ellipse(705, 437, 15, 13); // ultimate ellipse(595, 583, 12, 13); // sapling fill(255); ellipse(413, 522, 5, 5); ellipse(702, 436, 5, 4); ellipse(593, 582, 5, 5); } }, // clearing { duration: 430, caption: "He's alright! Good. Summerleaf is sleeping and doesn't know anything happened. Should we say something?" }, { duration: 330, caption: "Maybe we could wait a while so it's not as . . . shocking." }, { duration: 330, caption: "I'm sure Blueleaf will enjoy hearing about how he was lost in the creek." }, { duration: 350, caption: "Maybe you should wait till you're older before taking care of newborns." }, { duration: 200, post: function() { fill(40, localFrame * 2); rect(-10, -10, 1020, 1020); textFont(ui.sansFont, 32); textAlign(CENTER, CENTER); fill(100, localFrame * 2 - 50); text("Made by @WeatherWonders in January 2019", 500, 50); } } ]; // Decrements the page if the argument is -1, sets the page to the argument if it is a non-negative number, and increments the page otherwise; the page must be set via this function var setPage = function(a) { // Update page index if (a === -1) { if (page < 1) { return; } page--; } else if (a >= 0) { if (pages[a]) { page = a; } else { // page not found throw { message: "No such page \"" + a + "\"." }; } } else { if (page + 2 > pages.length) { return; } page++; } // Initialize frame = 0; frameStart = pageStart = millis(); if (pages[page].draw) { pageDraw = page; maxFrame = pages[page].duration; } else { for (var i = page - 1; i >= 0; i--) { frame += pages[i].duration; frameStart -= pages[i].duration / timeScale; if (pages[i].draw) { pageDraw = i; break; } } maxFrame = frame + pages[page].duration; } if (pages[page].init) { pages[page].init(); } ui.setText(pages[page].caption \|\| ""); }; setPage(0); draw = function() { if (pages[page].pre) { pages[page].pre(); } pages[pageDraw].draw(); if (pages[page].post) { pages[page].post(); } ui.draw(); mouseJustReleased = false; if (frame < maxFrame) { frame = floor((millis() - frameStart) * timeScale); localFrame = floor((millis() - pageStart) * timeScale); } pFrame = millis() * timeScale; delta = (millis() - endMillis) * timeScale; endMillis = millis(); };
Folds	20,45,47,56,57,78,80,84,85,96,98,107,109,271,274,280,284,311,313,329,330,497,499,530,532,548,550,564,566,581,583,592,594,705,710,722,724,2742,2744,2780,2783,2800
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLri5raUCgw
Votes	332
Spin-Offs	11
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	Weather
Author Name	WeatherWonders
Author ID	kaid_854228745598935932978211
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739447746390
Updated	4 months ago, 1744828869199
Source Deleted	unknown