Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added pentagons #4

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Added pentagons #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cd1e342
Added pentagons. Added an NSlider. Added stats.
dncnmcdougall Dec 9, 2014
73b7ef1
Merge https://github.com/dncnmcdougall/polygons
dncnmcdougall Dec 9, 2014
2ac051d
Changed readme.
dncnmcdougall Dec 9, 2014
f7a3dce
Added the pentagon to the readme.
dncnmcdougall Dec 9, 2014
e8235cd
Updated the readme.
dncnmcdougall Dec 9, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
[@ncasenmare](https://twitter.com/ncasenmare).

---

This fork adds pentagons in the style shown in the picture at the bottom.
![](./play/img/yay_pentagon.png)
14 changes: 12 additions & 2 deletions play/automatic/automatic.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -88,4 +98,4 @@ div{

span.highlight{
color:#cc2727;
}
}
15 changes: 13 additions & 2 deletions play/automatic/automatic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@

<div id="stats_canvas_container">
<canvas id="stats_canvas" width="370" height="270"></canvas>
<div id="stats_text"></div>
<div id="segregation_text"></div>
<div id="sad_text"></div>
<div id="meh_text"></div>
</div>

<div class="ui" id="moving" onclick="START_SIM=!START_SIM; doneBuffer = 60; window.writeStats()"></div>
Expand All @@ -22,4 +24,13 @@
</html>

<script src="../lib/Mouse.js"></script>
<script src="automatic.js"></script>
<script src="automatic.js"></script>
<script>

window.RATIO_TRIANGLES = 0.4;
window.RATIO_SQUARES = 0.4;
window.RATIO_PENTAGONS = 0.0;
window.EMPTINESS = 0.4;

window.reset();
</script>
76 changes: 64 additions & 12 deletions play/automatic/automatic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -196,15 +200,23 @@ function Draggable(x,y){
}else{
img = images.yayTriangle;
}
}else{
}else if(self.color=="square"){
if(self.shaking){
img = images.sadSquare;
}else if(self.bored){
img = images.mehSquare;
}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){
Expand Down Expand Up @@ -238,9 +250,16 @@ window.reset = function(){
draggables = [];
for(var x=0;x<GRID_SIZE;x++){
for(var y=0;y<GRID_SIZE;y++){
if(Math.random()<(1-window.EMPTINESS)){
var rand = Math.random();
if(rand<(1-window.EMPTINESS)){
var draggable = new Draggable((x+0.5)*TILE_SIZE, (y+0.5)*TILE_SIZE);
draggable.color = (Math.random()<window.RATIO_TRIANGLES) ? "triangle" : "square";
if(rand<window.RATIO_TRIANGLES){
draggable.color = "triangle";
}else if(rand<(window.RATIO_TRIANGLES+window.RATIO_SQUARES)){
draggable.color = "square";
}else{
draggable.color = "pentagon";
}
draggables.push(draggable);
}
}
Expand Down Expand Up @@ -314,7 +333,12 @@ window.render = function(){
lastMouseY = Mouse.y;

}
var stats_text = document.getElementById("stats_text");
var segregation_text = document.getElementById("segregation_text");
if(!segregation_text){
var segregation_text = document.getElementById("stats_text");
}
var shaking_text = document.getElementById("sad_text");
var bored_text = document.getElementById("meh_text");

var tmp_stats = document.createElement("canvas");
tmp_stats.width = stats_canvas.width;
Expand All @@ -325,12 +349,20 @@ window.writeStats = function(){
if(!draggables || draggables.length==0) return;

// Average Sameness Ratio
// Average shaking
// Average bored
var total = 0;
var total_shake = 0;
var total_bored = 0;
for(var i=0;i<draggables.length;i++){
var d = draggables[i];
total += d.sameness || 0;
total_shake += (d.shaking?1:0);
total_bored += (d.bored?1:0);
}
var avg = total/draggables.length;
var avg_shake = total_shake/draggables.length;
var avg_bored = total_bored/draggables.length;
if(isNaN(avg)) debugger;

// If stats oversteps, bump back
Expand All @@ -345,18 +377,38 @@ window.writeStats = function(){

// AVG -> SEGREGATION
var segregation = (avg-0.5)*2;
var segregation = avg;
if(segregation<0) segregation=0;

// Graph it
stats_ctx.fillStyle = "#cc2727";
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){
Expand Down Expand Up @@ -445,4 +497,4 @@ window.IS_IN_SIGHT = false;

window.onload=function(){
reset();
}
}
12 changes: 10 additions & 2 deletions play/automatic/automatic2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@

<div id="stats_canvas_container">
<canvas id="stats_canvas" width="370" height="270"></canvas>
<div id="stats_text"></div>
<div id="segregation_text"></div>
<div id="sad_text"></div>
<div id="meh_text"></div>
</div>

i'll move if <span class="highlight">less than <span id="bias_text">33%</span></span> of my neighbors are like me
Expand Down Expand Up @@ -59,4 +61,10 @@

window.IS_IN_SIGHT = true;

</script>
window.RATIO_TRIANGLES = 0.4;
window.RATIO_SQUARES = 0.4;
window.RATIO_PENTAGONS = 0.0;
window.EMPTINESS = 0.4;

window.reset();
</script>
6 changes: 4 additions & 2 deletions play/automatic/automatic3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@

<div id="stats_canvas_container">
<canvas id="stats_canvas" width="370" height="270"></canvas>
<div id="stats_text"></div>
<div id="segregation_text"></div>
<div id="sad_text"></div>
<div id="meh_text"></div>
</div>

i'll move if <span class="highlight">less than <span id="bias_text">33%</span></span> of my neighbors are like me
Expand Down Expand Up @@ -55,4 +57,4 @@
}
});

</script>
</script>
6 changes: 4 additions & 2 deletions play/automatic/automatic4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@

<div id="stats_canvas_container">
<canvas id="stats_canvas" width="370" height="270"></canvas>
<div id="stats_text"></div>
<div id="segregation_text"></div>
<div id="sad_text"></div>
<div id="meh_text"></div>
</div>

i'll move if <span class="highlight">&lt;<span id="bias_text">33%</span></span>
Expand Down Expand Up @@ -59,4 +61,4 @@
}
});

