I’ve been using Code.org to teach my nephew coding and to show him various fractal algorithms. The problem is that Code.org’s scripting language is extremely slow. This isn’t the main problem though : In the App Lab, if I draw a line to the canvas it’s much faster than getting the image data for the canvas and plotting pixels by setting their x, y coordinates and red, green, blue and alpha values. Does anyone know why this is? To draw a pixel in the “fast” version of my code I draw a line whose start and end is the same coordinate. If I use the image data and set pixel values, which is much more accurate and looks better, then it’s much slower. Is there any way to get around this?
Hello @jdb2 I found this question hadn’t received an answer for a while but I still wanted to get back to you. The short answer is that pixel by pixel canvas editing is in fact slow in App Lab and you’re not doing anything wrong on your end. We haven’t invested the time to make it faster and there isn’t currently work in the backlog to make that happen. There may be tricks like the ones you’re describing that are a little faster, but there’s no easy quick fix to make things work more quickly.
@gtwrobel Thanks for the reply! While functions like setRGB() are slower than say, line(), the putImageData() function is really slow. To get around this, I use a method that calls setRGB, say, 100 or more times before putImageData() is called.
Also, I’ve been corresponding with Code dot org support about the imageData functions. Specifically, all the imageData related functions that take pixel and color inputs fail when those inputs are not integers. This is inconsistent with the rest of the Code dot org graphics functions which transparently round their arguments. It also violates graceful failure : The imageData related functions should, instead of failing, just transparently round their arguments but issue a warning to the console.
Another problem that I’ve discovered is that pixel positions that are out of bounds of the current canvas wrap around modulo the canvas width and height when using the imageData related functions.
Finally, there’s another problem that I’ve discovered with drawImageURL(). When calling it in rapid succession, even if the image has an opaque white background, there is horrible flickering. I’ve seen this behavior in Mozilla Firefox, Google Chrome, but, strangely, not in Microsoft’s Edge browser.
If you could forward these bugs to the dev team I’d be grateful
While functions like setRGB() are slower than say, line(), the putImageData() function is really slow. To get around this, I use a method that calls setRGB, say, 100 or more times before putImageData() is called.