Viewing Program

Program Data

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

Title	Zombies (Animated)
ID	5389158750044160
Created	4 years ago, 1620649917547
Updated	4 years ago, 1620651208943
Code	/* Night of the Living Bread (animation) Gray Wolf, May 2021 Who said you can't have cute zombies :p Used my new Gray Wolf logo for the first time Let me know what you think of it :) Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 Animation based on: Removed link as some content on the page not appropriate Gray Wolf logo reference image based on: https://www.shutterstock.com/image-vector/wolf-logo-template-567330754 / smooth(); Object.constructor.prototype.new = function() { var obj = Object.create(this.prototype); this.apply(obj, arguments); return obj; }; //Gray Wolf logo var Logo = (function() { 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(219, 210, 188), //color(196, 196, 196), outline: color(5, 5, 5), from: color(102, 99, 98), to: color(13, 13, 13), text: color(138, 131, 116) //color(51, 51, 51) }; 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() { var 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); var shape = gx.get(115, 90, 370, 355); gx.noStroke(); for(var 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(var i = 0; i < 200; i++) { gx.line(random(115, 485), random(90, 445), random(115, 485), random(90, 445)); } gx.filter(BLUR, 2.5); var 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(var i = 0; i < 10; i++) { for(var 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(var i = 0; i < this.imgs.length; i++) { var 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; })(); //Zombie var Zombie = (function() { Zombie = function(args) { this.x = args.x \|\| 0; this.y = args.y \|\| 0; this.scale = args.scale \|\| 1; this.angle = args.angle \|\| 0; this.color = args.color \|\| color(200, 225, 90); this.colorSide = args.colorSide \|\| color(82, 105, 0); this.timer = args.timer \|\| 0; this.speed = 4.5; this.sin = 0; this.cos = 0; this.sin2 = 0; this.coords = { arms: { x: 0 }, eye: { x: 0, y: 0 }, mouth: { y: 0 }, body: { x: 0, y: 0 }, legs: { left: { x: 0, y: 0 }, right: { x: 0, y: 0 } } }; }; Zombie.prototype = { draw: function() { pushMatrix(); scale(this.scale); translate(this.x, this.y + this.coords.body.y); translate(300, 410); rotate(-5 + this.angle); translate(-300, -410); pushStyle(); //legs noFill(); stroke(40); strokeWeight(13); //left leg bezier( 308, 425, 302 + this.coords.legs.right.x * 0.4, 459 + this.coords.legs.right.y * 0.1 - this.coords.body.y, 295 + this.coords.legs.right.x * 0.9, 489 + this.coords.legs.right.y - this.coords.body.y, 285 + this.coords.legs.right.x * 1.4, 530 + this.coords.legs.right.y - this.coords.body.y); pushMatrix(); translate( 285 + this.coords.legs.right.x * 1.4, 530 + this.coords.legs.right.y - this.coords.body.y); rotate(5 -this.coords.legs.right.y * 1.4); line(0, 0, 10, 0); popMatrix(); // right leg bezier( 274, 420, 275 + this.coords.legs.left.x * 0.4, 451 + this.coords.legs.left.y * 0.2 - this.coords.body.y, 271 + this.coords.legs.left.x * 0.9, 485 + this.coords.legs.left.y - this.coords.body.y, 260 + this.coords.legs.left.x * 1.4, 529 + this.coords.legs.left.y - this.coords.body.y); pushMatrix(); translate( 260 + this.coords.legs.left.x * 1.4, 529 + this.coords.legs.left.y - this.coords.body.y); rotate(5 - this.coords.legs.left.y * 1.4); line(0, 0, 10, 0); popMatrix(); stroke(0); noStroke(); //shaded part of body pushMatrix(); translate(-35 + this.coords.body.x, 0); fill(this.colorSide); beginShape(); vertex(386, 111); bezierVertex(416, 117, 414, 160, 393, 174); bezierVertex(397, 177, 399, 185, 399, 196); vertex(400, 333); bezierVertex(378, 335, 375, 354, 386, 366); bezierVertex(369, 382, 372, 407, 400, 407); bezierVertex(399, 420, 392, 428, 381, 428); vertex(220, 428); bezierVertex(210, 428, 200, 428, 199, 409); vertex(200, 191); bezierVertex(200, 184, 202, 177, 205, 174); bezierVertex(183, 155, 187, 115, 216, 111); endShape(CLOSE); strokeWeight(1); stroke(33, 41, 2, 100); line(205, 174, 393, 174); popMatrix(); //body noStroke(); fill(this.color); beginShape(); vertex(386, 111); bezierVertex(416, 117, 414, 160, 393, 174); bezierVertex(397, 177, 399, 185, 399, 196); vertex(400, 333); bezierVertex(378, 335, 375, 354, 386, 366); bezierVertex(369, 382, 372, 407, 400, 407); bezierVertex(399, 420, 392, 428, 381, 428); vertex(220, 428); bezierVertex(210, 428, 200, 428, 199, 409); vertex(200, 191); bezierVertex(200, 184, 202, 177, 205, 174); bezierVertex(183, 155, 187, 115, 216, 111); endShape(CLOSE); //spots on body noStroke(); fill(40, 40, 40, 30); ellipse(250, 363, 30, 30); ellipse(272, 392, 20, 20); //left eye //eye ball noStroke(); fill(255); ellipse(356, 222, 35, 35); //right eye //socket noStroke(); fill(0); ellipse(245, 222, 20, 20); fill(227, 97, 88); ellipse(245, 229, 20, 20); noFill(); stroke(this.color); strokeWeight(8); ellipse(245, 222, 26, 26); //line strokeWeight(4); stroke(227, 97, 88); bezier( 246, 228, 246, 242, 246 + this.coords.eye.x * 0.5, 255 + this.coords.eye.y * 0.5, 246 + this.coords.eye.x, 274 + this.coords.eye.y); //eye ball noStroke(); fill(255); ellipse(246 + this.coords.eye.x, 273 + this.coords.eye.y, 35, 35); //arms stroke(40, 40, 40); //right arm strokeWeight(10); line(209, 308, 325 + this.coords.arms.x, 308); //fingers strokeWeight(8); line(325 + this.coords.arms.x, 308, 324 + this.coords.arms.x, 303); line(325 + this.coords.arms.x, 308, 333 + this.coords.arms.x, 310); line(325 + this.coords.arms.x, 308, 329 + this.coords.arms.x, 316); line(325 + this.coords.arms.x, 308, 322 + this.coords.arms.x, 317); //left arm strokeWeight(10); line(389, 308, 495 + this.coords.arms.x, 308); //fingers strokeWeight(8); line(495 + this.coords.arms.x, 308, 501 + this.coords.arms.x, 306); line(495 + this.coords.arms.x, 308, 501 + this.coords.arms.x, 314); line(495 + this.coords.arms.x, 308, 495 + this.coords.arms.x, 317); line(495 + this.coords.arms.x, 308, 488 + this.coords.arms.x, 314); //mouth noStroke(); fill(255); rect(285, 249 + this.coords.mouth.y * 0.5, 30, 10, 20); rect(285, 216 - this.coords.mouth.y * 0.5, 30, 10, 20); pushStyle(); //inside of mouth noStroke(); fill(0); rect(275, 212, 50, 40 + this.coords.mouth.y, 15); //teeth fill(255); rect(285, 242 + this.coords.mouth.y * 0.5, 30, 10, 20); rect(285, 213 - this.coords.mouth.y * 0.5, 30, 10, 20); //outside of mouth rectMode(CENTER); stroke(this.color); strokeWeight(15); noFill(); rect(300, 232, 55, 45 + this.coords.mouth.y, 20); popStyle(); popStyle(); popMatrix(); //shadow pushMatrix(); scale(this.scale); translate(this.x, this.y); pushStyle(); noStroke(); fill(207, 196, 163); rectMode(CENTER); rect(283, 541, 135 - this.coords.mouth.y * 2.5, 10, 10); popStyle(); popMatrix(); }, update: function() { this.timer++; this.sin = sin(this.timer * this.speed); this.cos = cos(this.timer * this.speed); this.sin2 = sin(this.timer * this.speed * 2); this.coords.body.y = this.sin2 * 10; this.coords.body.x = this.cos * -4; this.coords.arms.x = this.cos * 10; this.coords.eye.x = this.cos * 10; this.coords.eye.y = this.sin2 * 3; this.coords.mouth.y = this.sin2 * 7; this.coords.legs.right.x = this.cos * 25; this.coords.legs.right.y = constrain(this.sin * 25, -25, 0); this.coords.legs.left.x = sin((this.timer + 20) * this.speed) * -25; this.coords.legs.left.y = constrain(cos((this.timer + 20) * this.speed) * 25, -25, 0); this.angle = this.cos * 3; }, go: function() { this.draw(); this.update(); } }; return Zombie; })(); //Inherits from Zombie var ShadowZombie = (function() { ShadowZombie = function(args) { Zombie.call(this, args); }; ShadowZombie.prototype = Object.create(Zombie.prototype); ShadowZombie.prototype.draw = function() { pushMatrix(); scale(this.scale); translate(this.x, this.y + this.coords.body.y); translate(300, 410); rotate(-5 + this.angle); translate(-300, -410); pushStyle(); //legs noFill(); stroke(this.color); strokeWeight(13); //left leg bezier( 308, 425, 302 + this.coords.legs.right.x * 0.4, 459 + this.coords.legs.right.y * 0.1 - this.coords.body.y, 295 + this.coords.legs.right.x * 0.9, 489 + this.coords.legs.right.y - this.coords.body.y, 285 + this.coords.legs.right.x * 1.4, 530 + this.coords.legs.right.y - this.coords.body.y); pushMatrix(); translate( 285 + this.coords.legs.right.x * 1.4, 530 + this.coords.legs.right.y - this.coords.body.y); rotate(5 -this.coords.legs.right.y * 1.4); line(0, 0, 10, 0); popMatrix(); // right leg bezier( 274, 420, 275 + this.coords.legs.left.x * 0.4, 451 + this.coords.legs.left.y * 0.2 - this.coords.body.y, 271 + this.coords.legs.left.x * 0.9, 485 + this.coords.legs.left.y - this.coords.body.y, 260 + this.coords.legs.left.x * 1.4, 529 + this.coords.legs.left.y - this.coords.body.y); pushMatrix(); translate( 260 + this.coords.legs.left.x * 1.4, 529 + this.coords.legs.left.y - this.coords.body.y); rotate(5 - this.coords.legs.left.y * 1.4); line(0, 0, 10, 0); popMatrix(); noStroke(); //shaded part of body pushMatrix(); translate(-35 + this.coords.body.x, 0); fill(this.color); beginShape(); vertex(386, 111); bezierVertex(416, 117, 414, 160, 393, 174); bezierVertex(397, 177, 399, 185, 399, 196); vertex(400, 405); bezierVertex(399, 420, 392, 428, 381, 428); vertex(220, 428); bezierVertex(210, 428, 200, 428, 199, 409); vertex(200, 191); bezierVertex(200, 184, 202, 177, 205, 174); bezierVertex(183, 155, 187, 115, 216, 111); endShape(CLOSE); popMatrix(); //body noStroke(); fill(this.color); beginShape(); vertex(386, 111); bezierVertex(416, 117, 414, 160, 393, 174); bezierVertex(397, 177, 399, 185, 399, 196); vertex(400, 405); bezierVertex(399, 420, 392, 428, 381, 428); vertex(220, 428); bezierVertex(210, 428, 200, 428, 199, 409); vertex(200, 191); bezierVertex(200, 184, 202, 177, 205, 174); bezierVertex(183, 155, 187, 115, 216, 111); endShape(CLOSE); //left arm strokeWeight(10); stroke(this.color); line(389, 308, 495 + this.coords.arms.x, 308); //fingers strokeWeight(8); line(495 + this.coords.arms.x, 308, 501 + this.coords.arms.x, 306); line(495 + this.coords.arms.x, 308, 501 + this.coords.arms.x, 314); line(495 + this.coords.arms.x, 308, 495 + this.coords.arms.x, 317); line(495 + this.coords.arms.x, 308, 488 + this.coords.arms.x, 314); popStyle(); popMatrix(); //shadow pushMatrix(); scale(this.scale); translate(this.x, this.y); pushStyle(); noStroke(); fill(this.color); rectMode(CENTER); rect(283, 541, 135 - this.coords.mouth.y * 2.5, 10, 10); popStyle(); popMatrix(); }; return ShadowZombie; })(); var heading = (function() { textFont(createFont("Trebuchet MS Bold"), 50); textAlign(CENTER); pushMatrix(); translate(300, 75); rotate(-2); background(0, 0); fill(241, 231, 206); for(var i = 0; i < 360; i+= 30) { text("NIGHT OF THE\nLIVING BREAD", sin(i) * 5, cos(i) * 5); } fill(0, 30); text("NIGHT OF THE\nLIVING BREAD", 0, 0); popMatrix(); return get(0, 0, 600, 200); })(); var logo = new Logo({}); var zombie = Zombie.new({ x: 250, y: 200, scale: 0.7 }); var shadowZombies = []; shadowZombies.push(ShadowZombie.new({ x: 450, y: 260, scale: 0.6, timer: 20, color: color(241, 231, 206) })); shadowZombies.push(ShadowZombie.new({ x: -280, y: 250, scale: 0.6, timer: 30, color: color(241, 231, 206) })); shadowZombies.push(ShadowZombie.new({ x: 120, y: 230, scale: 0.6, timer: 25, color: color(241, 231, 206) })); shadowZombies.push(ShadowZombie.new({ x: -80, y: 270, scale: 0.6, timer: 15, color: color(229, 217, 187) })); draw = function() { background(255, 248, 230); if(logo.done) { image(heading, 0, 0); for(var i = 0; i < shadowZombies.length; i++) { shadowZombies[i].go(); } zombie.go(); } logo.draw(); };
Folds	23,27,30,335,339,377,378,595,605,711,715,734,738,742,746,752,753,759,760,766,767,773
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL3nlK3JCQw
Votes	496
Spin-Offs	10
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
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	6 months ago, 1739381384368
Updated	4 months ago, 1744820991813
Source Deleted	unknown