Viewing Program

Program Data

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

Title	Horse (Animated)
ID	5515516198305792
Created	4 years ago, 1636373755083
Updated	4 years ago, 1636373836649
Code	/ Horse (Animated) Gray Wolf, November 2021 My dad loves horses so decided to create this for him. This is so over complicated for what it is. I was just trying out some different techniques. It effectly has 12 frames of points for the head. neck, body and legs, and iterates through each of them creating the animation. I'm going to attempt to do it completely differently at some stage including skins for the horse, etc. @Subscribe Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 / 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(140, 109, 81), outline: color(5, 5, 5), from: color(102, 99, 98), to: color(13, 13, 13), text: color(250, 250, 250) }; 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 Horse = (function() { Horse = function() { this.timer = 0; this.frame = 0; this.frameNext = 0; this.frequency = 5; this.wireframe = [ { body: { //1 = head, 4 = other end :) x1: 86, y1: 249, x2: 126, y2: 223, x3: 222, y3: 273, x4: 393, y4: 278 }, leglf: { //left front leg x1: 222, y1: 273, x2: 189, y2: 321, x3: 140, y3: 335, x4: 115, y4: 390, x5: 117, y5: 402 }, legrf: { //right front leg x1: 222, y1: 273, x2: 198, y2: 319, x3: 173, y3: 364, x4: 145, y4: 412, x5: 134, y5: 429 }, leglb: { //left back leg x1: 343, y1: 278, x2: 364, y2: 326, x3: 400, y3: 370, x4: 394, y4: 425, x5: 380, y5: 440 }, legrb: { //right back leg x1: 343, y1: 278, x2: 391, y2: 310, x3: 440, y3: 334, x4: 483, y4: 384, x5: 499, y5: 387 } }, //frame 1 { body: { //1 = head, 4 = other end :) x1: 85, y1: 245, x2: 126, y2: 224, x3: 224, y3: 279, x4: 400, y4: 277 }, leglf: { //left front leg x1: 224, y1: 279, x2: 188, y2: 325, x3: 149, y3: 360, x4: 111, y4: 399, x5: 97, y5: 410 }, legrf: { //right front leg x1: 224, y1: 279, x2: 214, y2: 324, x3: 207, y3: 371, x4: 205, y4: 420, x5: 190, y5: 435 }, leglb: { //left back leg x1: 350, y1: 277, x2: 387, y2: 320, x3: 428, y3: 351, x4: 446, y4: 411, x5: 449, y5: 431 }, legrb: { //right back leg x1: 350, y1: 277, x2: 394, y2: 302, x3: 448, y3: 319, x4: 488, y4: 362, x5: 505, y5: 368 } }, //frame 2 { body: { //1 = head, 4 = other end :) x1: 82, y1: 242, x2: 124, y2: 220, x3: 224, y3: 279, x4: 407, y4: 266 }, leglf: { //left front leg x1: 224, y1: 279, x2: 200, y2: 320, x3: 176, y3: 366, x4: 144, y4: 412, x5: 130, y5: 424 }, legrf: { //right front leg x1: 224, y1: 279, x2: 239, y2: 321, x3: 253, y3: 364, x4: 267, y4: 415, x5: 249, y5: 430 }, leglb: { //left back leg x1: 357, y1: 266, x2: 393, y2: 307, x3: 439, y3: 325, x4: 470, y4: 381, x5: 484, y5: 396 }, legrb: { //right back leg x1: 357, y1: 266, x2: 400, y2: 292, x3: 447, y3: 299, x4: 470, y4: 349, x5: 486, y5: 359 } }, //frame 3 { body: { //1 = head, 4 = other end :) x1: 80, y1: 235, x2: 121, y2: 212, x3: 224, y3: 279, x4: 406, y4: 257 }, leglf: { //left front leg x1: 224, y1: 279, x2: 207, y2: 311, x3: 203, y3: 365, x4: 202, y4: 414, x5: 190, y5: 429 }, legrf: { //right front leg x1: 224, y1: 279, x2: 248, y2: 317, x3: 279, y3: 361, x4: 310, y4: 410, x5: 322, y5: 419 }, leglb: { //left back leg x1: 356, y1: 257, x2: 381, y2: 293, x3: 441, y3: 306, x4: 472, y4: 359, x5: 487, y5: 370 }, legrb: { //right back leg x1: 356, y1: 257, x2: 385, y2: 289, x3: 429, y3: 288, x4: 447, y4: 350, x5: 455, y5: 359 } }, //frame 4 { body: { //1 = head, 4 = other end :) x1: 88, y1: 232, x2: 130, y2: 210, x3: 224, y3: 279, x4: 408, y4: 253 }, leglf: { //left front leg x1: 224, y1: 279, x2: 224, y2: 316, x3: 237, y3: 366, x4: 256, y4: 416, x5: 247, y5: 429 }, legrf: { //right front leg x1: 224, y1: 279, x2: 242, y2: 321, x3: 270, y3: 363, x4: 318, y4: 389, x5: 327, y5: 388 }, leglb: { //left back leg x1: 358, y1: 253, x2: 376, y2: 290, x3: 432, y3: 291, x4: 448, y4: 350, x5: 461, y5: 359 }, legrb: { //right back leg x1: 358, y1: 253, x2: 380, y2: 280, x3: 412, y3: 284, x4: 413, y4: 350, x5: 419, y5: 357 } }, //frame 5 { body: { //1 = head, 4 = other end :) x1: 90, y1: 226, x2: 131, y2: 203, x3: 224, y3: 279, x4: 404, y4: 252 }, leglf: { //left front leg x1: 224, y1: 279, x2: 238, y2: 319, x3: 265, y3: 365, x4: 296, y4: 408, x5: 294, y5: 424 }, legrf: { //right front leg x1: 224, y1: 279, x2: 223, y2: 313, x3: 242, y3: 368, x4: 296, y4: 384, x5: 305, y5: 380 }, leglb: { //left back leg x1: 354, y1: 252, x2: 360, y2: 290, x3: 416, y3: 295, x4: 422, y4: 361, x5: 431, y5: 370 }, legrb: { //right back leg x1: 354, y1: 252, x2: 350, y2: 282, x3: 390, y3: 298, x4: 375, y4: 358, x5: 377, y5: 369 } }, //frame 6 { body: { //1 = head, 4 = other end :) x1: 99, y1: 221, x2: 140, y2: 196, x3: 224, y3: 279, x4: 400, y4: 249 }, leglf: { //left front leg x1: 224, y1: 279, x2: 238, y2: 313, x3: 249, y3: 361, x4: 297, y4: 396, x5: 307, y5: 397 }, legrf: { //right front leg x1: 224, y1: 279, x2: 215, y2: 310, x3: 206, y3: 354, x4: 248, y4: 386, x5: 263, y5: 384 }, leglb: { //left back leg x1: 350, y1: 249, x2: 353, y2: 287, x3: 405, y3: 300, x4: 384, y4: 353, x5: 389, y5: 370 }, legrb: { //right back leg x1: 350, y1: 249, x2: 347, y2: 283, x3: 375, y3: 300, x4: 343, y4: 353, x5: 338, y5: 370 } }, //frame 7 { body: { //1 = head, 4 = other end :) x1: 106, y1: 220, x2: 148, y2: 193, x3: 224, y3: 279, x4: 402, y4: 253 }, leglf: { //left front leg x1: 224, y1: 279, x2: 238, y2: 315, x3: 233, y3: 361, x4: 277, y4: 387, x5: 289, y5: 381 }, legrf: { //right front leg x1: 224, y1: 279, x2: 204, y2: 309, x3: 168, y3: 330, x4: 187, y4: 377, x5: 197, y5: 382 }, leglb: { //left back leg x1: 352, y1: 253, x2: 356, y2: 288, x3: 390, y3: 313, x4: 346, y4: 353, x5: 345, y5: 367 }, legrb: { //right back leg x1: 352, y1: 253, x2: 339, y2: 290, x3: 356, y3: 313, x4: 309, y4: 351, x5: 298, y5: 367 } }, //frame 8 { body: { //1 = head, 4 = other end :) x1: 109, y1: 231, x2: 150, y2: 206, x3: 224, y3: 279, x4: 394, y4: 270 }, leglf: { //left front leg x1: 224, y1: 279, x2: 226, y2: 317, x3: 202, y3: 362, x4: 241, y4: 387, x5: 251, y5: 382 }, legrf: { //right front leg x1: 224, y1: 279, x2: 202, y2: 314, x3: 155, y3: 320, x4: 148, y4: 373, x5: 155, y5: 382 }, leglb: { //left back leg x1: 344, y1: 270, x2: 333, y2: 294, x3: 363, y3: 339, x4: 307, y4: 364, x5: 301, y5: 377 }, legrb: { //right back leg x1: 344, y1: 270, x2: 333, y2: 316, x3: 330, y3: 359, x4: 287, y4: 400, x5: 278, y5: 414 } }, //frame 9 { body: { //1 = head, 4 = other end :) x1: 104, y1: 231, x2: 145, y2: 207, x3: 224, y3: 279, x4: 394, y4: 273 }, leglf: { //left front leg x1: 224, y1: 279, x2: 212, y2: 314, x3: 173, y3: 342, x4: 204, y4: 382, x5: 216, y5: 384 }, legrf: { //right front leg x1: 224, y1: 279, x2: 188, y2: 313, x3: 147, y3: 309, x4: 130, y4: 357, x5: 134, y5: 368 }, leglb: { //left back leg x1: 344, y1: 273, x2: 331, y2: 307, x3: 338, y3: 349, x4: 289, y4: 375, x5: 280, y5: 391 }, legrb: { //right back leg x1: 344, y1: 273, x2: 348, y2: 319, x3: 370, y3: 366, x4: 346, y4: 418, x5: 332, y5: 430 } }, //frame 10 { body: { //1 = head, 4 = other end :) x1: 103, y1: 231, x2: 142, y2: 206, x3: 224, y3: 273, x4: 393, y4: 275 }, leglf: { //left front leg x1: 224, y1: 273, x2: 203, y2: 314, x3: 160, y3: 326, x4: 171, y4: 383, x5: 180, y5: 390 }, legrf: { //right front leg x1: 224, y1: 273, x2: 189, y2: 309, x3: 144, y3: 316, x4: 115, y4: 357, x5: 114, y5: 371 }, leglb: { //left back leg x1: 343, y1: 275, x2: 329, y2: 311, x3: 323, y3: 364, x4: 290, y4: 415, x5: 273, y5: 427 }, legrb: { //right back leg x1: 343, y1: 275, x2: 366, y2: 316, x3: 410, y3: 351, x4: 407, y4: 415, x5: 393, y5: 427 } }, //frame 11 { body: { //1 = head, 4 = other end :) x1: 99, y1: 246, x2: 137, y2: 221, x3: 224, y3: 276, x4: 395, y4: 288 }, leglf: { //left front leg x1: 224, y1: 276, x2: 198, y2: 324, x3: 150, y3: 332, x4: 141, y4: 383, x5: 144, y5: 395 }, legrf: { //right front leg x1: 224, y1: 276, x2: 196, y2: 322, x3: 158, y3: 356, x4: 119, y4: 396, x5: 105, y5: 405 }, leglb: { //left back leg x1: 345, y1: 288, x2: 343, y2: 331, x3: 364, y3: 373, x4: 340, y4: 424, x5: 326, y5: 438 }, legrb: { //right back leg x1: 345, y1: 288, x2: 379, y2: 325, x3: 429, y3: 355, x4: 455, y4: 410, x5: 462, y5: 421 } } //frame 12 ]; this.skeleton = [ { head: [], neck: [], body: [] }, //frame 1 { head: [], neck: [], body: [] }, //frame 2 { head: [], neck: [], body: [] }, //frame 3 { head: [], neck: [], body: [] }, //frame 4 { head: [], neck: [], body: [] }, //frame 5 { head: [], neck: [], body: [] }, //frame 6 { head: [], neck: [], body: [] }, //frame 7 { head: [], neck: [], body: [] }, //frame 8 { head: [], neck: [], body: [] }, //frame 9 { head: [], neck: [], body: [] }, //frame 10 { head: [], neck: [], body: [] }, //frame 11 { head: [], neck: [], body: [] } //frame 12 ]; this.nodes = { head: [], neck: [], body: [], tail: [] }; this.init(); }; Horse.prototype = { init: function() { for(var i = 0; i < this.wireframe.length; i++) { var body = this.wireframe[i].body; //head points var len = 10; for(var j = 0; j <= len; j++) { this.skeleton[i].head.push({ x: bezierPoint(body.x1, body.x1, body.x2, body.x2, j/len), y: bezierPoint(body.y1, body.y1, body.y2, body.y2, j/len), //tx: bezierTangent(body.x1, body.x1, body.x2, body.x2, j/len), //ty: bezierTangent(body.y1, body.y1, body.y2, body.y2, j/len), angle: atan2( bezierTangent(body.y1, body.y1, body.y2, body.y2, j/len), bezierTangent(body.x1, body.x1, body.x2, body.x2, j/len) ) - 90 }); this.skeleton[i].head[j].cosine = cos(this.skeleton[i].head[j].angle); this.skeleton[i].head[j].sine = sin(this.skeleton[i].head[j].angle); } //neck points len = 15; for(var j = 0; j <= len; j++) { this.skeleton[i].neck.push({ x: bezierPoint(body.x2, body.x2, body.x3, body.x3, j/len), y: bezierPoint(body.y2, body.y2, body.y3, body.y3, j/len), //tx: bezierTangent(body.x2, body.x2, body.x3, body.x3, j/len), //ty: bezierTangent(body.y2, body.y2, body.y3, body.y3, j/len), angle: atan2( bezierTangent(body.y2, body.y2, body.y3, body.y3, j/len), bezierTangent(body.x2, body.x2, body.x3, body.x3, j/len) ) - 90 }); this.skeleton[i].neck[j].cosine = cos(this.skeleton[i].neck[j].angle); this.skeleton[i].neck[j].sine = sin(this.skeleton[i].neck[j].angle); } //body points len = 15; for(var j = 0; j <= len; j++) { this.skeleton[i].body.push({ x: bezierPoint(body.x3, body.x3, body.x4, body.x4, j/len), y: bezierPoint(body.y3, body.y3, body.y4, body.y4, j/len), //tx: bezierTangent(body.x3, body.x3, body.x4, body.x4, j/len), //ty: bezierTangent(body.y3, body.y3, body.y4, body.y4, j/len), angle: atan2( bezierTangent(body.y3, body.y3, body.y4, body.y4, j/len), bezierTangent(body.x3, body.x3, body.x4, body.x4, j/len) ) - 90 }); this.skeleton[i].body[j].cosine = cos(this.skeleton[i].body[j].angle); this.skeleton[i].body[j].sine = sin(this.skeleton[i].body[j].angle); } } //add tail coords for(var i = 0; i < 10; i++) { this.nodes.tail.push({ x1: 0, y1: random(-5, 5), x2: random(37, 43), y2:-random(5, 45), x3: random(70, 90), y3: random(5, 70), x4: random(105, 115), y4: random(0, 20), yoff1: random(10, 20), yoff2: random(-50, -30), yoff3: random(30, 50), speed: random(0.8, 1.2) }); } }, update: function() { if(this.timer++ % this.frequency === 0) { this.frame = (++this.frame) % this.wireframe.length; } }, draw: function() { noFill(); stroke(84, 84, 84, 100); strokeWeight(4); //wireframes //body beginShape(); vertex(this.wireframe[this.frame].body.x1, this.wireframe[this.frame].body.y1); vertex(this.wireframe[this.frame].body.x2, this.wireframe[this.frame].body.y2); vertex(this.wireframe[this.frame].body.x3, this.wireframe[this.frame].body.y3); vertex(this.wireframe[this.frame].body.x4, this.wireframe[this.frame].body.y4); endShape(); stroke(71, 71, 71); strokeWeight(3); //left front leg beginShape(); vertex(this.wireframe[this.frame].leglf.x1, this.wireframe[this.frame].leglf.y1); vertex(this.wireframe[this.frame].leglf.x2, this.wireframe[this.frame].leglf.y2); vertex(this.wireframe[this.frame].leglf.x3, this.wireframe[this.frame].leglf.y3); vertex(this.wireframe[this.frame].leglf.x4, this.wireframe[this.frame].leglf.y4); vertex(this.wireframe[this.frame].leglf.x5, this.wireframe[this.frame].leglf.y5); endShape(); //right front leg beginShape(); vertex(this.wireframe[this.frame].legrf.x1, this.wireframe[this.frame].legrf.y1); vertex(this.wireframe[this.frame].legrf.x2, this.wireframe[this.frame].legrf.y2); vertex(this.wireframe[this.frame].legrf.x3, this.wireframe[this.frame].legrf.y3); vertex(this.wireframe[this.frame].legrf.x4, this.wireframe[this.frame].legrf.y4); vertex(this.wireframe[this.frame].legrf.x5, this.wireframe[this.frame].legrf.y5); endShape(); //left back leg beginShape(); vertex(this.wireframe[this.frame].leglb.x1, this.wireframe[this.frame].leglb.y1); vertex(this.wireframe[this.frame].leglb.x2, this.wireframe[this.frame].leglb.y2); vertex(this.wireframe[this.frame].leglb.x3, this.wireframe[this.frame].leglb.y3); vertex(this.wireframe[this.frame].leglb.x4, this.wireframe[this.frame].leglb.y4); vertex(this.wireframe[this.frame].leglb.x5, this.wireframe[this.frame].leglb.y5); endShape(); //right back leg beginShape(); vertex(this.wireframe[this.frame].legrb.x1, this.wireframe[this.frame].legrb.y1); vertex(this.wireframe[this.frame].legrb.x2, this.wireframe[this.frame].legrb.y2); vertex(this.wireframe[this.frame].legrb.x3, this.wireframe[this.frame].legrb.y3); vertex(this.wireframe[this.frame].legrb.x4, this.wireframe[this.frame].legrb.y4); vertex(this.wireframe[this.frame].legrb.x5, this.wireframe[this.frame].legrb.y5); endShape(); //skeleton stroke(71, 71, 71); strokeWeight(3); var skel; skel = this.skeleton[this.frame].head[1]; line(skel.x - skel.cosine * 10, skel.y - skel.sine * 18, skel.x + skel.cosine * 16, skel.y + skel.sine * 0); skel = this.skeleton[this.frame].head[2]; line(skel.x - skel.cosine * 13, skel.y - skel.sine * 18, skel.x + skel.cosine * 16, skel.y + skel.sine * 2); skel = this.skeleton[this.frame].head[3]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 18, skel.x + skel.cosine * 16, skel.y + skel.sine * 5); skel = this.skeleton[this.frame].head[4]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 19, skel.x + skel.cosine * 15, skel.y + skel.sine * 10); skel = this.skeleton[this.frame].head[5]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 19, skel.x + skel.cosine * 10, skel.y + skel.sine * 14); skel = this.skeleton[this.frame].head[6]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 21, skel.x + skel.cosine * 5, skel.y + skel.sine * 23); skel = this.skeleton[this.frame].head[7]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 23, skel.x + skel.cosine * 0, skel.y + skel.sine * 25); skel = this.skeleton[this.frame].neck[3]; line(skel.x - skel.cosine * 10, skel.y - skel.sine * 21, skel.x + skel.cosine * -15, skel.y + skel.sine * 30); skel = this.skeleton[this.frame].neck[4]; line(skel.x - skel.cosine * 10, skel.y - skel.sine * 15, skel.x + skel.cosine * -10, skel.y + skel.sine * 36); skel = this.skeleton[this.frame].neck[5]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 9, skel.x + skel.cosine * -5, skel.y + skel.sine * 39); skel = this.skeleton[this.frame].neck[6]; line(skel.x - skel.cosine * 25, skel.y - skel.sine * 3, skel.x + skel.cosine * 5, skel.y + skel.sine * 40); skel = this.skeleton[this.frame].neck[7]; line(skel.x - skel.cosine * 28, skel.y - skel.sine * 3, skel.x + skel.cosine * 17, skel.y + skel.sine * 41); skel = this.skeleton[this.frame].neck[8]; line(skel.x - skel.cosine * 35, skel.y - skel.sine * 5, skel.x + skel.cosine * 30, skel.y + skel.sine * 43); skel = this.skeleton[this.frame].neck[9]; line(skel.x - skel.cosine * 30, skel.y - skel.sine * 12, skel.x + skel.cosine * 35, skel.y + skel.sine * 43); skel = this.skeleton[this.frame].neck[10]; line(skel.x - skel.cosine * 30, skel.y - skel.sine * 25, skel.x + skel.cosine * 35, skel.y + skel.sine * 45); skel = this.skeleton[this.frame].neck[11]; line(skel.x - skel.cosine * 25, skel.y - skel.sine * 45, skel.x + skel.cosine * 35, skel.y + skel.sine * 45); skel = this.skeleton[this.frame].body[2]; line(skel.x - (skel.cosine + 1.9) * 15, skel.y - skel.sine * 43, skel.x + (skel.cosine + 0.4) * 15, skel.y + skel.sine * 42); skel = this.skeleton[this.frame].body[3]; line(skel.x - (skel.cosine + 1.2) * 15, skel.y - skel.sine * 51, skel.x + (skel.cosine + 0.3) * 15, skel.y + skel.sine * 40); skel = this.skeleton[this.frame].body[4]; line(skel.x - (skel.cosine + 1) * 15, skel.y - skel.sine * 55, skel.x + skel.cosine * 15, skel.y + skel.sine * 39); skel = this.skeleton[this.frame].body[5]; line(skel.x - (skel.cosine + 0.5) * 15, skel.y - skel.sine * 56, skel.x + skel.cosine * 15, skel.y + skel.sine * 36); skel = this.skeleton[this.frame].body[6]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 55, skel.x + skel.cosine * 15, skel.y + skel.sine * 34); skel = this.skeleton[this.frame].body[7]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 51, skel.x + skel.cosine * 15, skel.y + skel.sine * 33); skel = this.skeleton[this.frame].body[8]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 48, skel.x + skel.cosine * 15, skel.y + skel.sine * 35); skel = this.skeleton[this.frame].body[9]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 48, skel.x + skel.cosine * 15, skel.y + skel.sine * 36); skel = this.skeleton[this.frame].body[10]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 47, skel.x + skel.cosine * 15, skel.y + skel.sine * 39); skel = this.skeleton[this.frame].body[11]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 40, skel.x + skel.cosine * 15, skel.y + skel.sine * 36); skel = this.skeleton[this.frame].body[12]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 35, skel.x + skel.cosine * 15, skel.y + skel.sine * 31); skel = this.skeleton[this.frame].body[13]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 25, skel.x + skel.cosine * 15, skel.y + skel.sine * 24); skel = this.skeleton[this.frame].body[14]; line(skel.x - skel.cosine * 15, skel.y - skel.sine * 17, skel.x + skel.cosine * 15, skel.y + skel.sine * 16); //tail stroke(71, 71, 71); strokeWeight(2); pushMatrix(); translate(this.skeleton[this.frame].body[15].x, this.skeleton[this.frame].body[15].y); var sine = sin(this.timer * (60 / (this.frequency * this.wireframe.length)) * 6); var cosine = cos(this.timer * (60 / (this.frequency * this.wireframe.length)) * 6); for(var i = 0; i < this.nodes.tail.length; i++) { var tail = this.nodes.tail[i]; bezier( tail.x1, tail.y1, tail.x2, tail.y2 + cosine * tail.yoff1, tail.x3, tail.y3 + sine * tail.yoff2, tail.x4, tail.y4 + cosine * tail.yoff3); } popMatrix(); noStroke(); fill(252, 96, 111, 150); //head for(var i = 0; i < this.skeleton[this.frame].head.length; i++) { var skel = this.skeleton[this.frame].head[i]; ellipse(skel.x, skel.y, 5, 5); } //neck for(var i = 1; i < this.skeleton[this.frame].neck.length - 1; i++) { var skel = this.skeleton[this.frame].neck[i]; ellipse(skel.x, skel.y, 5, 5); } //body for(var i = 2; i < this.skeleton[this.frame].body.length - 1; i++) { var skel = this.skeleton[this.frame].body[i]; ellipse(skel.x, skel.y, 5, 5); } }, run: function() { this.draw(); this.update(); } }; return Horse; })(); var App = (function() { App = function() { this.scene = "load"; this.horse = new Horse(); this.speed = 0; this.coords = { hillsBack: { x1: 0, x2: -600 }, hillsFront: { x1: 0, x2: -600 }, gate: { x1: 0, x2: -600 } }; this.clouds = []; this.logo = new Logo({}); this.images = undefined; this.imageIndex = 0; this.loaded = false; this.setup(); }; App.prototype = { setup: function() { this.speed = (60 / (this.horse.frequency * this.horse.wireframe.length)) * 5; this.images = { hillsBack: function() { background(0, 0, 0, 0); noStroke(); fill(64, 161, 119); beginShape(); vertex(0, 280); bezierVertex(32, 278, 58, 286, 86, 300); bezierVertex(123, 312, 166, 311, 205, 289); bezierVertex(232, 270, 269, 245, 308, 253); bezierVertex(333, 264, 366, 263, 401, 244); bezierVertex(432, 225, 453, 219, 486, 232); bezierVertex(510, 246, 528, 263, 551, 277); bezierVertex(573, 287, 588, 283, 600, 281); vertex(600, 400); vertex(0, 400); endShape(CLOSE); return get(0, 0, width, 400); }, hillsFront: function() { background(0, 0, 0, 0); noStroke(); fill(84, 186, 142); beginShape(); vertex(0, 330); bezierVertex(36, 322, 82, 287, 133, 280); bezierVertex(170, 279, 197, 287, 218, 295); bezierVertex(248, 302, 280, 293, 308, 275); bezierVertex(343, 260, 380, 264, 410, 277); bezierVertex(433, 292, 462, 302, 491, 302); bezierVertex(521, 306, 543, 318, 560, 328); bezierVertex(575, 333, 590, 331, 600, 330); vertex(600, 400); vertex(0, 400); endShape(CLOSE); return get(0, 0, width, 400); }, gate: function() { background(0, 0, 0, 0); noStroke(); fill(250); rect(0, 320, width, 10); rect(0, 390, width, 10); for(var i = 0; i < 600; i+= 60) { rect(i, 320, 10, 80); } return get(0, 0, width, 400); }, 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); } }; //add clouds for(var i = 0; i < 5; i++) { this.clouds.push({ x: random(i * 120, i * 420 + 50), y: random(0, 250), scale: random(0.7, 1), type: random() < 0.5 ? 1 : 2, speed: random(this.speed * 0.2, this.speed * 0.4) }); } }, load: function (s) { var obj = Object.keys(this.images); this.images[obj[this.imageIndex]] = this.images[obj[this.imageIndex]](); this.imageIndex++; background(140, 109, 81); pushStyle(); fill(250, 250, 250); textAlign(CENTER, CENTER); textSize(40); text('LOADING', 300, 300); noFill(); stroke(250, 250, 250); strokeWeight(15); 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; } }, runClouds: function() { for(var i = 0; i < this.clouds.length; i++) { var cloud = this.clouds[i]; var 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(0, 250); cloud.scale = random(0.7, 1); cloud.type = random() < 0.5 ? 1 : 2; cloud.speed = random(this.speed * 0.2, this.speed * 0.4); } } }, runScene: function() { this.runClouds(); image(this.images.hillsBack, this.coords.hillsBack.x1, 0); image(this.images.hillsBack, this.coords.hillsBack.x2, 0); image(this.images.hillsFront, this.coords.hillsFront.x1, 0); image(this.images.hillsFront, this.coords.hillsFront.x2, 0); image(this.images.gate, this.coords.gate.x1, 0); image(this.images.gate, this.coords.gate.x2, 0); this.coords.hillsBack.x1+= this.speed * 0.5; this.coords.hillsBack.x2+= this.speed * 0.5; this.coords.hillsFront.x1+= this.speed * 0.7; this.coords.hillsFront.x2+= this.speed * 0.7; this.coords.gate.x1+= this.speed; this.coords.gate.x2+= this.speed; if(this.coords.hillsBack.x1 >= 600) { this.coords.hillsBack.x1 = this.coords.hillsBack.x2 - 600; } if(this.coords.hillsBack.x2 >= 600) { this.coords.hillsBack.x2 = this.coords.hillsBack.x1 - 600; } if(this.coords.hillsFront.x1 >= 600) { this.coords.hillsFront.x1 = this.coords.hillsFront.x2 - 600; } if(this.coords.hillsFront.x2 >= 600) { this.coords.hillsFront.x2 = this.coords.hillsFront.x1 - 600; } if(this.coords.gate.x1 >= 600) { this.coords.gate.x1 = this.coords.gate.x2 - 600; } if(this.coords.gate.x2 >= 600) { this.coords.gate.x2 = this.coords.gate.x1 - 600; } }, draw: function() { background(200, 235, 250); noStroke(); fill(140, 109, 81); rect(0, 400, width, 200); this.runScene(); fill(40, 20); ellipse(290, 455, 330 + cos(this.horse.timer * this.horse.wireframe.length / 2) * 20, 30); pushMatrix(); translate(10, 20); this.horse.run(); popMatrix(); }, run: function() { switch(this.scene) { case "load": this.load("draw"); break; case "draw": if(this.logo.done) { this.draw(); } this.logo.draw(); break; } } }; return App; })(); var app = new App(); draw = function() { app.run(); };
Folds	19,324,326,1395,1397,1652
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIP-0ormCQw
Votes	176
Spin-Offs	11
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, 1739390905944
Updated	10 months ago, 1739390915482
Source Deleted	unknown