NotDotTeam/crowds
NotDotTeam
/
crowds
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sandbox pretty much DONE in ONE day

This commit is contained in:
Nicky Case 2018-04-06 13:13:42 -04:00
parent 4b456ac54c
commit 759c39768a
7 changed files with 212 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.css → css/index.css
View File

@ -54,7 +54,7 @@ body{
width: 300px;
height: 20px;
padding: 40px 0;
background-image: url(sprites/button_large.png);
background-image: url(../sprites/button_large.png);
background-size: 100% auto;
text-align: center;
}
@ -69,7 +69,7 @@ body{
#scratch{
display: none;
pointer-events: none;
background-image: url(sprites/scratch.png);
background-image: url(../sprites/scratch.png);
background-size: 200% 2000%;
background-position: 0% 0%;
}
@ -124,17 +124,24 @@ body{
.choose_color{
width: 40px;
height: 40px;
background: url(sprites/peeps.png);
background: url(../sprites/peeps.png);
background-size: auto 100%;
transform: scale(1.2);
}
.choose_tool{
background: #fff;
font-size: 16px;
line-height: 16px;
border: 1px solid black;
padding: 3px;
border-radius: 5px;
}
.choose_tool > #icon{
display: inline-block;
width:16px; height:16px;
background: url(../sprites/sandbox_tools.png);
background-size: auto 100%;
}
#sandbox_shortcuts_label{
font-size: 18px;
}
@ -261,6 +268,9 @@ words, bonus, glossary{
}
/* TO SEE LAYOUT */
.box, #simulations{
/*.box, #simulations{
border: 1px solid #eee;
}
}*/

6
index.html
View File

@ -20,7 +20,7 @@ Cursor is allowed to flow EVERYWHERE though...
<html>
<head>
<title>The Wisdom and/or Madness of Crowds</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
@ -301,7 +301,7 @@ Draw Connections
Add Peep
</words>
<words id="sandbox_tool_add_infected">
Add "Infected" Peep
Add "Infected"
</words>
<words id="sandbox_tool_move">
Move Peep
@ -319,7 +319,7 @@ Delete Peep
<words id="sandbox_shortcuts">
[1]: Add Peep
<br>
[2]: Add Infected Peep
[2]: Add "Infected" Peep
<br>
[Space]: Move Peep
<br>

190
js/sim/ConnectorCutter.js
View File

