Viewing Program

Program Data

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

Title	Falling \|\| [an animated story]
ID	5740496114253824
Created	6 years ago, 1555792289568
Updated	6 years ago, 1556139495693
Code	/** I've been programming around 28 months (and longer, though I didn't really start learning/retaining information until about 28 months ago) and I have learned 100% of Intro to JS. * Credits are listed in the project. * If it wasn't that clear, the final graphic is what is really the "impossible image," the rest of it's just a backstory leading up to it and not that impossible-looking :P -------- This is my longest program yet, though I'm almost positive half the lines of code aren't needed xD Any suggestions regarding code (if you dare look into it) or the end result are welcome :D (the story and the graphics/animation accompanying it aren't that good, sorry, I was kind of on a time limit...) There's a very anti-climatic easter egg in here, as well, if you want to find it for some reason. :P If by any chance you want to subscribe, you can do so here: https://www.khanacademy.org/computer-programming/subscribe-to-reader-writer-penguin/5019495151632384 */ //code { //smooths out graphics in some browsers smooth(); //object creating, KWC's style and implementation from several other people's programs with that style { line.constructor.prototype.createnew = function(){ //creating an instance of that class var obj = Object.create(this.prototype); //applying the arguments this.apply(obj, arguments); //return the object return obj; }; //} //variables { //loading var loadindex = 0, loaded = false; //click and scene variables var clicked = false; var scene = 0; //some other variables used for animating in the story var camerax = 0, cameray = 0, finallightsize = 0; //menu scene variables var scenetimer = 0, menutext = "", menutextop = 0, menubuttonhover; //fonts var arial = createFont("Arial"), timesroman = createFont("Times New Roman"); //} //previous definitions for graphics { //text { var spacings = [ //letters { 40, 21, 30, 21, 36, 22, 35, 20, 30, 26, //e 30, 20, 36, 20, 30, 22, 30, 9, 26, 10, //j 27, 17, 30, 9, 50, 35, 35, 22, 37, 28, //o 20, 20, 35, 20, 26, 18, 32, 20, 30, 16, //t 30, 23, 34, 20, 53, 32, 30, 21, 30, 20, //y 30, 20, //z //} //numbers { 35, 27, 32, 30, 35, 29, 35, 27, 31, 38, //} //symbols { 8, 35, 8, 8, 8, 8, 15, 18, 18, 8, 8, 22 //} ]; var letters = ["A", "a", "B", "b", "C", "c", "D", "d", "E", "e", "F", "f", "G", "g", "H", "h", "I", "i", "J", "j", "K", "k", "L", "l", "M", "m", "N", "n", "O", "o", "P", "p", "Q", "q", "R", "r", "S", "s", "T", "t", "U", "u", "V", "v", "W", "w", "X", "x", "Y", "y", "Z", "z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "!", "?", ":", ",", ".", "'", "-", "(", ")", ";", "\|", " " ]; var functions = [ //letters { function(){ line(0, 0, 15, -40); line(30, 0, 15, -40); line(6, -16, 24, -16); }, function(){ arc(6.5, -9.5, 17, 19, 45, 308); line(13, -20, 13, 0); //arc(6, -14, 12, 17, 200, 335); }, //a function(){ line(0, 0, 0, -40); arc(10, -30, 20, 20, 270, 450); arc(10, -10, 20, 20, 270, 450); line(0, -20, 9.5, -20); line(0, 0, 10, 0); line(0, -40, 10, -40); }, function(){ line(0, 0, 0, -40); arc(0, -9, 22, 17, 270, 450); }, //b function(){ arc(15, -20, 30, 40, 45, 300); }, function(){ arc(8, -11, 22, 22, 45, 300); }, //c function(){ line(0, 0, 0, -40); arc(0, -20, 50, 40, 270, 450); }, function(){ arc(10, -10, 22, 20, 81, 277); line(12, 0, 12, -40); }, //d function(){ line(0, 0, 0, -40); line(0, -40, 20, -40); line(0, -20, 20, -20); line(0, 0, 20, 0); }, function(){ arc(10, -10, 20, 20, 34, 311); line(1, -7, 17, -17); }, //e function(){ line(0, 0, 0, -40); line(0, -40, 20, -40); line(0, -20, 15, -20); }, function(){ line(4, 0, 4, -32); arc(10, -32, 12, 16, 180, 360); line(0, -20, 12, -20); }, //f function(){ arc(16, -20, 30, 40, 28, 300); line(13, -10, 28, -10); }, function(){ arc(7, -9, 17, 19, 64, 297); line(11, -20, 11, 15); arc(5, 15, 12, 12, 0, 180); }, //g function(){ line(0, 0, 0, -40); line(0, -20, 20, -20); line(20, 0, 20, -40); }, function(){ line(0, 0, 0, -40); arc(6, -14, 12, 10, 180, 360); line(12, -14, 12, 0); }, //h function(){ line(0, -40, 20, -40); line(0, 0, 20, 0); line(10, -40, 10, 0); }, function(){ line(0, -20, 0, 0); line(0, -24, 0, -25); }, //i function(){ line(3, -40, 27, -40); line(16, -40, 16, -8); arc(8, -8, 16, 16, 0, 180); }, function(){ line(0, -20, 0, -21); line(0, -15, 0, 15); arc(-5, 15, 10, 10, 0, 180); }, //j function(){ line(0, 0, 0, -40); line(0, -17, 16, -40); line(4, -23, 20, 0); }, function(){ line(0, 0, 0, -40); line(0, -12, 7, -23); line(1, -14, 12, 0); }, //k function(){ line(0, 0, 0, -40); line(0, 0, 20, 0); }, function(){ line(0, 0, 0, -40); }, //l function(){ line(0, 0, 0, -40); line(20, 0, 0, -40); line(20, 0, 40, -40); line(40, 0, 40, -40); }, function(){ line(0, 0, 0, -19); arc(7, -12, 14, 16, 180, 360); arc(21, -12, 14, 16, 180, 360); line(14, -12, 14, 0); line(28, 0, 28, -12); }, //m function(){ line(0, 0, 0, -40); line(0, -40, 25, 0); line(25, 0, 25, -40); }, function(){ line(0, 0, 0, -20); arc(7, -12, 14, 16, 180, 360); line(14, -12, 14, 0); }, //n function(){ ellipse(15, -20, 30, 40); }, function(){ ellipse(10, -10, 20, 20); }, //o function(){ line(0, 0, 0, -40); arc(1, -28, 30, 25, 270, 450); }, function(){ line(0, 20, 0, -20); arc(0, -9, 22, 17, 270, 450); }, //p function(){ ellipse(15, -22.5, 30, 35); line(18, -14, 21, -7); arc(27, -6, 12, 12, 0, 180); }, function(){ arc(11, -9, 22, 15, 90, 270); line(11, -19, 11, 15); line(11, 15, 16, 8); }, //q function(){ line(0, 0, 0, -40); arc(1, -28, 30, 25, 270, 450); line(4, -16, 20, 0); }, function(){ line(0, 0, 0, -20); arc(7, -12, 14, 16, 180, 329); }, //r function(){ arc(15, -30, 26, 20, 90, 280); arc(10, -12, 20, 20, 302, 515); }, function(){ arc(6, -16, 12, 10, 90, 317); arc(6, -5, 12, 10, 270, 505); }, //s function(){ line(0, -40, 20, -40); line(10, -40, 10, 0); }, function(){ line(4, 0, 4, -40); line(0, -20, 12, -20); }, //t function(){ line(0, -10, 0, -40); line(20, -10, 20, -40); arc(10, -10, 20, 20, 0, 180); }, function(){ line(0, -10, 0, -20); arc(7, -10, 14, 20, 0, 180); line(14, -20, 14, 0); }, //u function(){ line(0, -40, 15, 0); line(30, -40, 15, 0); }, function(){ line(0, -20, 8, 0); line(8, 0, 16, -20); }, //v function(){ line(0, -40, 15, 0); line(15, 0, 30, -40); line(20, -40, 35, 0); line(35, 0, 50, -40); }, function(){ line(0, -20, 8, 0); line(8, 0, 16, -20); line(10, -20, 18, 0); line(26, -20, 18, 0); }, //w function(){ line(0, -40, 20, 0); line(20, -40, 0, 0); }, function(){ line(0, -20, 12, 0); line(12, -20, 0, 0); }, //x function(){ line(0, -40, 12, -20); line(12, -20, 24, -40); line(12, -20, 12, 0); }, function(){ line(0, -20, 8, 0); line(0, 20, 16, -20); }, //y function(){ line(0, -40, 20, -40); line(0, 0, 20, 0); line(0, 0, 20, -40); }, function(){ line(0, -20, 10, -20); line(0, 0, 10, 0); line(0, 0, 10, -20); }, //z //} //numbers { function(){ ellipse(15, -20, 30, 40); line(24, -35, 5, -7); }, //0 function(){ arc(0, -40, 20, 20, 0, 90); line(10, -40, 10, 0); line(0, 0, 20, 0); }, function(){ arc(11, -28, 22, 24, 180, 360); arc(0, -28, 44, 56, 0, 90); line(0, 0, 25, 0); }, function(){ arc(11, -30, 22, 20, 180, 442); arc(11, -10, 22, 20, 270, 515); }, function(){ arc(0, -40, 20, 40, 0, 90); line(0, -20, 25, -20); line(20, -40, 20, 0); }, function(){ line(0, -40, 20, -40); line(0, -40, 0, -20); arc(8, -11, 25, 24, 234, 501); }, //5 function(){ arc(15, -20, 30, 40, 69, 270); arc(13, -10, 21, 23, 180, 402); }, function(){ line(0, -40, 20, -40); line(20, -40, 0, 0); }, function(){ ellipse(15, -12.5, 30, 25); ellipse(15, -33, 20, 15); }, function(){ arc(15, -20, 27, 40, -109, 121); arc(17, -30, 24, 23, 25, 236); }, //9 //} //other symbols { function(){ line(0, -10, 0, -40); ellipse(0, 0, 2, 2); }, //! function(){ arc(12, -32, 18, 22, 200, 476); line(7, -23, 7, -10); ellipse(7, 0, 2, 2); }, //? function(){ ellipse(0, -20, 2, 2); ellipse(0, 0, 2, 2); }, //: function(){ ellipse(0, 0, 2, 2); line(1.5, 0, 0, 5); }, //, function(){ ellipse(0, 0, 2, 2); }, //. function(){ ellipse(0, -40, 2, 2); line(1.5, -40, 0, -35); }, //' function(){ line(0, -10, 10, -10); }, //- function(){ arc(10, -20, 20, 40, 90, 270); }, //( function(){ arc(0, -20, 20, 40, 270, 450); }, //) function(){ ellipse(0, -20, 2, 2); ellipse(0, 0, 2, 2); line(1.5, 0, 0, 5); }, //; function(){ line(1, -40, 1, 0); } //\| //} ]; var lineheight = 60; var Text = function(message, x, y, amt, rot){ var lines = message.split("\n"); pushMatrix(); translate(x, y); noFill(); if(amt !== undefined && typeof amt === "number"){ scale(amt); } if(rot !== undefined && typeof rot === "number"){ rotate(rot); } //for number of lines for(var i = 0, y = 0; i < lines.length; i++, y += lineheight){ //reset space and set curline var space = 0, curline = lines[i].split(""); //loop through current line for(var j = 0; j < curline.length; j++){ //index of the correct letter (in the letters array, to correspond with spacings and functions) var index = letters.indexOf(curline[j]); //drawing the letter pushMatrix(); translate(space, y); if(functions[index] !== undefined){ functions[index](); } popMatrix(); //updating space space += spacings[index] === undefined ? 40:spacings[index]; } } popMatrix(); }; //} //title text (on menu screen) var titletext = { "f": function(x, y, angle){ pushMatrix(); translate(x, y); rotate(angle); line(0, 0, 0, 50); line(5, 0, 5, 50); line(9, 0, 30, 0); line(9, 18, 25, 18); popMatrix(); }, "a": function(x, y, angle){ pushMatrix(); translate(x, y); rotate(angle); line(15, 0, 0, 50); line(20, 0, 5, 50); line(25, 20, 15, 20); line(35, 50, 20, 0); popMatrix(); }, "l": function(x, y, angle){ pushMatrix(); translate(x, y); rotate(angle); line(0, 50, 0, 0); line(5, 50, 5, 0); line(30, 50, 10, 50); popMatrix(); }, "i": function(x, y, angle){ pushMatrix(); translate(x, y); rotate(angle); line(0, 50, 0, 0); line(5, 50, 5, 0); popMatrix(); }, "n": function(x, y, angle){ pushMatrix(); translate(x, y); rotate(angle); line(0, 50, 0, 0); line(5, 50, 5, 0); line(35, 50, 5, 0); line(35, 50, 35, 0); popMatrix(); }, "g": function(x, y, angle){ pushMatrix(); translate(x, y); rotate(angle); line(0, 50, 0, 0); line(5, 50, 5, 0); line(10, 0, 30, 0); line(10, 50, 30, 50); line(35, 50, 35, 35); line(40, 50, 40, 35); line(25, 30, 40, 30); popMatrix(); }, spacings: [40, 51, 47, 28, 55, 60], text: "falling".split(""), y: [-150, -160, -170, -180, -190, -200, -210] }; //scene 12 function and colors :P var penguin = function(x, y, col, face){ pushMatrix(); translate(x, y); noStroke(); //shadow fill(0, 0, 0, 10); ellipse(0, 76, 70, 10); ellipse(-9, 76, 80, 15); //the body fill(col); beginShape(); vertex(0, 0); bezierVertex(12, 2, 30, 4, 31, 64); bezierVertex(30, 78, -21, 88, -31, 64); bezierVertex(-30, 4, -12, 2, 0, 0); endShape(); //slight shading fill(0, 0, 0, 10); beginShape(); vertex(0, 0); bezierVertex(-28, 18, -18, 20, -23, 64); bezierVertex(-1, 71, -21, 88, -31, 64); bezierVertex(-30, 4, -12, 2, 0, 0); endShape(); //white belly fill(255, 255, 255); beginShape(); vertex(0, 42); bezierVertex(12, 44, 21, 62, 14, 76); bezierVertex(25, 73, -7, 82, -15, 76); bezierVertex(-18, 49, -11, 43, 0, 42); endShape(); //flippers pushMatrix(); translate(-21, 54); rotate(-54); fill(col); rect(0, 0, 8, 20, 5); fill(0, 0, 0, 20); rect(0, 6, 2, 13, 5); popMatrix(); pushMatrix(); translate(15, 48); rotate(54); fill(col); rect(0, 0, 8, 20, 5); fill(0, 0, 0, 20); rect(6, 3, 2, 15, 5); popMatrix(); //the feet fill(250, 230, 100); ellipse(-6, 77, 10, 5); ellipse(6, 77, 10, 5); //beak ellipse(0, 32, 10, 6); noFill(); stroke(0, 0, 0, 60); arc(0, 32, 10, 2, 0, 180); //eyes, depending on the "face" parameter if(face === 1){ noStroke(); fill(46, 46, 46); arc(-9, 24, 4, 6, 180, 360); arc(-9, 24, 4, 3, 0, 180); arc(9, 24, 4, 6, 180, 360); arc(9, 24, 4, 3, 0, 180); } else { stroke(46); arc(-9, 24, 6, 6, 180, 360); arc(9, 24, 6, 6, 180, 360); } popMatrix(); }; var penguincol = [color(230, 122, 122), color(230, 124, 202), color(195, 124, 230), color(124, 124, 230), color(124, 188, 230), color(152, 230, 154), color(222, 208, 116)]; //background gradient colors, for easy tweaking (final graphic) var backcolors = [color(51, 111, 196), color(213, 155, 242), color(227, 168, 224), color(240, 132, 177), color(235, 202, 120), color(245, 241, 171)]; //possible colors for the water (final graphic) var wavecols = [color(52, 209, 237), color(26, 217, 185), color(27, 158, 219), color(26, 110, 184)]; fill(133, 226, 242, 50); //ground color (final graphic) var groundcol = color(162, 232, 139); //a light ray function var lightray = function(x, y, lwidth, lheight, angle, start, stop){ pushMatrix(); //transforming it translate(x, y); rotate(angle); //drawing the arcs for(var i = 0; i < lheight; i += 3){ arc(i, i, i, i, start, stop); } popMatrix(); }; //} //the messages var messages = [ { text: "When she wakes, it is to a world familiarly foreign. The\nshadows dance in a realm all their own, sequestering \naway little bits and pieces of light from an obscure road \nshe must've been meant to walk above.\n\nShe was left behind, she supposes. A prickling, \nunidentifiable feeling floods through her at the thought,\nchased away only moments later by a strange haze of\ncalm.", x: 10, y: 20, amt: 0.5, }, { text: "There is all the time she could possibly need, she\nrealizes after far too long. There is nothing to do,\nnothing to see, but for her own flights of fancy. And\nso she stands, starting to cut a wavering path over \nuneven ground towards the darkest corners of this \nqueer world.", x: 10, y: 20, amt: 0.5, }, { text: "The darkness is a strange thing, she\nlearns. Even when you thought there \ncould not possibly be a black darker \nthan the deepest ebony--\n you'd find one.", x: 45, y: 215, amt: 0.7, height: height }, { text: "And in the middle of it all, there are frigid tinglings of\ntrepidation trailing up her spine at the unknown hovering\njust beyond what she can see, a wary cyclical routine\nwhiling away the seconds and minutes. She winds deeper\nand deeper into the infinite absurdities of the shadows,\nalways looking back from where she came, fearing,\nalways fearing something.", x: 10, y: 10, amt: 0.5 }, { text: "It breaks, one day. Routine was never meant to last\nfor long.\nShe learns what it is like to suffocate on \nnothing but air.", x: 620, y: 10, amt: 0.5 }, { text: "Running--farther and farther from the words. The \nmemories, the pain, the ocean of untameable \nemotions. \n\n\n\n\n\n\n\n\n\n\n\n\n\nEverything she had been trying to escape from \nthe moment she had awoken, catching up, taking\nshape and form in obscurity.", x: 20, y: 10, amt: 0.5 }, { text: "A hallway of doors and candles, blinding in their \nbrightness, beckoning to her. Drawing her in as a flame\ndoes to a moth. Voices, this time a soothing murmur \nlaced with golden promises. Telling her to walk, to\ncontinue walking all the way until--\nUntil she opens the door and crosses a threshold she\nhad never dared to before.", x: 12, y: 5, amt: 0.5 }, { text: "A spiral staircase,\nthe strange entity \nsurrounding her\nthickening, darkening\nwith every step. \nAn ironic tilt plays\nacross her lips as\nshe wonders how \nfar down she will\nhave to fall to\nfind what peace\nshe sought.", x: 400, y: 130, amt: 0.5 }, { text: "At last, the end. A true and absolute void filled with\nthe broken boundaries life knows not, greeting her at\nthe last steps. And there is a wind, a foreign whispering\nof air, pushing her towards the edge.", x: 10, y: 10, amt: 0.5 }, { text: " Jump, it says.\n Jump, the darkness says.\n Jump, she tells herself.", x: 10, y: 480, amt: 0.5 }, { text: "And so she is falling, spiraling in an\n infinite curve down.", x: 40, y: height-125, amt: 0.7 }, { text: "When she wakes, it is to a world\nwhere everything and nothing is\nimpossible. Where she can seek \npeace where there is none, where\nshe can find power within a hollow\nshell and shape anything at\nher whim.", x: 10, y: 20, amt: 0.7 }, { text: "When she wakes, it is to light\nfound in nothing but shadow.", x: 10, y: 400, amt: 0.7 } ]; //images var images = { //story graphics "menutext": function(){ pushMatrix(); scale(width/400); translate(48, 60); rotate(-3); strokeWeight(1); strokeCap(ROUND); stroke(255, 255, 255); //looping through the title text and displaying the letters for(var i = 0, space = 0; i < titletext.text.length; i++){ pushMatrix(); //transforming based on position in the text translate(space, (i < 3 ? abs(i-2.5):abs(i-3.5))10); rotate((i- (i <= 3 ? floor(titletext.text.length/2):2))5); //drawing it titletext[titletext.text[i]](0, 0, 0); //adding space space += titletext.spacings[Object.keys(titletext).indexOf(titletext.text[i])]; popMatrix(); } popMatrix(); //returning the image return get(0, 0, width, 300); }, "gradientback": function(){ for(var i = 0; i < height; i++){ stroke(lerpColor(color(40), color(0, 0, 0), i/height)); line(0, i, width, i); } //returning the image return get(0, 0, width, height); }, "rocktex": function() { pushMatrix(); scale(width/400); //drawing the "texture" and scaling to fit screen (as it was designed on a 400x400) noStroke(); fill(0, 0, 0, 30); triangle(0, 0, 38, 49, 0, 400); triangle(11, 15, 38, 49, 110, 0); triangle(97, 83, 38, 49, 113, 400); triangle(214, 83, 38, 49, 113, 400); triangle(275, 83, 346, 49, 281, 233); triangle(213, 251, 273, 400, 199, 400); triangle(400, 152, 343, 314, 400, 400); fill(0, 0, 0, 10); triangle(181, 145, 274, 0, 344, 53); triangle(425, 83, 274, 246, 344, 315); triangle(333, 83, 274, 246, 344, 315); triangle(210, 253, 274, 246, 344, 315); quad(175, 400, 111, 400, 162, 244, 207, 315); triangle(216, 76, 162, 244, 211, 198); triangle(276, 80, 281, 223, 214, 84); quad(37, 272, 73, 205, 99, 325, 0, 389); popMatrix(); //returning the image return get(0, 0, width, height); }, "scene1back": function(){ background(48, 48, 48); //drawing the light rays noStroke(); (fill)(255, 1); for(var i = 0; i < 10; i++){ lightray(272+i20+random(-20, 20), -150, random(40, 80), random(90, 350), random(70, 50), random(20, 40), random(50, 70)); } //a light spot/ground definition (fill)(255, 1); for(var j = 0; j < 30; j++){ ellipse(100, 500, j30, j); } //ground gradient (darkening towards edge) for(var l = 500; l < height; l++){ stroke(0, 0, 0, map(l, 500, height, 0, 80)); line(0, l, width, l); } //adding some darker spots to the ground randomly, texture noStroke(); for(var k = 0; k < 100; k++){ var s = random(3, 8); (fill)(random(k0.2, k0.6)); ellipse(random(0, width), random(height-k0.6, height-5), s, s); } //returning the image return get(0, 0, width, height); }, "scene3back": function(){ //gradient background for(var i = 0; i < height; i++){ stroke(lerpColor(color(48, 48, 48), color(0, 0, 0), i/height)); line(0, i, width, i); } //adding some small ellipses noStroke(); for(var j = 0; j < 100; j++){ fill(255, 255, 255, random(10, 40)); var s = random(1, 4); ellipse(random(0, width), random(0, j1.5), s, s); } //returning the image return get(0, 0, width, height); }, "gensceneback": function(){ background(33, 33, 33); //defining the ground in darkness strokeWeight(2); stroke(255, 255, 255, 10); line(0, height-100, width, height-100); //gradient noStroke(); fill(255, 255, 255, 1); for(var i = 0; i < 300; i += 8){ ellipse(width/2, height/2, i2, i2); } //returning the image return get(0, 0, width, height); }, "scene7back": function(){ background(79, 79, 79); //gradient on wall/floor noStroke(); fill(255, 255, 255, 3); for(var i = 0; i < 250; i += 5){ arc(width/2, height-100, i2, i2, 181, 360); arc(width/2, height-100, i2, i, 0, 180); } //defining ground with a line stroke(255, 255, 255, 70); strokeWeight(2); line(0, height-100, width, height-100); strokeWeight(1); line(15, height-97, width-15, height-97); //returning the image return get(0, 0, width, height); }, "scene7wall": function(){ //the bricks noStroke(); for(var j = 0; j < 100; j++){ fill(random(70, 90)); rect(random(20, width-20), random(0, height-110), 15, 8, 2); } //returning the image return get(0, 0, width, height-100); }, "scene7floor": function(){ //the texture lines for(var j = 0; j < 50; j++){ stroke(255, 255, 255, random(10, 60)); var y = random(height, height-100), x = random(0, width-20); line(x, y, x+random(30, 150), y); } //returning the image return get(0, height-100, width, 100); }, "light door": function(){ pushMatrix(); scale(1.5); noStroke(); //silver-ish frame fill(191, 191, 191); rect(0, 0, 70, 150); fill(0, 0, 0, 40); rect(5, 5, 60, 140); //lighting on the frame fill(255, 255, 255, 180); quad(0, 0, 0, 10, 5, 20, 5, 10); quad(0, 30, 0, 40, 5, 50, 5, 40); quad(0, 45, 0, 50, 5, 60, 5, 55); //actual door fill(143, 143, 143); rect(10, 10, 50, 130); fill(255, 255, 255, 20); for(var i = 0; i < 2; i++){ for(var j = 0; j < 4; j++){ rect(16+i22, 21+j30, 15, 20); } } //doorknob fill(219, 183, 0); ellipse(52, 76, 7, 7); fill(255, 255, 255, 90); ellipse(52, 74, 4, 4); popMatrix(); //returning the image return get(0, 0, 135, 225); }, "torch base": function(){ pushMatrix(); translate(10, 5); noStroke(); fill(110, 110, 110); triangle(-10, -5, 10, -5, 0, 30); fill(153, 153, 153); quad(0, 5, -10, -5, 0, 30, 10, -5); fill(255, 255, 255, 20); triangle(0, 5, -10, -5, 0, 30); popMatrix(); //returning the image return get(0, 0, 20, 30); }, "scene8back": function(){ background(28, 28, 28); //rays of light from the door (edge of screen) noStroke(); (fill)(255, 1); for(var k = 0; k < 10; k++){ lightray(-140, random(50, 150), random(40, 50), random(90, 350), random(-64, 11), random(0, 40), random(50, 70)); } popMatrix(); //returning the image return get(0, 0, width, height); }, "spiral staircase": function(){ //part of a spiral staircase function var spiralstair = function(x, y, flip){ pushMatrix(); translate(x, y); if(flip){ scale(-1, 1); } //the stair steps strokeCap(SQUARE); for(var j = -6; j < 10; j += 1.5){ var y = sqrt(abs(sq(10)-sq(j)))10; strokeWeight(j < 0 ? 4:8); stroke(54, 54, 54); line(j < 0 ? (-j10+15):(j10), j < 0 ? 119-y0.7+20:(y+45), 0, j < 0 ? 119-y0.7+20:(y+45)); } //the column-things, placed in an arcing shape for(var i = -6; i < 10; i+=1.5){ //y, in a circular shape, and x (based on whether or not i is negative it will change var y = i < 0 ? -sqrt(abs(sq(10)-sq(i)))5+72:sqrt(abs(sq(10)-sq(i)))10, x = i < 0 ? abs(i)10:i10; //adding an extra column thing at the end if(i === -6){ noStroke(); fill(82, 82, 82); rect(x+15, y-3, 3, 45); fill(255, 255, 255, 90); rect(x+15, y-3, 1, 5); } //the other columns noStroke(); fill(82, 82, 82); rect(x, y, 3, 45); fill(255, 255, 255, 90); rect(x+2, y, 1, 45); } //the railing noFill(); stroke(102, 102, 102); strokeWeight(4); strokeCap(ROUND); arc(0, 26, 188, 144, 16, 90); bezier(0, 20, 57, 21, 98, 36, 90, 44); //the bottom connection between steps arc(0, 71, 188, 144, 16, 90); bezier(0, 64, 57, 70, 98, 88, 90, 87); //a little bit of lighting stroke(255, 255, 255, 90); strokeWeight(1); arc(0, 27, 189, 144, 15, 90); bezier(0, 19, 57, 21, 98, 36, 94, 44); popMatrix(); }; //column supporting the staircase fill(59, 59, 59); noStroke(); rect(width/2, 119, 10, height-60); stroke(255, 255, 255, 70); strokeWeight(2); line(width/2+2, 119, width/2+2, height-60); //the spiral staircase for(var j = 100, num = 0; j < height-80; j += 80, num++){ spiralstair(width/2, j, num % 2 === 0 ? false:true); } //returning the image return get(width/2-100, 100, 200, height-100); }, "scene9back": function(){ background(23, 23, 23); //a barely defined ground stroke(255, 255, 255, 10); strokeWeight(2); line(160, height-100, width, height-100); //a slight background gradient for visibility noStroke(); fill(255, 255, 255, 1); for(var i = 0; i < 300; i += 8){ arc(350, height-100, i2, i2, 181, 360); arc(350, height-100, i2, i, 0, 180); } //rays of "light" noStroke(); (fill)(255, 1); for(var k = 0; k < 10; k++){ lightray(400, -90, random(40, 50), random(90, 350), random(27, 75), random(-10, 40), random(56, 70)); } lightray(400, -90, 50, 300, 84, -10, 70); lightray(400, -90, 50, 350, 75, -10, 70); //hovering entity of darkness fill(0, 0, 0, 40); for(var l = 0; l < 20; l+=2){ beginShape(); vertex(0, 0); bezierVertex(41, 44, 53, 12, 71+l2, 79+l); bezierVertex(50+l, 44, 23, 59+l, 50+l3, 115); bezierVertex(179, 194+l3, 2+l2, 54, 50+l, 252-l); bezierVertex(160, 221, 43, 335, 181, 252-l); bezierVertex(262, 221, 145+l1.5, 335, 252+l, 343); bezierVertex(262, 349, 185, 363, 189, 343+l); bezierVertex(262-l2, 360, 134, 279-l, 123+l, 321); bezierVertex(204, 403, 134, 279, 99+l2, 341); bezierVertex(149, 371, 134, 380-l1.5, 190, 388); bezierVertex(140-l4, 371, 148, 436, 190, 421); bezierVertex(140, 371, 134+l, 483+l, 74+l, 421+l); bezierVertex(-8+l, 371+l, 42, 483, 73+l5, 600); vertex(0, 600); endShape(); } //returning the image return get(0, 0, width, height); }, "scene10back": function(){ background(0, 0, 0); noStroke(); (fill)(255, 1); for(var i = 0; i < 300; i += 4){ ellipse(width/2, height/2, i2, i2); } //rerturning the image return get(0, 0, width, height); }, "scene11back": function(){ background(255); //some background texture noStroke(); for(var i = 0; i < 50; i++){ pushMatrix(); var x = random(0, width), y = random(0, height); translate(x, y); scale(random(1, 5)); fill(0, 0, 0, random(1, 4)); triangle(0, 0, random(-60, 0), random(-150, -40), random(10, 90), random(-50, 90)); popMatrix(); } //ground definition (barely there) stroke(0, 0, 0, 8); line(0, height-100, width, height-100); //returning the image return get(0, 0, width, height); }, "scene12back": function(){ //drawing the background noStroke(); for(var i = 0; i < 150; i++){ var col = floor(random(0, penguincol.length)); (fill)(penguincol[col], random(20, 90)); var s = random(3, 9); ellipse(random(0, width), random(0, i2), s, s); } for(var j = height; j > height-150; j--){ stroke(0, 0, 0, map(j, height, height-150, 20, 0)); line(0, j, width, j); } //drawing the foreground for(var i = 60; i < width-50; i += 80){ penguin(i + random(-10, 10), height-220 + random(-5, 5), penguincol[(i-60)/80], floor(random(1, 3))); } //returning the image return get(0, 0, width, height); }, //final graphic "candle glow": function(){ pushMatrix(); translate(25, 25); noStroke(); //the glow fill(255, 234, 0, 30); for(var i = 0; i <= 50; i += 10){ ellipse(0, 0, i, i); } popMatrix(); //returning the image return get(0, 0, 50, 50); }, "dress design": function(){ pushMatrix(); translate(200, 50); //swirl function (for pattern) var swirl = function(x, y, amt, trans, rot){ pushMatrix(); translate(x, y); scale(amt); rotate(rot); stroke(0, 0, 0, trans); beginShape(); for(var i = 0; i < 700; i += 10){ vertex(i/50 sin(i), i/50 * cos(i)); } endShape(); popMatrix(); }; //background (white) so that it shows up on a white background fill(255, 255, 255); rect(-30, 0, 100, 250); //drawing the design for(var i = 0, yoff = 0; i < 11; i++){ //scale amount (gets larger as i increases) var scaleamt = map(i, 0, 11, 0.3, 0.7); //making a triangular ish shape (rows, where j is x and i is y) for(var j = 0; j < i; j++){ swirl(9 + (j < i/2 ? -j10:(j-i/2+1)10), 87+yoff, map(i, 0, 10, 0.3, 0.7), 50, random(0, 360)); } //adding y offset based on the scale amount of the row yoff += scaleamt23; } //getting design var dresstex = get(0, 0, width, height); //reset background(0); //drawing the shape noStroke(); fill(255, 255, 255); beginShape(); vertex(-19, 139); bezierVertex(-10, 112, 3, 130, 20, 89); bezierVertex(9, 130, 28, 112, 30, 132); bezierVertex(40, 146, 36, 133, 56, 172); bezierVertex(40, 208, -14, 210, -24, 172); endShape(); popMatrix(); //getting image var dressshape = get(0, 0, width, height); //masking dresstex.mask(dressshape); //return the image return dresstex; }, "final sky backdrop": function(){ //multi-color gradient (taken from one of my old programs) for(var i = 0; i < height; i++){ for(var l = 0; l < backcolors.length; l++){ if(i >= height (l-1)/(backcolors.length-1) && i <= height * l/(backcolors.length-1)){ stroke(lerpColor(backcolors[l-1], backcolors[l], (i - height * (l-1)/(backcolors.length-1))/((height * l/(backcolors.length-1))-height * (l-1)/(backcolors.length-1)))); } } line(0, i, width, i); //covering up a weird point in the middle :\ (a bug) point(width/2, i); } //making it slightly less vibrant noStroke(); fill(255, 255, 255, 15); rect(0, 0, width, height); //some noise-y overlay var backcloudsize = 4; for(var j = height; j > height0.4; j -= backcloudsize){ for(var k = 0; k < width; k += backcloudsize){ //transparency based on noise var trans = j0.4-noise(j/40, k/40)290; //drawing the transparent rect (fill)(255, trans); rect(k, j, backcloudsize, backcloudsize); } } //returning the image return get(0, 0, width, height); }, "candle": function(){ pushMatrix(); translate(10, 25); //base noStroke(); fill(199, 199, 199); arc(0, 0, 12, 10, 0, 180); rect(-3, 5, 6, 2, 100); //candle itself fill(227, 205, 116); rect(-3, -15, 6, 15); fill(209, 178, 25); ellipse(0, -15, 6, 2); fill(255, 255, 255, 90); rect(0, -14, 2, 6); //wick noFill(); stroke(0, 0, 0, 90); arc(-1, -19, 3, 8, 0, 90); popMatrix(); //returning the image return get(0, 0, 20, 40); }, "water ground": function(){ //water { //background of water noStroke(); (fill)(wavecols[0], 30); beginShape(); vertex(0, 0); vertex(width, 0); vertex(width, 220); bezierVertex(593, -55, 41, -50, 0, 220); endShape(); beginShape(); vertex(0, 0); vertex(width, 0); vertex(width, 231); bezierVertex(593, 45, 41, -25, 0, 220); endShape(); //a wave function for the sides var sideWave = function(x, y, fillcol, flip){ pushMatrix(); translate(x, y); //flipping it (horizontally) if(flip){ scale(1, -1); rotate(180); } //shape of it (fill)(fillcol, 20); noStroke(); beginShape(); vertex(0, random(-35, 5)); vertex(54, -y); bezierVertex(-26+random(-10, 10), 111+random(-5, 5), 30+random(-10, 10), 215+random(-5, 5), 24, 230); vertex(0, 230); endShape(); //bezier stroke on outer edge noFill(); (stroke)(fillcol, 90); bezier(10, 89-y+random(-10, 10), -26+random(-10, 10), 111+random(-5, 5), 30+random(-10, 10), 215+random(-5, 5), 24, 230); popMatrix(); }; //drawing the waves on the side sideWave(0, 0, wavecols[0]); sideWave(width, 0, wavecols[0]); for(var j = 0; j < 10; j++){ sideWave(random(0, 24), random(50, 149), wavecols[floor(random(0, wavecols.length))], false); sideWave(random(width, width-24), random(50, 149), wavecols[floor(random(0, wavecols.length))], true); } //} //ground { noStroke(); fill(groundcol); beginShape(); vertex(0, height); vertex(width, height); vertex(width, 300); bezierVertex(520, 620, 80, 620, 0, 300); endShape(); fill(38, 168, 32, 15); for(var j = 0; j < 35; j++){ ellipse(300, 566, j20, 5+j2); } //fade transition with the water (fill)(groundcol, 40); for(var i = 0; i < 20; i++){ pushMatrix(); translate(0, -i4); beginShape(); vertex(0, height); vertex(width/2, height); vertex(width/2, 500); bezierVertex(220, 600, 80, 620, 0, 300); endShape(); translate(width, 0); scale(1, -1); rotate(180); beginShape(); vertex(0, height); vertex(width/2, height); vertex(width/2, 500); bezierVertex(220, 600, 80, 620, 0, 300); endShape(); popMatrix(); } //} //floating glass pieces { //a glass piece function var glassPiece = function(x, y, amt, yamt, numvert, rot){ pushMatrix(); translate(x, y); scale(amt, yamt); rotate(rot); //adding randomized vertices (based on how many points there are) to an array var vertices = []; if(numvert === 3){ vertices.push([random(-10, 10), random(-50, -20)], [random(-50, -20), random(10, 30)], [random(20, 50), random(10, 40)]); } else { vertices.push([random(-40, -10), random(-50, -20)], [random(10, 40), random(-50, -20)], [random(20, 50), random(10, 40)], [random(-50, -20), random(10, 30)]); } //drawing the shape noStroke(); fill(255, 255, 255, random(10, 30)); beginShape(); for(var i = 0; i < vertices.length; i++){ vertex(vertices[i][0], vertices[i][1]); if(i !== 0){ vertex(vertices[i][0]+random(-10, 10), vertices[i][1] + random(0, 5)); } } endShape(); //adding some lighting fill(255, 255, 255, random(20, 40)); beginShape(); for(var i = 0; i < vertices.length; i++){ //pulling one vertice inwards if(i === vertices.length-1){ vertex(vertices[i][0]/3, vertices[i][1]/3); } //drawing the rest as is else { vertex(vertices[i][0], vertices[i][1]); } } endShape(); //adding a larger edge (illusion of depth) stroke(255, 255, 255, random(40, 60)); strokeWeight(3); strokeCap(SQUARE); var index = ~~random(1, 2); line(vertices[0][0], vertices[0][1], vertices[index][0], vertices[index][1]); line(vertices[0][0]+2, vertices[0][1]+3, vertices[index][0]+1, vertices[index][1]+4); //and a little bit of shading near the edge strokeWeight(10); strokeCap(ROUND); stroke(0, 0, 0, 6); line(vertices[0][0]+5, vertices[0][1]+10, vertices[index][0], vertices[index][1]+4); popMatrix(); }; //drawing randomized glass pieces for(var i = 0; i < 15; i++){ glassPiece(random(50, width-50), random(80, 330), random(0.5, 1), random(0.5, 1), round(random(3, 4)), random(0, 360)); } //} //returning the image return get(0, 0, width, height); }, "figure container": function(){ pushMatrix(); translate(275, 145); var skintone = color(235, 206, 174); //back of glass container { //shape of it stroke(150, 150, 150, 90); strokeWeight(3); fill(255, 255, 255, 20); pushMatrix(); translate(-132, 6); beginShape(); vertex(0, 0); vertex(21, 15); vertex(35, 51); vertex(35, 69); vertex(52, 89); vertex(67, 81); vertex(77, 121); vertex(103, 145); vertex(110, 126); vertex(164, 184); vertex(225, 178); vertex(231, 163); vertex(240, 170); vertex(266, 168); vertex(299, 179); vertex(311, 174); vertex(308, 146); vertex(340, 100); vertex(340, 400); bezierVertex(300, 370, 40, 370, 0, 400); endShape(); //some outlining stroke(255, 255, 255, 30); noFill(); beginShape(); vertex(6, 0); vertex(21, 12); vertex(38, 51); vertex(34, 69); vertex(52, 85); vertex(64, 81); vertex(74, 121); vertex(103, 141); vertex(110, 126); endShape(); strokeCap(SQUARE); stroke(255, 255, 255, 90); strokeWeight(10); line(0, 0, 0, 400); strokeWeight(8); line(340, 100, 340, 400); strokeCap(ROUND); //a tiny bit of detailing/lighting for(var i = 0; i < 20; i++){ strokeWeight(random((21-i)/5, (21-i)/3)); (stroke)(255, map(i, 0, 20, 35, 10)); line(8+i6, 29+i10+random(0, 50), 8+i6, 391-i); } (stroke)(255, 25); strokeWeight(50); line(37, 124, 37, 159); (stroke)(255, 50); strokeWeight(30); line(37, 250, 37, 181); (stroke)(0, 10); strokeWeight(15); line(331, 391, 331, 194); //adding some lighting to the bottom of the container noFill(); stroke(255, 255, 255, 90); strokeWeight(5); bezier(0, 400, 40, 430, 300, 430, 340, 400); strokeWeight(8); bezier(9, 399, 46, 382, 115, 387, 136, 380); for(var k = 0; k < 20; k++){ (stroke)(255, map(k, 0, 20, 70, 5)); strokeWeight(map(k, 0, 20, 5, 1)); arc(170, 400, 330-k10, 40, 270-k, 450+k); (stroke)(255, map(k, 0, 20, 40, 4)); arc(170, 400, 330-k10, 40, 90-k, 270-k); } strokeWeight(10); (stroke)(0, 10); arc(170, 400, 330, 22, 68, 239); popMatrix(); //} //actual person { //inside arm (or what's seen of it, anyways) noStroke(); fill(lerpColor(skintone, color(0, 0, 0), 0.05)); beginShape(); curveVertex(0, 0); curveVertex(-8, 76); curveVertex(-28, 99); curveVertex(-71, 64); curveVertex(-54, 74); curveVertex(-37, 83); curveVertex(-31, 81); curveVertex(-23, 67); curveVertex(-8, 51); curveVertex(0, 0); endShape(); //torso fill(247, 247, 247); beginShape(); curveVertex(0, 77); curveVertex(-8, 54); curveVertex(25, 48); curveVertex(33, 71); curveVertex(25, 93); curveVertex(25, 116); curveVertex(33, 138); curveVertex(42, 152); curveVertex(54, 182); curveVertex(-18, 180); curveVertex(-24, 160); curveVertex(-20, 139); curveVertex(-19, 113); curveVertex(-20, 94); curveVertex(-26, 70); curveVertex(-8, 54); curveVertex(0, 65); endShape(); //neck noStroke(); fill(skintone); beginShape(); curveVertex(0, 21); curveVertex(9, 28); curveVertex(-5, 36); curveVertex(-4, 39); curveVertex(-3, 46); curveVertex(-8, 56); curveVertex(9, 50); curveVertex(12, 28); curveVertex(0, 0); endShape(); //some slight shading strokeWeight(1); noFill(); for(var i = 0; i < 10; i++){ stroke(0, 0, 0, map(i, 0, 10, 30, 0)); bezier(-4+i/2, 38+i, 1, 37+i, 7, 34, 10+i, 31+i); } stroke(0, 0, 0, 40); bezier(-1, 43, 0, 37, -2, 40, -2, 38); bezier(-1, 46, 1, 37, 2, 41, 0, 38); //face base shape noStroke(); fill(skintone); beginShape(); curveVertex(0, 0); curveVertex(6, 0); curveVertex(-2, -7); curveVertex(-14, -10); curveVertex(-24, 0); curveVertex(-21, 13); curveVertex(-21, 17); curveVertex(-23, 22); curveVertex(-23, 23); curveVertex(-19, 25); curveVertex(-18, 26); curveVertex(-18, 29); curveVertex(-16, 32); curveVertex(-13, 37); curveVertex(0, 36); curveVertex(13, 23); curveVertex(6, 0); curveVertex(0, 0); endShape(); //eyes (eyelashes) noFill(); strokeWeight(1); stroke(26, 26, 26, 100); arc(-21, 14, 5, 2, 73, 207); arc(-21, 15, 3, 2, 85, 207); for(var j = 0; j < 7; j++){ //reversing the arc (distinguishing top/bottom eyelashes) randomly if(~~(random(0, 2)) === 1){ arc(-13+j/5, 13, 8-j1.5, 3.5, random(10, -20), 180+random(20, -30)); } else { arc(-14+j/2, 16, 6-j1.5, -random(1, 2), random(10, -20), 180+random(20, -30)); } } arc(-13, 15, 5, 3, 20, 180); //eyebrow stroke(0, 0, 0, 80); bezier(-18, 8, -14, 2, -10, 10, -9, 7); //mouth noStroke(); fill(219, 81, 115); beginShape(); curveVertex(-13, 26); curveVertex(-11, 29); curveVertex(-13, 29); curveVertex(-18, 28); curveVertex(-17, 32); curveVertex(-14, 32); curveVertex(-11, 29); curveVertex(-9, 15); endShape(); //hair fill(107, 66, 35); beginShape(); curveVertex(0, -13); curveVertex(-16, -13); curveVertex(-21, -6); curveVertex(-15, 2); curveVertex(-6, 6); curveVertex(-4, 13); curveVertex(-6, 22); curveVertex(-6, 20); curveVertex(-2, 15); curveVertex(-1, 6); curveVertex(4, 6); curveVertex(6, 7); curveVertex(6, 13); curveVertex(11, 24); curveVertex(7, 46); curveVertex(-7, 65); curveVertex(-6, 83); curveVertex(-3, 71); curveVertex(0, 75); curveVertex(2, 67); curveVertex(17, 56); curveVertex(22, 74); curveVertex(19, 87); curveVertex(19, 90); curveVertex(32, 71); curveVertex(30, 57); curveVertex(30, 48); curveVertex(32, 53); curveVertex(34, 41); curveVertex(30, 27); curveVertex(23, 6); curveVertex(21, -1); curveVertex(15, -10); curveVertex(-2, -16); curveVertex(-16, -13); curveVertex(0, -14); endShape(); //hair detailing/texture noFill(); for(var k = 0; k < 9; k++){ stroke(133, 104, 68+random(-20, 20), random(40, 120)); bezier(10+random(-3, 3), -8+random(-4, 15), 28+random(-5, 5), 9+random(-5, 8), 10+random(-5, 5), 21+random(-4, 4), 20+random(-8, 8), 45+random(-4, 10)); bezier(-13+random(-3, 3), -10+random(-4, 10), -9+random(-5, 10), -7+random(-5, 18), 9+random(-5, 5), -21+random(-4, 14), 10+random(-5, 5), -4+random(-4, 10)); //highlight (white) if(k % 2 === 0){ stroke(255, 255, 255, random(10, 50)); bezier(-16+random(-3, 3), -10+random(-4, 10), -9+random(-5, 10), -7+random(-5, 18), 9+random(-5, 5), -21+random(-4, 14), 10+random(-5, 5), -4+random(0, 10)); } } stroke(138, 99, 58); bezier(14, 32, 13, 60, 10, 45, -3, 69); bezier(12, 41, 13, 61, 2, 38, -3, 72); bezier(16, 41, 13, 61, 2, 58, 2, 65); bezier(12, 48, 27, 73, 30, 62, 23, 76); bezier(12, 29, 27, 69, 30, 51, 29, 69); bezier(20, 13, 27, 69, 30, 50, 23, 82); bezier(13, 4, -1, 16, 24, 19, 9, 7); //shadow (outside arm) for(var l = 0; l < 15; l++){ stroke(0, 0, 0, map(l, 0, 15, 20, 0)); bezier(-19, 112+l, -20+l, 112+l, 10, 102, 12, 87); } //outside arm noStroke(); fill(skintone); beginShape(); curveVertex(24, 0); curveVertex(14, 85); curveVertex(-5, 105); curveVertex(-21, 112); curveVertex(-35, 104); curveVertex(-46, 96); curveVertex(-66, 75); curveVertex(-74, 71); curveVertex(-81, 69); curveVertex(-87, 59); curveVertex(-87, 54); curveVertex(-78, 64); curveVertex(-72, 65); curveVertex(-70, 68); curveVertex(-74, 63); curveVertex(-73, 62); curveVertex(-66, 65); curveVertex(-58, 72); curveVertex(-39, 84); curveVertex(-19, 94); curveVertex(-24, 95); curveVertex(0, 73); curveVertex(44, 0); endShape(); //some shading on the arm/hand noFill(); for(var m = 0; m < 15; m++){ stroke(0, 0, 0, map(m, 0, 15, 30, 0)); bezier(-69+m0.3, 72-m0.2, -31, 112-m, -35, 103-m, -22+m, 113-m/3); stroke(0, 0, 0, map(m, 0, 15, 10, 0)); bezier(-87, 59-m0.3, -79, 76-m, -78, 68+m0.1, -69+m0.25, 72-m0.2); } //} //dress { pushMatrix(); scale(1, 1.03); //reddish back part (left) noStroke(); fill(186, 71, 82); beginShape(); curveVertex(-30, 175); curveVertex(-26, 175); curveVertex(-49, 228); curveVertex(-74, 241); curveVertex(-115, 269); curveVertex(-90, 318); curveVertex(-92, 346); curveVertex(-23, 385); curveVertex(-17, 333); curveVertex(-6, 200); curveVertex(-4, 181); curveVertex(-25, 172); curveVertex(-30, 175); endShape(); //red left part fill(201, 76, 87); beginShape(); curveVertex(-30, 175); curveVertex(-26, 175); curveVertex(-39, 245); curveVertex(-71, 307); curveVertex(-102, 348); curveVertex(-68, 372); curveVertex(-9, 385); curveVertex(-17, 333); curveVertex(-6, 200); curveVertex(-4, 181); curveVertex(-25, 172); curveVertex(-30, 175); endShape(); //rightmost backmost part fill(184, 77, 77); beginShape(); curveVertex(-30, 175); curveVertex(14, 175); curveVertex(33, 161); curveVertex(111, 211); curveVertex(151, 211); curveVertex(174, 233); curveVertex(190, 263); curveVertex(140, 333); curveVertex(89, 307); curveVertex(-3, 172); curveVertex(-30, 175); endShape(); //right back part fill(199, 80, 80); beginShape(); curveVertex(-30, 175); curveVertex(14, 175); curveVertex(42, 160); curveVertex(111, 249); curveVertex(190, 251); curveVertex(174, 299); curveVertex(165, 371); curveVertex(48, 365); curveVertex(7, 333); curveVertex(15, 200); curveVertex(-4, 181); curveVertex(-3, 172); curveVertex(-30, 175); endShape(); //middle-ish right part fill(217, 80, 80); beginShape(); curveVertex(-30, 175); curveVertex(11, 175); curveVertex(47, 169); curveVertex(73, 250); curveVertex(124, 322); curveVertex(134, 365); curveVertex(102, 371); curveVertex(48, 385); curveVertex(7, 333); curveVertex(15, 200); curveVertex(-4, 181); curveVertex(-3, 172); curveVertex(-30, 175); endShape(); //middle part (right) fill(219, 90, 88); beginShape(); curveVertex(-30, 175); curveVertex(11, 175); curveVertex(37, 198); curveVertex(76, 307); curveVertex(83, 365); curveVertex(64, 381); curveVertex(-1, 382); curveVertex(7, 333); curveVertex(15, 200); curveVertex(-4, 181); curveVertex(-3, 172); curveVertex(-30, 175); endShape(); //middle part (left) fill(222, 80, 80); beginShape(); curveVertex(-30, 175); curveVertex(-3, 175); curveVertex(15, 198); curveVertex(19, 307); curveVertex(34, 349); curveVertex(38, 389); curveVertex(-26, 383); curveVertex(-19, 333); curveVertex(-10, 200); curveVertex(-4, 181); curveVertex(-3, 172); curveVertex(-30, 175); endShape(); //fade transition (white) for(var i = 0; i < 75; i++){ fill(255, 255, 255, map(i, 0, 75, 30, 1)); beginShape(); curveVertex(-30, 175); curveVertex(-23, 160); curveVertex(-29-i0.3, 234); curveVertex(-26-i0.75, 276); curveVertex(-36-i/3, 248+i1.2); curveVertex(-31, 269+i); curveVertex(-17, 266+i); curveVertex(-14, 250+i/2); curveVertex(15-i/2, 272+i); curveVertex(5+i, 249+i1.3); curveVertex(27, 237+i); curveVertex(67-i/4, 234+i); curveVertex(61+i/4, 246+i); curveVertex(40, 275+i); curveVertex(105+i0.3, 247+i0.8); curveVertex(77+i0.7, 228); curveVertex(65, 178); curveVertex(41, 158); curveVertex(35, 156); curveVertex(23, 160); curveVertex(16, 172); curveVertex(-5, 171); curveVertex(-4, 175); curveVertex(-24, 171); curveVertex(-21, 160); curveVertex(-30, 175); endShape(); } //some details on the dress (torso) stroke(0, 0, 0, 20); strokeWeight(2); noFill(); bezier(-19, 139, -10, 112, 3, 130, 20, 89); bezier(30, 132, 28, 112, 9, 130, 20, 89); image(images["dress design"], -200, -49); //fade transition for torso detailing for(var k = 0; k < 30; k++){ stroke(255, 255, 255, map(k, 0, 30, 205, 0)); bezier(-26+k0.2, 176-k, -9, 203-k, 31, 220-k, 56-k0.6, 170-k); bezier(-26-k0.2, 176+k, -9, 203+k, 31, 220+k, 56+k, 170+k); } //some slight shading noStroke(); fill(0, 0, 0, 1); for(var j = 0; j < 20; j++){ beginShape(); curveVertex(-5, 154); curveVertex(-29, 210); curveVertex(-35-j/2, 248); curveVertex(-67, 294-j); curveVertex(-63, 291); curveVertex(-36+j/3, 250+j); curveVertex(-37+j, 202); curveVertex(-27, 210); curveVertex(-5, 154); endShape(); beginShape(); curveVertex(-5, 154); curveVertex(-6, 154); curveVertex(-1+j/2, 218); curveVertex(8+j/1.5, 248); curveVertex(-8, 265+j); curveVertex(-10-j/2, 248+j0.3); curveVertex(6-j, 202); curveVertex(-5, 154); curveVertex(-5, 154); endShape(); beginShape(); curveVertex(16, 154); curveVertex(14, 165); curveVertex(39, 208-j/2); curveVertex(88+j, 248); curveVertex(62, 265+j); curveVertex(66-j, 248); curveVertex(26-j/2, 202); curveVertex(14, 165); curveVertex(-5, 154); endShape(); } //guide to the dresspoints (outline) /bezier(-53, 232, -50, 243, -146, 252, -101, 296); bezier(-99, 345, -85, 318, -84, 330, -101, 296); bezier(-99, 345, -113, 363, 13, 408, 40, 384); bezier(97, 373, 84, 377, 65, 394, 40, 384); bezier(97, 373, 129, 372, 187, 393, 175, 323); bezier(189, 250, 203, 256, 156, 298, 175, 323); bezier(189, 250, 139, 182, 156, 230, 98, 206);/ //beziers for the edges of the skirt var dresspoints = [ [[-53, -50, -146, -101], [232, 243, 252, 296]], [[-99, -85, -84, -101], [345, 318, 330, 296]], [[-99, -113, 13, 40], [345, 363, 408, 384]], [[97, 84, 65, 40], [373, 377, 394, 384]], [[97, 129, 187, 175], [373, 372, 393, 323]], [[189, 203, 156, 175], [250, 256,298, 323]], [[189, 139, 156, 98], [250, 182, 230, 206]], ]; //drawing the "sparkles" pushMatrix(); translate(0, 15); scale(0.95); noStroke(); //looping through the "beziers" (in points) in the array for(var i = 0; i < dresspoints.length; i++){ //getting the x and y point arrays var dpointx = dresspoints[i][0], dpointy = dresspoints[i][1]; //looping through the points for(var j = 0; j < 20; j++){ //calculating x, y, and getting a random size var x = bezierPoint(dpointx[0], dpointx[1], dpointx[2], dpointx[3], j/20), y = bezierPoint(dpointy[0], dpointy[1], dpointy[2], dpointy[3], j/20), circsize = random(3, 7); //drawing the ellipses (fill)(255, random(20, 90)); ellipse(x+random(-2, 2), y+random(-2, 2), circsize, circsize); ellipse(x+random(-5, 10), y+random(-10, 5), circsize, circsize); //adding extra on the bottom edge if(i >= 2 && i <= 4){ ellipse(x+random(-5, 10), y+random(-40, 5), circsize, circsize); ellipse(x+random(-5, 10), y+random(-25, 5), circsize, circsize); } } } popMatrix(); popMatrix(); //} //glass container front { pushMatrix(); translate(-132, 6); //shape of it stroke(214, 214, 214, 120); strokeWeight(3); fill(230, 230, 230, 60); beginShape(); vertex(0, 0); vertex(21, 15); vertex(41, 51); vertex(35, 110); vertex(52, 109); vertex(67, 147); vertex(90, 152); vertex(103, 145); vertex(119, 185); vertex(129, 185); vertex(134, 250); vertex(149, 229); vertex(160, 232); vertex(196, 255); vertex(225, 247); vertex(231, 271); vertex(240, 268); vertex(266, 276); vertex(317, 213); vertex(311, 179); vertex(330, 146); vertex(340, 109); vertex(340, 400); bezierVertex(300, 430, 40, 430, 0, 400); endShape(); //some shading/lighting noFill(); strokeWeight(3); stroke(0, 0, 0, 10); beginShape(); vertex(270, 276); vertex(314, 213); vertex(308, 179); vertex(327, 146); vertex(337, 100); endShape(); noStroke(); fill(255, 255, 255, 10); for(var i = 0; i < 70; i+=5){ ellipse(40, 161, i, i2); ellipse(61, 311, i2, i3); } //cracks noFill(); stroke(0, 0, 0, 20); line(33, 209, 31, 189); beginShape(); vertex(39, 114); vertex(31, 128); vertex(44, 145); vertex(44, 153); vertex(31, 175); vertex(31, 187); vertex(57, 193); vertex(60, 209); vertex(46, 266); vertex(6, 288); endShape(); beginShape(); vertex(91, 154); vertex(94, 168); vertex(92, 181); vertex(92, 203); vertex(113, 245); vertex(111, 268); vertex(105, 277); vertex(113, 296); endShape(); beginShape(); vertex(83, 239); vertex(94, 222); vertex(92, 181); vertex(92, 203); vertex(89, 245); vertex(73, 268); vertex(70, 278); vertex(96, 295); vertex(92, 333); endShape(); line(87, 291, 80, 300); line(90, 235, 62, 206); line(57, 306, 78, 300); beginShape(); vertex(197, 255); vertex(192, 267); vertex(179, 261); vertex(159, 268); vertex(144, 278); vertex(146, 329); vertex(170, 381); endShape(); beginShape(); vertex(192, 267); vertex(179, 267); vertex(170, 300); vertex(157, 312); vertex(201, 329); vertex(199, 343); endShape(); beginShape(); vertex(149, 273); vertex(139, 267); vertex(130, 269); vertex(127, 261); endShape(); beginShape(); vertex(263, 279); vertex(253, 285); vertex(232, 285); vertex(224, 293); vertex(232, 308); endShape(); beginShape(); vertex(263, 279); vertex(253, 285); vertex(250, 294); vertex(250, 300); vertex(264, 305); vertex(264, 314); vertex(260, 327); endShape(); beginShape(); vertex(335, 229); vertex(329, 261); vertex(327, 265); vertex(318, 281); vertex(323, 297); endShape(); line(322, 271, 301, 248); popMatrix(); //} popMatrix(); //returning the image return get(0, 0, width, height); }, "ground grass": function(){ //a grass function, reused from my Tranquility graphic var grass = function(x, y, flip){ pushMatrix(); translate(x, y); //flipping if(flip){ scale(1, -1); rotate(180); } //randomized width, height, curve var w = random(10, 15), h = random(40, 70), c = random(0.5, 1); //drawing based on that beginShape(); vertex(w, 0); bezierVertex(w0.2, -h0.2c, w0.75, -h0.8c, w, -hc); bezierVertex(w0.1, -h0.54c, w0.12, -h0.2c, 0, 0); endShape(); popMatrix(); }; //a grass border function, again reused from my Tranquility graphic var grassborder = function(x, y, maxwidth, randy){ for(var i = 0; i < maxwidth; i += ~~(random(8, 20))){ grass(i+x, randy === true ? y+random(-10, 10):y, ~~random(0, 2) === 0 ? true:false); } }; //drawing randomized layers of grass noStroke(); fill(129, 227, 104, 120); grassborder(29, height-50, 112, true); grassborder(499, height-67, 112, true); fill(129, 227, 104, 220); grassborder(0, height-40, 112, true); grassborder(499, height-26, 104, true); stroke(groundcol); strokeWeight(1); fill(120, 224, 94); grassborder(0, height-15, width, true); noStroke(); fill(11, 179, 50, 80); grassborder(0, height, width, false); //drawing some randomized glistening white...dew? I guess? noStroke(); for(var i = 0; i < 80; i++){ (fill)(255, random(50, 90)); var y = random(height-i2.5, height), x = y < 570 ? random(0, (y-320)/2):random(0, width), s = random(8, 14); ellipse(x, y, 10, 10); ellipse(width-x, y, s, s); } //returning image return get(0, 300, width, 300); }, }; //load function var load = function(){ //if loadindex is less than what needs to be loaded (there is one exception that is at the end of the messages array and does not need to be loaded, though, so that's why the -1 is there) if(loadindex < Object.keys(images).length + messages.length-1){ //clear background background(0, 0, 0, 0); //if in images if(loadindex < Object.keys(images).length){ //setting the object key to the image it draws/loads images[Object.keys(images)[loadindex]] = images[Object.keys(images)[loadindex]](); } //otherwise, load messages else { //getting message var message = messages[loadindex-Object.keys(images).length]; //drawing the message if(loadindex-Object.keys(images).length < 11){ stroke(255); } else { stroke(0); } Text(message.text, 2, 40, message.amt); //assigning the image to images[message0], images[message1], etc. images["message" + (loadindex-Object.keys(images).length).toString()] = get(0, 0, width, height); } //loading screen background(0); textAlign(CENTER); noFill(); strokeWeight(1); stroke(255, 255, 255); arc(width/2, height/2, 250, 250, 0, ~~(loadindex/(Object.keys(images).length + messages.length-1)360)); fill(255, 255, 255); text("Loading..." + ~~((loadindex/(Object.keys(images).length + messages.length-1))100) + "%", width/2, height/2); //incrementing loadindex loadindex++; } //otherwise, set loaded to true else { loaded = true; } }; //character graphics var character = { "head": function(x, y, angle, amt, yamt){ pushMatrix(); translate(x, y); scale(amt, yamt); rotate(angle); noStroke(); fill(0); //hair (near head) beginShape(); curveVertex(0, -45); curveVertex(0, -45); curveVertex(-5, 26); curveVertex(-24, 22); curveVertex(-27, 0); curveVertex(-28, -2); curveVertex(-28, 8); curveVertex(-31, -9); curveVertex(-25, -27); curveVertex(-18, -41); curveVertex(0, -45); curveVertex(0, -45); endShape(); //shape of the head beginShape(); curveVertex(0, 0); curveVertex(0, 0); curveVertex(14, -1); curveVertex(16, -9); curveVertex(17, -11); curveVertex(16, -15); curveVertex(19, -17); curveVertex(17, -20); curveVertex(15, -24); curveVertex(13, -39); curveVertex(-4, -45); curveVertex(-19, -33); curveVertex(-10, -5); curveVertex(0, 0); curveVertex(0, 0); endShape(); noFill(); //eye (eyelash) strokeWeight(1); stroke(0); arc(14, -27, 5, 3, 2, 128); popMatrix(); }, "torso": function(x, y, angle){ pushMatrix(); translate(x, y); rotate(angle); noStroke(); fill(3, 3, 3); //remaining hair pushMatrix(); translate(-8, 0); fill(0, 0, 0); beginShape(); curveVertex(0, 0); curveVertex(-8, 0); curveVertex(-4, 13); curveVertex(-4, 26); curveVertex(-6, 45); curveVertex(-15, 66); curveVertex(-23, 61); curveVertex(-23, 51); curveVertex(-26, 54); curveVertex(-25, 46); curveVertex(-22, 36); curveVertex(-27, 21); curveVertex(-20, 0); curveVertex(0, 0); endShape(); popMatrix(); //actual torso beginShape(); curveVertex(0, 0); curveVertex(0, -5); curveVertex(-5, 7); curveVertex(0, 14); curveVertex(16, 26); curveVertex(19, 39); curveVertex(15, 52); curveVertex(14, 70); curveVertex(13, 95); curveVertex(-26, 95); curveVertex(-25, 70); curveVertex(-24, 59); curveVertex(-22, 52); curveVertex(-27, 31); curveVertex(-21, 11); curveVertex(-21, 0); curveVertex(0, -5); curveVertex(0, 0); endShape(); popMatrix(); }, "arm": function(x, y, amt, angle, anglebetween, handangle, handflip, handamt, handyamt){ pushMatrix(); translate(x, y); scale(amt); rotate(angle); noStroke(); fill(0); //forearm beginShape(); curveVertex(0, 0); curveVertex(-6, 0); curveVertex(-10, 10); curveVertex(-7, 30); curveVertex(-5, 55); curveVertex(8, 52); curveVertex(8, 28); curveVertex(10, 14); curveVertex(6, 1); curveVertex(-6, 0); curveVertex(0, 0); endShape(); pushMatrix(); translate(0, 50); rotate(180+anglebetween); //lower arm, rotated by the specified angle between beginShape(); curveVertex(0, 0); curveVertex(-6, -1); curveVertex(-7, 10); curveVertex(-5, 30); curveVertex(-1, 52); curveVertex(-1, 52); curveVertex(4, 50); curveVertex(7, 50); curveVertex(8, 31); curveVertex(6, 1); curveVertex(-7, 0); curveVertex(0, 0); endShape(); //hand pushMatrix(); translate(3, 50); scale(handamt, handyamt); if(handflip){ scale(1, -1); } rotate(handangle); fill(0, 0, 0); beginShape(); curveVertex(0, 28); curveVertex(-3, -1); curveVertex(-3, 9); curveVertex(-4, 14); curveVertex(-1, 14); curveVertex(0, 23); curveVertex(7, 21); curveVertex(8, 14); curveVertex(9, 13); curveVertex(5, 1); curveVertex(-3, 0); curveVertex(0, 0); endShape(); popMatrix(); popMatrix(); popMatrix(); }, "leg": function(x, y, amt, yamt, angle, anglebetween, footangle){ pushMatrix(); translate(x, y); scale(amt, yamt); rotate(angle); noStroke(); //upper part fill(0, 0, 0); beginShape(); curveVertex(0, -20); curveVertex(0, -22); curveVertex(-13, -18); curveVertex(-23, -3); curveVertex(-21, 14); curveVertex(-9, 41); curveVertex(-9, 68); curveVertex(-9, 87); curveVertex(16, 93); curveVertex(20, 41); curveVertex(21, -4); curveVertex(0, -22); curveVertex(0, 0); endShape(); //lower pushMatrix(); translate(0, 90); rotate(anglebetween); beginShape(); curveVertex(0, -20); curveVertex(0, -15); curveVertex(-7, -18); curveVertex(-12, -3); curveVertex(-15, 20); curveVertex(-9, 41); curveVertex(-8, 68); curveVertex(-9, 85); curveVertex(8, 85); curveVertex(11, 37); curveVertex(14, 14); curveVertex(16, -8); curveVertex(0, -15); curveVertex(0, 0); endShape(); //foot pushMatrix(); translate(0, 85); rotate(footangle); beginShape(); curveVertex(0, 0); curveVertex(0, 0); curveVertex(-8, 0); curveVertex(-11, 7); curveVertex(-8, 14); curveVertex(1, 14); curveVertex(8, 12); curveVertex(20, 16); curveVertex(32, 15); curveVertex(32, 12); curveVertex(24, 10); curveVertex(8, 0); curveVertex(0, 0); curveVertex(0, 0); endShape(); popMatrix(); popMatrix(); popMatrix(); } }; //constructor for a person, able to be animated { var Girl = function(x, y, amt, head, arm1, arm2, leg1, leg2, flip, torso){ this.x = x; this.y = y; this.ox = x; this.oy = y; this.amt = amt; this.head = head; this.arm1 = arm1; this.arm2 = arm2; this.leg1 = leg1; this.leg2 = leg2; this.torso = torso; this.originals = [{}, {}, {}, {}, {}, {}]; this.flip = flip; this.standing = false; this.walking = false; this.isstanding = false; this.headturned = false; this.reaching = false; //setting originals equal to the objects in the arguments for(var i = 0; i < this.originals.length; i++){ this.originals[i] = Object.assign(this.originals[i], arguments[i+3]); } }; Girl.prototype.draw = function() { pushMatrix(); translate(this.x, this.y); scale(this.amt); if(this.flip){ scale(-1, 1); } //drawing the girl based on all the angles, amts, x, ys, etc. given character.head(this.head.x, this.head.y, this.head.angle, this.head.amt, this.head.yamt); character.arm(this.arm1.x, this.arm1.y, this.arm1.amt, this.arm1.angle, this.arm1.anglebetween, this.arm1.handangle, this.arm1.handflip, this.arm1.handamt, this.arm1.handyamt); character.leg(this.leg1.x, this.leg1.y, this.leg1.amt, this.leg1.yamt, this.leg1.angle, this.leg1.anglebetween, this.leg1.footangle); if(this.torso !== undefined){ character.torso(this.torso.x, this.torso.y, this.torso.angle); } else { character.torso(5, 0); } character.arm(this.arm2.x, this.arm2.y, this.arm2.amt, this.arm2.angle, this.arm2.anglebetween, this.arm2.handangle, this.arm2.handflip, this.arm2.handamt, this.arm2.handyamt); character.leg(this.leg2.x, this.leg2.y, this.leg2.amt, this.leg2.yamt, this.leg2.angle, this.leg2.anglebetween, this.leg2.footangle); //drawing the "head" if turning if(this.head.amt < 1){ fill(0); noStroke(); ellipse(this.head.x-8, this.head.y-38, 26, 15); ellipse(this.head.x-11, this.head.y-15, 36, 53); ellipse(this.head.x-4, this.head.y-22, 36, 42); ellipse(this.head.x-11, this.head.y-12, 36, 57); } popMatrix(); }; Girl.prototype.totalreset = function(){ //resetting x and y this.x = this.ox; this.y = this.oy; //resetting limbs this.head = Object.assign(this.head, this.originals[0]); this.arm1 = Object.assign(this.arm1, this.originals[1]); this.arm2 = Object.assign(this.arm2, this.originals[2]); this.leg1 = Object.assign(this.leg1, this.originals[3]); this.leg2 = Object.assign(this.leg2, this.originals[4]); if(this.torso !== undefined){ this.torso = Object.assign(this.torso, this.originals[5]); } //resetting these that control movement this.standing = false; this.walking = false; this.isstanding = false; this.headturned = false; this.reaching = false; }; Girl.prototype.reset = function(speed){ var gspeed = speed/15; //resetting head this.head.angle = lerp(this.head.angle, 0, gspeed); //resetting arms this.arm1.angle = lerp(this.arm1.angle, 0, gspeed); this.arm1.anglebetween = lerp(this.arm1.anglebetween, 160, gspeed); this.arm1.handamt = 1; this.arm1.handyamt = 1; this.arm2.angle = lerp(this.arm2.angle, 0, gspeed); this.arm2.anglebetween = lerp(this.arm2.anglebetween, 160, gspeed); this.arm2.handamt = 1; this.arm2.handyamt = 1; //resetting legs this.leg1.angle = lerp(this.leg1.angle, 0, gspeed); this.leg1.anglebetween = lerp(this.leg1.anglebetween, 0, gspeed); this.leg1.footangle = lerp(this.leg1.footangle, 0, gspeed); this.leg2.angle = lerp(this.leg2.angle, 0, gspeed); this.leg2.anglebetween = lerp(this.leg2.anglebetween, 0, gspeed); this.leg2.footangle = lerp(this.leg2.footangle, 0, gspeed); }; Girl.prototype.walk = function(speed, moving, to){ //getting amplitude of movement var amplitude = constrain(speed10, 1, 40); //actually moving if not within a reasonable distance of the destination if(moving && abs(to-this.x) > 3){ //if the current position is to the left of the destination, move right if(this.x < to){ this.x += speedthis.amt1.2; this.flip = false; } //otherwise, flip the image and move left else { this.flip = true; this.x -= speedthis.amt1.2; } } //animating if not within a reasonable distance of the destination. While animating, make sure there is no abrupt transitions if(!moving \|\| (moving && abs(to-this.x) > 3)){ //smoothly transitioning everything first to the right values when animating if difference is too big to start with if(abs(this.leg1.angle - sin(frameCount)amplitude) > 0.05){ //transitioning arms (based on speed) if(speed > 1){ this.arm1.angle = lerp(this.arm1.angle, sin(frameCountspeed)amplitude, 0.2); this.arm2.angle = lerp(this.arm2.angle, -sin(frameCountspeed)amplitude, 0.2); this.arm1.anglebetween = lerp(this.arm1.anglebetween, 130, 0.2); this.arm2.anglebetween = lerp(this.arm2.anglebetween, 130, 0.2); } else { this.arm1.angle = lerp(this.arm1.angle, sin(frameCount)amplitude2, 0.2); this.arm2.angle = lerp(this.arm2.angle, -sin(frameCount)amplitude2, 0.2); this.arm1.anglebetween = lerp(this.arm1.anglebetween, 170, 0.2); this.arm2.anglebetween = lerp(this.arm2.anglebetween, 170, 0.2); } //transitioning legs var supposedlegangle = sin(frameCountspeed)amplitude; this.leg1.angle = lerp(this.leg1.angle, supposedlegangle, 0.2); this.leg1.anglebetween = lerp(this.leg1.anglebetween, map(supposedlegangle, -amplitude, amplitude, 0, amplitude2), 0.2); this.leg1.footangle = lerp(this.leg1.footangle, map(supposedlegangle, -amplitude, amplitude, 0, 30), 0.2); this.leg2.angle = lerp(this.leg2.angle, -supposedlegangle, 0.2); this.leg2.anglebetween = lerp(this.leg2.anglebetween, map(-supposedlegangle, -amplitude, amplitude, 0, amplitude2), 0.2); this.leg2.footangle = lerp(this.leg2.footangle, map(-supposedlegangle, -amplitude, amplitude, 0, 30), 0.2); } else { //animating arms--if at a greater speed it'll look at bit different than if it was at a lower speed if(speed > 1){ this.arm1.angle = sin(frameCountspeed)amplitude; this.arm2.angle = -sin(frameCountspeed)amplitude; this.arm1.anglebetween = 130; this.arm2.anglebetween = 130; } else { this.arm1.angle = sin(frameCount)amplitude2; this.arm2.angle = -sin(frameCount)amplitude2; this.arm1.anglebetween = 170; this.arm2.anglebetween = 170; } //animating the legs this.leg1.angle = sin(frameCountspeed)amplitude; this.leg1.anglebetween = map(this.leg1.angle, -amplitude, amplitude, 0, amplitude2); this.leg1.footangle = map(this.leg1.angle, -amplitude, amplitude, 0, 30); this.leg2.angle = -sin(frameCountspeed)amplitude; this.leg2.anglebetween = map(this.leg2.angle, -amplitude, amplitude, 0, amplitude2); this.leg2.footangle = map(this.leg2.angle, -amplitude, amplitude, 0, 30); } } //if meant to move and within a reasonable distance from the destination, reset the variables if(moving && abs(to-this.x) <= 5) { this.reset(speed/2); } }; Girl.prototype.stand = function(){ //if it should be animated if(this.standing){ //first animating the arms/hands to go back, and hands to kind of "flex" (vertically grow smaller) this.arm1.angle = lerp(this.arm1.angle, 10, 0.08); this.arm1.anglebetween = lerp(this.arm1.anglebetween, 180, 0.08); this.arm1.handyamt = lerp(this.arm1.handyamt, 0.3, 0.08); this.arm2.angle = lerp(this.arm2.angle, 10, 0.08); this.arm2.anglebetween = lerp(this.arm2.anglebetween, 180, 0.08); this.arm2.handyamt = lerp(this.arm2.handyamt, 0.3, 0.08); //if that is done, then start animating the legs if(abs(this.arm1.angle-10) < 1){ this.leg1.angle = lerp(this.leg1.angle, -130, 0.08); this.leg1.anglebetween = lerp(this.leg1.anglebetween, 100, 0.08); this.leg1.footangle = lerp(this.leg1.footangle, 30, 0.08); //if that is done, animate the standing motion if(abs(this.leg1.footangle - 30) < 1){ this.isstanding = true; } } //if is standing if(this.isstanding){ //getting to a standing position this.reset(1); //standing "up" (decreasing y so she isn't like just stretching her legs) if(abs(this.leg1.anglebetween) > 1 ){ this.y = lerp(this.y, this.oy-145, 0.08); } } //not updating any more variables after animation is done if(abs(this.y - this.oy + 145) < 1){ this.standing = false; } } }; //} //creating the people (for the story){ var people = [ Girl.createnew(42, 402, 0.75, {x: -2, y: 4, angle: 20}, {x: -3, y: 24, amt: 1, angle: -40, anglebetween: 147, handangle: -162, handflip: true, handamt: 1, handyamt: 1}, {x: -9, y: 24, amt: 1, angle: -44, anglebetween: 134, handangle: -161, handflip: true, handamt: 1, handyamt: 1}, {x: -1, y: 100, amt: 1, yamt: 1.2, angle: -110, anglebetween: 55, footangle: 46}, {x: -1, y: 102, amt: 1, yamt: 1.2, angle: -120, anglebetween: 73, footangle: 45}, false), //scene 1 girl Girl.createnew(36, 260, 0.75, {x: -5, y: 4, angle: 0, amt: 1.00, yamt: 1}, {x: -3, y: 24, amt: 1, angle: 6, anglebetween: 150, handangle: -162, handflip: true, handamt: 1, handyamt: 1}, {x: -9, y: 24, amt: 1, angle: -2, anglebetween: 177, handangle: -161, handflip: true, handamt: 1, handyamt: 1}, {x: -1, y: 100, amt: 1, yamt: 1.2, angle: -6, anglebetween: 10, footangle: 0}, {x: -1, y: 102, amt: 1, yamt: 1.2, angle: 0, anglebetween: 0, footangle: 0}, false), //scene 4-5 girl (monsters) Girl.createnew(width/2, 250, 0.75, {x: 5, y: 4, angle: 3, amt: 1, yamt: 1}, {x: -3, y: 24, amt: 1, angle: 5, anglebetween: 150, handangle: -162, handflip: true, handamt: 1, handyamt: 1}, {x: -9, y: 24, amt: 1, angle: -2, anglebetween: 177, handangle: -161, handflip: true, handamt: 1, handyamt: 1}, {x: -1, y: 100, amt: 1, yamt: 1.2, angle: 0, anglebetween: 0, footangle: 0}, {x: -1, y: 102, amt: 1, yamt: 1.2, angle: 0, anglebetween: 0, footangle: 0}, false, {x: 19, y: 0, angle: 10}), //running girl Girl.createnew(30, 350, 0.6, {x: -5, y: 4, angle: 0, amt: 1, yamt: 1}, {x: -3, y: 24, amt: 1, angle: 5, anglebetween: 150, handangle: -162, handflip: true, handamt: 1, handyamt: 1}, {x: -9, y: 24, amt: 1, angle: -2, anglebetween: 177, handangle: -161, handflip: true, handamt: 1, handyamt: 1}, {x: -1, y: 100, amt: 1, yamt: 1.2, angle: 0, anglebetween: 0, footangle: 0}, {x: -1, y: 102, amt: 1, yamt: 1.2, angle: 0, anglebetween: 0, footangle: 0}, false), //hallway girl Girl.createnew(30, 22, 0.46, {x: -5, y: 4, angle: 0, amt: 1, yamt: 1}, {x: -3, y: 24, amt: 1, angle: 5, anglebetween: 162, handangle: -162, handflip: true, handamt: 1, handyamt: 1}, {x: -9, y: 24, amt: 1, angle: 0, anglebetween: 168, handangle: -161, handflip: true, handamt: 1, handyamt: 1}, {x: -1, y: 100, amt: 1, yamt: 1.2, angle: 0, anglebetween: 0, footangle: 0}, {x: -1, y: 102, amt: 1, yamt: 1.2, angle: 0, anglebetween: 0, footangle: 0}, false), //staircase (top) girl Girl.createnew(560, 283, 0.7, {x: 0, y: 4, angle: 0, amt: 1, yamt: 1}, {x: -3, y: 24, amt: 1, angle: 5, anglebetween: 162, handangle: -162, handflip: true, handamt: 1, handyamt: 1}, {x: -9, y: 24, amt: 1, angle: 0, anglebetween: 168, handangle: -161, handflip: true, handamt: 1, handyamt: 1}, {x: -1, y: 100, amt: 1, yamt: 1.2, angle: 0, anglebetween: 0, footangle: 0}, {x: -1, y: 102, amt: 1, yamt: 1.2, angle: 0, anglebetween: 0, footangle: 0}, true), //staircase (bottom) girl Girl.createnew(0, 0, 0.7, {x: 0, y: 4, angle: 0, amt: 1, yamt: 1}, {x: -3, y: 24, amt: 1, angle: 55, anglebetween: 162, handangle: -162, handflip: true, handamt: 1, handyamt: 1}, {x: -9, y: 24, amt: 1, angle: -28, anglebetween: 168, handangle: -161, handflip: true, handamt: 1, handyamt: 1}, {x: -1, y: 100, amt: 1, yamt: 1.2, angle: -27, anglebetween: 16, footangle: 0}, {x: -1, y: 102, amt: 1, yamt: 1.2, angle: 3, anglebetween: 30, footangle: 0}, false), //falling girl Girl.createnew(-90, 283, 0.7, {x: 0, y: 4, angle: 0, amt: 1, yamt: 1}, {x: -3, y: 24, amt: 1, angle: 7, anglebetween: 162, handangle: -162, handflip: true, handamt: 1, handyamt: 1}, {x: -9, y: 24, amt: 1, angle: 0, anglebetween: 168, handangle: -161, handflip: true, handamt: 1, handyamt: 1}, {x: -1, y: 100, amt: 1, yamt: 1.2, angle: -3, anglebetween: 16, footangle: 0}, {x: -1, y: 102, amt: 1, yamt: 1.2, angle: 0, anglebetween: 0, footangle: 0}, false) //final girl ]; //} //other constructors and functions for the story { //eyes in scene 4/5 { //an eye function that draws an eye based on the parameters var eye = function(x, y, flip, blink, lookx, fillcol){ pushMatrix(); translate(x, y); if(flip){ scale(-1, 1); } //the outline of the eye noStroke(); fill(fillcol); beginShape(); vertex(-3, -7); bezierVertex(5+blink, -2+blink1.1, 14+blink, -15+blink1.35, 32, 0); bezierVertex(28, 4-blink, 7, 10-blink, -3, -7); endShape(); //pupil/iris fill(0, 0, 0, 60); ellipse(15+lookx, -2, 5-blink, 12-blink); fill(0, 0, 0, 90); ellipse(15+lookx, -2, 3-blink, 7-blink); popMatrix(); }; //a pair of eyes constructor var Eyes = function(x, y, amt, rot, randoffset, period, lookoffset){ this.x = x; this.y = y; this.amt = amt; this.angle = rot; this.blink = 7; this.lookx = 0; this.lookoffset = lookoffset; this.timer = randoffset; this.period = period; this.blinking = false; this.looking = false; this.numblink = 0; this.color = color(random(120, 200), random(10, 30), random(10, 30)); }; Eyes.prototype.display = function(){ pushMatrix(); translate(this.x, this.y); scale(this.amt); rotate(this.angle); //drawing it if blink allows it to be seen (reasonably) if(abs(this.blink - 7) > 0.5){ eye(-40, 0, false, this.blink, this.lookx, this.color); eye(40, 0, true, this.blink, -this.lookx, this.color); } //updating blinking if within a certain time if(this.timer >= this.period){ this.blinking = true; } //if blinking if(this.blinking){ //opening eyes (updating blink) this.blink = lerp(this.blink, 0, 0.08); //if open to a certain extent (for some time), say that it is looking if(abs(this.blink) < 0.5 && this.timer > this.period 1.5){ this.looking = true; } //if looking if(this.looking){ //update the lookx this.lookx = lerp(this.lookx, this.lookoffset, 0.08); //if the lookx is relatively near its designated value and after a certain time if(abs(this.lookx-this.lookoffset) < 0.1 && this.timer > this.period * 2){ //reset blink (close eyes) this.blink = lerp(this.blink, 7, 0.33); //once blink is reset, reset timer, lookx, blink (to 7, not only close to it), looking, and blinking if(abs(this.blink - 7) < 1){ this.timer = 0; this.lookx = 0; this.blink = 7; this.looking = false; this.blinking = false; } } } } //updating timer this.timer++; popMatrix(); }; //an array var eyes = []; //adding elements to the array for(var i = 0; i < 15; i++){ eyes.push(Eyes.createnew(random(0, width2), random(20, height-150), random(0.6, 1.3), random(-30, 30), random(-50, 150), random(90, 200), ~~(random(0, 2)) === 1 ? -random(3, 8):random(3, 8))); } //} //monster in scene 5 { //a monster constructor var Monster = function(x, y, amt){ this.x = x; this.y = y; this.amt = amt; this.jawangle = 6; this.blink = 0; this.timer = 0; this.opacity = 0; }; Monster.prototype.draw = function(){ pushMatrix(); translate(this.x, this.y); scale(this.amt); //slight background gradient noStroke(); fill(0, 0, 0, this.opacity/10); for(var i = 0; i < 20; i++){ ellipse(-18, 23, i10, i10); } //eye pushMatrix(); translate(0, 2); rotate(34); stroke(0, 0, 0, 70); strokeWeight(1); fill(150, 15, 15, 90); for(var i = 0; i < 20; i += 2){ arc(0, 0, 20-i, 20this.blink-ithis.blink, 0, 200); } noStroke(); fill(0); ellipse(0, 0, 7, 7this.blink); popMatrix(); //face fill(0, 0, 0, this.opacity); stroke(0, 0, 0, this.opacity); beginShape(); vertex(35, 4); bezierVertex(8, 2, 11, -21, -17, -13); bezierVertex(6, -14, -7, -21, 35, 4); endShape(); pushMatrix(); translate(0, 3); beginShape(); vertex(-34, 4); bezierVertex(-50, 31, -22, -12, -35, 28); bezierVertex(-27, 5, -29, 50, -28, 36); bezierVertex(-6, 5, -27, 50, 12, 44); bezierVertex(-15, 39, 5, 31, -15, 19); bezierVertex(-31, 33, -21, 10, -34, 4); endShape(); popMatrix(); //jaw pushMatrix(); rotate(this.jawangle/2); beginShape(); vertex(15, 0); vertex(21, 8); bezierVertex(29, 3, 20, 12, 49, 10); bezierVertex(53, 11, 58, 12, 68, 23); bezierVertex(65, 24, 41, 2, 37, 28); bezierVertex(33, 2, 20, 30, 27, 15); vertex(21, 16); vertex(23, 13); endShape(); noStroke(); fill(255, 255, 255, this.opacity2); triangle(36, 18, 35, 18, 35, 28); triangle(40, 18, 45, 18, 44, 34); triangle(52, 18, 48, 17, 51, 31); triangle(62, 22, 57, 19, 56, 45); popMatrix(); fill(0, this.opacity); stroke(0, this.opacity); pushMatrix(); rotate(-this.jawangle/2); beginShape(); translate(9, 41); vertex(0, 0); bezierVertex(14, 0, 5, 20, 37, 13); bezierVertex(34, 0, 28, 27, 0, 0); endShape(); fill(255, 255, 255, this.opacity2); noStroke(); triangle(23, 6, 28, 10, 27, -6); triangle(32, 6, 36, 6, 35, -7); triangle(42, 8, 40, 7, 43, -13); popMatrix(); //hint of neck/body fill(0, 0, 0, this.opacity); stroke(0, 0, 0, this.opacity); beginShape(); vertex(-51, 15); bezierVertex(-50, 31, -78, 15, -72, 28); bezierVertex(-68, 13, -29, 50, -84, 36); bezierVertex(-80, 31, -107, 51, -88, 59); bezierVertex(-110, 39, -46, 39, -80, 55); bezierVertex(-34, 36, -33, 12, -77, 4); endShape(); beginShape(); vertex(2, 53); bezierVertex(-8, 75, -38, 36, -27, 60); bezierVertex(-25, 54, -3, 51, -17, 78); bezierVertex(-25, 76, -3, 85, -17, 89); bezierVertex(-6, 84, -22, 85, -8, 62); endShape(); //ear of sorts pushMatrix(); translate(3, -4); beginShape(); vertex(-72, -30); bezierVertex(-56, -10, -64, -8, -50, -2); bezierVertex(-61, -24, -56, -10, -52, -26); bezierVertex(-33, -24, -45, -10, -29, -11); bezierVertex(-33, -24, -45, -35, -60, -32); bezierVertex(-50, -24, -61, -24, -60, -25); endShape(); if(this.timer > 55){ triangle(-45, -14, -41, -7, -43, 4); } popMatrix(); popMatrix(); }; Monster.prototype.reset = function(){ //resetting everything that changes this.jawangle = 6; this.blink = 0; this.timer = 0; this.opacity = 0; }; Monster.prototype.awaken = function(){ //first open eyes this.blink = lerp(this.blink, 1, 0.05); //if eyes are open if(abs(this.blink - 1) < 0.05){ //increment timer this.timer++; //after a while if(this.timer > 55){ //set blink equal to exactly one (not close) this.blink = 1; //increment opacity if(this.opacity < 255){ this.opacity += 2; } } } }; //the monster var monster = Monster.createnew(width+150, 400, 1.5); //} //light "waves" in scene 5 and 7 { var LightWave = function(x, y, delay, start, stop, col, speed, array){ this.x = x; this.y = y; this.delay = delay; this.timer = 0; this.start = start; this.stop = stop; this.speed = speed; this.radius = 0; this.opacity = 0; this.opdecspeed = ceil(255/(200/this.speed)); this.color = col; this.array = array; }; LightWave.prototype.display = function() { //if time is more than the delay, start updating everything else if(this.timer > this.delay){ //drawing it noFill(); (stroke)(this.color, this.opacity); strokeWeight(20); strokeCap(SQUARE); arc(this.x, this.y, this.radius, this.radius, this.start, this.stop); //resetting style strokeWeight(1); strokeCap(ROUND); //updating radius if(this.radius < 800){ //increment radius if less than a certain thing this.radius += this.speed; } else { //otherwise, splice from array this.array.splice(this.array.indexOf(this), 1); } //updating opacity (increment for a while, then decrease) if(this.opacity < 250 && this.radius < 600){ this.opacity += this.speed; } else if(this.radius > 600){ this.opacity -= this.opdecspeed; } //updating start and stop values this.start -= this.speed/5; this.stop += this.speed/5; } //incrementing timer this.timer++; }; //adding waves to an array for scene 5 var waves5 = []; for(var i = 0; i < 20; i++){ waves5.push(LightWave.createnew(width+170, 450, random(0, 160), random(240, 270), random(360, 380), color(0), random(5, 10), waves5)); } //adding waves to an array for scene 7 var waves7 = []; for(var j = 0; j < 20; j++){ waves7.push(LightWave.createnew(600, 425, random(0, 240), random(70, 90), random(260, 280), color(random(200, 255)), random(1, 3), waves7)); } //} //motion lines in scene 6 and 10 (running and falling) { //a motion line constructor var MotionLine = function(x, y, dir, length){ this.x = x; this.y = y; this.dir = dir; this.strokeWeight = random(1, 3); this.length = length; this.olength = length; this.speed = random(3, 3); this.randoffset = random(0, 150); }; MotionLine.prototype.display = function(){ //draw it strokeWeight(this.strokeWeight); stroke(255, 255, 255); if(this.dir === "vertical"){ line(this.x+random(-2, 2), this.y+map(noise((frameCount + this.randoffset)/15), 0, 1, -50, 10), this.x+random(-2, 2), this.y-this.length+map(noise((frameCount + this.randoffset)/45), 0, 1, -50, 30)); } else { line(this.x+map(noise((frameCount + this.randoffset)/10), 0, 1, -10, 10), this.y+random(-2, 2), this.x+this.length+map(noise((frameCount + this.randoffset)/45), 0, 1, -40, 40), this.y+random(-2, 2)); } //updating length this.length = this.olength + sin((frameCount+this.randoffset)this.speed)this.olength; }; //motion lines for scene 6 var motion6 = []; for(var i = 0; i < 25; i++){ motion6.push(MotionLine.createnew(random(220, width/2+250), random(150, 480), "horizontal", random(-90, -160))); } //motion lines for scene 10 var motion10 = []; for(var j = 0; j < 25; j++){ motion10.push(MotionLine.createnew(random(100, 500), random(0, 350), "vertical", random(90, 160))); } //} //torches in scene 7 (hallway) { var Torch = function(x, y){ this.x = x; this.y = y; this.speed = random(0.6, 3); this.randoffset = random(0, 190); }; Torch.prototype.display = function() { pushMatrix(); translate(this.x, this.y); //base image(images["torch base"], -10, 0); //glow pushMatrix(); scale(map(noise(frameCount/100 + this.randoffset), 0, 1, 0.7, 1.4)); image(images["candle glow"], -25, -28); popMatrix(); //flame noStroke(); fill(245, 139, 90); beginShape(); vertex(0, 0); bezierVertex(5, -5, 3, -10, sin((frameCount + this.randoffset)/this.speed)5, -15); bezierVertex(-3, -10, -5, -5, 0, 0); endShape(); fill(247, 217, 24, 90); beginShape(); vertex(0, 2); bezierVertex(7, -5, 3, -7, cos((frameCount + this.randoffset)/this.speed)5, -10); bezierVertex(-3, -7, -7, -5, 0, 2); endShape(); popMatrix(); }; //adding torches to an array var torches = []; for(var i = 20; i < width * 2 - 150; i += 150){ torches.push(Torch.createnew(i-23, height-300)); //add a torch on the right of the last door if(i + 150 > width2-150){ torches.push(Torch.createnew(i+128, height-300)); } } //} //small drifting particles in scene 9 { //particle constructor var DriftParticle = function(x, y, size){ this.x = x; this.y = y; this.ox = x; this.oy = y; this.speed = random(1, 4); this.randoffset = random(0, 190); this.amplitude = random(10, 80); this.opacity = random(20, 90); this.color = color(random(50, 90)); this.size = size; this.osize = size; }; DriftParticle.prototype.display = function(){ //drawing it noStroke(); (fill)(this.color, this.opacity); ellipse(this.x, this.y, this.size, this.size); //updating (animation) this.y = this.oy + sin((frameCount + this.randoffset)/this.speed) this.amplitude; this.x = this.ox + cos((frameCount + this.randoffset)/this.speed) * this.amplitude; this.size = this.osize + sin((frameCount + this.randoffset + 20)/this.speed) * this.osize/3; }; //adding the particles to an array var dparticles = []; for(var i = 0; i < 30; i++){ dparticles.push(DriftParticle.createnew(random(50, 550), random(0, 500), random(5, 10))); } //} //small falling particles in scene 11 { //the falling particle constructor var FallParticle = function(x, y, yvel, desty, size){ this.x = x; this.y = y; this.ox = x; this.yvel = yvel; this.speed = random(2, 5); this.randoffset = random(0, 250); this.amplitude = random(10, 20); this.opacity = random(40, 100); this.size = size; this.osize = size; this.desty = desty; this.falling = true; }; FallParticle.prototype.display = function(){ //drawing it noStroke(); (fill)(0, this.opacity); ellipse(this.x, this.y, this.size, this.size); //if less than the destination, drift as normal if(this.y < this.desty && this.falling){ this.y += this.yvel; } //otherwise drift in a more circular, aimless way else { this.falling = false; this.y = lerp(this.y, this.desty + cos((frameCount + this.randoffset)/this.speed) * this.amplitude, 0.1); } //updating the other things (which will behave the same either way) this.x = this.ox + sin((frameCount + this.randoffset)/this.speed)this.amplitude; this.size = this.osize + sin((frameCount + this.randoffset+50))this.osize/3; }; //adding them into an array var fallparticle11 = []; for(var i = 0; i < 25; i++){ fallparticle11.push(FallParticle.createnew(random(450, 590), random(-100, -10), random(0.4, 1), random(20, 250), random(3, 8))); } //} //} //constructors for the final graphic { //background stars { //a star constructor var Star = function(x, y, size, connections){ this.x = x; this.y = y; this.ox = x; this.oy = y; this.size = size; this.osize = size; this.op = random(50, 90); this.amp = random(4, 10); this.randoffset = random(0, 190); this.connections = connections; }; Star.prototype.display = function(){ //drawing the star itself noStroke(); fill(255, 255, 255, this.op + sin(frameCount+this.randoffset)); ellipse(this.x, this.y, this.size, this.size); //drawing the connections (line) stroke(255, 255, 255, 40); strokeWeight(random(1, 2)); for(var i = 0; i < this.connections.length; i++){ line(this.x, this.y, this.connections[i].x, this.connections[i].y); } //updating variables this.x = this.ox +sin(frameCount+this.randoffset)this.amp; this.y = this.oy+cos(frameCount+this.randoffset)this.amp; this.size = this.osize+sin(frameCount+this.randoffset); }; //a star array var stars = []; //adding stars for(var m = 0; m < 20; m++){ stars.push(Star.createnew(30 + m * 28 + random(-30, 30), 250 + random(-50, 50), random(5, 10), m > 1 ? [stars[m-1], stars[m-2]]:[])); } stars[0].connections = [stars[1]]; //} //candles { //candle constructor var Candle = function(x, y, size, glowsize){ this.x = x; this.y = y; this.size = size; this.randoffset = random(0, 190); }; Candle.prototype.draw = function() { pushMatrix(); translate(this.x, this.y); scale(this.size, -this.size); //glow, an image scaled to simulate flickering pushMatrix(); scale(map(noise(frameCount/100 + this.randoffset), 0, 1, 0.7, 1.4)); image(images["candle glow"], -25, -48); popMatrix(); //candle image image(images.candle, -10, -24); //flame noStroke(); fill(235, 235, 235, 90); beginShape(); vertex(0, -17); bezierVertex(6, -22, 2, -24, sin(frameCount+this.randoffset)3, -31+cos(frameCount + this.randoffset)2); bezierVertex(-2, -24, -6, -22, 0, -17); endShape(); fill(166, 166, 166, 150); beginShape(); vertex(0, -19); bezierVertex(6, -18, 2, -21, sin(frameCount+this.randoffset/2)2, -28); bezierVertex(-2, -21, -6, -19, 0, -17); endShape(); popMatrix(); }; //array var candles = []; //adding candles for(var i = 0; i < 10; i++){ candles.push(Candle.createnew(95+i45, 8, map(abs(i-5), 0, 5, 0.9, 0.5), ~~(random(30, 50)))); } //} //waves at the top { //wave constructor var Wave = function(x, y, width, height){ this.x = x; this.y = y; this.width = width; this.height = height; this.period = random(1, 3); this.amplitude = random(15, 35); this.randoffset = random(0, 150); this.color = wavecols[floor(random(0, wavecols.length))]; if(this.color === undefined){ this.color = wavecols[0]; } }; Wave.prototype.draw = function() { noStroke(); (fill)(this.color, 5); //rect(this.x, this.y, this.width, this.height); beginShape(); endShape(); (fill)(this.color, 10); (stroke)(this.color, 30); bezier(this.x, this.y+this.height, this.x + this.width0.3, this.y+this.height + sin(frameCount/this.period + this.randoffset)this.amplitude, this.x +this.width * 0.7, this.y+this.height + cos(frameCount/this.period + this.randoffset)this.amplitude, this.x +this.width, this.y+this.height); }; //wave array var waves = []; //adding waves to the array for(var i = 0; i < 15; i++){ //the larger waves spanning across the top waves.push(Wave.createnew(45, -14, width-90, random(70, 80))); //smaller waves on the sides if(i < 15/2){ waves.push(Wave.createnew(45, -3+i, 93, random(70, 80))); } else { waves.push(Wave.createnew(454, -2+i, 93, random(70, 80))); } } //} //setting up the water droplets for the figure { //variable keeping track of how large the drop is, and array of detached droplets var dropheight = 0, drops = []; //smaller fading water particles ("splash") constructor var DropParticle = function(x, y, xvel, yvel, size, opacity, array){ this.x = x; this.y = y; this.xvel = xvel; this.yvel = yvel; this.size = size; this.opacity = opacity; this.opspeed = random(1, 4); this.array = array; }; DropParticle.prototype.display = function(){ //drawing it noStroke(); fill(255, 255, 255, this.opacity); ellipse(this.x, this.y, this.size, this.size); //updating this.x += this.xvel; this.y += this.yvel; this.opacity -= this.opspeed; //checking if it is dead or not if(this.opacity <= 0){ //splicing from containing array this.array.splice(this.array.indexOf(this), 1); } }; //larger droplet constructor var Drop = function(x, y, yvel, size, limit){ this.x = x; this.y = y; this.yvel = yvel; this.size = size; this.limit = limit; this.particles = []; this.done = false; }; Drop.prototype.display = function(){ //if still above the limit if(this.y > this.limit){ //drawing it noStroke(); fill(62, 177, 212, 90); ellipse(this.x, this.y, this.size, this.size); stroke(255, 255, 255, 50); noFill(); arc(this.x, this.y, this.size0.8, this.size0.8, -90, 0); //updating this.y += this.yvel; } //otherwise: else { //if there are no particles and there hasn't been yet if(this.particles.length === 0 && !this.done){ //add some particles for(var i = 0; i < 8; i++){ this.particles.push(DropParticle.createnew(this.x, this.y, random(-0.3, 0.3), random(0.05, 0.2), random(2, 5), random(70, 150), this.particles)); } //change a variable to true so that we know that the particles have already been added this.done = true; } //otherwise, if there are particles else if(this.particles.length > 0){ //display those particles for(var j = this.particles.length-1; j >= 0; j--){ this.particles[j].display(); } } //if there isn't particles and they've already been added (meaning they're now all "dead") else if(this.particles.length === 0 && this.done){ //this is now also dead and should be spliced from the containing array drops.splice(drops.indexOf(this), 1); } } }; //} //} //transition var trans = { transitioning: false, fade: 0, time: 160, timer: 0, transto: "", transition: function(to){ //if less then a certain time, increase fade, otherwise, decrease it (fade in/out effect) if(trans.timer < trans.time/2){ trans.fade = lerp(trans.fade, 255, 0.07); } else { trans.fade = lerp(trans.fade, 0, 0.07); } //changing the scene at a certain point if(abs(trans.fade-255) < 1){ scene = to; } //increment timer trans.timer++; //if fade is less than zero, transitioning is now done, and reset everything that needs to be reset if(trans.fade < 1){ trans.transitioning = false; trans.timer = 0; trans.fade = 0; } } }; //menu scene buttons { //a button constructor var Button = function(x, y, size, to, symbol, txt, message){ this.x = x; this.y = txt === "Back" ? y:height+size; this.oy = y; this.size = size; this.to = to; this.drawing = symbol; this.text = txt; this.message = message; this.drawingsize = 1; this.texty = this.size/2+2; this.outlineoffset = 0; this.fill = color(255, 255, 255, 0); this.designcol = color(255, 255, 255); this.textcol = color(0, 0, 0, 0); this.stroke = color(255); }; Button.prototype.display = function(){ //drawing the base strokeWeight(1); stroke(this.stroke); fill(this.fill); ellipse(this.x, this.y, this.size, this.size); //outline noFill(); stroke(255); ellipse(this.x, this.y, this.size+this.outlineoffset, this.size+this.outlineoffset); //what's in the button pushMatrix(); translate(this.x, this.y); //text if(this.texty < this.size/2){ pushStyle(); fill(this.textcol); textFont(arial); textAlign(CENTER); textSize(10); text(this.text, 0, this.texty); popStyle(); } //design scale(this.drawingsize); translate(0, map(this.drawingsize, 0.7, 1, -5, 0)); fill(this.designcol); stroke(this.designcol); this.drawing(); popMatrix(); //checking for hover and updating accordingly if(dist(mouseX, mouseY, this.x, this.y) < this.size/2){ this.outlineoffset = lerp(this.outlineoffset, 15, 0.08); this.fill = lerpColor(this.fill, color(255), 0.08); this.stroke = lerpColor(this.stroke, color(255, 255, 255, 0), 0.08); this.designcol = lerpColor(this.designcol, color(0), 0.08); this.textcol = lerpColor(this.textcol, color(0), 0.09); this.drawingsize = lerp(this.drawingsize, 0.7, 0.08); this.texty = lerp(this.texty, this.size0.3, 0.08); //change menutext to message if(this.text !== "Back"){ menutext = this.message; } menubuttonhover = true; //change cursor cursor(HAND); //if clicked, transition if(clicked){ trans.transto = this.to; trans.transitioning = true; } } else { this.outlineoffset = lerp(this.outlineoffset, 0, 0.08); this.fill = lerpColor(this.fill, color(255, 255, 255, 0), 0.08); this.stroke = lerpColor(this.stroke, color(255), 0.08); this.designcol = lerpColor(this.designcol, color(255), 0.08); this.textcol = lerpColor(this.textcol, color(0, 0, 0, 0), 0.09); this.drawingsize = lerp(this.drawingsize, 1, 0.08); this.texty = lerp(this.texty, this.size/2+2, 0.08); } //floating in from the bottom at the beginning (if not the back button) if(this.text !== "Back"){ this.y = lerp(this.y, this.oy, 0.08); } }; //a an array to hold the buttons var buttons = [ new Button(width/2, 360, 110, 1, function(){ pushMatrix(); scale(1.4); triangle(-8, -10, -8, 10, 10, 0); popMatrix(); }, "Play", "Click to continue story"), new Button(200, 450, 80, 11, function(){ pushMatrix(); //the "sources" strokeWeight(1.5); line(-10, -10, 10, -10); line(-10, -3, 8, -3); line(-10, 4, 14, 4); line(-10, 11, 7, 11); //magnifying glass ellipse(-10, -4, 3, 3); noFill(); strokeWeight(2); arc(-13, 0, 10, 10, 0, 90); strokeWeight(3); ellipse(-13, 0, 20, 20); strokeWeight(5); line(-4, 8, 8, 18); popMatrix(); }, "Credits", "Notes on code"), new Button(400, 450, 80, 10, function(){ pushMatrix(); //"image" inside it triangle(-12, 16, -5, 2, 7, 17); triangle(1, 16, 7, 10, 13, 17); noFill(); quad(-15, 16, -16, 4, -10, -1, 7, 17); quad(-8, 16, 5, -3, 14, 3, 14, 16); ellipse(0, -8, 5, 5); //frame rect(-16, -18, 30, 35, 5); popMatrix(); }, "Graphic", "See final graphic. Click to return home."), new Button(60, height-50, 50, 0, function(){ pushMatrix(); scale(0.5); line(-15, 0, 20, 0); triangle(-20, 0, -12, -5, -12, 5); popMatrix(); }, "Back") ]; //} //change clicked to true when mouse is clicked, and set transto to the next scene (can be overriden in the draw function, but generally it would transition to the next scene) mouseClicked = function(){ clicked = true; trans.transto = scene+1; }; //setting a few things up { //setting up messages positions for a few scenes (to transition in later) messages[0].y = -200; messages[1].y = -200; messages[12].x = -450; //setting align for text (for error scene and title screen) textAlign(CENTER); //} //putting it all together to be animated draw = function() { //if not loaded, load if(!loaded){ load(); } //otherwise, display the program else { //resetting cursor cursor(ARROW); //drawing the scenes switch(scene) { case 0: //title screen { //background image(images.gradientback, 0, 0); //title text { //if still transitioning, draw everything out if(scenetimer < titletext.text.length10+200){ pushMatrix(); scale(width/400); translate(48, 60); rotate(-3); strokeWeight(1); strokeCap(ROUND); stroke(255, 255, 255); //looping through the title text and displaying the letters for(var i = 0, space = 0; i < titletext.text.length; i++){ pushMatrix(); //transforming based on position in the text translate(space, (i < 3 ? abs(i-2.5):abs(i-3.5))10+titletext.y[i]); rotate((i- (i <= 3 ? floor(titletext.text.length/2):2))5); //drawing it titletext[titletext.text[i]](0, 0, 0); //adding space space += titletext.spacings[Object.keys(titletext).indexOf(titletext.text[i])]; popMatrix(); //updating the y values if(scenetimer > i10){ titletext.y[i] = lerp(titletext.y[i], 0, 0.09); } } popMatrix(); //update scenetimer scenetimer++; } else { //just draw the image image(images.menutext, 0, 0); } //} //arc beneath the text noFill(); strokeWeight(2); stroke(255); bezier(75, 247, 225, 168, 375, 168, width-75, 247); //subtitle textFont(arial); textSize(19); fill(255, 255, 255, constrain(scenetimer/3, 0, 10)); for(var i = 0; i < 15; i++){ text("~ an animated short story ~", width/2+sin(i20)3, 260+cos(i20)3); } fill(255, 255, 255, constrain(scenetimer, 0, 120)); text("~ an animated short story ~", width/2, 260); //buttons for(var i = 0; i < buttons.length-1; i++){ buttons[i].display(); } //by Reader Writer Penguin text fill(255, 255, 255, 100); textFont(arial); textSize(10); text("Reader Writer Penguin 2019", width/2, height-10); if(mouseX > width/2-textWidth("Reader Writer Penguin 2019")-10 && mouseX < width/2 + textWidth("Reader Writer Penguin 2019") + 10 && mouseY > 575){ cursor(HAND); //if clicked, transition if(clicked){ trans.transitioning = true; trans.transto = 12; } } //if any menu button is hovered, increment menutextop if(menubuttonhover){ menutextop = lerp(menutextop, 150, 0.1); } else { menutextop = lerp(menutextop, 0, 0.1); } //menu text textSize(15); fill(255, 255, 255, menutextop); text(menutext, width/2, height-50); //continuously reset menu button hover menubuttonhover = false; //} break; case 1: //waking up + walking { //backdrop image(images.scene1back, 0, 0); image(images.rocktex, 0, 0, width, height-100); //drawing the person people[0].draw(); //text fill(255, 255, 255, 20); image(images.message0, messages[0].x, messages[0].y); image(images.message1, messages[1].x, messages[1].y); if(messages[1].y < -195){ messages[0].y = lerp(messages[0].y, 20, 0.08); } //if not transitioning, animate the beginning if(!trans.transitioning){ people[0].head.angle = lerp(people[0].head.angle, -5, 0.03); } //if first clicked, then stand. Otherwise, animate the last bit of walking if(clicked && !people[0].isstanding){ people[0].standing = true; } else if(clicked && people[0].isstanding){ people[0].walking = true; } //stand when appropriate if(people[0].standing){ //stand people[0].stand(); //transition head angle people[0].head.angle = lerp(people[0].head.angle, 4, 0.05); } //if not in the process of standing, but now standing (and not sitting), walk else if(people[0].isstanding && !people[0].walking){ people[0].walk(1, true, 520); } //transitioning text when animating if(people[0].standing \|\| people[0].isstanding \|\| people[0].walking){ //transition text messages[0].y = lerp(messages[0].y, -290, 0.08); messages[1].y = lerp(messages[1].y, 20, 0.08); } //if walking (at the end) if(people[0].walking){ //walk people[0].walk(1, true, 640); //if beyond the edge of the screen, transition if(abs(people[0].x-620) < 3){ trans.transitioning = true; } } //} break; case 2: //darkness text { //background image(images.scene3back, 0, 0); //text image(images.message2, messages[2].x, messages[2].y); //if clicked, transition if(clicked && !trans.transitioning){ trans.transitioning = true; } //} break; case 3: //eyes + monster { //background image(images.gensceneback, 0, 0); //transforming some drawings based on the camerax pushMatrix(); translate(camerax, 0); //rock texture image(images.rocktex, 0, 0, width, height-100); image(images.rocktex, width, 0, width, height-100); //drawing the eyes for(var i = 0; i < eyes.length; i++){ eyes[i].display(); } //drawing the monster monster.draw(); //the text image(images.message3, messages[3].x, messages[3].y); image(images.message4, messages[4].x, messages[4].y); popMatrix(); //drawing the girl people[1].draw(); //if not the second stage of walking, walk first to 400 if(!people[1].walking){ people[1].walk(1, true, 400); //if at a certain point, turn head if((300-people[1].x < 50 && people[1].x < 300) \|\| (people[1].x - 300 < 100 && people[1].x > 300)){ //if not yet already turned, turn it to look back (ish) if(!people[1].headturned){ //while it's greater than a certain value, decrease it if(people[1].head.amt > 0.55){ people[1].head.yamt = lerp(people[1].head.yamt, 0.97, 0.03); people[1].head.amt -= 0.01; } //otherwise, know that the head has already been turned (after she walks a bit more else { if(abs(people[1].x-400) < 20){ people[1].headturned = true; } } } //otherwise, turn it back else { if(people[1].head.amt < 1){ people[1].head.amt += 0.01; people[1].head.yamt = 1; } } } } //if clicked and not in the second stage of walking, walk (second stage) if(clicked && !people[1].walking && abs(people[1].x-400) < 5){ people[1].walking = true; } //if second stage of walking if(people[1].walking){ //if "walking" (effect) if(camerax > -width){ //change camera x to create walking effect camerax -= 1; //walk in place people[1].walk(1, false, 600); //reset head turned in preparation for next head turn people[1].headturned = false; } else { //reset person people[1].reset(1); } //if at a certain point if(camerax < -400){ //awaken monster monster.awaken(); } //if clicked now, change head turned so that we know to turn the head now if(clicked && camerax <= -width){ people[1].headturned = true; } //if turning the head if(people[1].headturned){ //turn it to a certain extent if(people[1].head.amt > 0.55){ people[1].head.amt -= 0.01; } //open monster's jaws to a certain extent if(monster.jawangle > -20){ monster.jawangle --; } else { pushMatrix(); translate(camerax, 0); //display the waves for(var i = waves5.length-1; i >= 0; i --){ waves5[i].display(); } popMatrix(); //transition if(waves5[0].timer > 90){ trans.transitioning = true; } } } } //} break; case 4: //running { //resetting camerax for next use after last scene camerax = 0; //background image(images.gensceneback, 0, 0); fill(0, 0, 0, 50); rect(0, 0, width, height); //drawing the motion lines for(var i = 0; i < motion6.length; i++){ motion6[i].display(); } //text image(images.message5, messages[5].x, messages[5].y); //drawing the girl pushMatrix(); translate(0, sin(frameCount20)5); people[2].draw(); popMatrix(); //animating the girl people[2].walk(8, false, 400); //if clicked, transition if(clicked && !trans.transitioning){ trans.transitioning = true; } //} break; case 5: //hallway { //background image(images.scene7back, 0, 0); //drawing the doors and torches and floor and wall (bricks), offset by camerax pushMatrix(); translate(camerax, 0); //wall image(images.scene7wall, 0, 0); image(images.scene7wall, width, 0); //floor image(images.scene7floor, 0, height-100); image(images.scene7floor, width, height-100); //doors for(var i = 20; i < width * 2 - 150; i += 150){ //drawing the door image(images["light door"], i, height-326); } //torches for(var j = 0; j < torches.length; j++){ torches[j].display(); } //door at the very end noStroke(); fill(227, 191, 12); ellipse(width2-7, height-175, 10, 10); fill(255, 255, 255, 140); ellipse(width2-8, height-176, 5, 5); fill(184, 184, 184); rect(width2-5, height-300, 5, 250); popMatrix(); //the text image(images.message6, messages[6].x, messages[6].y); //drawing the girl people[3].draw(); //walk if(abs(people[3].x - width/2) > 3 && camerax === 0){ people[3].walk(1, true, width/2); } //if arrived at destination, start changing camerax (so there's still illusion of movement) else { //if not at the limit if(camerax > -width){ //changing camerax camerax--; //walking in place people[3].walk(1, false, width2-10); } //otherwise else { //walking if(abs(people[3].x - 549) > 3){ //walk all the way to the edge people[3].walk(1, true, 549); } else { //reset if(!people[3].reaching){ people[3].reset(1); } //if clicked if(clicked){ //trigger reaching people[3].reaching = true; } } //if reaching if(people[3].reaching){ //reach people[3].arm2.x = lerp(people[3].arm2.x, -3, 0.08); people[3].arm2.y = lerp(people[3].arm2.y, 29, 0.08); people[3].arm2.angle = lerp(people[3].arm2.angle, -30, 0.08); people[3].arm2.anglebetween = lerp(people[3].arm2.anglebetween, 165, 0.08); people[3].head.angle = lerp(people[3].head.angle, 10, 0.08); //if done reaching if(abs(people[3].arm2.angle+30) < 1){ //display waves for(var i = waves7.length-1; i >= 0; i--){ waves7[i].display(); } //transition after a certain time if(waves7[0].timer > 160){ trans.transitioning = true; } } } } } //} break; case 6: //staircase { //background image(images.scene8back, 0, 0); //the other things pushMatrix(); translate(0, cameray); //the barely visible "floor" pushMatrix(); translate(0, 19); fill(54, 54, 54); quad(0, 150, 0, 162, width/2, 162, width/2+5, 150); fill(107, 107, 107); rect(0, 162, width/2, 5); popMatrix(); //drawing the girl people[4].draw(); //walking people[4].walk(1, true, 190); //staircase image(images["spiral staircase"], 200, 102); //the text image(images.message7, messages[7].x, messages[7].y); popMatrix(); //if clicked, walk again if(clicked && !trans.transitioning){ people[4].walking = true; } //if walking (end animation) if(people[4].walking){ people[4].walk(1, true, 260); //"falling" camera view cameray = lerp(cameray, 300, 0.01); //after a while, transition if(cameray > 10){ trans.transitioning = true; } } //} break; case 7: //end of staircase { //background image(images.scene9back, 0, 0); //the text image(images.message8, messages[8].x, messages[8].y); image(images.message9, messages[9].x, messages[9].y); //drawing the girl people[5].draw(); //walking people[5].walk(1, true, 310); //if there if(abs(people[5].x - 310) < 4){ //reach for darkness people[5].arm1.angle = lerp(people[5].arm1.angle, -140, 0.01); people[5].arm1.x = lerp(people[5].arm1.x, 1, 0.01); people[5].arm1.anglebetween = lerp(people[5].arm1.anglebetween, 130, 0.01); //if clicked, transition if(clicked){ trans.transitioning = true; } } //drawing the particles for(var i = 0; i < dparticles.length; i++){ dparticles[i].display(); } //} break; case 8: //falling { //background image(images.scene10back, 0, 0); //motion lines for(var i = 0; i < motion10.length; i++){ motion10[i].display(); } //text image(images.message10, messages[10].x, messages[10].y); //girl pushMatrix(); translate(width/2-90, height/2+sin(frameCount15)5); rotate(270); people[6].draw(); popMatrix(); //if clicked, transition if(clicked && !trans.transitioning){ trans.transitioning = true; } //} break; case 9: //light end { //background image(images.scene11back, 0, 0); //text image(images.message11, messages[11].x, messages[11].y); //updating the last message's aspects if(people[7].x > 400){ messages[12].x = lerp(messages[12].x, 25, 0.01); } stroke(0, 0, 0, map(people[7].x, 350, 500, 0, 255)); Text(messages[12].text, messages[12].x, messages[12].y, 0.7); //draw the person people[7].draw(); //walking for a certain while if(abs(people[7].x - 500) > 3){ people[7].walk(1, true, 500); } else { //resetting if(!people[7].reach){ people[7].reset(1); if(abs(people[7].leg1.footangle) < 1 && abs(people[7].leg2.footangle) < 1){ people[7].reach = true; } } //reach if(people[7].reach){ //reach people[7].head.angle = lerp(people[7].head.angle, -10, 0.03); people[7].arm1.angle = lerp(people[7].arm1.angle, -120, 0.02); people[7].arm2.angle = lerp(people[7].arm2.angle, -120, 0.02); people[7].arm1.handangle = lerp(people[7].arm1.handangle, -159, 0.04); people[7].arm1.anglebetween = lerp(people[7].arm1.anglebetween, 140, 0.02); people[7].arm2.anglebetween = lerp(people[7].arm2.anglebetween, 150, 0.02); people[7].arm1.y = lerp(people[7].arm1.y, 35, 0.02); people[7].arm2.y = lerp(people[7].arm2.y, 30, 0.02); //some power (darkening) noStroke(); fill(0, 0, 0, map(people[7].arm1.angle, 0, -120, 0, 100)); for(var i = 0; i < 3; i++){ beginShape(); vertex(575-map(people[7].arm1.angle, 0, -120, 0, 50)-i10, 0); bezierVertex(500-i4, map(people[7].arm1.angle, 0, -120, 0, 40), 560+i5, map(people[7].arm1.angle, 0, -120, 0, 230), 536, map(people[7].arm1.angle, 0, -120, 0, 247)); bezierVertex(568, map(people[7].arm1.angle, 0, -120, 0, 230), 520+i8, map(people[7].arm1.angle, 0, -120, 0, 40), 550+map(people[7].arm1.angle, 0, -120, 0, 50), 0); endShape(); popMatrix(); } //drawing drifting particles for(var j = 0; j < fallparticle11.length; j++){ fallparticle11[j].display(); } //light if(abs(people[7].arm1.angle+120) < 3){ //incrementing the light size if(finallightsize < 15){ finallightsize += 0.5; } //drawing the light for(var i = 0; i < finallightsize; i++){ fill(210, 227, 82, 20); ellipse(539, 242, i3, i3); fill(255, 255, 255, 40); ellipse(539, 242, i2, i2); } } } } //if clicked and enough of the scene has run, transition if(clicked && !trans.transitioning && abs(finallightsize-15) < 1){ trans.transitioning = true; } //} break; case 10: //final graphic { //draw background sky (image) image(images["final sky backdrop"], 0, 0); //drawing/looping through the stars for(var i = 0; i < stars.length; i++){ stars[i].display(); } //animated water droplet code { pushMatrix(); translate(196, 207); //the water noStroke(); fill(62, 177, 212, 90); arc(0, 0, 10, 8, 0, 180); beginShape(); vertex(-5, 0); vertex(5, 0); bezierVertex(3, -dropheight0.1, 1, -dropheight0.4, 0, -dropheight); bezierVertex(-1, -dropheight0.4, -3, -dropheight0.1, -5, 0); endShape(); //the ending droplet ellipse(0, -dropheight, dropheight0.15, dropheight0.15); //adding some lighting noFill(); stroke(255, 255, 255, 50); bezier(4, 0, 1, -dropheight0.1, 0.5, -dropheight0.4, 0, -dropheight0.8); stroke(255, 255, 255, 60); arc(0, -dropheight, dropheight0.12, dropheight*0.12, -90, 0); //the detached drops for(var i = drops.length-1; i >= 0; i--){ drops[i].display(); } popMatrix(); //checking to see if the drop height is more than a certain thing if(dropheight > 40){ //adding a new detached drop if too large drops.push(Drop.createnew(0, -50, -1.5, 7, -150)); //resetting dropheight = 0; } //incrementing the drop height dropheight+= 0.5; //} //looping through the candles for(var j = 0; j < candles.length; j++){ candles[j].draw(); } //looping through the waves (at the top) for(var k = 0; k < waves.length; k++){ waves[k].draw(); } //ground, water, and glass pieces image(images["water ground"], 0, 0); //drawing the person and container image(images["figure container"], 0, 0); //ground details in front image(images["ground grass"], 0, 300); //if clicked, transition back to the first scene, and if the story has run through all the way, reset everything if(clicked && !trans.transitioning){ if(finallightsize !== 0){ //reset people for(var i = 0; i < people.length; i++){ people[i].totalreset(); } //reset monster monster.reset(); //adding back some effects waves5 = []; waves7 = []; fallparticle11 = []; for(var i = 0; i < 25; i++){ fallparticle11.push(FallParticle.createnew(random(450, 590), random(-100, -10), random(0.4, 1), random(20, 250), random(3, 8))); } for(var j = 0; j < 20; j++){ waves7.push(LightWave.createnew(600, 425, random(0, 240), random(70, 90), random(260, 280), color(random(200, 255)), random(1, 3), waves7)); waves5.push(LightWave.createnew(width+170, 450, random(0, 160), random(240, 270), random(360, 380), color(0), random(3, 5), waves5)); } //reset other variables camerax = 0; cameray = 0; finallightsize = 0; messages[0].y = -200; messages[1].y = -200; messages[12].x = -450; } trans.transitioning = true; trans.transto = 0; } //} break; case 11: //credits scene { //background image(images.gradientback, 0, 0); //title stroke(255, 255, 255); Text("Credits", 208, 120, 1.3); //underline stroke(255, 255, 255); line(200, 140, width-200, 140); //back button buttons[3].display(); //text fill(255, 255, 255, 200); textFont(createFont("Arial")); textSize(14); text("The loading function was originally learned from Lin Gh. and OOPS! Studios a while ago, though here it is used with modifications of my own. Also, credit to Lin Gh. for having nicely commented code and for being smart enough to use background(0, 0, 0, 0) to clear the screen. :P\n\nThe object.createnew function (to avoid using the 'new' keyword) was implemented from various programs (i.e. Lin Gh.'s or Talha Muhib's programs), and from what I understand I think it may have originally been KWC's function.\n\nGreen Ghost's 'Tales of the Avatars' provided inspiration, especially pertaining to the character animation.\n\nCredit to Salman Faris and Starlight Traveler for pointing out two grammar mistakes, and Lin Gh., Python, and Element118 (among many others) who provided feedback.\n\nI had made the font used in this project a few months ago (however, it was never used in any other projects). The code was slightly modified here, though. The grass function and grass border function for the final graphic were also reused from my Tranquility graphic.\n\nAll other parts of this program should have been made for the Impossible Images contest by Reader Writer Penguin.", 20, 190, width-40, height); //} break; case 12: //an extra scene :P { //background background(255); stroke(0, 0, 0, 10); strokeWeight(2); line(0, height-150, width, height-150); //image image(images.scene12back, 0, 0); //text fill(0, 0, 0); textFont(createFont("Arial")); textSize(20); text("Yay, you found the easter egg! Here, have some penguins :P\n\n(click to go back to the menu page)", width/2, 100); //if clicked, transition if(clicked){ trans.transitioning = true; trans.transto = 0; } //} break; default: //error page { background(255); fill(0, 0, 0); textFont(timesroman); textSize(30); text("404 Error\nPage not found", width/2, height/2); textSize(20); text("Tell me in the T&T if this happens", width/2, height-90); //} break; } //transitioning if(trans.transitioning){ trans.transition(trans.transto); //the transitioning rect noStroke(); fill(0, 0, 0, trans.fade); rect(0, 0, width, height); } } //continuously resetting clicked to false clicked = false; }; //}
Folds	16,4493
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOa9tp6ZCgw
Votes	224
Spin-Offs	3
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	{"id":"4783017065807872","title":"Contest: Impossible Images","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Reader Writer Penguin
Author Name	WriterPenguin1127
Author ID	kaid_660115468292459786165770
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739448146310
Updated	10 months ago, 1739448175705
Source Deleted	unknown