diff --git a/README.md b/README.md index f6e1ac45..2b3db4dd 100644 --- a/README.md +++ b/README.md @@ -15,4 +15,9 @@ We are [Vi Hart](http://vihart.com/) and [Nicky Case](http://ncase.me/). Show us how you're using and remixing Parable of the Polygons! Tweet us at [@vihartvihart](https://twitter.com/vihartvihart) and -[@ncasenmare](https://twitter.com/ncasenmare). \ No newline at end of file +[@ncasenmare](https://twitter.com/ncasenmare). + +--- + +This fork adds pentagons in the style shown in the picture at the bottom. +![](./play/img/yay_pentagon.png) diff --git a/play/automatic/automatic.css b/play/automatic/automatic.css index 30a549b8..74f0d637 100644 --- a/play/automatic/automatic.css +++ b/play/automatic/automatic.css @@ -35,11 +35,21 @@ div{ font-size: 16px; text-align: center; } -#stats_text{ +#segregation_text{ position: absolute; color:#cc2727; font-size: 20px; } +#sad_text{ + position: absolute; + color:#2727cc; + font-size: 20px; +} +#meh_text{ + position: absolute; + color:#cccc27; + font-size: 20px; +} #stats_canvas_container{ background:url(../img/stats.png); width:400px; height:300px; @@ -88,4 +98,4 @@ div{ span.highlight{ color:#cc2727; -} \ No newline at end of file +} diff --git a/play/automatic/automatic.html b/play/automatic/automatic.html index 024422c0..1e06b492 100644 --- a/play/automatic/automatic.html +++ b/play/automatic/automatic.html @@ -11,7 +11,9 @@
-
+
+
+
@@ -22,4 +24,13 @@ - \ No newline at end of file + + diff --git a/play/automatic/automatic.js b/play/automatic/automatic.js index 804fb0d0..3a39846e 100644 --- a/play/automatic/automatic.js +++ b/play/automatic/automatic.js @@ -13,9 +13,10 @@ var DIAGONAL_SQUARED = (TILE_SIZE+5)*(TILE_SIZE+5) + (TILE_SIZE+5)*(TILE_SIZE+5) -window.RATIO_TRIANGLES = 0.5; -window.RATIO_SQUARES = 0.5; -window.EMPTINESS = 0.2; +window.RATIO_TRIANGLES = 0.25; +window.RATIO_SQUARES = 0.25; +window.RATIO_PENTAGONS = 0.25; +window.EMPTINESS = 0.25; var assetsLeft = 0; @@ -36,6 +37,9 @@ addAsset("sadTriangle","../img/sad_triangle.png"); addAsset("yaySquare","../img/yay_square.png"); addAsset("mehSquare","../img/meh_square.png"); addAsset("sadSquare","../img/sad_square.png"); +addAsset("yayPentagon","../img/yay_pentagon.png"); +addAsset("mehPentagon","../img/meh_pentagon.png"); +addAsset("sadPentagon","../img/sad_pentagon.png"); var IS_PICKING_UP = false; var lastMouseX, lastMouseY; @@ -196,7 +200,7 @@ function Draggable(x,y){ }else{ img = images.yayTriangle; } - }else{ + }else if(self.color=="square"){ if(self.shaking){ img = images.sadSquare; }else if(self.bored){ @@ -204,7 +208,15 @@ function Draggable(x,y){ }else{ img = images.yaySquare; } - } + }else{ + if(self.shaking){ + img = images.sadPentagon; + }else if(self.bored){ + img = images.mehPentagon; + }else{ + img = images.yayPentagon; + } + } // Dangle if(self.dragged){ @@ -238,9 +250,16 @@ window.reset = function(){ draggables = []; for(var x=0;x SEGREGATION var segregation = (avg-0.5)*2; + var segregation = avg; if(segregation<0) segregation=0; // Graph it @@ -352,11 +385,30 @@ window.writeStats = function(){ var x = STATS.steps - STATS.offset; var y = 250 - segregation*250+10; stats_ctx.fillRect(x,y,1,5); + // Text + segregation_text.innerHTML = Math.floor(segregation*100)+"%"; + segregation_text.style.top = Math.round(y-15)+"px"; + segregation_text.style.left = Math.round(x+35)+"px"; + stats_ctx.fillStyle = "#2727cc"; + y = 250 - avg_shake*250+10; + stats_ctx.fillRect(x,y,1,5); // Text - stats_text.innerHTML = Math.floor(segregation*100)+"%"; - stats_text.style.top = Math.round(y-15)+"px"; - stats_text.style.left = Math.round(x+35)+"px"; + if(shaking_text){ + shaking_text.innerHTML = Math.floor(avg_shake*100)+"%"; + shaking_text.style.top = Math.round(y-15)+"px"; + shaking_text.style.left = Math.round(x+35)+"px"; + } + + stats_ctx.fillStyle = "#cccc27"; + y = 250 - avg_bored*250+10; + stats_ctx.fillRect(x,y,1,5); + // Text + if(bored_text){ + bored_text.innerHTML = Math.floor(avg_bored*100)+"%"; + bored_text.style.top = Math.round(y-15)+"px"; + bored_text.style.left = Math.round(x+35)+"px"; + } // Button if(START_SIM){ @@ -445,4 +497,4 @@ window.IS_IN_SIGHT = false; window.onload=function(){ reset(); -} \ No newline at end of file +} diff --git a/play/automatic/automatic2.html b/play/automatic/automatic2.html index ede4d72e..28b93f1a 100644 --- a/play/automatic/automatic2.html +++ b/play/automatic/automatic2.html @@ -12,7 +12,9 @@
-
+
+
+
i'll move if less than 33% of my neighbors are like me @@ -59,4 +61,10 @@ window.IS_IN_SIGHT = true; - \ No newline at end of file +window.RATIO_TRIANGLES = 0.4; +window.RATIO_SQUARES = 0.4; +window.RATIO_PENTAGONS = 0.0; +window.EMPTINESS = 0.4; + +window.reset(); + diff --git a/play/automatic/automatic3.html b/play/automatic/automatic3.html index 9b7dc18c..eecb6eda 100644 --- a/play/automatic/automatic3.html +++ b/play/automatic/automatic3.html @@ -12,7 +12,9 @@
-
+
+
+
i'll move if less than 33% of my neighbors are like me @@ -55,4 +57,4 @@ } }); - \ No newline at end of file + diff --git a/play/automatic/automatic4.html b/play/automatic/automatic4.html index 46a2bd74..69d50d5e 100644 --- a/play/automatic/automatic4.html +++ b/play/automatic/automatic4.html @@ -12,7 +12,9 @@
-
+
+
+
i'll move if <33% @@ -59,4 +61,4 @@ } }); - \ No newline at end of file + diff --git a/play/automatic/automatic_sandbox.html b/play/automatic/automatic_sandbox.html index 35364cf1..a8900463 100644 --- a/play/automatic/automatic_sandbox.html +++ b/play/automatic/automatic_sandbox.html @@ -17,7 +17,9 @@
-
+
+
+
i'll move if <33% @@ -26,10 +28,12 @@

