A simple Mandelbrot explorer for HTML5, in javascript. I plan on optimizing and extending the functionality of the example when I have a bit less uni work to keep up with.
Showing posts with label canvas. Show all posts
Showing posts with label canvas. Show all posts
Wednesday, 19 January 2011
HTML5 Mandelbrot Explorer
Labels:
canvas,
Fractal,
html5,
Mandelbrot
Tuesday, 18 January 2011
First Canvas Experiment: BitmapData
Lots of people have been talking about html 5 and canvas for a while now. As an actionscript purist I had decided not to venture into the world of incompatibility quite yet, but having seen some of the cool chrome experiments again recently, I decided to give writing some canvas toys a little go.
My first experiment is a simple one, just some randomly updating pixels on a screen.
Here is the .js code:
My first experiment is a simple one, just some randomly updating pixels on a screen.
Here is the .js code:
function setPixel(bitmapData, x, y, r, g, b, a) { index = (x + y * bitmapData.width) * 4; bitmapData.data[index+0] = r; bitmapData.data[index+1] = g; bitmapData.data[index+2] = b; bitmapData.data[index+3] = a; } element = document.getElementById("bitmap"); canvas = element.getContext("2d"); width = parseInt(element.getAttribute("width")); height = parseInt(element.getAttribute("height")); setInterval('update()',30); function update() { bitmap = canvas.createImageData(width,height); for (i = 0; i < 10000; i++) { x = parseInt(Math.random() * width); y = parseInt(Math.random() * height); r = parseInt(Math.random() * 256); g = parseInt(Math.random() * 256); b = parseInt(Math.random() * 256); setPixel(bitmap, x, y, r, g, b, 0xff); } canvas.putImageData(bitmap, 0, 0); }
Labels:
canvas,
html5,
javascript
Subscribe to:
Posts (Atom)