From 9ef8b2a7c7b207194b142108fd30c8c1b0017faf Mon Sep 17 00:00:00 2001 From: Nicky Case Date: Tue, 10 Apr 2018 13:00:22 -0400 Subject: [PATCH] cool splash --- js/chapters/0_Introduction.js | 25 +++++++++++- js/lib/helpers.js | 35 +++++++++++++++++ js/main.js | 2 +- js/sim/ConnectorCutter.js | 8 ++-- js/sim/Peep.js | 74 +++++++++++++++++++++++++++++++++++ js/sim/Simulations.js | 15 +++++++ js/slideshow/SandboxUI.js | 3 ++ 7 files changed, 157 insertions(+), 5 deletions(-) diff --git a/js/chapters/0_Introduction.js b/js/chapters/0_Introduction.js index 71f7858..867b166 100644 --- a/js/chapters/0_Introduction.js +++ b/js/chapters/0_Introduction.js @@ -1,7 +1,30 @@ // 0 - INTRODUCTION SLIDES.push( + { chapter: "Introduction", - clear:true + clear:true, + + add:[ + + // Splash + { + type:"sim", + x:960/2, y:540/2, + fullscreen: true, + network: { + "contagion":0, + "peeps":[[-432,-121,0],[308,-101,0],[401,-224,0],[-226,392,0],[-217,-397,0],[303,356,0],[-70,-439,0],[280,-373,0],[35,-322,0],[125,299,0],[-549,-108,0],[489,118,0],[387,78,0],[189,385,0],[-425,-214,0],[69,602,0],[214,244,0],[305,108,0],[15,436,0],[389,236,0],[-271,-178,0],[-100,-308,0],[-106,440,0],[-346,4,0],[172,-372,0],[-575,-257,0],[457,-131,0],[-215,-242,0],[-318,-58,0],[22,323,0],[122,475,0],[388,461,0],[-492,27,0],[114,-303,0],[307,-252,0],[487,-347,0],[264,187,0],[231,-226,0],[-181,269,0],[-68,317,0],[-333,399,0],[-437,289,0],[-286,259,0],[-265,186,0],[-571,201,0],[-317,66,0],[618,35,0],[587,190,0],[574,-217,0],[-259,546,0],[-296,-307,0],[-618,53,0],[-127,-531,0],[489,336,0],[324,-9,0],[261,551,0],[-275,-535,0],[-396,-444,0],[-447,-333,0],[477,-26,0],[-406,486,0],[22,-464,0],[-3,-619,0],[-86,587,0],[382,-457,0],[266,-556,0],[119,-529,0],[-421,168,0]], + "connections":[[24,37,0],[37,1,0],[1,2,0],[26,1,0],[34,1,0],[13,9,0],[9,30,0],[30,29,0],[29,9,0],[9,18,0],[18,29,0],[18,30,0],[30,13,0],[13,29,0],[18,13,0],[36,19,0],[19,5,0],[19,12,0],[19,16,0],[17,19,0],[11,19,0],[14,25,0],[10,25,0],[10,14,0],[28,20,0],[20,0,0],[0,32,0],[8,21,0],[6,8,0],[21,27,0],[4,21,0],[4,27,0],[21,6,0],[39,3,0],[3,38,0],[38,22,0],[22,39,0],[39,38,0],[22,3,0],[6,4,0],[23,32,0],[42,40,0],[40,41,0],[41,42,0],[37,7,0],[37,33,0],[45,43,0],[47,46,0],[55,31,0],[57,56,0],[58,50,0],[59,54,0],[60,49,0],[62,52,0],[62,61,0],[63,15,0],[64,65,0],[65,66,0],[44,51,0],[48,35,0],[67,43,0],[67,45,0],[61,52,0],[23,0,0],[28,0,0]] + }, + options:{ + splash: true, + randomStart: 20 + } + } + + ] + } + ); \ No newline at end of file diff --git a/js/lib/helpers.js b/js/lib/helpers.js index 4ccad9e..d22bc33 100644 --- a/js/lib/helpers.js +++ b/js/lib/helpers.js @@ -120,4 +120,39 @@ function getBoundsOfPoints(points){ }; } +// Some Vector Shtuff +function getVectorFromTo(from, to){ + return { + x: to.x - from.x, + y: to.y - from.y, + }; +} +function getVectorLength(v){ + return Math.sqrt(v.x*v.x + v.y*v.y); +} +function getUnitVector(v){ + var length = getVectorLength(v); + return { + x: v.x/length, + y: v.y/length + }; +} +function multiplyVector(v, scale){ + return { + x: v.x * scale, + y: v.y * scale + }; +} +function addVectors(a,b){ + return { + x: a.x + b.x, + y: a.y + b.y + }; +} +function rotateVector(v, a){ + return { + x: Math.cos(a)*v.x - Math.sin(a)*v.y, + y: Math.sin(a)*v.x + Math.cos(a)*v.y + } +} diff --git a/js/main.js b/js/main.js index 119a17e..6984456 100644 --- a/js/main.js +++ b/js/main.js @@ -29,6 +29,6 @@ window.onload = function(){ window.requestAnimationFrame(update); // First slide! - slideshow.gotoChapter("Sandbox"); + slideshow.gotoChapter("Introduction"); } \ No newline at end of file diff --git a/js/sim/ConnectorCutter.js b/js/sim/ConnectorCutter.js index ac953ac..9e482b6 100644 --- a/js/sim/ConnectorCutter.js +++ b/js/sim/ConnectorCutter.js @@ -18,9 +18,11 @@ function ConnectorCutter(config){ var mouse = self.sim.mouse; // TOTAL HACK: if you're clicking within the sandbox UI, FORGET IT - if(mouse.x>0 && mouse.x<280){ - if(mouse.justPressed){ - return; // FORGET ITTTTTT + if(self.sim.SANDBOX_MODE){ + if(mouse.x>0 && mouse.x<280){ + if(mouse.justPressed){ + return; // FORGET ITTTTTT + } } } diff --git a/js/sim/Peep.js b/js/sim/Peep.js index 4e76968..7f939b3 100644 --- a/js/sim/Peep.js +++ b/js/sim/Peep.js @@ -5,6 +5,7 @@ function Peep(config){ // Properties self.x = config.x; self.y = config.y; + self.velocity = {x:0, y:0}; self.infected = !!config.infected; self.sim = config.sim; @@ -63,6 +64,79 @@ function Peep(config){ } } + // SPLASH: FORCE-DIRECTED + if(self.sim.options.splash){ + + // Attract towards 0 (gravity increases slightly the further you get out) + var gravity = getUnitVector({ + x: 0 - self.x, + y: 0 - self.y + }); + var gravityScale = getVectorLength(self)*0.00012; + gravity = multiplyVector(gravity, gravityScale); + self.velocity = addVectors(self.velocity, gravity); + + // If within the ring, push OUT. + var RADIUS = 325; + var distanceFromCenter = getVectorLength(self); + if(distanceFromCenter=0) return; // not a friend + + var fromTo = getVectorFromTo(self, peep); + var d = getVectorLength(fromTo); + var forceMagnitude = c/(d*d); + var force = multiplyVector( getUnitVector(fromTo), forceMagnitude ); + + coulombTotalForce = addVectors(coulombTotalForce, force); + + }); + self.velocity = addVectors(self.velocity, coulombTotalForce); + + // Travel Clockwise + var spin = getUnitVector(self); + spin = rotateVector(spin, Math.TAU/4); + spin = multiplyVector(spin, 0.02); + self.velocity = addVectors(self.velocity, spin); + + // Air Friction + self.velocity = multiplyVector(self.velocity, 0.95); + + // Move + self.x += self.velocity.x; + self.y += self.velocity.y; + + } + }; // Body Sprite diff --git a/js/sim/Simulations.js b/js/sim/Simulations.js index 9d6943b..8757af1 100644 --- a/js/sim/Simulations.js +++ b/js/sim/Simulations.js @@ -194,6 +194,8 @@ function Sim(config){ if(_draggingPeep){ _draggingPeep.x = self.mouse.x+_draggingOffset.x; _draggingPeep.y = self.mouse.y+_draggingOffset.y; + _draggingPeep.velocity.x = 0; + _draggingPeep.velocity.y = 0; } // update confetti & winword... @@ -546,4 +548,17 @@ function Sim(config){ self.init(); + // Start randomize positions? + if(self.options.randomStart){ + var r = { + x:self.options.randomStart, + y:0 + }; + self.peeps.forEach(function(peep){ + var randomPush = rotateVector(r, Math.random()*Math.TAU); + peep.x += randomPush.x; + peep.y += randomPush.y; + }); + } + } diff --git a/js/slideshow/SandboxUI.js b/js/slideshow/SandboxUI.js index 89b2190..39accec 100644 --- a/js/slideshow/SandboxUI.js +++ b/js/slideshow/SandboxUI.js @@ -129,6 +129,9 @@ function SandboxUI(container){ container.appendChild(shortcutsLabel); container.appendChild(shortcuts); + // HEY IT'S SANDBOX MODE // + slideshow.simulations.sims[0].SANDBOX_MODE = true; + }