- the triangle:square ratio is - 40:40, + the triangle:square:pentagon ratio is + + 25:25:25 + , board is - 20% empty + 25% empty

@@ -45,6 +49,7 @@ + \ No newline at end of file + diff --git a/play/automatic/ds_happy_blink.png b/play/automatic/ds_happy_blink.png new file mode 100644 index 00000000..6a862f06 Binary files /dev/null and b/play/automatic/ds_happy_blink.png differ diff --git a/play/automatic/ds_meh.png b/play/automatic/ds_meh.png new file mode 100644 index 00000000..4f7352a0 Binary files /dev/null and b/play/automatic/ds_meh.png differ diff --git a/play/automatic/nslider.js b/play/automatic/nslider.js new file mode 100644 index 00000000..c8cc1825 --- /dev/null +++ b/play/automatic/nslider.js @@ -0,0 +1,176 @@ +/*** + +new DoubleSlider(dom,{ + + backgrounds:[ + {color:"#cc2727"}, + {color:"#bada55"}, + {color:"#2095dc"} + ], + + values:[0.1,0.9] + +}); + +***/ +function NSlider(dom,config){ + + var self = this; + self.dom = dom; + self.backgrounds = []; + self.sliders = []; + self.values = config.values; + + self.draggingSliderDOM = null; + self.draggingSliderIndex = -1; + + self.sliderCount = config.backgrounds.length; + + // Create DOM + self.dom.className = "ds"; + for(var i=1;i<=self.sliderCount;i++){ + + var dom = document.createElement("div"); + dom.className = "ds_bg"; + self.dom.appendChild(dom); + self.backgrounds[self.sliderCount-i] = dom; + + // CSS + dom.style.backgroundColor = config.backgrounds[self.sliderCount-i].color; + dom.style.backgroundImage = "url("+config.backgrounds[self.sliderCount-i].icon+")"; + if(i==0) dom.style.width = "100%"; + + } + for(var i=0;i<(self.sliderCount-1);i++){ + + var dom = document.createElement("div"); + dom.className = "ds_slider"; + self.dom.appendChild(dom); + self.sliders.push(dom); + + // Events + (function(dom,i,self){ + dom.onmousedown = function(){ + self.draggingSliderDOM = dom; + self.draggingSliderIndex = i; + }; + })(dom,i,self); + + } + + // Slider logic + function onMouseMove(x){ + if(self.draggingSliderDOM){ + var val = x/400; + + var index = self.draggingSliderIndex; + var sliderWidth = 0;//0.025; + var edge_l = 0; + var edge_h = 1; + if(index==0){ + edge_l = sliderWidth/2; + edge_h = self.values[index+1]-sliderWidth; + }else if(index==(self.sliderCount-1)){ + edge_l = self.values[index-1]+sliderWidth; + edge_h = 1-sliderWidth/2; + }else{ + edge_l = self.values[index-1]+sliderWidth; + edge_h = self.values[index+1]-sliderWidth; + } + if(val>edge_h){ + val=edge_h; + }else if(val 0) curtop -= parseInt(obj.scrollTop); + if(obj.offsetParent) { + var pos = findPos(obj.offsetParent); + curleft += pos[0]; + curtop += pos[1]; + }/* else if(obj.ownerDocument) { + var thewindow = obj.ownerDocument.defaultView; + if(!thewindow && obj.ownerDocument.parentWindow) + thewindow = obj.ownerDocument.parentWindow; + if(thewindow) { + if(thewindow.frameElement) { + var pos = findPos(thewindow.frameElement); + curleft += pos[0]; + curtop += pos[1]; + } + } + }*/ + + return [curleft,curtop]; +} diff --git a/play/img/base_pentagon.png b/play/img/base_pentagon.png new file mode 100644 index 00000000..1899b7bb Binary files /dev/null and b/play/img/base_pentagon.png differ diff --git a/play/img/meh_pentagon.png b/play/img/meh_pentagon.png new file mode 100644 index 00000000..4618486a Binary files /dev/null and b/play/img/meh_pentagon.png differ diff --git a/play/img/sad_pentagon.png b/play/img/sad_pentagon.png new file mode 100644 index 00000000..5de0bac6 Binary files /dev/null and b/play/img/sad_pentagon.png differ diff --git a/play/img/yay_pentagon.png b/play/img/yay_pentagon.png new file mode 100644 index 00000000..9a7ac73d Binary files /dev/null and b/play/img/yay_pentagon.png differ diff --git a/play/img/yay_pentagon_blink.png b/play/img/yay_pentagon_blink.png new file mode 100644 index 00000000..ea021e2e Binary files /dev/null and b/play/img/yay_pentagon_blink.png differ