From 0a5bd013b8d1e66c2c99a05332a20869ffabab5b Mon Sep 17 00:00:00 2001 From: Nicky Case Date: Wed, 28 Mar 2018 10:57:19 -0400 Subject: [PATCH] heck yeah saving and stuff --- slides/index.css | 12 ++- slides/index.html | 12 ++- slides/js/chapters/0_Introduction.js | 13 +-- slides/js/chapters/1_Networks.js | 22 +++++ slides/js/lib/Key.js | 20 +++++ slides/js/lib/Mouse.js | 29 +++---- slides/js/lib/helpers.js | 2 +- slides/js/lib/minpubsub.src.js | 1 + slides/js/main.js | 2 +- slides/js/sim/Connection.js | 26 +----- slides/js/sim/ConnectorCutter.js | 6 +- slides/js/sim/Peep.js | 17 +--- slides/js/sim/Simulations.js | 116 +++++++++++++++++++++++++-- 13 files changed, 194 insertions(+), 84 deletions(-) create mode 100644 slides/js/lib/Key.js diff --git a/slides/index.css b/slides/index.css index a4e8b3c..be57043 100644 --- a/slides/index.css +++ b/slides/index.css @@ -1,9 +1,14 @@ +html, body{ + width:100%; + height:100%; + overflow: hidden; +} body{ margin:0; font-family: "FuturaHandwritten"; - font-size: 20px; - cursor: none !important; + font-size: 22px; + cursor: none; } /* SIMULATION and SLIDESHOW */ @@ -12,6 +17,8 @@ body{ top:0; left:0; width: 100%; height: calc(100% - 60px); + overflow: hidden; + cursor: none; } #simulations, #slideshow{ position: absolute; @@ -44,6 +51,7 @@ body{ width:100px; height:100px; pointer-events: none; + cursor: none; } /* THIS THING'S WORDS */ diff --git a/slides/index.html b/slides/index.html index 618720d..1314bba 100644 --- a/slides/index.html +++ b/slides/index.html @@ -45,6 +45,7 @@ Cursor is allowed to flow EVERYWHERE though... + @@ -57,9 +58,16 @@ Cursor is allowed to flow EVERYWHERE though... - - + + + + + + + + + diff --git a/slides/js/chapters/0_Introduction.js b/slides/js/chapters/0_Introduction.js index 75e8060..62dfa1a 100644 --- a/slides/js/chapters/0_Introduction.js +++ b/slides/js/chapters/0_Introduction.js @@ -1,20 +1,9 @@ // 0 - INTRODUCTION SLIDES.push( { - chapter: "1", + chapter: "Introduction", boxes:[ {words:"_0a", x:20, y:70, w:300, h:200} - ], - sims:[ - { - x: 400, - y: 10, - network: { - contagion: 0.25, - peeps: [ [100,100],[200,200],[400,150] ], - connections: [ [0,1] ] - } - } ] }, { diff --git a/slides/js/chapters/1_Networks.js b/slides/js/chapters/1_Networks.js index e69de29..fa28352 100644 --- a/slides/js/chapters/1_Networks.js +++ b/slides/js/chapters/1_Networks.js @@ -0,0 +1,22 @@ +// 0 - INTRODUCTION +SLIDES.push( +{ + chapter: "Networks", + boxes:[ + {words:"_1a", x:280, y:0, w:400, align:"center"} + ], + sims:[ + { + x: 0, + y: 10, + fullscreen: true, + network: {"contagion":0,"peeps":[[408,87,0],[340,472,0],[285,402,0],[339,76,0],[214,266,0],[219,181,0],[594,146,0],[256,339,0],[273,114,0],[519,137,0],[450,163,0],[635,278,0],[640,199,0],[508,422,0],[438,445,0],[588,360,0],[858,39,0],[902,137,0],[890,344,0],[922,242,0],[390,299,1]],"connections":[[1,2],[2,7],[7,4],[4,5],[5,8],[8,3],[3,0],[0,10],[9,6],[9,10],[6,12],[12,11],[11,15],[15,13],[13,14],[14,1]]}, + onupdate: function(sim){ + if(sim.connections.length>5){ + //console.log("WIN"); + } + } + } + ] +} +); \ No newline at end of file diff --git a/slides/js/lib/Key.js b/slides/js/lib/Key.js new file mode 100644 index 0000000..cb47c85 --- /dev/null +++ b/slides/js/lib/Key.js @@ -0,0 +1,20 @@ +////////////////////////////// +// KEYS (it's a secret) ////// +////////////////////////////// + +var KEYS = { + 32: "space", + 49: "1", + 50: "2", + 8: "delete" +}; + +window.addEventListener("keydown", function(event){ + var key = KEYS[event.keyCode]; + if(key) publish("key/down/"+key); +}); + +window.addEventListener("keyup", function(event){ + var key = KEYS[event.keyCode]; + if(key) publish("key/up/"+key); +}); \ No newline at end of file diff --git a/slides/js/lib/Mouse.js b/slides/js/lib/Mouse.js index d18f0ff..ab45a62 100644 --- a/slides/js/lib/Mouse.js +++ b/slides/js/lib/Mouse.js @@ -6,22 +6,19 @@ var Mouse = { x:0, y:0, pressed:false }; -Mouse.ondown = function(){}; // add your own callback -Mouse.onmove = function(){}; // add your own callback -Mouse.onup = function(){}; // add your own callback -Mouse._ondown = function(event){ +Mouse.ondown = function(event){ Mouse.pressed = true; - Mouse._onmove(event); - Mouse.ondown(); + Mouse.onmove(event); + publish("mouse/down"); }; -Mouse._onmove = function(event){ +Mouse.onmove = function(event){ Mouse.x = event.clientX; Mouse.y = event.clientY; - Mouse.onmove(); + publish("mouse/move"); }; -Mouse._onup = function(event){ +Mouse.onup = function(event){ Mouse.pressed = false; - Mouse.onup(); + publish("mouse/up"); }; Mouse.update = function(){ @@ -50,15 +47,15 @@ function _touchWrapper(callback){ Mouse.init = function(target){ // Regular mouse - target.addEventListener("mousedown", Mouse._ondown); - target.addEventListener("mousemove", Mouse._onmove); - window.addEventListener("mouseup", Mouse._onup); + target.addEventListener("mousedown", Mouse.ondown); + target.addEventListener("mousemove", Mouse.onmove); + window.addEventListener("mouseup", Mouse.onup); // Touch events - target.addEventListener("touchstart", _touchWrapper(Mouse._ondown), false); - target.addEventListener("touchmove", _touchWrapper(Mouse._onmove), false); + target.addEventListener("touchstart", _touchWrapper(Mouse.ondown), false); + target.addEventListener("touchmove", _touchWrapper(Mouse.onmove), false); document.body.addEventListener("touchend", function(){ - Mouse._onup(); + Mouse.onup(); }, false); }; \ No newline at end of file diff --git a/slides/js/lib/helpers.js b/slides/js/lib/helpers.js index 74b3c5a..a93af44 100644 --- a/slides/js/lib/helpers.js +++ b/slides/js/lib/helpers.js @@ -22,8 +22,8 @@ function createCanvas(canvas, width, height){ // The "canvas" arg not provided? make a new one! if(arguments.length==2){ - width = arguments[0]; height = arguments[1]; + width = arguments[0]; canvas = document.createElement("canvas"); } diff --git a/slides/js/lib/minpubsub.src.js b/slides/js/lib/minpubsub.src.js index 358008d..7c33257 100644 --- a/slides/js/lib/minpubsub.src.js +++ b/slides/js/lib/minpubsub.src.js @@ -3,6 +3,7 @@ * Copyright(c) 2011 Daniel Lamb * MIT Licensed */ +window.c_ = {}; // NICKY - UNIT TESTING (function (context) { var MinPubSub = {}; diff --git a/slides/js/main.js b/slides/js/main.js index efa0cdd..eb13e67 100644 --- a/slides/js/main.js +++ b/slides/js/main.js @@ -27,6 +27,6 @@ window.onload = function(){ window.requestAnimationFrame(update); // First slide! - slideshow.goto(0); + slideshow.gotoChapter("Networks"); } \ No newline at end of file diff --git a/slides/js/sim/Connection.js b/slides/js/sim/Connection.js index 55b950b..a18912b 100644 --- a/slides/js/sim/Connection.js +++ b/slides/js/sim/Connection.js @@ -48,28 +48,4 @@ function Connection(config){ }; -} -/* -Connection.getConnected = function(peep){ - var results = []; - for(var i=0; i=0; i--){ // backwards index coz we're deleting - var c = connections[i]; - if(c.from==peep || c.to==peep){ // in either direction - connections.splice(i,1); // remove! - } - } -} -function _makeUncuttable(arrayOfConnections){ - for(var i=0; i0){ ctx.save(); @@ -167,7 +167,7 @@ function Peep(config){ ctx.restore(); - //} + } ctx.restore(); @@ -202,14 +202,3 @@ function Peep(config){ }; } -function _mouseOverPeep(buffer){ - var result; - peeps.forEach(function(peep){ - if(peep.hitTest(Mouse.x, Mouse.y, buffer)) result=peep; - }); - return result; -} -function removePeep(peep){ - removeAllConnectedTo(peep); // remove connections first - peeps.splice(peeps.indexOf(peep),1); // BYE peep -} \ No newline at end of file diff --git a/slides/js/sim/Simulations.js b/slides/js/sim/Simulations.js index 269f3b3..36a2310 100644 --- a/slides/js/sim/Simulations.js +++ b/slides/js/sim/Simulations.js @@ -54,10 +54,21 @@ function Sim(config){ self.networkConfig = config.network; // Canvas - self.canvas = createCanvas(500, 500); - self.canvas.style.left = config.x || 0; - self.canvas.style.top = config.y || 0; - self.canvas.style.border = "1px solid #ccc"; + self.fullscreenOffset = {x:0, y:0}; + if(config.fullscreen){ + var container = $("#simulations_container"); + var simOffset = simulations.dom.getBoundingClientRect(); + self.canvas = createCanvas(container.clientWidth, container.clientHeight); + self.canvas.style.left = -simOffset.x; + self.canvas.style.top = -simOffset.y; + self.fullscreenOffset.x = config.x + simOffset.x; + self.fullscreenOffset.y = config.y + simOffset.y; + }else{ + self.canvas = createCanvas(config.width||500, config.height||500); + self.canvas.style.left = config.x || 0; + self.canvas.style.top = config.y || 0; + } + //self.canvas.style.border = "1px solid #ccc"; self.ctx = self.canvas.getContext('2d'); // Mouse, offset! @@ -88,10 +99,10 @@ function Sim(config){ // Connections self.networkConfig.connections.forEach(function(c){ var from = self.peeps[c[0]], - to = self.peeps[c[1]], - uncuttable = c[2]; - self.addConnection(from, to, uncuttable); + to = self.peeps[c[1]]; + self.addConnection(from, to, false); }); + // todo: "start uncuttable" // Contagion self.contagion = self.networkConfig.contagion; @@ -99,6 +110,7 @@ function Sim(config){ }; // Update + self.onupdate = config.onupdate || function(){}; self.update = function(){ // "Mouse", offset! @@ -108,6 +120,12 @@ function Sim(config){ self.mouse.y -= canvasBounds.y; self.mouse.lastX -= canvasBounds.x; self.mouse.lastY -= canvasBounds.y; + if(config.fullscreen){ + self.mouse.x -= self.fullscreenOffset.x; + self.mouse.y -= self.fullscreenOffset.y; + self.mouse.lastX -= self.fullscreenOffset.x; + self.mouse.lastY -= self.fullscreenOffset.y; + } // Connector-Cutter self.connectorCutter.update(); @@ -120,6 +138,16 @@ function Sim(config){ peep.update(); }); + // secret editor... + // drag Peep + if(_draggingPeep){ + _draggingPeep.x = self.mouse.x+_draggingOffset.x; + _draggingPeep.y = self.mouse.y+_draggingOffset.y; + } + + // On update! (for arbitrary sim-specific logic) + self.onupdate(self); + }; // Draw @@ -128,8 +156,12 @@ function Sim(config){ // Retina var ctx = self.ctx; ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); + // todo: smarter redraw coz, wow, retina. ctx.save(); ctx.scale(2,2); + if(config.fullscreen){ + ctx.translate(self.fullscreenOffset.x, self.fullscreenOffset.y); + } // Draw all of it! self.connectorCutter.draw(ctx); @@ -149,6 +181,61 @@ function Sim(config){ self.clear(); }; + /////////////////////////////// + // secret keyboard interface // + /////////////////////////////// + + // todo: active only when mouse is over MY CANVAS. + + var _draggingPeep = null; + var _draggingOffset = {x:0,y:0}; + subscribe("key/down/space",function(){ + if(!_draggingPeep){ // prevent double-activation + var hoveredPeep = self.getHoveredPeep(0); + if(hoveredPeep){ + _draggingPeep = hoveredPeep; + _draggingOffset.x = _draggingPeep.x-self.mouse.x; + _draggingOffset.y = _draggingPeep.y-self.mouse.y; + } + } + }); + subscribe("key/up/space",function(){ + _draggingPeep = null; + }); + subscribe("key/down/1",function(){ + _addPeepAtMouse(false); + }); + subscribe("key/down/2",function(){ + _addPeepAtMouse(true); + }); + var _addPeepAtMouse = function(infected){ + var overlapPeep = self.getHoveredPeep(20); + if(!overlapPeep){ + self.addPeep(self.mouse.x, self.mouse.y, infected); + } + }; + subscribe("key/down/delete",function(){ + var toDeletePeep = self.getHoveredPeep(0); + if(toDeletePeep) self.removePeep(toDeletePeep); + }); + + self.save = function(){ + var savedNetwork = { + contagion: self.contagion, + peeps: [], + connections: [] + }; + self.peeps.forEach(function(peep){ + savedNetwork.peeps.push([Math.round(peep.x), Math.round(peep.y), peep.infected?1:0]); + }); + self.connections.forEach(function(c){ + var fromIndex = self.peeps.indexOf(c.from); + var toIndex = self.peeps.indexOf(c.to); + savedNetwork.connections.push([fromIndex, toIndex]); + }); + return JSON.stringify(savedNetwork); + }; + //////////////// // HELPERS... // //////////////// @@ -159,6 +246,10 @@ function Sim(config){ self.peeps.push(peep); return peep; }; + self.removePeep = function(peep){ + self.removeAllConnectedTo(peep); // delete all connections + self.peeps.splice(self.peeps.indexOf(peep),1); // BYE peep + }; self.addConnection = function(from, to, uncuttable){ // Don't allow connecting to self... @@ -187,6 +278,7 @@ function Sim(config){ return friends; }; self.getHoveredPeep = function(mouseBuffer){ + mouseBuffer = mouseBuffer || 0; return self.peeps.find(function(peep){ return peep.hitTest(self.mouse.x, self.mouse.y, mouseBuffer); }); @@ -198,6 +290,14 @@ function Sim(config){ if(c.hitTest(line)) self.connections.splice(i,1); } }; + self.removeAllConnectedTo = function(peep){ + for(var i=self.connections.length-1; i>=0; i--){ // backwards index coz we're deleting + var c = self.connections[i]; + if(c.from==peep || c.to==peep){ // in either direction + self.connections.splice(i,1); // remove! + } + } + }; ////////////// @@ -206,4 +306,4 @@ function Sim(config){ self.init(); -} \ No newline at end of file +}