Recursive square: Difference between revisions
No edit summary |
|||
| (5 intermediate revisions by one other user not shown) | |||
| Line 31: | Line 31: | ||
function square (x, y, l) { | function square (x, y, l) { | ||
ctx.strokeRect(x, y, l, l); | ctx.strokeRect(x, y, l, l); | ||
if (l > | if (l > 10) { | ||
var q = l/2; | var q = l/2; | ||
square(x, y, q); | square(x, y, q); | ||
square(x, y+q, q); | square(x, y+q, q); | ||
square(x+q, y, q); | square(x+q, y, q); | ||
square(x+q, y+q, q); | // square(x+q, y+q, q); | ||
} | } | ||
} | } | ||
| Line 47: | Line 47: | ||
} | } | ||
</canvas> | </canvas> | ||
[[Category:Canvas]] | |||
Latest revision as of 14:27, 1 October 2012
Het "Droste" Effect
Drawing hands
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>