Viewing Program

Program Data

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

Title	Navigation (Animated)
ID	4819994907033600
Created	4 years ago, 1633955696604
Updated	4 years ago, 1633955890340
Code	/ Navigating the Stars (Animation) Interstellar Positioning System (IPS) Gray Wolf, October 2021 Move your mouse over the screen to move the panels. Hoping this meets the criteria for the map contest since GPS was mentioned. For the Map Making contest... - I have been programming for 80+ months. - I have completed all of Khan Academy's programming courses. - I would prefer to be placed in the Advanced bracket @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://codepen.io/shunyadezain/pen/GRNEyZW / smooth(); var app; //my splash screen 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(52, 75, 105), outline: color(5, 5, 5), from: color(102, 99, 98), to: color(13, 13, 13), text: color(214, 214, 214) }; 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; })(); //function I made a while ago to draw rounded shapes var RoundedShape = (function() { RoundedShape = function() {}; RoundedShape.getPoints = function(x1, y1, x2, y2) { var h = dist(x1, y1, x2, y2); var mag = { x: (x2 - x1) / h, y: (y2 - y1) / h }; return { x: x1, y: y1, h: h, mag: mag }; }; RoundedShape.draw = function(_coords, _curves) { var coords = []; for(var i = 0; i < _coords.length; i+= 2) { if(i === _coords.length - 2) { coords.push(this.getPoints(_coords[i], _coords[i+1], _coords[0], _coords[1])); } else { coords.push(this.getPoints(_coords[i], _coords[i+1], _coords[i+2], _coords[i+3])); } } var curves, nodes; if(_curves.length === 1) { curves = new Array((_coords.length/2)).fill(_curves[0]); nodes = new Array((_coords.length/2)).fill(_curves[0] * 0.5); } else { curves = new Array((_coords.length/2)).fill(0); nodes = new Array((_coords.length/2)).fill(0); for(var i = 0; i < _curves.length; i++) { curves[i] = _curves[i]; nodes[i] = _curves[i] * 0.5; } } beginShape(); vertex(coords[0].x + coords[0].mag.x * (coords[0].h * curves[0]), coords[0].y + coords[0].mag.y * (coords[0].h * curves[0])); for(var i = 0; i < coords.length; i++) { var index = (i === coords.length-1) ? 0 : i+1; vertex(coords[i].x + coords[i].mag.x * (coords[i].h * (1-curves[index])), coords[i].y + coords[i].mag.y * (coords[i].h * (1-curves[index]))); bezierVertex( coords[i].x + coords[i].mag.x * (coords[i].h * (1-nodes[index])), coords[i].y + coords[i].mag.y * (coords[i].h * (1-nodes[index])), coords[index].x + coords[index].mag.x * (coords[index].h * nodes[index]), coords[index].y + coords[index].mag.y * (coords[index].h * nodes[index]), coords[index].x + coords[index].mag.x * (coords[index].h * curves[index]), coords[index].y + coords[index].mag.y * (coords[index].h * curves[index]) ); } endShape(); }; return RoundedShape; })(); //used for the hovering panels mouseOut = function() { app.move = false; }; mouseOver = function() { app.move = true; }; //main app var App = (function() { App = function() { this.timer = 0; this.move = false; this.offset = { x: 0, y: 0 }; this.colors = { background: color(52, 75, 105), neon: color(5, 210, 210), gray: color(50, 75, 105), pink: color(247, 113, 133), black: color(20, 25, 30), white: color(255, 255, 255) }; this.points = []; this.pulse = { diameter: 0, opacity: 0 }; this.planetOrb = { x: 0, y: 0 }; this.arcsFilled = { a: { value: 0, speed: 0 }, b: { value: 80, speed: 80 } }; this.arcsOutline = { a: { value1: 0, speed1: 0, value2: 0, speed2: 0 }, b: { value1: 0, speed1: 0, value2: 0, speed2: 0 }, c: { value1: 0, speed1: 0, value2: 0, speed2: 0 } }; this.graphs = [ { value: [325, 340, 330, 340, 335, 340, 340, 340, 345, 340, 350, 340, 355, 340, 360, 340, 365, 340], to: [325, 340, 330, 340, 335, 340, 340, 340, 345, 340, 350, 340, 355, 340, 360, 340, 365, 340] }, { value: [375, 340, 380, 340, 385, 340, 390, 340, 395, 340, 400, 340, 405, 340, 410, 340, 415, 340], to: [375, 340, 380, 340, 385, 340, 390, 340, 395, 340, 400, 340, 405, 340, 410, 340, 415, 340] } ]; this.lines = [ { opacity: 0, delay: 90, dir: -1 }, { opacity: 0, delay: 60, dir: -1 }, { opacity: 0, delay: 30, dir: -1 }, { opacity: 0, delay: 0, dir: -1 } ]; this.bars = [ { value: 0, target: 0, points: [467, 474, 454, 474, 477, 410, 490, 410], w: 23, h: 64, color: this.colors.neon }, { value: 0, target: 0, points: [467 + 21, 474, 454 + 21, 474, 477 + 21, 410, 490 + 21, 410], w: 23, h: 64, color: this.colors.pink }, { value: 0, target: 0, points: [467 + 42, 474, 454 + 42, 474, 477 + 42, 410, 490 + 42, 410], w: 23, h: 64, color: this.colors.neon } ]; this.dots = []; this.droid = { xoff: 80, index: 0, value: 80, timer: 0, anim: [ { xoff: 80, delay: 180, }, { xoff: 0, delay: 115 }, { xoff: 160, delay: 120 } ], points: [385, 320, 431, 322, 463, 356, 457, 416, 448, 478, 421, 514, 387, 518, 349, 518, 316, 463, 312, 410, 308, 361, 339, 320, 385, 320] }; this.plug = { x: 332, y: 376, xoff: 25, loff: 0, anim: [ { xoff: 25, loff: 0 }, { xoff: 0, loff: -3 }, { xoff: 55, loff: 3 } ] }; this.eye = { x: 442, y: 375, w: 14, h: 26, xoff: 0, opacity: 0, show: true, delay: 10, opacities: [0, 0, 0, 0, 0, 0, 255, 255, 255, 0, 255, 255, 255], anim: [ { xoff: 25 }, { xoff: 0 }, { xoff: 114 } ] }; this.face = [ { //right visible: false, visibles: [false, true, true], index: 0, indexes: [1, 0, 1], p: [454, 375, 454, 375, 454, 375, 454, 375, 454, 375, 454, 375, 454, 375], arr: [ [444, 350, 456, 366, 458, 387, 458, 401, 401, 392, 402, 362, 444, 350], [454, 375, 454, 375, 454, 375, 454, 375, 454, 375, 454, 375, 454, 375] ] }, { //left visible: false, visibles: [true, false, true], index: 0, indexes: [1, 1, 0], p: [315, 375, 315, 375, 315, 375, 315, 375, 315, 375, 315, 375, 315, 375], arr: [ [326, 350, 316, 365, 310, 387, 312, 401, 372, 392, 369, 362, 326, 350], [315, 375, 315, 375, 315, 375, 315, 375, 315, 375, 315, 375, 315, 375] ] } ]; this.arms = { index: 0, timer: 0, delay: [30, 40, 45, 45, 20, 30, 30, 30, 25, 30, 30, 30, 30], left: { x: 375, y: 425, xoff: 0, yoff: 0, angle: 0, off: [ {x: 0, y: 0}, {x: -40, y: -20}, {x: -40, y: -15}, {x: -40, y: -20}, {x: 0, y: 0}, {x: 50, y: 0}, {x: 50, y: 0}, {x: 50, y: 0}, {x: 50, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0} ], angles: [0, 40, 50, 40, 0, 0, 0, 0, 0, 10, -10, 10, -10] }, right: { x: 397, y: 425, xoff: -50, yoff: 0, angle: 0, off: [ {x: -50, y: 0}, {x: -50, y: 0}, {x: -50, y: 0}, {x: -50, y: 0}, {x: -50, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: -50, y: 0}, {x: -50, y: 0}, {x: -50, y: 0}, {x: -50, y: 0} ], angles: [0, 0, 0, 0, 0, 0, 20, -20, 0, 0, 0, 0, 0] } }; this.stars = []; this.panels = {}; this.logo = new Logo({}); this.setup(); }; App.prototype = { setup: function() { for(var i = 0; i < 4; i++) { for(var j = 0; j < 4; j++) { this.dots.push({ x: 412 - j * 5.5 + i * 14, y: 416 + j * 16, diameter: 11, opacity: ~~random(50, 200), dir: random() < 0.5 ? -1 : 1, speed: ~~random(3, 8), color: random() < 0.5 ? this.colors.neon : this.colors.pink }); } } //left panel background(0, 0); strokeWeight(4); stroke(this.colors.neon); fill(40, 150); RoundedShape.draw( [29, 394, 183, 394, 218, 488, 64, 488], [0.1] ); this.panels.left = get(28, 391, 192, 102); //right panel background(0, 0); strokeWeight(4); stroke(this.colors.neon); fill(40, 150); RoundedShape.draw( [400, 394, 554, 394, 520, 488, 366, 488], [0.1] ); this.panels.right = get(366, 391, 192, 102); }, updateGraphs: function(graph, clr) { if(random() < 0.05) { for(var i = 3; i < graph.to.length - 1; i+= 2) { graph.to[i] = ~~random(318, 337); } } for(var i = 0; i < graph.value.length; i++) { graph.value[i] = lerp(graph.value[i], graph.to[i], 0.05); } noStroke(); fill(clr); beginShape(); vertex(graph.value[0], graph.value[1]); for(var i = 0; i < graph.value.length; i+= 2) { curveVertex(graph.value[i], graph.value[i+1]); } curveVertex(graph.value[graph.value.length-2], graph.value[graph.value.length-1]); endShape(); }, space: function() { //stars if(this.stars.length < 150) { for(var i = 0; i < 3; i++) { var vx = random(-7, 7); var vy; if(vx > -2 && vx < 2) { vy = random() < 0.5 ? random(-7, -2) : random(2, 7); } else { vy = random(-7, 7); } this.stars.push({ x: 300, y: 288, diameter: 1, growth: random(0.02, 0.1), opacity: 0, vx: vx, vy: vy }); } } noStroke(); for(var i = this.stars.length - 1; i >= 0; i--) { var star = this.stars[i]; star.x+= star.vx; star.y+= star.vy; star.opacity+= 2; star.vx=1.01; star.vy=1.01; star.diameter+= star.growth; fill(255, 255, 255, star.opacity); ellipse(star.x, star.y, star.diameter, star.diameter); if(star.x < 0 \|\| star.x > width \|\| star.y < 50 \|\| star.y > height - 50) { this.stars.splice(i, 1); } } //window noFill(); stroke(this.colors.background); strokeWeight(200); ellipse(300, 288, 786, 576); strokeWeight(1); }, mainPanel: function() { //main panel strokeWeight(4); stroke(this.colors.neon); fill(40, 150); rect(161, 188, 277, 182, 20); //planet pushMatrix(); translate(235, 270); rotate(sin(this.timer * 3) * 10); noStroke(); fill(this.colors.gray); ellipse(0, 0, 60, 60); //ring around planet noFill(); stroke(this.colors.neon); ellipse(0, 0, 105, 25); //orb this.planetOrb.x = cos(this.timer) * 105 / 2; this.planetOrb.y = sin(this.timer) * 25 / 2; noStroke(); fill(this.colors.pink); ellipse(this.planetOrb.x, this.planetOrb.y, 10, 10); //arc noStroke(); fill(this.colors.gray); arc(0, 0, 60, 60, 180, 360); popMatrix(); //pulsing circle top left noStroke(); fill(this.colors.gray); ellipse(186, 211, 18, 18); this.pulse.diameter = constrain(this.pulse.diameter + 0.2, 0, 18) % 18; this.pulse.opacity = map(this.pulse.diameter, 0, 18, 255, 0); fill(this.colors.neon, this.pulse.opacity); ellipse(186, 211, this.pulse.diameter, this.pulse.diameter); //lines top left noFill(); stroke(this.colors.gray); strokeWeight(4); line(206, 206, 280, 206); line(206, 214, 239, 214); //circle/arcs top right noFill(); stroke(this.colors.gray); strokeWeight(5); ellipse(333, 230, 24, 24); ellipse(370, 230, 24, 24); ellipse(407, 230, 24, 24); //arcs if(random() < 0.05) { this.arcsOutline.a.speed1 = random(-2, 2); this.arcsOutline.a.speed2 = random(-2, 2); } if(random() < 0.05) { this.arcsOutline.b.speed1 = random(-2, 2); this.arcsOutline.b.speed2 = random(-2, 2); } if(random() < 0.05) { this.arcsOutline.c.speed1 = random(-2, 2); this.arcsOutline.c.speed2 = random(-2, 2); } this.arcsOutline.a.value1+= this.arcsOutline.a.speed1; this.arcsOutline.a.value2 = constrain(this.arcsOutline.a.value2 + this.arcsOutline.a.speed2, this.arcsOutline.a.value1, this.arcsOutline.a.value1 + 360); this.arcsOutline.b.value1+= this.arcsOutline.b.speed1; this.arcsOutline.b.value2 = constrain(this.arcsOutline.b.value2 + this.arcsOutline.b.speed2, this.arcsOutline.b.value1, this.arcsOutline.b.value1 + 360); this.arcsOutline.c.value1+= this.arcsOutline.c.speed1; this.arcsOutline.c.value2 = constrain(this.arcsOutline.c.value2 + this.arcsOutline.c.speed2, this.arcsOutline.c.value1, this.arcsOutline.c.value1 + 360); strokeCap(SQUARE); stroke(this.colors.neon); arc(333, 230, 24, 24, this.arcsOutline.a.value1, this.arcsOutline.a.value2); stroke(this.colors.pink); arc(370, 230, 24, 24, this.arcsOutline.b.value1, this.arcsOutline.b.value2); stroke(this.colors.neon); arc(407, 230, 24, 24, this.arcsOutline.c.value1, this.arcsOutline.c.value2); //circles/arcs bottom left noStroke(); fill(this.colors.gray); ellipse(199, 337, 38, 38); ellipse(245, 337, 38, 38); //arcs if(random() < 0.05) { this.arcsFilled.a.speed = random(4); } if(random() < 0.05) { this.arcsFilled.b.speed = random(4); } this.arcsFilled.a.value+= this.arcsFilled.a.speed; this.arcsFilled.b.value+= this.arcsFilled.b.speed; fill(this.colors.pink); arc(199, 337, 38, 38, this.arcsFilled.a.value, this.arcsFilled.a.value + 80); fill(this.colors.neon); arc(245, 337, 38, 38, this.arcsFilled.b.value, this.arcsFilled.b.value + 80); //circles bottom center noFill(); stroke(this.colors.gray); strokeWeight(2); ellipse(290, 337, 38, 38); ellipse(290, 337, 30, 30); ellipse(290, 337, 22, 22); //center pulsing circle noStroke(); fill(this.colors.neon); ellipse(290, 337, 8 + sin(this.timer * 5) * 1, 8 + sin(this.timer * 5) * 1); //rotating circles ellipse(290 + cos(this.timer * 0.7) * 19, 337 + sin(this.timer * 0.7) * 19, 5, 5); ellipse(290 + cos(this.timer) * 15, 337 + sin(this.timer) * 15, 5, 5); fill(this.colors.pink); ellipse(290 + cos(this.timer * 0.8) * 11, 337 + sin(this.timer * 0.8) * 11, 5, 5); //wave this.points.push({ x: 415, y: 280 + sin(this.timer * 3) * 17 }); stroke(this.colors.neon); strokeWeight(1); strokeCap(SQUARE); for(var i = this.points.length - 1; i >= 0; i--) { var point = this.points[i]; point.x-= 1; line(point.x, point.y, point.x, point.y + 4); if(point.x < 330) { this.points.splice(i, 1); } } //graphs this.updateGraphs(this.graphs[0], this.colors.neon); this.updateGraphs(this.graphs[1], this.colors.pink); }, leftPanel: function() { //left panel image(this.panels.left, 28, 391, 192, 102); //lines, play buttons strokeCap(ROUND); for(var i = 0; i < 4; i++) { noStroke(); fill(this.colors.gray); ellipse(117 + i * 6, 417 + i * 17, 12, 12); fill(this.colors.neon); triangle( 115 + i * 6, 414 + i * 17, 121 + i * 6, 416 + i * 17, 116 + i * 6, 420 + i * 17); strokeWeight(4); stroke(this.colors.gray); line(133 + i * 6, 417 + i * 17, 176 + i * 6, 417 + i * 17); stroke(this.colors.neon, this.lines[i].opacity); line(133 + i * 6, 417 + i * 17, 176 + i * 6, 417 + i * 17); } //lines for(var i = 0; i < this.lines.length; i++) { var l = this.lines[i]; if(++l.delay % 120 === 0) { l.dir= -1; } l.opacity = constrain(l.opacity + 10 l.dir, 0, 255); } //box noStroke(); fill(this.colors.gray); RoundedShape.draw( [51, 413, 97, 413, 113, 456, 68, 456], [0.1] ); //circle (outer) in box fill(this.colors.black, 150); beginShape(); vertex(75, 418); bezierVertex(99, 417, 109, 452, 91, 452); bezierVertex(67, 451, 60, 421, 75, 418); endShape(CLOSE); //circle (inner) in box noFill(); stroke(this.colors.neon); strokeWeight(2); beginShape(); vertex(80, 430); bezierVertex(89, 429, 90, 441, 86, 440); bezierVertex(80, 440, 77, 432, 80, 430); endShape(CLOSE); //square on side noStroke(); fill(this.colors.neon); beginShape(); vertex(90, 428); vertex(103, 428); vertex(107, 441); vertex(94, 441); endShape(CLOSE); //back/pause/forward stroke(this.colors.neon); strokeWeight(3); line(72, 465, 76, 477); line(90, 465, 94, 477); line(98, 465, 102, 477); line(116, 465, 120, 477); noStroke(); fill(this.colors.neon); triangle(79, 464, 75, 471, 83, 477); triangle(108, 466, 116, 471, 112, 477); }, rightPanel: function() { //right panel image(this.panels.right, 366, 391, 192, 102); //dots noStroke(); for(var i = 0; i < this.dots.length; i++) { var dot = this.dots[i]; fill(this.colors.gray); ellipse(dot.x, dot.y, dot.diameter, dot.diameter); fill(this.colors.neon, dot.opacity); // fill(dot.color, dot.opacity); ellipse(dot.x, dot.y, dot.diameter, dot.diameter); dot.opacity = constrain(dot.opacity + dot.speed * dot.dir, 0, 255); if(dot.opacity === 0 \|\| dot.opacity === 255) { dot.dir= -1; } } //bars noStroke(); for(var i = 0; i < this.bars.length; i++) { var bar = this.bars[i]; fill(this.colors.gray); beginShape(); vertex(bar.points[0], bar.points[1]); vertex(bar.points[2], bar.points[3]); vertex(bar.points[4], bar.points[5]); vertex(bar.points[6], bar.points[7]); endShape(); if(random() < 0.05) { bar.target = random(0, bar.h); } bar.value = lerp(bar.value, bar.target, 0.03); var wd = bar.w bar.value / bar.h; fill(bar.color); beginShape(); vertex(bar.points[0], bar.points[1]); vertex(bar.points[2], bar.points[3]); vertex(bar.points[4] - wd, bar.points[5] + bar.value); vertex(bar.points[6] - wd, bar.points[7] + bar.value); endShape(); } }, drawDroid: function() { //droid body if(++this.droid.timer % this.droid.anim[this.droid.index].delay === 0) { this.droid.index = (this.droid.index + 1) % 3; this.droid.timer = 0; } this.droid.value = lerp(this.droid.value, this.droid.anim[this.droid.index].xoff, 0.1); noStroke(); fill(this.colors.white); beginShape(); vertex(this.droid.points[0] - this.droid.value, this.droid.points[1]); for(var i = 2; i < this.droid.points.length; i+= 6) { bezierVertex( this.droid.points[i] - this.droid.value, this.droid.points[i+1], this.droid.points[i+2] - this.droid.value, this.droid.points[i+3], this.droid.points[i+4] - this.droid.value, this.droid.points[i+5]); } endShape(CLOSE); //plug this.plug.xoff = lerp(this.plug.xoff, this.plug.anim[this.droid.index].xoff, 0.1); this.plug.loff = lerp(this.plug.loff, this.plug.anim[this.droid.index].loff, 0.1); var plugScale = this.plug.xoff >= 25 ? map(this.plug.xoff, 55, 25, 0.6, 1) : map(this.plug.xoff, 25, 0, 1, 0.6); pushMatrix(); translate(this.plug.x - this.plug.xoff, this.plug.y); scale(plugScale, 1); fill(this.colors.gray); ellipse(0, 0, 25, 28); stroke(this.colors.white); strokeWeight(3); line(-5 + this.plug.loff, -5, -5 + this.plug.loff, 5); line(5 + this.plug.loff, -5, 5 + this.plug.loff, 5); popMatrix(); //droid arms fill(this.colors.white); if(++this.arms.timer % this.arms.delay[this.arms.index] === 0) { this.arms.index = (this.arms.index + 1) % this.arms.delay.length; this.arms.timer = 0; } this.arms.right.angle = lerp(this.arms.right.angle, this.arms.right.angles[this.arms.index], 0.1); this.arms.left.angle = lerp(this.arms.left.angle, this.arms.left.angles[this.arms.index], 0.1); this.arms.right.xoff = lerp(this.arms.right.xoff, this.arms.right.off[this.arms.index].x, 0.1); this.arms.right.yoff = lerp(this.arms.right.yoff, this.arms.right.off[this.arms.index].y, 0.1); this.arms.left.xoff = lerp(this.arms.left.xoff, this.arms.left.off[this.arms.index].x, 0.1); this.arms.left.yoff = lerp(this.arms.left.yoff, this.arms.left.off[this.arms.index].y, 0.1); pushMatrix(); translate(-this.droid.value, 0); //face noStroke(); fill(this.colors.gray); for(var i = 0; i < this.face.length; i++) { this.face[i].index = this.face[i].indexes[this.droid.index]; this.face[i].visible = this.face[i].visibles[this.droid.index]; if(this.face[i].visible) { for(var j = 0; j < this.face[i].arr[this.face[i].index].length; j++) { this.face[i].p[j] = lerp(this.face[i].p[j], this.face[i].arr[this.face[i].index][j], 0.2); } } beginShape(); vertex(this.face[i].p[0], this.face[i].p[1]); bezierVertex( this.face[i].p[2], this.face[i].p[3], this.face[i].p[4], this.face[i].p[5], this.face[i].p[6], this.face[i].p[7]); bezierVertex( this.face[i].p[8], this.face[i].p[9], this.face[i].p[10], this.face[i].p[11], this.face[i].p[12], this.face[i].p[13]); endShape(); } //eye ball this.eye.xoff = this.eye.anim[this.droid.index].xoff; this.eye.opacity = this.eye.opacities[this.arms.index]; noStroke(); fill(this.colors.neon, this.eye.opacity); if(this.eye.show) { if(random() < 0.008) { this.eye.show = false; this.eye.delay = 10; } } else { this.eye.delay = constrain(this.eye.delay - 1, 0, 10); if(this.eye.delay === 0) { this.eye.show = true; } } if(this.eye.show) { pushMatrix(); translate(this.eye.x - this.eye.xoff, this.eye.y); rotate(this.eye.xoff === 0 ? -10 : 10); ellipse(0, 0, this.eye.w, this.eye.h); popMatrix(); } fill(this.colors.white); //right pushMatrix(); translate(this.arms.right.x, this.arms.right.y); rotate(this.arms.right.angle); translate(-this.arms.right.x, -this.arms.right.y); ellipse(435 + this.arms.right.xoff, 425 + this.arms.right.yoff, 95, 45); popMatrix(); //left pushMatrix(); translate(this.arms.left.x, this.arms.left.y); rotate(this.arms.left.angle); translate(-this.arms.left.x, -this.arms.left.y); ellipse(327 + this.arms.left.xoff, 425 + this.arms.left.yoff, 95, 45); popMatrix(); popMatrix(); }, draw: function() { background(this.colors.black); this.timer++; this.space(); //panels pushMatrix(); if(this.move) { this.offset.x = lerp(this.offset.x, map(mouseX, 0, 600, -20, 20), 0.1); this.offset.y = lerp(this.offset.y, map(mouseY, 0, 600, -20, 20), 0.1); } else { this.offset.x = lerp(this.offset.x, 0, 0.1); this.offset.y = lerp(this.offset.y, 0, 0.1); } translate(this.offset.x, this.offset.y); this.mainPanel(); var panelSin = sin(this.timer * 2); var panelCos = cos(this.timer * 2); pushMatrix(); translate(0, panelSin * 5); this.leftPanel(); popMatrix(); pushMatrix(); translate(0, panelCos * 5); this.rightPanel(); popMatrix(); //left/right panel shadows noStroke(); fill(0, 20); ellipse(135, 520, 140 + panelSin * 10, 20); ellipse(450, 520, 140 + panelCos * 10, 20); popMatrix(); //droid this.drawDroid(); //droid shadow noStroke(); fill(0, 20); ellipse(390 - this.droid.value, 540, 80, 12); }, run: function() { if(this.logo.done) { this.draw(); } this.logo.draw(); } }; return App; })(); app = new App(); draw = function() { app.run(); };
Folds	34,339,342,397,400,402,403,405,412,415,416,423,425,428,429,432,433,442,443,462,463,472,473,494,495,520,522,542,543,562,563,584,585,608,609,659,666,702,703,723,724,775,776,916,917,995,996,1046,1047,1177,1178,1226,1227,1233
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIOiqPjHCAw
Votes	184
Spin-Offs	2
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	{"id":"4640248491360256","title":"Contest: Mapmaking","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, 1739370411779
Updated	10 months ago, 1739370419804
Source Deleted	unknown