Metaballs, Canvas, low fps — OZONE Asylum, home of the Mad Scientists

This page's ID: 30743

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 can't offer much help with the data:URI or much else, but I know the imageData approach would be a lot faster. Here's a quick example to help you out if you're wanting to try that route: [code]<html> <body> <canvas id="canvas" width="128" height="128"></canvas> <script> var context = document.getElementById('canvas').getContext('2d'); var imgData = context.getImageData(0, 0, context.canvas.width, context.canvas.height); var r = Math.floor(Math.random() * 255); var g = Math.floor(Math.random() * 255); var b = Math.floor(Math.random() * 255); var a = Math.floor(Math.random() * 255); var data = imgData.data; var len = data.length; var index = 0; while (index < len) { data[index++] = r; data[index++] = g; data[index++] = b; data[index++] = a; } context.putImageData(imgData, 0, 0); </script> </body> </html>[/code] The pixels for the ImageData are just stored as one big array of rgba values, so to plot a pixel with x-y coordinates you'll basically have to convert from a 2 dimensional array to a 1 dimensional. It should give adequate speeds for what you're currently doing, but the browser support is somewhat limited. Loading...
Options:	Enable Slimies Enable Linkwords

Edit Post