diff --git a/index.html b/index.html index 56c8f346..ecadba25 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,8 @@ + + diff --git a/npm-debug.log.3884792172 b/npm-debug.log.3884792172 new file mode 100644 index 00000000..e69de29b diff --git a/sketches/checker.js b/sketches/checker.js new file mode 100644 index 00000000..22cdde90 --- /dev/null +++ b/sketches/checker.js @@ -0,0 +1,119 @@ +//Author: Alvaro Rodriguez +//March 7th 2017 + +//Implementado desde 0 +var c = 0; + +var sketch8 = function( p ){ + var n = 10; + p.setup = function(){ + var myCanvas = p.createCanvas(400, 400); + p.background(192,255,255); + }; + + p.draw = function(){ + + //Draw matriz (green squares) + p.background(192,255,255); + var n = 10; + for(var j = 0; j < 10; j++){ + for(var i = 0; i < 10; i++){ + p.fill(0,255,0); + p.noStroke(); + if(j %2 == 0 && i % 2 == 0) + p.rect(i*40,j*40,40,40); + else if(j % 2 != 0 && i %2 !=0) + p.rect(i*40,j*40,40,40); + } + } + + if(!p.mouseIsPressed){ + var k; + var c = 1; + + for(var i = n-1; i >=1; i--){ + k = i; + for(var j = 1; j <= n-i; j++){ + if(i == 9 || i == 8 || i == 6 || i == 3 || i == 1){ + p.fill(255,255,255); + p.noStroke(); + + p.triangle((k*40),(j*40)-9,(k*40)-4.5,(j*40)-4.5,(k*40)+4.5,(j*40)-4.5); + p.triangle((k*40),(j*40),(k*40)-4.5,(j*40)-4.5,(k*40)+4.5,(j*40)-4.5); + + p.triangle((k*40),(j*40)+9,(k*40)-4.5,(j*40)+4.5,(k*40)+4.5,(j*40)+4.5); + p.triangle((k*40),(j*40),(k*40)-4.5,(j*40)+4.5,(k*40)+4.5,(j*40)+4.5); + + p.fill(0); + p.triangle((k*40)-9,(j*40),(k*40)-4.5,(j*40)-4.5,(k*40)-4.5,(j*40)+4.5); + p.triangle((k*40),(j*40),(k*40)-4.5,(j*40)-4.5,(k*40)-4.5,(j*40)+4.5); + + p.triangle((k*40)+9,(j*40),(k*40)+4.5,(j*40)-4.5,(k*40)+4.5,(j*40)+4.5); + p.triangle((k*40),(j*40),(k*40)+4.5,(j*40)-4.5,(k*40)+4.5,(j*40)+4.5); + } + else{ + p.fill(0); + p.noStroke(); + p.triangle((k*40),(j*40)-9,(k*40)-4.5,(j*40)-4.5,(k*40)+4.5,(j*40)-4.5); + p.triangle((k*40),(j*40),(k*40)-4.5,(j*40)-4.5,(k*40)+4.5,(j*40)-4.5); + + p.triangle((k*40),(j*40)+9,(k*40)-4.5,(j*40)+4.5,(k*40)+4.5,(j*40)+4.5); + p.triangle((k*40),(j*40),(k*40)-4.5,(j*40)+4.5,(k*40)+4.5,(j*40)+4.5); + + p.fill(255,255,255); + p.triangle((k*40)-9,(j*40),(k*40)-4.5,(j*40)-4.5,(k*40)-4.5,(j*40)+4.5); + p.triangle((k*40),(j*40),(k*40)-4.5,(j*40)-4.5,(k*40)-4.5,(j*40)+4.5); + + p.triangle((k*40)+9,(j*40),(k*40)+4.5,(j*40)-4.5,(k*40)+4.5,(j*40)+4.5); + p.triangle((k*40),(j*40),(k*40)+4.5,(j*40)-4.5,(k*40)+4.5,(j*40)+4.5); + } + k++; + c++; + } + } + + for(var i = 2; i <= n-1; i++){ + k = i; + for(var j = 1; j <= n-i; j++){ + if(i == 2 || i == 4 || i == 7 || i == 9){ + p.fill(255,255,255); + p.noStroke(); + p.triangle((j*40),(k*40)-9,(j*40)-4.5,(k*40)-4.5,(j*40)+4.5,(k*40)-4.5); + p.triangle((j*40),(k*40),(j*40)-4.5,(k*40)-4.5,(j*40)+4.5,(k*40)-4.5); + + p.triangle((j*40),(k*40)+9,(j*40)-4.5,(k*40)+4.5,(j*40)+4.5,(k*40)+4.5); + p.triangle((j*40),(k*40),(j*40)-4.5,(k*40)+4.5,(j*40)+4.5,(k*40)+4.5); + + p.fill(0); + p.triangle((j*40)-9,(k*40),(j*40)-4.5,(k*40)-4.5,(j*40)-4.5,(k*40)+4.5); + p.triangle((j*40),(k*40),(j*40)-4.5,(k*40)-4.5,(j*40)-4.5,(k*40)+4.5); + + p.triangle((j*40)+9,(k*40),(j*40)+4.5,(k*40)-4.5,(j*40)+4.5,(k*40)+4.5); + p.triangle((j*40),(k*40),(j*40)+4.5,(k*40)-4.5,(j*40)+4.5,(k*40)+4.5); + }else{ + p.fill(0); + p.noStroke(); + p.triangle((j*40),(k*40)-9,(j*40)-4.5,(k*40)-4.5,(j*40)+4.5,(k*40)-4.5); + p.triangle((j*40),(k*40),(j*40)-4.5,(k*40)-4.5,(j*40)+4.5,(k*40)-4.5); + + p.triangle((j*40),(k*40)+9,(j*40)-4.5,(k*40)+4.5,(j*40)+4.5,(k*40)+4.5); + p.triangle((j*40),(k*40),(j*40)-4.5,(k*40)+4.5,(j*40)+4.5,(k*40)+4.5); + + p.fill(255,255,255); + p.triangle((j*40)-9,(k*40),(j*40)-4.5,(k*40)-4.5,(j*40)-4.5,(k*40)+4.5); + p.triangle((j*40),(k*40),(j*40)-4.5,(k*40)-4.5,(j*40)-4.5,(k*40)+4.5); + + p.triangle((j*40)+9,(k*40),(j*40)+4.5,(k*40)-4.5,(j*40)+4.5,(k*40)+4.5); + p.triangle((j*40),(k*40),(j*40)+4.5,(k*40)-4.5,(j*40)+4.5,(k*40)+4.5); + } + k++; + } + } + } + + + }; + +} + +var myp5_8 = new p5(sketch8, 'checker_id'); \ No newline at end of file diff --git a/sketches/reverse_spoke.js b/sketches/reverse_spoke.js new file mode 100644 index 00000000..a03af1ac --- /dev/null +++ b/sketches/reverse_spoke.js @@ -0,0 +1,58 @@ +//Author: Alvaro Rodriguez +//March 4th 2017 + +//Implementado desde 0 +var c = 0; +var sketch6 = function( p ){ + p.setup = function(){ + var myCanvas = p.createCanvas(700, 400); + p.background(191,191,191); + p.frameRate(50); + }; + + p.draw = function(){ + + p.stroke(0); + + + + p.ellipse(350,200, 350,350); + p.fill(0); + p.ellipse(350,200, 10,10); + + + var q = c; + + for(var i = 0; i <= 2*p.PI; i += p.QUARTER_PI/2){ + p.fill(q); + p.stroke(127,127,127); + p.strokeWeight(3); + p.arc(350,200, 350, 350, i, i+p.QUARTER_PI/2, p.PIE); + q+=15; + //} + q = q%255; + } + + if(!p.mouseIsPressed){ + + p.ellipse(350,200, 350,350); + p.fill(0); + p.ellipse(350,200, 10,10); + p.noFill(); + + for(var i = 0; i <= 2*p.PI; i += p.QUARTER_PI/2){ + p.fill(c); + p.stroke(127,127,127); + p.strokeWeight(3); + p.arc(350,200, 350, 350, i, i+p.QUARTER_PI/2, p.PIE); + c+=15; + //} + c = c%255; + } + + } + }; + +} + +var myp5_6 = new p5(sketch6, 'reverse_spoke_illusion_id'); \ No newline at end of file diff --git a/source.md b/source.md index f5732d45..5b69d58c 100644 --- a/source.md +++ b/source.md @@ -645,6 +645,13 @@ V: ## Optical Illusions (others) +
+Reverse Spoke Illusion + +V: + +## Optical Illusions (others) +
Movement illusions
@@ -664,8 +671,8 @@ V: ## Optical Illusions (others)
- -
Checker
+
+ Checker
V: