Viewing Program

Program Data

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

Title	Moving Target (Animated)
ID	5833648525852672
Created	4 years ago, 1636373862993
Updated	4 years ago, 1636412504854
Code	/ Moving Target (Animated) Gray Wolf, November 2021 Click to change between two different speeds @Subscribe Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 @Reference https://marketing.dcassetcdn.com/blog/2016/April/target-audience/BI_TargetAudience_Banner_828x300.png / smooth(); textAlign(CENTER, TOP); textFont(createFont("Trebuchet MS"), 30); 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(35, 145, 120), outline: color(5, 5, 5), from: color(102, 99, 98), to: color(13, 13, 13), text: color(245, 245, 245) }; 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; })(); var Person = (function() { Person = function(args) { this.x = args.x \|\| 480; this.y = args.y \|\| 340; this.length = args.length \|\| 110; this.diameter = args.diameter \|\| this.length / 2; this.thickness = args.thickness \|\| this.length * 0.04; this.timer = 0; this.speed = args.speed \|\| 7; this.angle = -15; this.colors = args.colors \|\| { skin: color(250, 225, 200), stroke: color(90), feet: color(60) }; this.canChangeSpeed = true; this.limbs = args.limbs \|\| [ { //left arm x: 0, y: 0, offset: 60, color: color(252, 101, 106), upper: { angle: 10, dist: 60, length: this.length * 0.8 / 2 //65 }, lower: { angle: -60, dist: 50, length: this.length * 0.68 / 2 //55 } }, { //right arm x: 0, y: 0, offset: 240, color: color(222, 89, 93), upper: { angle: 10, dist: 60, length: this.length * 0.8 / 2 //65 }, lower: { angle: -60, dist: 50, length: this.length * 0.68 / 2 //55 } }, { //left leg x: 0, y: 0, offset: 180, color: color(252, 101, 106), upper: { angle: -10, dist: 60, length: this.length / 2 //80 }, lower: { angle: 60, dist: 50, length: this.length * 0.75 / 2 //60 }, foot: { angle: -70, dist: 20, length: this.length * 0.25 / 2 //20 } }, { //right leg x: 0, y: 0, offset: 0, color: color(222, 89, 93), upper: { angle: -10, dist: 60, length: this.length / 2 //80 }, lower: { angle: 60, dist: 50, length: this.length * 0.75 / 2 //60 }, foot: { angle: -70, dist: 20, length: this.length * 0.25 / 2 //20 } } ]; this.sine = 0; this.init(); }; Person.prototype = { init: function() { //left arm this.limbs[0].x = this.x + this.length * 0.15; this.limbs[0].y = this.y + this.diameter * 0.9; //right arm this.limbs[1].x = this.x - this.length * 0.32; this.limbs[1].y = this.y + this.diameter * 1.2; //left leg this.limbs[2].x = this.x + this.length * 0.15; this.limbs[2].y = this.y + this.length; //right leg this.limbs[3].x = this.x - this.length * 0.23; this.limbs[3].y = this.y + this.length; }, moveArm: function(limb) { stroke(this.colors.stroke); stroke(90, 90, 90); strokeWeight(this.thickness); pushMatrix(); translate(limb.x, limb.y); rotate(limb.upper.angle + sin((this.timer * this.speed) + limb.offset) * limb.upper.dist); line(0, 0, 0, limb.upper.length); translate(0, limb.upper.length); rotate(limb.lower.angle + cos((this.timer * this.speed) + limb.offset) * limb.lower.dist); line(0, 0, 0, limb.lower.length); stroke(this.colors.stroke); strokeWeight(this.thickness / 2); fill(this.colors.skin); //hands ellipse(0, limb.lower.length, this.diameter * 0.2, this.diameter * 0.2); popMatrix(); }, moveLeg: function(limb) { stroke(this.colors.stroke); strokeWeight(this.thickness); pushMatrix(); translate(limb.x - this.angle * 0.5, limb.y); rotate(limb.upper.angle + cos((this.timer * this.speed) + limb.offset) * limb.upper.dist); line(0, 0, 0, limb.upper.length); translate(0, limb.upper.length); rotate(limb.lower.angle + sin((this.timer * this.speed) + limb.offset) * limb.lower.dist); line(0, 0, 0, limb.lower.length); translate(0, limb.lower.length); rotate(limb.foot.angle + sin((this.timer * this.speed) + limb.offset) * limb.foot.dist); stroke(this.colors.feet); strokeWeight(this.thickness * 1.5); line(0, 0, 0, limb.foot.length); popMatrix(); }, draw: function() { this.timer++; this.angle = sin(this.timer * this.speed * 0.2) * 20; var point = 0; pushMatrix(); translate(0, sin((this.timer) * this.speed * 2) * 10); //left arm this.moveArm(this.limbs[0]); //left leg this.moveLeg(this.limbs[2]); //body (target) pushMatrix(); translate(this.x, this.y + this.length * 0.6); rotate(this.angle); noStroke(); fill(90, 90, 90); ellipse(0, 0, this.length * 0.7, this.length * 1.25); fill(75, 75, 75); ellipse(this.length * 0.03, 0, this.length * 0.65, this.length * 1.2); fill(120, 185, 210); ellipse(this.length * 0.1, 0, this.length * 0.45, this.length * 0.9); fill(240, 90, 90); ellipse(this.length * 0.13, 0, this.length * 0.35, this.length * 0.7); fill(245, 210, 100); ellipse(this.length * 0.15, 0, this.length * 0.25, this.length * 0.5); popMatrix(); //right leg this.moveLeg(this.limbs[3]); //right arm this.moveArm(this.limbs[1]); popMatrix(); } }; return Person; })(); var App = (function() { App = function() { this.timer = 0; this.speedIndex = 0; this.speeds = [7, 14]; this.speed = this.speeds[this.speedIndex]; this.arrows = []; this.dusts = []; this.person = new Person({ speed: this.speed }); this.logo = new Logo({}); this.sine = 0; this.state = -1; this.changed = false; this.hills = { back: { img: undefined, x1: 0, x2: 599 }, front: { img: undefined, x1: 0, x2: 599 } }; this.getHills(); }; App.prototype = { getHills: function() { background(0, 0); noStroke(); fill(45, 190, 160); beginShape(); vertex(0, 373); vertex(48, 417); vertex(64, 394); vertex(107, 443); vertex(152, 327); vertex(201, 371); vertex(253, 294); vertex(306, 393); vertex(328, 339); vertex(349, 367); vertex(405, 270); vertex(472, 395); vertex(501, 358); vertex(553, 415); vertex(600, 373); vertex(600, 600); vertex(0, 600); endShape(CLOSE); this.hills.back.img = get(0, 265, 600, 335); background(0, 0); noStroke(); fill(35, 145, 120); beginShape(); vertex(0, 439); vertex(82, 361); vertex(128, 419); vertex(155, 371); vertex(221, 454); vertex(253, 383); vertex(275, 411); vertex(303, 354); vertex(375, 452); vertex(423, 376); vertex(477, 434); vertex(513, 406); vertex(550, 439); vertex(574, 418); vertex(600, 439); vertex(600, 600); vertex(0, 600); endShape(CLOSE); this.hills.front.img = get(0, 350, 600, 250); }, runHills: function() { //hills in back image(this.hills.back.img, this.hills.back.x1, 265); image(this.hills.back.img, this.hills.back.x2, 265); this.hills.back.x1-= this.speed * 0.15; this.hills.back.x2-= this.speed * 0.15; if(this.hills.back.x1 <= -this.hills.back.img.width) { this.hills.back.x1 = this.hills.back.x2 + 599; } if(this.hills.back.x2 <= -this.hills.back.img.width) { this.hills.back.x2 = this.hills.back.x1 + 599; } //hills in front image(this.hills.front.img, this.hills.front.x1, 370); image(this.hills.front.img, this.hills.front.x2, 370); this.hills.front.x1-= this.speed * 0.3; this.hills.front.x2-= this.speed * 0.3; if(this.hills.front.x1 <= -this.hills.front.img.width) { this.hills.front.x1 = this.hills.front.x2 + 599; } if(this.hills.front.x2 <= -this.hills.front.img.width) { this.hills.front.x2 = this.hills.front.x1 + 599; } }, runDusts: function() { noStroke(); for(var i = this.dusts.length - 1; i >= 0; i--) { var dust = this.dusts[i]; fill(dust.color, dust.opacity); ellipse(dust.x, dust.y, dust.diameter, dust.diameter); dust.x-= (this.speed + dust.vx); dust.y-= dust.vy; dust.opacity-= this.speed * 0.4; if(dust.opacity <= 0) { this.dusts.splice(i, 1); } } }, runArrows: function() { strokeWeight(2); for(var i = this.arrows.length - 1; i >= 0; i--) { var arrow = this.arrows[i]; pushMatrix(); translate(arrow.x, arrow.y); rotate(arrow.angle); stroke(80, 140, 155); line(-arrow.w / 2, 0, arrow.w / 2, 0); noStroke(); fill(46, 72, 79); triangle( arrow.w * 0.55, 0, arrow.w * 0.4, -arrow.w * 0.08, arrow.w * 0.4, arrow.w * 0.08); fill(89, 89, 89); for(var j = 0; j < 3; j++) { var xoff = (j * arrow.w * 0.06); triangle( -arrow.w * 0.29 - xoff, 0, -arrow.w * 0.37 - xoff, -arrow.w * 0.10, -arrow.w * 0.32 - xoff, 0); triangle( -arrow.w * 0.29 - xoff, 0, -arrow.w * 0.37 - xoff, arrow.w * 0.10, -arrow.w * 0.32 - xoff, 0); } arrow.vx-= arrow.friction; arrow.x+= arrow.vx; arrow.vy+= arrow.gravity; arrow.y+= arrow.vy; arrow.angle+= arrow.rot; if(!arrow.hit && arrow.y + arrow.w > arrow.base) { arrow.gravity = 0; arrow.vy = 0; arrow.rot = 0; arrow.friction = 0; arrow.vx = -this.speed; arrow.hit = true; } else if(arrow.hit) { arrow.vx = -this.speed; noStroke(); fill(163, 138, 96); rect(arrow.w * 0.48, -arrow.w * 0.05, arrow.w * 0.07, arrow.w * 0.1); if(arrow.x < -arrow.w) { this.arrows.splice(i, 1); } } popMatrix(); } }, draw: function() { background(146, 226, 232); this.runHills(); //ground noStroke(); fill(163, 138, 96); rect(0, 510, width, 90); //draw the shadow under the person fill(50, 20); var shadow = sin(this.timer * this.speed * 2); ellipse(this.person.x + 5, 550, 110 - shadow * 2, 15 - shadow * 2); if(this.hit > 0 && shadow < 0) { for(var j = 0; j < 10; j++) { this.dusts.push({ x: this.person.x + (this.state === 1 ? -this.person.diameter * 0.3 : this.person.diameter * 0.5), y: 545, vx: random(-this.speed * 0.08, this.speed * 0.05), vy: random(this.speed * 0.20, this.speed * 0.30), opacity: random(80, 150), diameter: random(5, 10), color: color(140, 119, 84) }); } this.state= -1; } this.hit = shadow; //run the dust this.runDusts(); //draw the person (moving target) this.person.draw(); //add arrows if(this.timer++ % (140 / (this.speed \| 0)) === 0) { this.arrows.push({ x: -50, y: random(330, 380), w: 100, vx: random(4, 5), vy: random(-8, -7), angle: -60, rot: 1.3, gravity: 0.2, friction: 0.01, hit: false, base: random(height 0.97, height * 1.05), speed: this.speed }); } //run the arrows this.runArrows(); if(!this.changed) { fill(255, 100); text("click to run faster", 300, 100); } }, run: function() { if(this.logo.done) { this.draw(); } this.logo.draw(); } }; return App; })(); var app = new App(); draw = function() { app.run(); }; mousePressed = function() { app.speedIndex = (app.speedIndex + 1) % app.speeds.length; app.speed = app.speeds[app.speedIndex]; app.person.speed = app.speed; app.changed = true; };
Folds	21,326,328,522,524,781,789,794
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIOhwrWuCgw
Votes	234
Spin-Offs	19
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	10 months ago, 1739449758400
Updated	10 months ago, 1739449758400
Source Deleted	unknown