Perlin Noise + Canvas — OZONE Asylum, home of the Mad Scientists

DHTML/Javascript

Perlin Noise + Canvas

This page's ID: 30982

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Here's a little function that fills a canvas with Perlin noise. It's not rocket science, but maybe someone will find it useful in their tinkering. (The "canvas_ctx.globalAlpha = 4 / size" is totally tweakable, and will adjust how much smoothness vs. noise you'll get. It just seemed to produce decent results for what I was doing (terrain generation).) As usual, best results in Opera and FF3. Webkit (and Chrome?) look terrible. [code]function perlin_noise (canvas) { var canvas_ctx = canvas.getContext ("2d"), offscreen = document.createElement ("canvas"), offscreen_ctx = offscreen.getContext ("2d"), saved_alpha = canvas_ctx.globalAlpha /* Fill the offscreen buffer with random noise. / offscreen.width = canvas.width offscreen.height = canvas.height var offscreen_id = offscreen_ctx.getImageData (0, 0, offscreen.width, offscreen.height), offscreen_pixels = offscreen_id.data for (var i = 0; i < offscreen_pixels.length; i += 4) { offscreen_pixels[i ] = offscreen_pixels[i + 1] = offscreen_pixels[i + 2] = Math.floor (Math.random () 256) offscreen_pixels[i + 3] = 255 } offscreen_ctx.putImageData (offscreen_id, 0, 0) /* Scale random iterations onto the canvas to generate Perlin noise. / for (var size = 4; size <= offscreen.width; size = 2) { var x = Math.floor (Math.random () * (offscreen.width - size)), y = Math.floor (Math.random () * (offscreen.height - size)) canvas_ctx.globalAlpha = 4 / size canvas_ctx.drawImage (offscreen, x, y, size, size, 0, 0, canvas.width, canvas.height) } canvas_ctx.globalAlpha = saved_alpha }[/code] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu