Viewing Program

Program Data

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

Title	Gray Wolf Intro (Animated)
ID	5669830262210560
Created	4 years ago, 1614001584584
Updated	4 years ago, 1614072207952
Code	/* Gray Wolf Logo/Intro animation Gray Wolf, February 2021 This will be used for intros into programs I make in future. Let me know what you think (good or bad). I'll likely change it based on any feedback I get :) Click on the screen to watch it again. Updates based on comments: - made it a bit shorter since it's an intro - slight modification on the nose so it fits better on the wolf - added a curved path on the ground - added foot prints Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 / var GrayWolf = function() { this.x = 800; this.timer = 0; this.angle = 0; this.colors = { light: color(232, 232, 232), medium: color(110, 110, 110), dark: color(88, 88, 88), black: color(64, 64, 64) }; this.state = "animation"; this.complete = false; this.shake = 0; this.shakedown = 0.1; this.timerDelay = 20; this.cos = cos; this.sin = sin; this.speed = 2; this.bob = 0; this.gray = { words: "GRAY", opacity: 0 }; this.wolf = { words: "WOLF", opacity: 0 }; this.gy = 1000; //ground y position this.ty = 1200; //tree y position this.px = -300; //path x position this.images = { back: undefined, ground: undefined, fin: undefined }; this.finAngle = 0; this.finScale = 1; this.trees = [ { x: -250, color: color(63, 145, 86), size: 250 }, { x: -50, color: color(156, 126, 75), size: 200 }, { x: 150, color: color(67, 163, 94), size: 210 }, { x: 350, color: color(77, 132, 161), size: 250 }, { x: 550, color: color(55, 168, 85), size: 220 } ]; this.legLeft = { x: 0, y: 0, x1: 0, x2: 0, cos: 0, sin: 0 }; this.legRight = { x: 0, y: 0, x1: 0, x2: 0, cos: 0, sin: 0 }; this.body = { to: [ { x: 117, y: 179 }, { x: 178, y: 259 }, { x: 243, y: 284 }, { x: 310, y: 280 }, { x: 368, y: 283 }, { x: 414, y: 273 }, { x: 445, y: 262 }, { x: 423, y: 368 }, { x: 373, y: 369 }, { x: 279, y: 367 }, { x: 161, y: 363 }, { x: 134, y: 282 }, { x: 117, y: 179 } ], from: [ { x: 64, y: 247 }, { x: 136, y: 267 }, { x: 214, y: 279 }, { x: 280, y: 278 }, { x: 347, y: 280 }, { x: 404, y: 277 }, { x: 445, y: 262 }, { x: 435, y: 345 }, { x: 381, y: 372 }, { x: 298, y: 369 }, { x: 206, y: 365 }, { x: 140, y: 338 }, { x: 64, y: 247 } ] }; this.face = []; this.eye = { x: 0, y: 0 }; this.footprints = []; this.getAngle = function(p1, p2, p3, p4, n) { return atan2(bezierTangent(p1.y, p2.y, p3.y, p4.y, n), bezierTangent(p1.x, p2.x, p3.x, p4.x, n)) - 90; }; this.getPoint = function(p1, p2, p3, p4, n) { return {x: bezierPoint(p1.x, p2.x, p3.x, p4.x, n), y: bezierPoint( p1.y, p2.y, p3.y, p4.y, n)}; }; this.getGradient = function(h, c1, c2) { noStroke(); for(var i = 0; i <= h; i++) { fill(lerpColor(c1, c2, i/h)); rect(0, i, width, 1); } return get(0, 0, width, h); }; this.shakeScreen = function() { if(this.shake > 0) { this.shake = lerp(this.shake, 0, this.shakedown); translate(round(random(-this.shake, this.shake)), round(random(-this.shake, this.shake))); } }; this.drawTree = function(x, y, s, c) { pushMatrix(); translate(x, y); noStroke(); fill(c); triangle(-s 0.17, -s * 0.2, s * 0.17, - s * 0.2, 0, -s * 0.6); triangle(-s * 0.17, -s * 0.35, s * 0.17, - s * 0.35, 0, -s * 0.75); triangle(-s * 0.17, -s * 0.5, s * 0.17, - s * 0.5, 0, -s * 0.9); fill(red(c) - 10, green(c) - 10, blue(c) - 10); triangle(-s * 0.17, -s * 0.2, 0, - s * 0.2, 0, -s * 0.6); triangle(-s * 0.17, -s * 0.35, 0, - s * 0.35, 0, -s * 0.75); triangle(-s * 0.17, -s * 0.5, 0, - s * 0.5, 0, -s * 0.9); fill(92, 84, 69); beginShape(); vertex(-s * 0.02, 0); vertex(0, -s * 0.7); vertex(s * 0.02, 0); endShape(CLOSE); triangle(0, -s * 0.25, 0, - s * 0.27, -s * 0.1, -s * 0.33); triangle(0, -s * 0.42, 0, - s * 0.44, -s * 0.1, -s * 0.50); triangle(0, -s * 0.25, 0, - s * 0.27, s * 0.1, -s * 0.33); triangle(0, -s * 0.42, 0, - s * 0.44, s * 0.1, -s * 0.50); popMatrix(); }; this.init = function() { this.images.back = this.getGradient(600, color(106, 197, 222), color(56, 123, 145)); this.images.ground = this.getGradient(200, color(176, 170, 118), color(209, 204, 155)); //initial bezier points for the mouth section on the body var body = this.body.from; var index = body.length - 1; for(var i = 0.3; i < 0.9; i+= 0.1) { this.face.push(this.getPoint(body[index], body[index-1], body[index-2], body[index-3], i)); } //initial bezier points for the eye this.eye = this.getPoint(body[0], body[1], body[2], body[3], 0.5); //initialize the starting angle this.angle = this.getAngle(body[0], body[1], body[2], body[3], 0.5); }; this.init(); this.fin = function() { this.finAngle+= 10; this.finScale-= 0.01; pushMatrix(); translate(300, 300); scale(this.finScale); rotate(this.finAngle); image(this.images.fin, -this.images.fin.width / 2, -this.images.fin.height / 2); popMatrix(); if(this.finScale < 0) { this.state = "fin"; } }; this.intro = function() { this.shakeScreen(); image(this.images.back, 0, 0); for(var i = 0; i < this.trees.length; i++) { this.drawTree(this.trees[i].x, this.ty, this.trees[i].size, this.trees[i].color); } image(this.images.ground, 0, this.gy); //path pushMatrix(); translate(this.px, this.gy-430); fill(71, 70, 71, 30); beginShape(); vertex(0, 430); vertex(900, 430); vertex(900, 459); bezierVertex(787, 466, 734, 470, 681, 468); bezierVertex(638, 464, 585, 457, 542, 457); bezierVertex(506, 457, 475, 466, 412, 466); bezierVertex(359, 463, 308, 456, 253, 454); bezierVertex(204, 454, 160, 454, 101, 456); bezierVertex(57, 458, 23, 465, 0, 468); endShape(CLOSE); beginShape(); vertex(0, 599); vertex(900, 598); vertex(900, 554); bezierVertex(814, 547, 697, 537, 577, 549); bezierVertex(519, 558, 455, 564, 396, 563); bezierVertex(345, 559, 301, 549, 259, 546); bezierVertex(231, 541, 186, 544, 137, 553); bezierVertex(86, 559, 35, 553, 0, 545); endShape(CLOSE); popMatrix(); //footprints fill(100, 50); fill(184, 177, 125); for(var i = 0; i < this.footprints.length; i++) { ellipse(this.footprints[i].x, this.footprints[i].y, 40, 10); } //GRAY WOLF text if(this.timer > 490) { pushMatrix(); rotate(-5); pushStyle(); textFont(createFont("Arial Black"), 80); fill(this.colors.light, this.gray.opacity); text(this.gray.words, 131, 161); fill(this.colors.medium, this.gray.opacity); text(this.gray.words, 130, 160); fill(this.colors.dark, this.wolf.opacity); text(this.wolf.words, 181, 251); fill(this.colors.light, this.wolf.opacity); text(this.wolf.words, 180, 250); popStyle(); popMatrix(); } }; this.draw = function() { pushMatrix(); translate(this.x, 90 + this.bob); noStroke(); //ears pushMatrix(); translate(this.eye.x, this.eye.y); rotate(this.angle); //right ear fill(this.colors.medium); beginShape(); vertex(-5, -7); bezierVertex(10, -6, 20, -6, 27, 3); bezierVertex(20, 11, 10, 12, -5, 20); endShape(CLOSE); //left ear outer fill(this.colors.medium); beginShape(); vertex(-5, 10); bezierVertex(10, 11, 20, 12, 30, 20); bezierVertex(23, 29, 13, 32, -5, 35); endShape(CLOSE); //left ear fill(this.colors.light); beginShape(); vertex(-5, 10); bezierVertex(10, 11, 20, 12, 30, 20); bezierVertex(20, 25, 10, 26, -5, 27); endShape(CLOSE); popMatrix(); //right legs strokeWeight(24); stroke(this.colors.dark); //front right bezier( 204, 320, 205 - this.legLeft.x1, 358 - this.legLeft.y, 205 - this.legLeft.x2, 385 - this.legLeft.y, 205 - this.legLeft.x, 409 - this.legLeft.y); //back right bezier( 348, 333, 349 - this.legRight.x1, 365 - this.legRight.y, 350 - this.legRight.x2, 386 - this.legRight.y, 350 - this.legRight.x, 407 - this.legRight.y); noStroke(); fill(this.colors.dark); arc(205 - this.legLeft.x, 409 - this.legLeft.y + 10, 30, 35, 180, 360); arc(350 - this.legRight.x, 407 - this.legRight.y + 10, 30, 35, 180, 360); //body (using points) fill(this.colors.medium); beginShape(); vertex(this.body.from[0].x, this.body.from[0].y); for(var i = 1; i < this.body.from.length; i+= 3) { bezierVertex( this.body.from[i].x, this.body.from[i].y, this.body.from[i+1].x, this.body.from[i+1].y, this.body.from[i+2].x, this.body.from[i+2].y); } endShape(); //tail pushMatrix(); translate(421, 280); rotate(this.sin(this.timer * this.speed * 5) * 10); translate(-421, -280); beginShape(); vertex(421, 280); bezierVertex(435, 249, 457, 230, 478, 217); bezierVertex(495, 202, 505, 182, 516, 160); bezierVertex(514, 241, 476, 280, 424, 289); endShape(CLOSE); popMatrix(); //mouth area fill(this.colors.light); beginShape(); vertex(this.face[0].x, this.face[0].y); bezierVertex( this.face[1].x, this.face[1].y + 5, this.face[2].x, this.face[2].y + 5, this.face[3].x, this.face[3].y + 4); bezierVertex( this.face[4].x, this.face[4].y + 5, this.face[5].x, this.face[5].y + 5, this.face[6].x, this.face[6].y); bezierVertex( this.face[4].x + this.cos(this.angle) * 35, this.face[4].y + this.sin(this.angle) * 35, this.face[2].x + this.cos(this.angle) * 30, this.face[2].y + this.sin(this.angle) * 30, this.face[0].x, this.face[0].y); endShape(); //nose fill(this.colors.black); pushMatrix(); translate(this.body.from[0].x + 5, this.body.from[0].y); rotate(this.angle * 2 + 115); ellipse(0, 2, 20, 40); popMatrix(); //mouth noFill(); stroke(this.colors.black); strokeWeight(2); pushMatrix(); translate(this.face[2].x, this.face[2].y); rotate(90 + this.angle); bezier(0, 0, 3, -5, 7, -3, 10, -15); popMatrix(); //eye pushMatrix(); translate(this.eye.x, this.eye.y); rotate(this.angle); if(this.timer > 400) { noStroke(); fill(this.colors.light); ellipse(-20, 0, 21, 18); fill(this.colors.black); ellipse(-21, 1, 12, 10); } else { arc(-25, 0, 20, 20, -60, 70); } popMatrix(); //left legs strokeWeight(24); stroke(this.colors.medium); //front left bezier( 239, 332, 239 - this.legRight.x1, 372 - this.legRight.y, 239 - this.legRight.x2, 398 - this.legRight.y, 239 - this.legRight.x, 419 - this.legRight.y); //back left bezier( 386, 326, 386 - this.legLeft.x1, 361 - this.legLeft.y, 386 - this.legLeft.x2, 391 - this.legLeft.y, 386 - this.legLeft.x, 415 - this.legLeft.y); noStroke(); fill(this.colors.medium); arc(239 - this.legRight.x, 419 - this.legRight.y + 10, 30, 35, 180, 360); arc(386 - this.legLeft.x, 415 - this.legLeft.y + 10, 30, 35, 180, 360); popMatrix(); }; this.update = function() { this.timer++; this.x = constrain(this.x - 3, 0, 800); if(this.timer > 490) { this.gray.opacity = constrain(this.gray.opacity + 30, 0, 255); if(this.gray.opacity === 90) { this.shake = 20; } } if(this.timer > 530) { this.wolf.opacity = constrain(this.wolf.opacity + 30, 0, 255); if(this.wolf.opacity === 90) { this.shake = 20; } } if(this.timer > 30) { this.gy = ~~(lerp(this.gy, 430, 0.1)); this.ty = ~~(lerp(this.ty, 430, 0.05)); } if(this.x === 0 && this.timer < 400) { for(var i = 0; i < this.trees.length; i++) { this.trees[i].x+=this.speed; } for(var i = 0; i < this.footprints.length; i++) { this.footprints[i].x+=this.speed; } this.px+=this.speed; } if(this.timer > 400) { //move body for(var i = 0; i < this.body.from.length; i++) { this.body.from[i].x = lerp(this.body.from[i].x, this.body.to[i].x, 0.025); this.body.from[i].y = lerp(this.body.from[i].y, this.body.to[i].y, 0.025); } this.angle = this.getAngle(this.body.from[0], this.body.from[1], this.body.from[2], this.body.from[3], 0.5); this.eye = this.getPoint( this.body.from[0], this.body.from[1], this.body.from[2], this.body.from[3], 0.5); //update mouth section based on the current body points var index = this.body.from.length - 1; for(var i = 0.3, j = 0; i < 0.9; i+= 0.1, j++) { this.face[j] = this.getPoint( this.body.from[index], this.body.from[index-1], this.body.from[index-2], this.body.from[index-3], i); } //reset legs to standing this.legLeft.x = lerp(this.legLeft.x, 0, 0.1); this.legLeft.y = lerp(this.legLeft.y, 0, 0.1); this.legLeft.x1 = lerp(this.legLeft.x1, 0, 0.1); this.legLeft.x2 = lerp(this.legLeft.x2, 0, 0.1); this.legRight.x = lerp(this.legRight.x, 0, 0.1); this.legRight.y = lerp(this.legRight.y, 0, 0.1); this.legRight.x1 = lerp(this.legRight.x1, 0, 0.1); this.legRight.x2 = lerp(this.legRight.x2, 0, 0.1); //stop the vertical movement when finished walking this.bob = lerp(this.bob, 0, 0.1); } else { this.legLeft.cos = this.cos(this.timer * this.speed * 5) * 15; this.legRight.cos = this.cos((this.timer + this.timerDelay) * this.speed * 5) * 15; this.legLeft.sin = this.sin(this.timer * this.speed * 5) * 35; this.legRight.sin = this.sin((this.timer + this.timerDelay) * this.speed * 5) * 35; this.legLeft.x = this.legLeft.cos * 1.75; this.legLeft.x1 = map(this.legLeft.x, -15, 15, 0, 18); this.legLeft.x2 = map(this.legLeft.x, -15, 15, -10, 18); this.legRight.x = this.legRight.cos * 1.75; this.legRight.x1 = map(this.legRight.x, -15, 15, 0, 18); this.legRight.x2 = map(this.legRight.x, -15, 15, -10, 18); this.legLeft.y = -constrain(this.legLeft.sin, -35, 0); this.legRight.y = -constrain(this.legRight.sin, -35, 0); //bob up and down while moving this.bob = this.sin(this.timer * this.speed * 10) * 5; if(35 - this.legLeft.y === 0) { //right back leg this.footprints.push({ x: this.x + 340 - this.legRight.x, y: 420 - this.legRight.y + 90 + this.bob }); //left front leg this.footprints.push({ x: this.x + 240 - this.legLeft.x, y: 465 - this.legLeft.y + 90 + this.bob }); } else if(35 - this.legRight.y === 0) { //right front leg this.footprints.push({ x: this.x + 200 - this.legRight.x, y: 450 - this.legRight.y + 90 + this.bob }); //left back leg this.footprints.push({ x: this.x + 380 - this.legLeft.x, y: 420 - this.legLeft.y + 90 + this.bob }); } } if(this.timer === 670) { this.complete = true; this.images.fin = get(0, 0, width, height); } }; this.go = function() { if(!this.complete && this.state === "animation") { this.intro(); this.draw(); this.update(); } else if(this.complete && this.state !== "fin") { this.fin(); } }; }; var Scene = function() { this.draw = function() { pushMatrix(); translate(300, 300 + sin(frameCount * 2) * 20); rotate(-20 + cos(frameCount * 2) * 20); pushStyle(); stroke(64); strokeWeight(15); fill(64, 150); ellipse(0, 0, 400, 400); fill(232); stroke(64); strokeWeight(5); ellipse(-50, -110, 70, 80); ellipse( 50, -110, 70, 80); noStroke(); fill(64); ellipse(-40, -110, 30, 35); ellipse( 40, -110, 30, 35); fill(232); ellipse(-37, -118, 10, 10); ellipse( 37, -118, 10, 10); textFont(createFont("Trebuchet MS")); textSize(40); textAlign(CENTER, CENTER); text("PROGRAM\nGOES HERE!", 0, 0); noFill(); stroke(64); strokeWeight(10); bezier(-100, 80, -50, 140, 50, 160, 100, 100); popStyle(); popMatrix(); pushStyle(); textFont(createFont("Trebuchet MS")); textSize(20); textAlign(CENTER, CENTER); fill(242); text("CLICK THE SCREEN TO WATCH IT AGAIN", 300, 570); popStyle(); }; }; var scene = new Scene(); var grayWolf = new GrayWolf(); draw = function() { background(118, 173, 191); if(grayWolf.complete) { scene.draw(); } grayWolf.go(); }; mouseClicked = function() { Program.restart(); };
Folds	27,32,42,45,46,49,53,57,60,86,87,95,96,103,104,213,215,218,221,223,224,226,227,234,235,240,241,264,265,282,284,297,298,363,364,521,522,648,649,658,661,699
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgN3V45WJCgw
Votes	363
Spin-Offs	5
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, 1739400255191
Updated	4 months ago, 1744828642732
Source Deleted	unknown