Problems with imagedata

I’ve been having problems plotting points using getImageData and setImageData. Specifically, it sometimes works, but for no apparent reason, sometimes it doesn’t. For example, consider the following code :

createCanvas(“1”, 320, 450);
setFillColor(“black”);
rect(0, 0, 320, 450);

setStrokeColor(rgb(xcurrent * reddelta, greendelta * i, (450 - ycurrent) * bluedelta));
//Plot a point
line(xcurrent, ycurrent, xcurrent, ycurrent);

The above works. But, If I replace the above with the equivalent imageData code :

createCanvas(“1”, 320, 450);
setFillColor(“black”);
rect(0, 0, 320, 450);
var Sieveimage = getImageData(0, 0, 320, 450);

setRGB(Sieveimage, xcurrent, ycurrent, xcurrent * reddelta, greendelta * i, (450 - ycurrent) * bluedelta, 255);

putImageData(Sieveimage, 0, 0);

The above does not work – nothing ever gets displayed on the screen.

I’ve written code that works fine with imageData but for some reason it’s not working now.

Might anyone know what the problem is? Any help would be greatly appreciated.

Thanks,

jdb2

I don’t have an answer but it’s always better if you share a link to the code so people can see and play with it a bit. If you believe it’s a bug in the system then I recommend sending an email to support@code.org

Sorry… Here’s the code : https://studio.code.org/projects/applab/F0XSqg8Um7SqCRl75RxeeJFTmaXjXzv_Bfhi5jTdOzI

Thanks,

jdb2

All the code I’ve created that uses imageData now no longer works, except this :

https://studio.code.org/projects/applab/-JNF0YyucRzNuIvdgnHc-JgphVE47L9vzkxxIyswQ54

jdb2

Well, it appears that the values supplied to setRGB or setRed, setGreen, setBlue or setAlpha have to be integers. Using Math.round() solves the problem.

Regards,

Jonathan

This seems to be a bug in Code.org as the description of the above kludge isn’t mentioned in the Code.org documentation of the above functions : The documentation just mentions that the variables have type “number”, which they did have, when the code wasn’t working.

Jonathan

Actually, the above “fix” breaks the functionality of the code and I get an incorrect plot where x values that are less then zero or greater than 320 somehow get plotted anyway.

Don’t know what to quite do about it…

Jonathan

Well, a bounds check before rounding solves the problem, but it’s still a huge kludge and it appears to be a bug in Code.org .

jdb2

Hi @jdb2 - this looks like quite the app! It seems like you determined it was a bug, so I would recommend contacting support@code.org - they can confirm that for you and add it to their “to-do list”

@kaitie_o_bryan Thanks! :grinning: I’m teaching my nephew how to program using fractal plotting algorithms as examples. :grinning: I did contact Code dot org support via e-mail but they said I should post to the forums, and to which I responded that I already had :neutral_face: The link to the working version of the code is here : https://studio.code.org/projects/applab/veHFot7XHW2oJofYloVOzxJZ3IpzpALIrBm3gdxJaFI . The other app that uses imageData is here : https://studio.code.org/projects/applab/mL3VZrVjLHuAa1KYQOw8basjjluZ5gxUe3uNLTBo26I

I remember coding these fractal plotting algorithms on my HP48GX when I was 10 or 11 years old in Junior high :grinning: Since my nephew is almost 12, I thought that fractals would be a suitable example :grinning:

Regards,

jdb2

@ kaitie_o_bryan Well, the actual program code on Code dot org is just Javascript. Almost all of the functions that take pixel values as arguments work even if the pixel values are floating point numbers. Now we enter the imageData functions, which, like most of the functions / methods on Code dot org, are just Javascript wrapper functions. The problem here is that the wrapper functions fail if, for the imageData case, if the pixel inputs are not integers, which is inconsistent with all the other functions on Code dot org which take pixel inputs. This is just bad software design and an example of non-graceful failure – you’d expect the wrapper functions to just transparently round their arguments but issue a warning to the console. Also, the imageData wrapper functions seem to “wrap” their pixel inputs, modulo the canvas width and height of any pixel input that exceeds said width and height, which is another bug.

Regards,

Jonathan

Another possible bug that I discovered relates to the behavior of the drawImageURL() function. Specifically, even without a clearCanvas() function call, and even if the target image has a white, completely opaque background, there is horrible flicker when the drawImageURL() function is called in quick succession. Mozilla Firefox and Google Chrome, in Linux and on Windows, both exhibit this behavior, but, strangely, Microsoft’s Windows 10 Edge browser shows no flickering.

Regards,

jdb2