Recursive square: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
 
Line 47: Line 47:
}
}
</canvas>
</canvas>
[[Category:Canvas]]

Latest revision as of 14:27, 1 October 2012

Het "Droste" Effect

Droste.jpg

Drawing hands

DrawingHands.jpg wikipedia:M. C. Escher

Recursive Square

<canvas id="c1" showsrc> function square (l) {

 ctx.strokeRect(0, 0, l, l);
 if (l > 10) {
   square(l-20);
 }

}

var c, ctx; function draw() {

 c = document.getElementById("c1");
 ctx = c.getContext("2d");
 square(250);

} </canvas>

Recursive Square

<canvas id="c2" showsrc> function square (x, y, l) {

 ctx.strokeRect(x, y, l, l);
 if (l > 10) {
   var q = l/2;
   square(x, y, q);
   square(x, y+q, q);
   square(x+q, y, q);
   // square(x+q, y+q, q);
 }

}

var c, ctx; function draw() {

 c = document.getElementById("c2");
 ctx = c.getContext("2d");
 square(0, 0, 250);

} </canvas>