Viewing Program

Program Data

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

Title	Birds (Animated)
ID	5477772867715072
Created	3 years ago, 1651466285956
Updated	3 years ago, 1651468087830
Code	/ Birds (Animation) By Gray Wolf UP/DOWN or WASD Keys to move the main bird. Contest: Animation I have completed 100% of Khan Academy's 'Intro to JS' and have been programming for 100+ months. I would prefer to be placed in the Advanced bracket @KA_Contest_Animation_Judges I completely forgot about the deadline and didn't submit my entry on time. I did finish it earlier, but understand if it's not counted. @Subscribe Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 @Reference Animation based off: https://dribbble.com/shots/1639249-Villain-Enemy-Game-Character-Sprite-Sheets / /* jshint esnext: true / let app; smooth(); angleMode = "degrees"; const keys = []; keyPressed = function() { keys[keyCode] = true; }; keyReleased = function() { keys[keyCode] = false; }; const Logo = (function() { const _Logo = function(args) { this.scale = args.scale \|\| 1.0; this.x = args.x \|\| 600 0.5 * this.scale; this.y = args.y \|\| 600 * 0.4 * this.scale; this.colors = { back: color(38, 38, 38), outline: color(5, 5, 5), from: color(102, 99, 98), to: color(13, 13, 13), text: color(128, 128, 128) }; this.font = args.font \|\| createFont("Trebuchet MS"); this.gray = { words: "G R A Y W O L F", index: 0, timer: 0, delay: 2 }; this.prod = { opacity: 0, y: height * 1.2, }; this.img = undefined; this.imgs = []; this.splits = { left: undefined, right: undefined }; this.timer = 0; this.states = { a: { delay: 30, duration: 120, }, b: { delay: 30 }, c: { delay: 55 }, d: { delay: 45, x: 0 } }; this.state = "a"; this.done = false; this.complete = false; this.hover = false; this.init(); }; _Logo.prototype = { init: function() { const gx = createGraphics(600, 600, P2D); gx.background(0, 0); gx.fill(255); //inner gx.beginShape(); gx.vertex(300, 137); gx.vertex(377, 150); gx.vertex(454, 118); gx.vertex(410, 213); gx.vertex(429, 202); gx.vertex(464, 279); gx.vertex(396, 361); gx.vertex(381, 316); gx.vertex(341, 399); gx.vertex(300, 443); gx.vertex(259, 399); gx.vertex(219, 316); gx.vertex(204, 361); gx.vertex(136, 279); gx.vertex(171, 202); gx.vertex(190, 213); gx.vertex(146, 118); gx.vertex(223, 150); gx.endShape(CLOSE); const shape = gx.get(115, 90, 370, 355); gx.noStroke(); for(let i = 90; i <= 445; i++) { gx.fill(gx.lerpColor(this.colors.to, this.colors.from, i/445)); gx.rect(115, i, 370, 1); } gx.stroke(150, 20); gx.strokeWeight(1); for(let i = 0; i < 200; i++) { gx.line(random(115, 485), random(90, 445), random(115, 485), random(90, 445)); } gx.filter(BLUR, 2.5); const grad = gx.get(115, 90, 370, 355); grad.mask(shape); gx.background(this.colors.back); gx.background(0, 0); gx.noStroke(); gx.fill(this.colors.outline); //outer gx.beginShape(); gx.vertex(300, 126); gx.vertex(376, 138); gx.vertex(480, 92); gx.vertex(437, 187); gx.vertex(482, 283); gx.vertex(396, 364); gx.vertex(383, 344); gx.vertex(354, 404); gx.vertex(300, 444); gx.vertex(246, 404); gx.vertex(217, 344); gx.vertex(204, 364); gx.vertex(118, 283); gx.vertex(163, 187); gx.vertex(120, 92); gx.vertex(224, 138); gx.endShape(CLOSE); gx.image(grad, 115, 90); fill(this.colors.outline); //nose gx.beginShape(); gx.vertex(300, 372); gx.vertex(323, 367); gx.vertex(320, 382); gx.vertex(300, 400); gx.vertex(280, 382); gx.vertex(277, 367); gx.endShape(CLOSE); //left eye gx.beginShape(); gx.vertex(324, 341); gx.vertex(320, 268); gx.vertex(428, 231); gx.vertex(378, 290); gx.vertex(358, 278); gx.vertex(372, 280); gx.vertex(390, 257); gx.vertex(334, 277); gx.endShape(CLOSE); //right eye gx.beginShape(); gx.vertex(276, 341); gx.vertex(280, 268); gx.vertex(172, 231); gx.vertex(222, 290); gx.vertex(244, 278); gx.vertex(228, 280); gx.vertex(210, 257); gx.vertex(266, 277); gx.endShape(CLOSE); this.img = gx.get(115, 90, 370, 355); //generate pieces of image for(let i = 0; i < 10; i++) { for(let j = 0; j < 10; j++) { this.imgs.push({ img: gx.get(115 + 37 * i, 90 + 35.5 * j, 37, 35.5), w: 37, h: 35.5, dx: 115 + 37 * i + 18.5, dy: 90 + 35.5 * j + 17.75, x: random(-width, width * 2), y: random(-height, height * 2), angle: ~~random(3600) }); } } }, draw: function() { if(!this.complete) { pushMatrix(); scale(this.scale); pushStyle(); switch(this.state) { case "a": background(this.colors.back); if(this.timer++ >= this.states.a.delay) { for(let i = 0; i < this.imgs.length; i++) { const item = this.imgs[i]; item.x = lerp(item.x, item.dx, 0.1); item.y = lerp(item.y, item.dy, 0.1); item.angle = lerp(item.angle, 0, 0.1); imageMode(CENTER); pushMatrix(); translate(item.x, item.y - 28); rotate(item.angle); image(item.img, 0, 0, item.w, item.h); popMatrix(); } if(this.timer >= this.states.a.duration) { this.state = "b"; this.timer = 0; } } break; case "b": background(this.colors.back); imageMode(CENTER); image(this.img, this.x / this.scale, this.y / this.scale); if(this.timer++ >= this.states.b.delay) { textFont(this.font); textAlign(CENTER, CENTER); textSize(40); fill(this.colors.text); if(this.gray.index < this.gray.words.length && this.gray.timer++ >= this.gray.delay) { this.gray.index++; this.gray.timer = 0; } text(this.gray.words.substring(0, this.gray.index), this.x / this.scale, this.y * 2 / this.scale); this.prod.opacity = constrain(this.prod.opacity + 7, 0, 255); this.prod.y = ~~lerp(this.prod.y, this.y * 2.1, 0.030); textSize(30); fill(this.colors.text, this.prod.opacity); text("P R E S E N T S", this.x / this.scale, this.prod.y / this.scale); } if(this.gray.index === this.gray.words.length) { this.state = "c"; this.timer = 0; } break; case "c": background(this.colors.back); imageMode(CENTER); image(this.img, this.x / this.scale, this.y / this.scale); textFont(this.font); textAlign(CENTER, CENTER); textSize(40); fill(this.colors.text); text(this.gray.words.substring(0, this.gray.index), this.x / this.scale, this.y * 2 / this.scale); if(this.timer++ >= this.states.c.delay) { this.prod.opacity = constrain(this.prod.opacity - 5, 0, 255); } textSize(30); fill(this.colors.text, this.prod.opacity); this.prod.y = constrain(~~lerp(this.prod.y, this.y * 2.1, 0.035), 530 * this.scale, Infinity); text("P R E S E N T S", this.x / this.scale, this.prod.y / this.scale); if(this.prod.opacity === 0) { //get split image for next state this.splits.left = get(0, 0, width / 2, height); this.splits.right = get(width / 2, 0, width / 2, height); this.state = "d"; this.timer = 0; } break; case "d": scale(1 / this.scale); imageMode(CORNER); if(this.timer++ >= this.states.d.delay) { this.states.d.x = constrain(this.states.d.x + 7, 0, width / 2); } image(this.splits.left, -this.states.d.x, 0); image(this.splits.right, width / 2 + this.states.d.x, 0); if(this.states.d.x >= width / 2) { this.completed = true; } if(this.timer === this.states.d.delay) { this.done = true; } break; } popStyle(); popMatrix(); } } }; return _Logo; })(); const Bird = (function() { const _Bird = function(args) { this.x = args.x; this.y = args.y; this.xoff = args.xoff; this.yoff = args.yoff; this.scale = args.scale; this.colors = args.colors; this.wings = { right: [0, 26, 52, 68, 69, 65, 55, 50, 49, 41, 38, 33, 23, 6, 0], left: [0, 26, 52, 76, 77, 75, 59, 52, 51, 41, 37, 33, 23, 6, 0] }; this.speed = args.speed \|\| 8; this.timer = args.timer \|\| 0; }; _Bird.prototype = { draw: function() { this.timer++; const sine = sin(this.timer * this.speed); const cosine = cos(this.timer * this.speed * 0.1); pushMatrix(); translate(this.x, sine * (-20 * this.scale) + cosine * (-10 * this.scale) + this.y); scale(this.scale); translate(380, 288); rotate(constrain(cosine * 7, 0, 7)); translate(-380, -288); //left wing noStroke(); fill(sine > 0 ? this.colors.wing.lower : this.colors.wing.upper); beginShape(); vertex(299, 278); bezierVertex(308, 278 + sine * this.wings.left[1], 302, 278 + sine * this.wings.left[2], 295, 278 + sine * this.wings.left[3]); bezierVertex(305, 278 + sine * this.wings.left[4], 320, 278 + sine * this.wings.left[5], 334, 278 + sine * this.wings.left[6]); vertex(328, 278 + sine * this.wings.left[7]); vertex(337, 278 + sine * this.wings.left[8]); vertex(338, 278 + sine * this.wings.left[9]); vertex(332, 278 + sine * this.wings.left[10]); vertex(338, 278 + sine * this.wings.left[11]); bezierVertex(337, 278 + sine * this.wings.left[12], 329, 278 + sine * this.wings.left[13], 317, 278); endShape(CLOSE); //upper beak fill(this.colors.beak.upper); pushMatrix(); translate(239, 292); rotate(-5 + sine * -5); translate(-239, -292); beginShape(); vertex(240, 270); bezierVertex(214, 266, 194, 268, 188, 283); bezierVertex(209, 283, 225, 288, 239, 292); endShape(CLOSE); popMatrix(); //lower beak fill(this.colors.beak.lower); pushMatrix(); translate(240, 291); rotate(8 + sine * 15); translate(-240, -291); beginShape(); vertex(240, 291); bezierVertex(224, 297, 215, 304, 209, 308); bezierVertex(222, 308, 233, 305, 244, 300); endShape(CLOSE); popMatrix(); //tail fill(this.colors.tail.top); pushMatrix(); translate(344, 280); rotate(sine * 5); translate(-344, -280); beginShape(); vertex(344, 280); bezierVertex(357, 263, 373, 253, 376, 258); bezierVertex(376, 268, 360, 276, 344, 280); endShape(CLOSE); popMatrix(); fill(this.colors.tail.middle); pushMatrix(); translate(344, 280); rotate(sine * 8); translate(-344, -280); beginShape(); vertex(344, 281); bezierVertex(365, 273, 383, 271, 384, 276); bezierVertex(382, 285, 362, 284, 344, 281); endShape(CLOSE); popMatrix(); fill(this.colors.tail.bottom); pushMatrix(); translate(344, 280); rotate(sine * 12); translate(-344, -280); beginShape(); vertex(344, 283); bezierVertex(363, 283, 385, 289, 382, 296); bezierVertex(379, 301, 361, 296, 344, 283); endShape(CLOSE); popMatrix(); //body fill(this.colors.body); ellipse(318, 288, 66, 60); //head fill(this.colors.head); ellipse(264, 282, 67, 67); //eye //outer fill(this.colors.eye.outer); ellipse(253, 282, 32, 32); //inner fill(this.colors.eye.inner); ellipse(248, 283, 16, 16); //white spot fill(this.colors.eye.outer); ellipse(250, 278, 6, 6); //dark slant on top of eye fill(this.colors.head); quad(234, 277, 263, 265, 261, 257, 235, 273); //right wing fill(sine > 0 ? this.colors.wing.upper : this.colors.wing.lower); beginShape(); vertex(299, 278); bezierVertex(298, 278 + sine * this.wings.right[1], 292, 278 + sine * this.wings.right[2], 283, 278 + sine * this.wings.right[3]); bezierVertex(300, 278 + sine * this.wings.right[4], 315, 278 + sine * this.wings.right[5], 326, 278 + sine * this.wings.right[6]); vertex(320, 278 + sine * this.wings.right[7]); vertex(329, 278 + sine * this.wings.right[8]); vertex(329, 278 + sine * this.wings.right[9]); vertex(324, 278 + sine * this.wings.right[10]); vertex(329, 278 + sine * this.wings.right[11]); bezierVertex(330, 278 + sine * this.wings.right[12], 324, 278 + sine * this.wings.right[13], 317, 278); endShape(CLOSE); popMatrix(); } }; return _Bird; })(); const App = (function() { const _App = function(args) { this.scene = "load"; this.timer = 0; this.speed = args.speed \|\| 8; this.colors = { background: color(230, 240, 230), body: color(23, 23, 23), head: color(41, 41, 41), eye: { outer: color(242, 239, 242), inner: color(0) }, beak: { upper: color(245, 173, 79), lower: color(212, 171, 100) }, wing: { upper: color(222, 40, 95), lower: color(97, 58, 66) }, tail: { top: color(247, 62, 87), middle: color(217, 43, 69), bottom: color(173, 56, 73) } }; this.wings = { right: [0, 26, 52, 68, 69, 65, 55, 50, 49, 41, 38, 33, 23, 6, 0], left: [0, 26, 52, 76, 77, 75, 59, 52, 51, 41, 37, 33, 23, 6, 0] }; this.ground = { x1: 0, x2: width }; this.triangles = []; this.mountains = { x1: 0, x2: width, speed: 0.07, color: color(155, 242, 194) }; this.trees = { back: { x1: 0, x2: width, speed: 0.1, color: color(155, 242, 194) }, front: { x1: 0, x2: width, speed: 0.2, color: color(124, 230, 170) } }; this.plants = []; this.clouds = []; this.images = {}; this.imageIndex = 0; this.loaded = false; this.logo = new Logo({}); this.birds = []; this.setup(); }; _App.prototype = { setup: function() { this.images = { ground: function() { const blockSize = 40; noStroke(); fill(184, 166, 134); rect(0, 540, 600, 60); fill(40, 50); for(let i = 0; i < 50; i++) { ellipse(random(10, 590), random(550, 600), random(4, 8), random(2, 4)); } for(let i = 0; i <= 600; i+= blockSize) { fill(36, 36, 36, 100); arc(blockSize / 2 + i, 540, blockSize + 2, 35, 0, 180); fill(125, 155, 105); arc(blockSize / 2 + i, 540, blockSize, 30, 0, 180); } return get(0, 540, 600, 60); }, cloud1: function() { background(0, 0); pushMatrix(); scale(1.2); noStroke(); fill(255, 200); beginShape(); vertex(290, 184); bezierVertex(293, 180, 296, 177, 306, 179); bezierVertex(310, 169, 314, 166, 322, 169); bezierVertex(324, 160, 327, 151, 330, 150); bezierVertex(337, 145, 347, 148, 355, 165); bezierVertex(365, 163, 377, 165, 383, 176); bezierVertex(388, 176, 392, 177, 396, 184); endShape(CLOSE); popMatrix(); return get(345, 173, 132, 52); }, cloud2: function() { background(0, 0); pushMatrix(); scale(2); noStroke(); fill(255, 200); beginShape(); vertex(44, 177); bezierVertex(46, 172, 52, 169, 60, 171); bezierVertex(61, 165, 65, 156, 71, 154); bezierVertex(77, 152, 82, 157, 84, 162); bezierVertex(88, 161, 94, 162, 98, 168); bezierVertex(103, 169, 109, 170, 113, 177); endShape(CLOSE); popMatrix(); return get(84, 304, 144, 53); }, plant: function() { background(0, 0); noStroke(); fill(125, 155, 105); beginShape(); vertex(42, 600); vertex(48, 586); vertex(66, 592); vertex(43, 563); vertex(42, 535); vertex(66, 550); vertex(73, 587); vertex(73, 557); vertex(83, 535); vertex(90, 555); vertex(83, 581); vertex(101, 550); vertex(127, 537); vertex(124, 564); vertex(90, 590); vertex(114, 585); vertex(123, 600); endShape(CLOSE); fill(130, 170, 110); beginShape(); vertex(44, 600); vertex(50, 590); vertex(70, 595); vertex(47, 563); vertex(45, 540); vertex(62, 550); vertex(74, 591); vertex(75, 558); vertex(84, 541); vertex(87, 555); vertex(80, 590); vertex(102, 553); vertex(123, 544); vertex(122, 561); vertex(87, 591); vertex(114, 589); vertex(118, 600); endShape(CLOSE); return get(39, 535, 90, 65); }, mountains: function() { background(0, 0); noStroke(); fill(224, 230, 216); beginShape(); vertex(0, 370); vertex(60, 294); vertex(119, 259); vertex(197, 251); vertex(222, 216); vertex(277, 149); vertex(315, 214); vertex(351, 251); vertex(378, 299); vertex(399, 322); vertex(418, 355); vertex(441, 326); vertex(458, 285); vertex(476, 256); vertex(503, 232); vertex(538, 256); vertex(558, 299); vertex(581, 330); vertex(600, 370); vertex(600, 600); vertex(0, 600); endShape(CLOSE); return get(); }, treesBack: function() { background(0, 0); noStroke(); fill(210, 220, 195); beginShape(); vertex(0, 376); vertex(32, 450); vertex(56, 383); vertex(69, 416); vertex(86, 388); vertex(117, 463); vertex(136, 407); vertex(170, 475); vertex(186, 435); vertex(197, 453); vertex(221, 400); vertex(244, 476); vertex(281, 366); vertex(309, 441); vertex(350, 326); vertex(379, 384); vertex(400, 358); vertex(420, 413); vertex(442, 384); vertex(472, 443); vertex(496, 406); vertex(514, 437); vertex(533, 389); vertex(565, 441); vertex(600, 376); vertex(600, 600); vertex(0, 600); endShape(CLOSE); return get(); }, treesFront: function() { background(0, 0); noStroke(); fill(160, 190, 140); beginShape(); vertex(0, 420); vertex(31, 523); vertex(59, 461); vertex(73, 488); vertex(90, 446); vertex(111, 515); vertex(118, 485); vertex(133, 524); vertex(152, 447); vertex(169, 478); vertex(196, 414); vertex(244, 521); vertex(268, 446); vertex(309, 522); vertex(333, 426); vertex(344, 462); vertex(356, 432); vertex(376, 485); vertex(392, 452); vertex(420, 513); vertex(455, 422); vertex(489, 507); vertex(511, 470); vertex(528, 508); vertex(543, 481); vertex(566, 523); vertex(600, 420); vertex(600, 600); vertex(0, 600); endShape(CLOSE); return get(); } }; //add clouds for(let i = 0; i < 5; i++) { this.clouds.push({ x: random(i * 120, i * 420 + 50), y: random(50, 250), scale: random(0.7, 1), type: random() < 0.5 ? 1 : 2, speed: random(this.speed * 0.6, this.speed) }); } //add plants for(let i = 0; i < 5; i++) { this.plants.push({ x: random(-50, 500), y: 540, scale: random(0.2, 0.7) }); } //add birds this.birds.push(new Bird({ x: 0, y: 0, scale: 1, colors: { body: color(23, 23, 23), head: color(41, 41, 41), eye: { outer: color(242, 239, 242), inner: color(0) }, beak: { upper: color(245, 173, 79), lower: color(212, 171, 100) }, wing: { upper: color(222, 40, 95), lower: color(97, 58, 66) }, tail: { top: color(247, 62, 87), middle: color(217, 43, 69), bottom: color(173, 56, 73) } } })); this.birds.push(new Bird({ x: 300, y: 0, scale: 0.4, speed: 7, timer: 15, colors: { body: color(71, 71, 71), head: color(71, 71, 71), eye: { outer: color(242, 239, 242), inner: color(0) }, beak: { upper: color(245, 173, 79), lower: color(212, 171, 100) }, wing: { upper: color(153, 42, 222), lower: color(97, 58, 66) }, tail: { top: color(191, 63, 245), middle: color(156, 43, 217), bottom: color(131, 56, 171) } } })); this.birds.push(new Bird({ x: 300, y: 150, scale: 0.7, speed: 7, timer: 25, colors: { body: color(115, 113, 115), head: color(115, 113, 115), eye: { outer: color(242, 239, 242), inner: color(0) }, beak: { upper: color(245, 159, 54), lower: color(214, 167, 86) }, wing: { upper: color(26, 26, 26), lower: color(69, 69, 69) }, tail: { top: color(23, 23, 23), middle: color(54, 53, 54), bottom: color(83, 82, 84) } } })); this.birds.push(new Bird({ x: -20, y: -10, scale: 0.6, speed: 10, timer: 5, colors: { body: color(65, 121, 156), head: color(76, 136, 173), eye: { outer: color(242, 239, 242), inner: color(0) }, beak: { upper: color(245, 159, 54), lower: color(214, 167, 86) }, wing: { upper: color(55, 93, 153), lower: color(89, 167, 222) }, tail: { top: color(49, 90, 166), middle: color(80, 141, 201), bottom: color(111, 203, 242) } } })); this.birds.push(new Bird({ x: -10, y: 230, scale: 0.6, speed: 8, timer: 5, colors: { body: color(242, 80, 104), head: color(242, 80, 104), eye: { outer: color(237, 234, 234), inner: color(92, 90, 90) }, beak: { upper: color(245, 159, 54), lower: color(214, 167, 86) }, wing: { upper: color(54, 53, 54), lower: color(240, 139, 154) }, tail: { top: color(166, 49, 71), middle: color(199, 80, 98), bottom: color(240, 110, 119) } } })); //set controllable bird this.bird = this.birds[0]; //sort the birds so larger scale in front this.birds.sort(function(a, b) { return a.scale - b.scale; }); }, load: function (s) { const obj = Object.keys(this.images); this.images[obj[this.imageIndex]] = this.images[obj[this.imageIndex]](); this.imageIndex++; background(38, 38, 38); pushStyle(); fill(128, 128, 128); textAlign(CENTER, CENTER); textSize(70); text((this.imageIndex / obj.length * 100).toFixed(0) + "%", 300, 300); noFill(); stroke(64, 64, 64); strokeWeight(25); strokeCap(SQUARE); arc(300, 300, 300, 300, 0, map(this.imageIndex / obj.length, 0, 1, 0, 360)); strokeWeight(1); popStyle(); if(this.imageIndex < obj.length){ this.loaded = false; } else { this.loaded = true; this.scene = s; } }, runMountains: function() { image(this.images.mountains, this.mountains.x1, 0); image(this.images.mountains, this.mountains.x2, 0); this.mountains.x1+= this.speed * this.mountains.speed; this.mountains.x2+= this.speed * this.mountains.speed; if(this.mountains.x1 >= width) { this.mountains.x1-= width * 2; } if(this.mountains.x2 >= width) { this.mountains.x2-= width * 2; } }, runTrees: function() { image(this.images.treesBack, this.trees.back.x1, 0); image(this.images.treesBack, this.trees.back.x2, 0); image(this.images.treesFront, this.trees.front.x1, 0); image(this.images.treesFront, this.trees.front.x2, 0); this.trees.back.x1+= this.speed * this.trees.back.speed; this.trees.back.x2+= this.speed * this.trees.back.speed; this.trees.front.x1+= this.speed * this.trees.front.speed; this.trees.front.x2+= this.speed * this.trees.front.speed; if(this.trees.back.x1 >= width) { this.trees.back.x1-= width * 2; } if(this.trees.back.x2 >= width) { this.trees.back.x2-= width * 2; } if(this.trees.front.x1 >= width) { this.trees.front.x1-= width * 2; } if(this.trees.front.x2 >= width) { this.trees.front.x2-= width * 2; } }, runGround: function() { for(let i = 0; i < this.plants.length; i++) { const plant = this.plants[i]; image(this.images.plant, plant.x, plant.y - this.images.plant.height * plant.scale, this.images.plant.width * plant.scale, this.images.plant.height * plant.scale); plant.x+= this.speed; if(plant.x > width) { plant.x = random(-100, -50); plant.scale = random(0.2, 0.7); } } image(this.images.ground, this.ground.x1, 540); image(this.images.ground, this.ground.x2, 540); this.ground.x1+= this.speed * 1; this.ground.x2+= this.speed * 1; if(this.ground.x1 >= width) { this.ground.x1-= width * 2; } if(this.ground.x2 >= width) { this.ground.x2-= width * 2; } }, runClouds: function(arr, type) { for(let i = 0; i < arr.length; i++) { const cloud = arr[i]; const img = cloud.type === 1 ? this.images.cloud1 : this.images.cloud2; image(img, cloud.x, cloud.y, img.width * cloud.scale, img.height * cloud.scale); cloud.x+= cloud.speed; if(cloud.x - img.width > width) { cloud.x = random(-img.width * 1.1, -img.width * 1.3); cloud.y = random(50, 300); cloud.scale = type === "back" ? random(0.7, 1) : random(0.9, 1.2); cloud.type = random() < 0.5 ? 1 : 2; cloud.speed = random(this.speed * 0.6, this.speed); } } }, moveBird: function() { if(keys[UP] \|\| keys[87]) { //UP or W this.bird.y = constrain(this.bird.y - 2, -170, 120); } if(keys[DOWN] \|\| keys[83]) { //DOWN or S this.bird.y = constrain(this.bird.y + 2, -170, 120); } if(keys[LEFT] \|\| keys[65]) { //LEFT or A this.bird.x = constrain(this.bird.x - 1, -170, 200); } if(keys[RIGHT] \|\| keys[68]) { //RIGHT or D this.bird.x = constrain(this.bird.x + 1, -170, 200); } }, run: function() { switch(this.scene) { case "load": this.load("draw"); break; case "draw": if(this.logo.done) { this.timer++; background(this.colors.background); this.runMountains(); this.runTrees(); this.runGround(); this.runClouds(this.clouds, "back"); this.moveBird(); for(let i = 0; i < this.birds.length; i++) { this.birds[i].draw(); } } this.logo.draw(); break; } } }; return _App; })(); app = new App({}); draw = function() { app.run(); };
Folds	35,37,38,40,42,347,349,497,499,1107
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMOPlsDdCQw
Votes	192
Spin-Offs	7
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6201759782453248","title":"Contest: Animation","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739388403521
Updated	10 months ago, 1739388408154
Source Deleted	unknown