Processing.js - updatePixels() for a specific array

Question

I could manage to cache the array as pixels on my canvas with the help of this code using loadPixels(); and updatePixels(); functions. The problem with that method is it's loading/updating the whole canvas. I only want to cache the array named drawings because if I want to put some UI controls or mouse cursor later, it's going to print them on the canvas as well. What could be the easiest way to rasterize what's stored in that drawings array?

Answer 1

While loadPixels() load the whole drawing (which is great since it's the end result of your work you get that way, not every damn sprite), there is an easy way to load the pixels of a specific image:

The PImage class has it's own loadPixels() method. In short, every image has it's own myPImage.pixels[] array, but you need to load it with myPImage.loadPixels() before you can use it.

Here's some skeleton code right from the Processing reference material:

PImage myImage;
int halfImage;

void setup() {
  size(100, 100);
  halfImage = width * height/2;
  myImage = loadImage("apples.jpg");
  myImage.loadPixels();
  for (int i = 0; i < halfImage; i++) {
    myImage.pixels[i+halfImage] = myImage.pixels[i];
  }
  myImage.updatePixels();
}

void draw() {
  image(myImage, 0, 0);
}

I'll hang around in case you have follow-up questions. Have fun!

---

EDIT: after reading your questions, I decided that you would gain more insight from a working example which demonstrate how to use the pixels[] array than just the basic documentation, so here it is. You can copy and paste it in a Processing IDE and play with the code to get a better understanding of these concepts.

---

I took the liberty to simplify the example you provided to it's bare core so you can understand the basics of pixels[], updatePixels() and loadPixels(). I first wanted to just edit it, but the way it works would have made the exercise too confusing for my taste.

I basically just underlined how to use these concepts by creating a white canvas where you can "draw" with the mouse. When you press "s", it saves the current state of the drawing . When you press "l", you'll load the previously saved state. I think it'll show you what you wanted to understand here.

(the drawing will be sketchy since this isn't the object here so I didn't care about that)

Here's the code. Comments are included for additional insights.

color[] savedBackground;

void setup()
{
  size(400, 400);
  background(255);
  loadPixels();
  savedBackground = pixels.clone();
}

void draw() {
} // I only keep this so the mouse/key events works

void keyPressed() {
  switch (key) {
  case 's':
  case 'S':
    // when you press the 's' key, we save the current image data
    loadPixels();
    cloneArray(pixels, savedBackground);
    println("saved");
    break;
  case 'l':
  case 'L':
    // when you press the 'l' key, we reload the previously saved image data
    cloneArray(savedBackground, pixels);
    updatePixels();
    println("loaded");
    break;
  }
}

void mouseDragged() {
  // this will leave a trail of black dots when you drag the mouse around while pressing a button
  // Since 'pixels' is a 1-dimentional array and I have 2-dimentional coordinates, I have to use
  // math to find the right spot where to edit the array
  pixels[mouseX + (mouseY * width)] = color(0);
  updatePixels();
}

// I'm using this method to clone the arrays
// There are other methods to clone arrays
void cloneArray(color[] original, color[] clone) {
  for (int i = 0; i < original.length; i++) {
    clone[i] = original[i];
  }
}

Have fun!