</script>
</script>
29 changes: 19 additions & 10 deletions play/automatic/automatic_sandbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@

<div id="stats_canvas_container">
<canvas id="stats_canvas" width="370" height="270"></canvas>
<div id="stats_text"></div>
<div id="segregation_text"></div>
<div id="sad_text"></div>
<div id="meh_text"></div>
</div>

i'll move if <span class="highlight">&lt;<span id="bias_text">33%</span></span>
Expand All @@ -26,10 +28,12 @@
<div id="slider"></div>
<br>

the triangle:square ratio is
<span class="highlight"><span id="ratio_text_triangles">40</span>:<span id="ratio_text_squares">40</span></span>,
the triangle:square:pentagon ratio is
<span class="highlight">
<span id="ratio_text_triangles">25</span>:<span id="ratio_text_squares">25</span>:<span id="ratio_text_pentagons">25</span>
</span>,
board is
<span class="highlight" id="empty_text">20% empty</span>
<span class="highlight" id="empty_text">25% empty</span>
<br>
<div id="slider2"></div>
<br>
Expand All @@ -45,6 +49,7 @@
<script src="../lib/Mouse.js"></script>
<script src="automatic.js"></script>
<script src="doubleslider.js"></script>
<script src="nslider.js"></script>
<script>
window.PICK_UP_ANYONE = true;

Expand Down Expand Up @@ -72,26 +77,30 @@
}
});

var whatever = new DoubleSlider(document.getElementById("slider2"),{
var whatever = new NSlider(document.getElementById("slider2"),{
backgrounds:[
{color:"#FFDD56",icon:"ds_happy.png"},
{color:"#567DFF",icon:"ds_happy.png"},
{color:"#56FF7D",icon:"ds_happy.png"},
{color:"#000",icon:"ds_sad.png"}
],
values:[0.40,0.80],
values:[0.25,0.50,0.75],
onChange:function(values){

// Actual values
var VALUE_1 = values[0];
var VALUE_2 = values[1];
window.EMPTINESS = 1-VALUE_2;
window.RATIO_TRIANGLES = VALUE_1/VALUE_2;
window.RATIO_SQUARES = (VALUE_2-VALUE_1)/VALUE_2;
var VALUE_3 = values[2];
window.EMPTINESS = 1-VALUE_3;
window.RATIO_TRIANGLES = VALUE_1;
window.RATIO_SQUARES = (VALUE_2-VALUE_1);
window.RATIO_PENTAGONS = (VALUE_3-VALUE_2);

// Write stats
START_SIM = false;
document.getElementById("ratio_text_triangles").innerHTML = Math.round(window.RATIO_TRIANGLES*100);
document.getElementById("ratio_text_squares").innerHTML = Math.round(window.RATIO_SQUARES*100);
document.getElementById("ratio_text_pentagons").innerHTML = Math.round(window.RATIO_PENTAGONS*100);
document.getElementById("empty_text").innerHTML = Math.round(window.EMPTINESS*100)+"% empty";

},
Expand All @@ -100,4 +109,4 @@
}
});

</script>
</script>
Binary file added play/automatic/ds_happy_blink.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added play/automatic/ds_meh.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading