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	I saved this script from somewhere and I found a way to make it work on a local machine so it doesn't throw a security error. Is there anyway to avoid it? [code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Canvas Primer - Example: ImageData colour inversion filter</title> <script type="text/javascript"> function runcolors(colorNum) { var elem = document.getElementById('myCanvas'); // Get the canvas 2d context. var context = elem.getContext('2d'); // Create a new image. var img = new Image(); img.src = 'logoBig.jpg'; elem.width=img.width elem.height=img.height // Once it's loaded draw the image on canvas and invert the colors. img.addEventListener('load', function () { var x = 0, y = 0; // Draw the image on canvas. context.drawImage(this, x, y,this.width,this.height,x,y,this.width,this.height); // Get the pixels. try { try { var imgd = context.getImageData(x, y, img.width, img.height); } catch (e) { netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); var imgd = context.getImageData(x, y, img.width, img.height); } } catch (e) { throw new Error("unable to access image data: " + e); } var pix = imgd.data; // Loop over each pixel and invert the color. for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = 255 - pix[i ]; // red pix[i+1] = 255 - pix[i+1]colorNum; // green pix[i+2] = 255 - pix[i+2]; // blue // i+3 is alpha (the fourth element) } // Draw the ImageData object. context.putImageData(imgd, x, y); }, false); } /todo: make this function work. function rgb2lum( r, g, b ) { return( (0.299/255.0)r + (0.587/255.0)g + (0.114/255.0)b ); } / </script> </head> <body onload="runcolors(1)"> <canvas id="myCanvas" width="150" height="150" onmouseover="runcolors(.75)"></canvas> </body> </html> [/code] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu