A tree fractal using circles and HTML5 Canvas.
A little project that I forked over from Curran and with his help we were able to make the fractal more coloful. I plan to make more but this was fun understanding how to use HTML5 canvas.
forked from curran's block: Tree Fractal with Circles
Original example from github.com/curran/HTML5Examples
Built with blockbuilder.org
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!-- | |
| An interactive fractal experiment using HTML5 Canvas | |
| Curran Kelleher 10/28/2014 | |
| --> | |
| <title>fractal</title> | |
| </head> | |
| <body> | |
| <canvas id="fractal" width="960" height="500"></canvas> | |
| <script> | |
| var canvas = document.getElementById("fractal"), | |
| ctx = canvas.getContext("2d"), | |
| nMax = 95, | |
| mouseX = 600, mouseY = 107 | |
| scaleFactor = (100 - 0.509952000000001) / 100; | |
| function redraw (){ | |
| var scale = 4, | |
| angle = -mouseY / canvas.height * Math.PI / 8; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| var n = Math.floor(nMax * mouseX / 960); | |
| //HTML Canvas API > curran used mouseX on line 30 to make it baller | |
| ctx.save(); | |
| ctx.translate(475, 320); | |
| //ctx.rotate(mouseX/50); | |
| drawGeometry(scale, angle, 0, n, false); | |
| ctx.restore(); | |
| } | |
| // The recursive fractal definition | |
| function drawGeometry(scale, angle, i, n, flip){ | |
| drawCircle(0, 0, scale / 2, i) | |
| ctx.translate(0, -scale); | |
| ctx.rotate(flip ? angle : -angle); | |
| if(i < n){ | |
| ctx.save(); | |
| // Continue the current branch. | |
| drawGeometry(scale * scaleFactor, angle, i+1, n, flip); | |
| // Create a new branch every 10 circles. | |
| if(i % 11 === 0){ | |
| drawGeometry(scale * scaleFactor, angle, i+1, n, !flip); | |
| } | |
| ctx.restore(); | |
| } | |
| } | |
| function drawCircle(x, y, radius, i){ | |
| var color = "rgb("+(i*20%255)+","+(i*15%255)+","+(i*18%255)+")"; | |
| ctx.fillStyle=color; | |
| //console.log(color) | |
| ctx.beginPath(); | |
| ctx.arc(x, y, radius, 0, 2 * Math.PI, false); | |
| ctx.fill(); | |
| } | |
| redraw(); | |
| canvas.addEventListener("mousemove",function(e){ | |
| mouseX = e.x; | |
| mouseY = e.y; | |
| redraw(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
