HOT NEW ART
|
@ -1,10 +1,10 @@
|
||||||
/* FONT FACE */
|
/* FONT FACE */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "PatrickHand";
|
font-family: "PatrickHand";
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url(PatrickHand-Regular.ttf) format('truetype');
|
src: url(PatrickHand-Regular.ttf) format('truetype');
|
||||||
/*unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;*/
|
/*unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
/* HTML & BODY */
|
/* HTML & BODY */
|
||||||
|
@ -113,24 +113,28 @@ b, strong{
|
||||||
}
|
}
|
||||||
.sim_ui > div{
|
.sim_ui > div{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #dd4040;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.sim_ui > #reset_button{
|
|
||||||
width: 150px;
|
|
||||||
left:25px;
|
|
||||||
top:0px;
|
|
||||||
font-size: 0.8em;
|
|
||||||
transition: top 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
.sim_ui > #start_button{
|
.sim_ui > #start_button{
|
||||||
width: 200px;
|
width: 200px;
|
||||||
padding: 0.5em 0;
|
padding: 0.5em 0;
|
||||||
|
background-image: url(../sprites/red_button.png);
|
||||||
|
background-size: 100% auto;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
top:0;
|
||||||
|
transition: top 0.1s ease-in-out;
|
||||||
}
|
}
|
||||||
.sim_ui[active] > #reset_button{
|
.sim_ui[active] > #start_button{
|
||||||
top:60px;
|
background-position: 0 -62.5px;
|
||||||
|
}
|
||||||
|
.sim_ui > #start_button:hover{
|
||||||
|
top:-3px;
|
||||||
|
}
|
||||||
|
.sim_ui > #start_button:active{
|
||||||
|
top:3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sandbox UI */
|
/* Sandbox UI */
|
||||||
|
|
18
index.html
|
@ -240,7 +240,7 @@ MY "WHY" FOR MAKING THIS:
|
||||||
|
|
||||||
<words id="networks_tutorial_end">
|
<words id="networks_tutorial_end">
|
||||||
|
|
||||||
when you're done playing around,
|
when you're done doodling and playing around,
|
||||||
<next wiggle>let's continue →</next>
|
<next wiggle>let's continue →</next>
|
||||||
|
|
||||||
</words>
|
</words>
|
||||||
|
@ -559,8 +559,9 @@ MY "WHY" FOR MAKING THIS:
|
||||||
|
|
||||||
<words id="bonding_2">
|
<words id="bonding_2">
|
||||||
<b>
|
<b>
|
||||||
Find the sweet spot, and draw a group that's <i>just</i> connected enough
|
Draw a group that hits the sweet spot:
|
||||||
to spread a complex idea! ↓
|
just connected enough to spread a complex idea!
|
||||||
|
↓
|
||||||
</b>
|
</b>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
|
@ -610,13 +611,14 @@ MY "WHY" FOR MAKING THIS:
|
||||||
No matter how it's phrased,
|
No matter how it's phrased,
|
||||||
people -- across times and cultures -- have often arrived at the same piece of wisdom:
|
people -- across times and cultures -- have often arrived at the same piece of wisdom:
|
||||||
<b>
|
<b>
|
||||||
a healthy society needs both tight bonds <i>within</i> groups
|
a healthy society needs a sweet spot of bonds <i>within</i> groups
|
||||||
and thick bridges <i>between</i> groups.
|
and bridges <i>between</i> groups.
|
||||||
</b>
|
</b>
|
||||||
|
That is:
|
||||||
|
|
||||||
</words>
|
</words>
|
||||||
<words id="bb_small_world_2">
|
<words id="bb_small_world_2">
|
||||||
That is, not this...
|
Not this...
|
||||||
<br>
|
<br>
|
||||||
(because ideas can't spread)
|
(because ideas can't spread)
|
||||||
</words>
|
</words>
|
||||||
|
@ -826,10 +828,10 @@ MY "WHY" FOR MAKING THIS:
|
||||||
WIN
|
WIN
|
||||||
</words>
|
</words>
|
||||||
<words id="sim_start">
|
<words id="sim_start">
|
||||||
> start
|
start simulation
|
||||||
</words>
|
</words>
|
||||||
<words id="sim_stop">
|
<words id="sim_stop">
|
||||||
[] reset & re-draw
|
reset & re-draw
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<!-- - - - - - - - - - - - - -->
|
<!-- - - - - - - - - - - - - -->
|
||||||
|
|
|
@ -23,7 +23,8 @@ SLIDES.push(
|
||||||
network: {
|
network: {
|
||||||
"contagion":0,
|
"contagion":0,
|
||||||
"peeps":[[44,184,0],[155,215,0],[237,105,0],[309,213,0],[646,211,0],[328,305,0],[629,308,0],[417,111,0],[538,362,0],[216,299,0],[94,314,0],[-61,220,0],[68,455,0],[733,147,0],[760,293,0],[776,437,0],[759,48,0],[134,33,0],[929,181,0],[848,111,0],[1013,330,0],[880,269,0],[538,128,0],[189,388,0],[853,356,0]],
|
"peeps":[[44,184,0],[155,215,0],[237,105,0],[309,213,0],[646,211,0],[328,305,0],[629,308,0],[417,111,0],[538,362,0],[216,299,0],[94,314,0],[-61,220,0],[68,455,0],[733,147,0],[760,293,0],[776,437,0],[759,48,0],[134,33,0],[929,181,0],[848,111,0],[1013,330,0],[880,269,0],[538,128,0],[189,388,0],[853,356,0]],
|
||||||
"connections":[[5,6,0]]
|
//"connections":[[5,6,0]],
|
||||||
|
"connections":[[1,0,0],[0,11,0],[2,17,0],[9,23,0],[9,10,0],[9,1,0],[9,5,0],[23,12,0],[3,2,0],[4,13,0],[13,16,0],[13,19,0],[6,14,0],[14,24,0],[14,15,0],[14,21,0],[21,20,0],[21,18,0],[5,6,0]]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -146,7 +147,8 @@ SLIDES.push(
|
||||||
},
|
},
|
||||||
options:{
|
options:{
|
||||||
infectedFrame: 2,
|
infectedFrame: 2,
|
||||||
scale: 2
|
scale: 2,
|
||||||
|
_bottle: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -198,7 +200,8 @@ SLIDES.push(
|
||||||
},
|
},
|
||||||
options:{
|
options:{
|
||||||
infectedFrame: 2,
|
infectedFrame: 2,
|
||||||
scale: 1.5
|
scale: 1.5,
|
||||||
|
_bottle: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -39,7 +39,8 @@ SLIDES.push(
|
||||||
},
|
},
|
||||||
options:{
|
options:{
|
||||||
infectedFrame: 1,
|
infectedFrame: 1,
|
||||||
scale: 1.25
|
scale: 1.25,
|
||||||
|
_dunce: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -133,7 +134,8 @@ SLIDES.push(
|
||||||
options:{
|
options:{
|
||||||
infectedFrame: 1,
|
infectedFrame: 1,
|
||||||
scale: 1.25,
|
scale: 1.25,
|
||||||
startUncuttable: true
|
startUncuttable: true,
|
||||||
|
_dunce: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -29,7 +29,8 @@ SLIDES.push(
|
||||||
options:{
|
options:{
|
||||||
infectedFrame: 2,
|
infectedFrame: 2,
|
||||||
scale: 1.75,
|
scale: 1.75,
|
||||||
startUncuttable: true
|
startUncuttable: true,
|
||||||
|
_bottle: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -95,7 +96,8 @@ SLIDES.push(
|
||||||
},
|
},
|
||||||
options:{
|
options:{
|
||||||
infectedFrame: 3,
|
infectedFrame: 3,
|
||||||
scale: 1.75
|
scale: 1.75,
|
||||||
|
_wisdom: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -158,7 +160,8 @@ SLIDES.push(
|
||||||
options:{
|
options:{
|
||||||
infectedFrame: 3,
|
infectedFrame: 3,
|
||||||
scale: 1.25,
|
scale: 1.25,
|
||||||
startUncuttable: true
|
startUncuttable: true,
|
||||||
|
_wisdom: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -255,7 +258,8 @@ SLIDES.push(
|
||||||
options:{
|
options:{
|
||||||
infectedFrame: 3,
|
infectedFrame: 3,
|
||||||
scale: 1.25,
|
scale: 1.25,
|
||||||
startUncuttable: true
|
startUncuttable: true,
|
||||||
|
_wisdom: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -370,7 +374,8 @@ SLIDES.push(
|
||||||
},
|
},
|
||||||
options:{
|
options:{
|
||||||
infectedFrame: 3,
|
infectedFrame: 3,
|
||||||
scale: 1.75
|
scale: 1.75,
|
||||||
|
_wisdom: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -23,7 +23,8 @@ SLIDES.push(
|
||||||
},
|
},
|
||||||
options:{
|
options:{
|
||||||
infectedFrame: 3,
|
infectedFrame: 3,
|
||||||
scale: 1
|
scale: 1,
|
||||||
|
_wisdom: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -108,7 +109,8 @@ SLIDES.push(
|
||||||
options:{
|
options:{
|
||||||
infectedFrame: 3,
|
infectedFrame: 3,
|
||||||
scale: 1,
|
scale: 1,
|
||||||
startUncuttable: true
|
startUncuttable: true,
|
||||||
|
_wisdom: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -20,7 +20,8 @@ SLIDES.push(
|
||||||
options:{
|
options:{
|
||||||
infectedFrame: 3,
|
infectedFrame: 3,
|
||||||
scale: 1,
|
scale: 1,
|
||||||
startUncuttable: true
|
startUncuttable: true,
|
||||||
|
_wisdom: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -79,6 +80,12 @@ SLIDES.push(
|
||||||
clear:true,
|
clear:true,
|
||||||
add:[
|
add:[
|
||||||
|
|
||||||
|
// PIC
|
||||||
|
{
|
||||||
|
type:"box",
|
||||||
|
img:"sprites/small_world.png", x:-10, y:95, w:970, h:284
|
||||||
|
},
|
||||||
|
|
||||||
// Words
|
// Words
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
|
@ -102,10 +109,6 @@ SLIDES.push(
|
||||||
fontSize:"30px", lineHeight:"30px",
|
fontSize:"30px", lineHeight:"30px",
|
||||||
align:"center"
|
align:"center"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
type:"box",
|
|
||||||
img:"sprites/small_world.png", x:-10, y:95, w:970, h:284
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"bb_small_world_5", x:0, y:360, w:640, h:180,
|
text:"bb_small_world_5", x:0, y:360, w:640, h:180,
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
// HELPERS ///////
|
// HELPERS ///////
|
||||||
//////////////////
|
//////////////////
|
||||||
|
|
||||||
Math.TAU = 6.2831853072;
|
Math.TAU = 6.2831853072; // for true believers
|
||||||
|
|
||||||
// The poor man's jQuery
|
// The poor man's jQuery
|
||||||
function $(query){
|
function $(query){
|
||||||
|
|
|
@ -148,15 +148,25 @@ function Peep(config){
|
||||||
};
|
};
|
||||||
|
|
||||||
// Body Sprite
|
// Body Sprite
|
||||||
|
var _initSpriteScale = 0.3;
|
||||||
self.sprite = new Sprite({
|
self.sprite = new Sprite({
|
||||||
src: "sprites/peeps.png",
|
src: "sprites/peeps.png",
|
||||||
frames:6, sw:200, sh:200,
|
frames:6, sw:200, sh:200,
|
||||||
});
|
});
|
||||||
self.sprite.pivotX = 100;
|
self.sprite.pivotX = 100;
|
||||||
self.sprite.pivotY = 100;
|
self.sprite.pivotY = 100;
|
||||||
var _initSpriteScale = 0.3;
|
|
||||||
self.sprite.scale = _initSpriteScale;
|
self.sprite.scale = _initSpriteScale;
|
||||||
//self.sprite.gotoFrame(1);
|
|
||||||
|
// Prop Sprite
|
||||||
|
self.propSprite = new Sprite({
|
||||||
|
src: "sprites/peeps.png",
|
||||||
|
frames:6, sw:200, sh:200,
|
||||||
|
});
|
||||||
|
self.propSprite.pivotX = 100;
|
||||||
|
self.propSprite.pivotY = 100;
|
||||||
|
self.propSprite.scale = _initSpriteScale;
|
||||||
|
var _bottleAnim = Math.random()*Math.TAU;
|
||||||
|
var _bottleSpeed = 0.01 + Math.random()*0.01;
|
||||||
|
|
||||||
// Draw
|
// Draw
|
||||||
var radius = 25;
|
var radius = 25;
|
||||||
|
@ -219,9 +229,33 @@ function Peep(config){
|
||||||
ctx.translate(self.faceX, self.faceY);
|
ctx.translate(self.faceX, self.faceY);
|
||||||
self.sprite.rotation = 0;
|
self.sprite.rotation = 0;
|
||||||
self.sprite.gotoFrame(self.faceBlink ? 7 : 6);
|
self.sprite.gotoFrame(self.faceBlink ? 7 : 6);
|
||||||
|
if(self.sim.options._wisdom && self.infected){
|
||||||
|
self.sprite.gotoFrame(10);
|
||||||
|
}
|
||||||
|
if(self.sim.options._bottle && self.infected){
|
||||||
|
self.sprite.rotation = Math.sin(_bottleAnim*1.5)*0.15;
|
||||||
|
}
|
||||||
self.sprite.draw(ctx);
|
self.sprite.draw(ctx);
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
|
|
||||||
|
// PROPS?
|
||||||
|
if(self.sim.options._bottle && self.infected){
|
||||||
|
self.propSprite.x = 25;
|
||||||
|
self.propSprite.y = 15;
|
||||||
|
_bottleAnim += _bottleSpeed;
|
||||||
|
self.propSprite.scale = 0.25;
|
||||||
|
self.propSprite.rotation = 0.2 + Math.sin(_bottleAnim)*0.2;
|
||||||
|
self.propSprite.gotoFrame(9);
|
||||||
|
self.propSprite.draw(ctx);
|
||||||
|
}
|
||||||
|
if(self.sim.options._dunce && self.infected){
|
||||||
|
self.propSprite.x = -14;
|
||||||
|
self.propSprite.y = -22;
|
||||||
|
self.propSprite.scale = 0.25;
|
||||||
|
self.propSprite.gotoFrame(8);
|
||||||
|
self.propSprite.draw(ctx);
|
||||||
|
}
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////
|
//////////////////////////////////////////////////////////
|
||||||
// LABEL FOR INFECTED/FRIENDS, BAR, AND CONTAGION LEVEL //
|
// LABEL FOR INFECTED/FRIENDS, BAR, AND CONTAGION LEVEL //
|
||||||
//////////////////////////////////////////////////////////
|
//////////////////////////////////////////////////////////
|
||||||
|
|
|
@ -266,14 +266,12 @@ function Sim(config){
|
||||||
// Draw confetti - NOT AFFECTED BY TRANSFORMS.
|
// Draw confetti - NOT AFFECTED BY TRANSFORMS.
|
||||||
self.confetti.forEach(function(confetti){
|
self.confetti.forEach(function(confetti){
|
||||||
ctx.save();
|
ctx.save();
|
||||||
var _hue = confetti.frame*72; // placeholder
|
var offsetX = -Math.sin(confetti.spin)*9;
|
||||||
ctx.fillStyle = "hsl("+_hue+",100%,80%)";
|
ctx.translate(confetti.x+offsetX, confetti.y);
|
||||||
var offsetX = -Math.sin(confetti.spin)*9;
|
ctx.rotate(Math.sin(confetti.spin)*0.2);
|
||||||
ctx.translate(confetti.x+offsetX, confetti.y);
|
if(confetti.flip) ctx.scale(-1,1);
|
||||||
ctx.rotate(Math.sin(confetti.spin)*0.2);
|
self.confettiSprite.gotoFrame(confetti.frame);
|
||||||
ctx.beginPath();
|
self.confettiSprite.draw(ctx);
|
||||||
ctx.rect(-20,-10,40,20);
|
|
||||||
ctx.fill();
|
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -330,6 +328,15 @@ function Sim(config){
|
||||||
self.confetti = [];
|
self.confetti = [];
|
||||||
self.winWord = {x:0, y:0, ticker:-1};
|
self.winWord = {x:0, y:0, ticker:-1};
|
||||||
|
|
||||||
|
// Confetti Sprite
|
||||||
|
self.confettiSprite = new Sprite({
|
||||||
|
src: "sprites/confetti.png",
|
||||||
|
frames:3, sw:100, sh:50,
|
||||||
|
});
|
||||||
|
self.confettiSprite.pivotX = 50;
|
||||||
|
self.confettiSprite.pivotY = 50;
|
||||||
|
self.confettiSprite.scale = 0.5;
|
||||||
|
|
||||||
self.win = function(bounds){
|
self.win = function(bounds){
|
||||||
|
|
||||||
// ONLY ONCE
|
// ONLY ONCE
|
||||||
|
@ -366,7 +373,8 @@ function Sim(config){
|
||||||
frame: frame,
|
frame: frame,
|
||||||
spinSpeed: spinSpeed,
|
spinSpeed: spinSpeed,
|
||||||
spin: Math.random()*Math.TAU,
|
spin: Math.random()*Math.TAU,
|
||||||
g: 0.10+Math.random()*0.10
|
g: 0.10+Math.random()*0.10,
|
||||||
|
flip: (Math.random()<0.5)
|
||||||
};
|
};
|
||||||
self.confetti.push(confetti);
|
self.confetti.push(confetti);
|
||||||
}
|
}
|
||||||
|
|
|
@ -86,6 +86,14 @@ function Boxes(){
|
||||||
slideshow.next();
|
slideshow.next();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// to prevent sim from resetting...
|
||||||
|
nextButton.onmousedown = function(event){
|
||||||
|
event.stopPropagation();
|
||||||
|
};
|
||||||
|
nextButton.ontouchstart = function(event){
|
||||||
|
event.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
// Replace it in parent!
|
// Replace it in parent!
|
||||||
next.parentNode.replaceChild(nextButton, next);
|
next.parentNode.replaceChild(nextButton, next);
|
||||||
|
|
||||||
|
|
|
@ -29,7 +29,7 @@ function Pencil(){
|
||||||
var _margin = 10;
|
var _margin = 10;
|
||||||
var _offset = 10;
|
var _offset = 10;
|
||||||
self.colors = [
|
self.colors = [
|
||||||
"#ccc",
|
"#888",
|
||||||
"#000",
|
"#000",
|
||||||
"#ff5555"
|
"#ff5555"
|
||||||
];
|
];
|
||||||
|
@ -90,7 +90,7 @@ function Pencil(){
|
||||||
ctx.fillStyle = self.colors[self.sprite.currentFrame];
|
ctx.fillStyle = self.colors[self.sprite.currentFrame];
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.globalAlpha = 0.5;
|
ctx.globalAlpha = 0.5;
|
||||||
ctx.arc(0, 0, 8, 0, Math.TAU);
|
ctx.arc(0, 0, 5, 0, Math.TAU);
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,7 +16,7 @@ subscribe("prepreload", function(){
|
||||||
pre_preloader.parentNode.removeChild(pre_preloader);
|
pre_preloader.parentNode.removeChild(pre_preloader);
|
||||||
|
|
||||||
//slideshow.gotoChapter("Preloader");
|
//slideshow.gotoChapter("Preloader");
|
||||||
slideshow.gotoChapter("Complex");
|
slideshow.gotoChapter("BB");
|
||||||
|
|
||||||
publish("preload");
|
publish("preload");
|
||||||
}
|
}
|
||||||
|
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 86 KiB |
Before Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 240 KiB After Width: | Height: | Size: 284 KiB |
After Width: | Height: | Size: 523 KiB |
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 131 KiB |
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 312 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 6.8 KiB |