# Problems with imagedata

**URL:** <https://forum.code.org/t/problems-with-imagedata/27078>\
**Category:** Website and Tools Questions\
**Created:** [May 27, 2019, 3:41pm UTC](https://forum.code.org/t/problems-with-imagedata/27078 "2019-05-27T15:41:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [May 27, 2019, 3:41pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/1 "2019-05-27T15:41:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gjschmidt](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/gjschmidt/32/4922_2.png) [@gjschmidt](https://forum.code.org/u/gjschmidt)\
**Post date:** [May 27, 2019, 7:07pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/2 "2019-05-27T19:07:03Z")

</div>

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](mailto:support@code.org)

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [May 27, 2019, 7:24pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/3 "2019-05-27T19:24:01Z")

</div>

Sorry… Here’s the code : [https://studio.code.org/projects/applab/F0XSqg8Um7SqCRl75RxeeJFTmaXjXzv\_Bfhi5jTdOzI](https://studio.code.org/projects/applab/F0XSqg8Um7SqCRl75RxeeJFTmaXjXzv_Bfhi5jTdOzI)

Thanks,

jdb2

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [May 27, 2019, 7:33pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/4 "2019-05-27T19:33:32Z")

</div>

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

[https://studio.code.org/projects/applab/-JNF0YyucRzNuIvdgnHc-JgphVE47L9vzkxxIyswQ54](https://studio.code.org/projects/applab/-JNF0YyucRzNuIvdgnHc-JgphVE47L9vzkxxIyswQ54)

jdb2

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [May 28, 2019, 6:28pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/5 "2019-05-28T18:28:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [May 28, 2019, 6:35pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/6 "2019-05-28T18:35:50Z")

</div>

This seems to be a bug in [Code.org](http://Code.org) as the description of the above kludge isn’t mentioned in the [Code.org](http://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

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [May 28, 2019, 6:47pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/7 "2019-05-28T18:47:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [May 29, 2019, 3:25pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/8 "2019-05-29T15:25:52Z")

</div>

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](http://Code.org) .

jdb2

---

<div class="post-metadata">

**Author:** ![kaitie\_o\_bryan](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/kaitie_o_bryan/32/2278_2.png) [@kaitie\_o\_bryan](https://forum.code.org/u/kaitie_o_bryan)\
**Post date:** [May 30, 2019, 2:04am UTC](https://forum.code.org/t/problems-with-imagedata/27078/9 "2019-05-30T02:04:03Z")

</div>

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](mailto:support@code.org) - they can confirm that for you and add it to their “to-do list”

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [May 30, 2019, 5:43pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/10 "2019-05-30T17:43:49Z")

</div>

@kaitie_o_bryan Thanks! 😀 I’m teaching my nephew how to program using fractal plotting algorithms as examples. 😀 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 😐 The link to the working version of the code is here : [https://studio.code.org/projects/applab/veHFot7XHW2oJofYloVOzxJZ3IpzpALIrBm3gdxJaFI](https://studio.code.org/projects/applab/veHFot7XHW2oJofYloVOzxJZ3IpzpALIrBm3gdxJaFI) . The other app that uses imageData is here : [https://studio.code.org/projects/applab/mL3VZrVjLHuAa1KYQOw8basjjluZ5gxUe3uNLTBo26I](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 😀 Since my nephew is almost 12, I thought that fractals would be a suitable example 😀

Regards,

jdb2

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [June 2, 2019, 4:48pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/11 "2019-06-02T16:48:16Z")

</div>

@ [kaitie\_o\_bryan](https://forum.code.org/u/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

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [June 3, 2019, 4:04pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/12 "2019-06-03T16:04:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [June 19, 2019, 4:04pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/13 "2019-06-19T16:04:16Z")

</div>

I’ve been working on some infinite zooming Mandelbrot set plotting code for my nephew and I’ve run into more problems with imageData. Specifically, clearCanvas() doesn’t appear to work. I have to manually set each pixel in the canvas to white or else the drawImageURL() background image isn’t erased. Curiously, even though clearCanvas() seems to do nothing, leaving it out and doing the manual white clear using the imageData functions results in nothing being erased on the screen.

Here is the code :

[https://studio.code.org/projects/applab/cEyijaeeYso9vvWitqqgDVhr4ujq8JfOkYL7VmALrJ8](https://studio.code.org/projects/applab/cEyijaeeYso9vvWitqqgDVhr4ujq8JfOkYL7VmALrJ8)

Does anyone have an idea of what the problem might be?

Thanks,

jdb2

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [June 11, 2019, 4:04pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/14 "2019-06-11T16:04:33Z")

</div>

I have been working on an “infinite zooming” Mandelbrot set plotter for my nephew, but, I’ve been having problems with the drawImageURL() function. Specifically, after I draw a background image with said function, and then, when I try to draw something on top of the background, what I try to draw never shows up. Here is the code :

```
createCanvas("1", 320, 450);
var image1;
var image2;
image1 = getImageData(0, 0, 320, 450);
image2 = image1;
//drawImageURL("https://i209.photobucket.com/albums/bb286/wqo2/Code%20dot%20org/mandelbrot_zpshdyinvkd.png");
//setStrokeColor("white");
//setFillColor("white");
setStrokeColor("black");
setFillColor("black");
rect(0, 0, 160, 225);
//createCanvas("2", 320, 450);
//putImageData(image2, 0, 0);

```

You can also find the code here :

[https://studio.code.org/projects/applab/GAFJieOESJ02H2H5b8MOEmq\_ftQWMiQpOXO1\_BnglSY](https://studio.code.org/projects/applab/GAFJieOESJ02H2H5b8MOEmq_ftQWMiQpOXO1_BnglSY)

Without the above code working, I can’t save the imageData for the current canvas and let the user select another region into which to zoom in the current plot.

Does anyone know what the problem might be?

Thanks and regards,

jdb2

---

<div class="post-metadata">

**Author:** ![jadams1](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jadams1/32/4835_2.png) [@jadams1](https://forum.code.org/u/jadams1)\
**Post date:** [June 11, 2019, 5:09pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/15 "2019-06-11T17:09:57Z")

</div>

I was able to get the image below - is this what you are looking to create?

> **[Check out what I made](https://studio.code.org/projects/applab/YYeW8M0ouGQSG8Or9McY5LM7YvxHbiVo-FghQV60j_k)**
>
> I wrote the code myself with Code.org

 ![Screenshot_2019-06-11%20Check%20out%20what%20I%20made](https://us1.discourse-cdn.com/flex016/uploads/codeorgforum/original/2X/1/1d031910b9f6edfb69d698e7ca667e96b3bb0bae.png)

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [June 19, 2019, 4:18pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/16 "2019-06-19T16:18:12Z")

</div>

That is what my code created initially, before I added zooming 🙂 Now that I have infinite zoom capability, I initially load that image from my Photobucket acount using drawImageURL(). The problem is that the only way to clear the screen after using drawImageURL() is to manually use setRGB() to set each pixel to white.

Regards,

jdb2

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [June 19, 2019, 4:13pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/17 "2019-06-19T16:13:04Z")

</div>

I’ve been working on an infinite zoom Mandelbrot set plotter for my nephew. Even though I have a highly optimized inner loop, with only three multiplications, the code on Code dot org is **extremely slow**. In fact, it’s slower than it is on my 24+ year old 3.68MHz HP48GX calculator!

I’m thinking that the problem lies with Code dot org’s “interpreter within an interpreter” with regard to some of the Javascript wrapper functions. The inner loop is :

```
while ((rsquare + isquare) <= 4 && (temp >= 1)) {
      temp = temp - 1;
      rsquare = r*r;
      isquare = i*i;
      zrsquare = (r + i)*(r + i);
      r1 = rsquare - isquare + y;
      i = zrsquare - rsquare - isquare + x;
      r = r1;
}

```

Here is a link to the code :

[https://studio.code.org/projects/applab/cEyijaeeYso9vvWitqqgDVhr4ujq8JfOkYL7VmALrJ8](https://studio.code.org/projects/applab/cEyijaeeYso9vvWitqqgDVhr4ujq8JfOkYL7VmALrJ8)

Could anyone shed some light on why this code is so slow?

Thanks,

jdb2

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/hannah/32/4837_2.png) [@hannah](https://forum.code.org/u/hannah)\
**Post date:** [June 19, 2019, 8:05pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/18 "2019-06-19T20:05:18Z")

</div>

Hi @jdb2 - That’s quite a project you are working on! Most of what you are doing here is outside of the scope of what App Lab is designed to do well, which is to help students learn to program while creating mobile apps. Most likely this explains the slow-down issues you are experiencing.

Have you or your nephew worked through any of the curricula? For his age, I would recommend checking out Game Lab, in particular [Unit 3](https://studio.code.org/s/csd3-2019) of Computer Science Discoveries.

Best wishes!  
~ Hannah

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [June 30, 2019, 5:23pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/19 "2019-06-30T17:23:30Z")

</div>

@hannah Thanks for the reply 🙂 I’ve had to migrate some of my code which uses Code dot org’s sandboxed Javascript to Javascript proper, using the Canvas API. I implemented the setRGB() function as follows :

```
function setRGB(image, width1, x1, y1, r, g, b, a) {
  var t1 = y1*width1*4 + x1*4;
  image.data[t1] = r;
  image.data[t1 + 1] = g;
  image.data[t1 + 2] = b;
  image.data[t1 + 3] = a;
 }

```

The above setRGB function is about at least 1000x faster than the Code dot org version. In a modified version of the backend function on Code dot org’s App Lab, the “width1” parameter would need to be global, and, as such, wouldn’t need to be included in the setRGB() function as a parameter.

Perhaps you can pass along my advice to the dev team?

Thanks,

jdb2

---

<div class="post-metadata">

**Author:** ![jdb2](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdb2/32/4527_2.png) [@jdb2](https://forum.code.org/u/jdb2)\
**Post date:** [June 30, 2019, 6:32pm UTC](https://forum.code.org/t/problems-with-imagedata/27078/20 "2019-06-30T18:32:11Z")

</div>

Here’s a setRGB() function with graceful failure that automatically uses the active canvas dimensions :

```
var canvas = document.getElementById('activeCanvas');
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var canvasImage = ctx.getImageData(0, 0, width-1, height-1);

...

function setRGB(imageData, x1, y1, r, g, b, a) {
  var t2 = (x1 - Math.floor(x1)) + (y1 - Math.floor(y1)) + (r - Math.floor(r)) +(g - Math.floor(g)) + (b - Math.floor(b)) + (a - Math.floor(a));
  var x1;
  var y2;
  var r2;
  var g2;
  var b2;
  var a2;
  if ( t2 != 0 ) {
    console.log("Warning : Non-integer parameter detected -- rounding");
    x2 = Math.round(x1);
    y2 = Math.round(y1);
    r2 = Math.round(r);
    g2 = Math.round(g);
    b2 = Math.round(b);
    a2 = Math.round(a);
  }
  else {
    x2 = x1;
    y2 = y1;
    r2 = r;
    g2 = g;
    b2 = b;
    a2 = a;
  }
  var t1 = y2*(width - 1)*4 + x2 * 4;
  imageData.data[t1] = r2;
  imageData.data[t1 + 1] = g2;
  imageData.data[t1 + 2] = b2;
  imageData.data[t1 + 3] = a2;
 }

```

jdb2

[Next page](https://forum.code.org/t/problems-with-imagedata/27078.md?page=2)