@ -12,88 +12,140 @@ function ConnectorCutter(config){
// Update!
self.state = 0; // 0-nothing | 1-connecting | 2-cutting
self.sandbox_state = 0; // 0-pencil | 1-add_peep | 2-add_infected | 3-move | 4-delete | 5-bomb
self.update = function(){
var mouse = self.sim.mouse;
// only if sim is NOT RUNNING
if(!Simulations.IS_RUNNING){
// JUST CLICKED, and state=0... can either start connecting or cutting!
if(mouse.justPressed && self.state===0){
// Clicked on a peep?
var peepClicked = self.sim.getHoveredPeep(0);
if(peepClicked){
self.state = 1; // START CONNECTING
self.connectFrom = peepClicked;
}else{
self.state = 2; // START ERASING
}
// 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
}
// JUST RELEASED, and state!=0... can either stop connecting or cutting!
if(mouse.justReleased && self.state!==0){
// End connect?
if(self.state==1){
var peepReleased = self.sim.getHoveredPeep(20);
if(peepReleased){
self.sim.addConnection(self.connectFrom, peepReleased);
}
}
// back to normal
self.state = 0;
}
}else{
self.state = 0;
}
// In "NORMAL" state... tell Pencil what frame to go to
if(self.state==0){
// IF SANDBOX STATE = PENCIL, complex mouse shtuff
if(self.sandbox_state==0){
// only if sim is NOT RUNNING
if(!Simulations.IS_RUNNING){
var peepHovered = self.sim.getHoveredPeep(0);
pencil.gotoFrame( peepHovered ? 1 : 0 );
// JUST CLICKED, and state=0... can either start connecting or cutting!
if(mouse.justPressed && self.state===0){
// Clicked on a peep?
var peepClicked = self.sim.getHoveredPeep(0);
if(peepClicked){
self.state = 1; // START CONNECTING
self.connectFrom = peepClicked;
}else{
self.state = 2; // START ERASING
}
}
// JUST RELEASED, and state!=0... can either stop connecting or cutting!
if(mouse.justReleased && self.state!==0){
// End connect?
if(self.state==1){
var peepReleased = self.sim.getHoveredPeep(20);
if(peepReleased){
self.sim.addConnection(self.connectFrom, peepReleased);
}
}
// back to normal
self.state = 0;
}
}else{
pencil.gotoFrame(0);
}
}
// In "CONNECTING" state... show where to connect to
if(self.state==1){
// Connect to a nearby hovered peep?
var peepHovered = self.sim.getHoveredPeep(20);
if(peepHovered==self.connectFrom) peepHovered=null; // if same, nah
self.connectTo = peepHovered ? peepHovered : mouse;
// Pencil's always DARK
pencil.gotoFrame(1);
}
// In "CUTTING" state... cut intersected lines! & add to trail
if(self.state==2){
// Try cutting
var line = [mouse.lastX, mouse.lastY, mouse.x, mouse.y];
self.sim.tryCuttingConnections(line);
// Add to trail
self.cutTrail.unshift([mouse.x,mouse.y]); // add to start
if(self.cutTrail.length>10){
self.cutTrail.pop(); // remove from end
self.state = 0;
}
// Pencil's always RED
pencil.gotoFrame(2);
// In "NORMAL" state... tell Pencil what frame to go to
if(self.state==0){
if(!Simulations.IS_RUNNING){
var peepHovered = self.sim.getHoveredPeep(0);
pencil.gotoFrame( peepHovered ? 1 : 0 );
}else{
pencil.gotoFrame(0);
}
}
// In "CONNECTING" state... show where to connect to
if(self.state==1){
// Connect to a nearby hovered peep?
var peepHovered = self.sim.getHoveredPeep(20);
if(peepHovered==self.connectFrom) peepHovered=null; // if same, nah
self.connectTo = peepHovered ? peepHovered : mouse;
// Pencil's always DARK
pencil.gotoFrame(1);
}
// In "CUTTING" state... cut intersected lines! & add to trail
if(self.state==2){
// Try cutting
var line = [mouse.lastX, mouse.lastY, mouse.x, mouse.y];
self.sim.tryCuttingConnections(line);
// Add to trail
self.cutTrail.unshift([mouse.x,mouse.y]); // add to start
// Pencil's always RED
pencil.gotoFrame(2);
}
}else{
self.cutTrail.pop(); // oh, and if not cutting, pop from end anyway
self.state=0;
}
// IF SANDBOX STATE = ADD/DELETE PEEP or BOMB, just click to activate!
if(self.sandbox_state!=0){
if(mouse.justPressed){
// TODO: Publish sound effects!
// Add Peep
if(self.sandbox_state==1){
self.sim._addPeepAtMouse(false); // not infected
}
// Add Infected Peep
if(self.sandbox_state==2){
self.sim._addPeepAtMouse(true); // IS infected
}
// Delete Peep
if(self.sandbox_state==4){
self.sim._deletePeep();
}
// BOMB
if(self.sandbox_state==5){
var contagionLevel = self.sim.contagion; // hack for sandbox: keep contagion the same
self.sim.clear();
self.sim.contagion = contagionLevel;
}
}
}
// IF SANDBOX STATE = MOVE...
if(self.sandbox_state==3){
if(mouse.justPressed) self.sim._startMove();
if(mouse.justReleased) self.sim._stopMove();
}
// If trail too long, or NOT cutting, pop trail from end
if(self.cutTrail.length>10 || self.state!=2 || self.sandbox_state!=0){
self.cutTrail.pop();
}
};

28
js/sim/Simulations.js
View File

@ -397,7 +397,14 @@ function Sim(config){
var _draggingPeep = null;
var _draggingOffset = {x:0,y:0};
var _keyHandlers = [];
var _resetConnectorCutter = function(){
self.connectorCutter.sandbox_state = 0;
};
_keyHandlers.push(subscribe("key/down/space",function(){
_resetConnectorCutter();
self._startMove();
}));
self._startMove = function(){
if(!_draggingPeep){ // prevent double-activation
var hoveredPeep = self.getHoveredPeep(0);
if(hoveredPeep){
@ -406,26 +413,35 @@ function Sim(config){
_draggingOffset.y = _draggingPeep.y-self.mouse.y;
}
}
}));
};
_keyHandlers.push(subscribe("key/up/space",function(){
_draggingPeep = null;
self._stopMove();
}));
self._stopMove = function(){
_draggingPeep = null;
};
_keyHandlers.push(subscribe("key/down/1",function(){
_addPeepAtMouse(false);
_resetConnectorCutter();
self._addPeepAtMouse(false);
}));
_keyHandlers.push(subscribe("key/down/2",function(){
_addPeepAtMouse(true);
_resetConnectorCutter();
self._addPeepAtMouse(true);
}));
var _addPeepAtMouse = function(infected){
self._addPeepAtMouse = function(infected){
var overlapPeep = self.getHoveredPeep(20);
if(!overlapPeep){
self.addPeep(self.mouse.x, self.mouse.y, infected);
}
};
_keyHandlers.push(subscribe("key/down/delete",function(){
_resetConnectorCutter();
self._deletePeep();
}));
self._deletePeep = function(){
var toDeletePeep = self.getHoveredPeep(0);
if(toDeletePeep) self.removePeep(toDeletePeep);
}));
};
self.getCurrentNetwork = function(){
var savedNetwork = {

31
js/slideshow/Pencil.js
View File

@ -12,14 +12,19 @@ function Pencil(){
self.canvas = createCanvas( $("#pencil"), 100, 100 );
self.ctx = self.canvas.getContext('2d');
// Sprite
// Sprites
self.sprite = new Sprite({
src: "sprites/pencil.png",
frames:3, sw:200, sh:200,
});
self.sprite.pivotX = 0;
self.sprite.pivotY = 200;
self.sprite.scale = 0.75;
self.toolsSprite = new Sprite({
src: "sprites/sandbox_tools.png",
frames:6, sw:200, sh:200,
});
self.sprite.pivotX = self.toolsSprite.pivotX = 0;
self.sprite.pivotY = self.toolsSprite.pivotY = 200;
self.sprite.scale = self.toolsSprite.scale = 0.75;
var _size = 100;
var _margin = 10;
var _offset = 10;
@ -43,6 +48,7 @@ function Pencil(){
var xy_velocity = ((Mouse.x-self.x) + (Mouse.y-self.y))/10; // in down-right direction
var gotoRotation = -sigmoid(xy_velocity) * Math.TAU/8;
self.sprite.rotation = self.sprite.rotation*0.8 + gotoRotation*0.2;
self.toolsSprite.rotation = self.sprite.rotation;
// Pencil's offset
var gotoOffset = Mouse.pressed ? -8 : 10;
@ -61,6 +67,17 @@ function Pencil(){
self.canvas.style.left = self.x-_margin;
self.canvas.style.top = self.y-_size+_margin;
// Which sprite? (normal by default...)
var sprite = self.sprite;
var sim = slideshow.simulations.sims[0];
if(sim){
var frame = sim.connectorCutter.sandbox_state;
if(frame!=0){
sprite = self.toolsSprite;
sprite.gotoFrame(frame);
}
}
// Reset canvas
var ctx = self.ctx;
ctx.clearRect(0,0,self.canvas.width,self.canvas.height);
@ -79,9 +96,9 @@ function Pencil(){
}
// Draw pencil
self.sprite.x = _offset;
self.sprite.y = -_offset;
self.sprite.draw(ctx);
sprite.x = _offset;
sprite.y = -_offset;
sprite.draw(ctx);
ctx.restore();

36
js/slideshow/SandboxUI.js
View File

@ -76,22 +76,40 @@ function SandboxUI(container){
var toolChooserLabel = document.createElement("div");
toolChooserLabel.innerHTML = getWords("sandbox_tool_chooser");
toolChooserLabel.style.marginTop = "1em";
var tools = [
"pencil",
"add",
"add_infected",
"move",
"delete",
"clear"
];
var toolChooser = new ChooseOne({
options:[
"pencil",
"add",
"add_infected",
"move",
"delete",
"clear"
],
options:tools,
makeButton: function(value){
var button = document.createElement("div");
button.className = "choose_tool";
button.innerHTML = getWords("sandbox_tool_"+value);
// Icon
var buttonImage = document.createElement("div");
button.appendChild(buttonImage);
buttonImage.id = "icon";
var frame = tools.indexOf(value);
buttonImage.style.backgroundPosition = (-16*frame)+"px 0px";
// Label
var buttonLabel = document.createElement("span");
button.appendChild(buttonLabel);
buttonLabel.innerHTML = getWords("sandbox_tool_"+value);
return button;
},
oninput:function(value){
// update sim
var sandbox_state = tools.indexOf(value);
slideshow.simulations.sims[0].connectorCutter.sandbox_state = sandbox_state;
}
});
container.appendChild(toolChooserLabel);

BIN
sprites/sandbox_tools.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB