Debug to processing pjs from processing 3

Processing Coding Questions
1

please format code with </> button * homework policy * asking questions

Hi all I’m having a problem trying to upload this code to a website, I understand pjs runs with and older version of processing, however I’m not sure if pixels is the new function that pjs is not reading.

This is my code,



// Source monaLisa image
PImage monaLisa;
// Resize it
PImage smaller;
// Giant array of images
PImage[] allImages;
// Corresponding brightness value
float[] brightness;
// Images by brightness
PImage[] brightImages;

// Size of each "cell"
int scl = 14;
int w, h;

void setup() {
  size(1650, 1100);
  monaLisa = loadImage("pearl.jpg");

  //allImages = new PImage[files.length-1];
  // Use a smaller amount just for testing
  allImages = new PImage[100];
  // Need brightness average for each image
  brightness = new float[allImages.length];

  // Only 256 brightness values
  brightImages = new PImage[256];

  // Deal with all the images
  for (int i = 0; i < allImages.length; i++) {
    //get all images
    allImages[i] = loadImage("nW_" + nf(i, 4) + ".jpg");
 
    // Load the image
    //PImage img = loadImage(filename);
    PImage img = allImages[i];
    // Shrink it down
    allImages[i] = createImage(scl, scl, RGB);
    allImages[i].copy(img, 0, 0, img.width, img.height, 0, 0, scl, scl);
 //   allImages[i].loadPixels();

    // Calculate average brightness
    float avg = 0;
    for (int j = 0; j < allImages[i].pixels.length; j++) {
      float b =  brightness(allImages[i].pixels[j]);
      avg += b;
    }
    avg /= allImages[i].pixels.length;

    brightness[i] = avg;
  }

  // Find the closest image for each brightness value
  for (int i = 0; i < brightImages.length; i++) {
    float record = 256;
    for (int j = 0; j < brightness.length; j++) {
      float diff = abs(i - brightness[j]);
      if (diff < record) {
        record = diff;
        brightImages[i] = allImages[j];
      }
    }
  }

  // how many cols and rows
  w = monaLisa.width/scl;
  h = monaLisa.height/scl;

  smaller = createImage(w, h, RGB);
  smaller.copy(monaLisa, 0, 0, monaLisa.width, monaLisa.height, 0, 0, w, h);
}

void draw() {
  background(0);
//  smaller.loadPixels();
  // Columns and rows
  for (int x =0; x < w; x++) {
    for (int y = 0; y < h; y++) {
      // Draw an image with equivalent brightness to source pixel
      int index = x + y * w;
      color c = smaller.pixels[index];
      int imageIndex = int(brightness(c));

      image(brightImages[imageIndex], x*scl, y*scl, scl, scl);
    }
  }
  noLoop();
}
2

pixels[] isn’t a function but a PImage’ internal array:
https://GoToLoop.GitHub.io/processing-js.github.io/reference/pixels_/

Regardless a loaded PImage needs a @pjs preload directive in order to be in a ready state on setup():
https://GoToLoop.GitHub.io/processing-js.github.io/reference/preload/

3

Thank you GTL.
Do you know or does anyone know where can I download or find de java docs for psj to search for the functions which I can’t use as they belong to newer versions.

4
1 Like
5

So i was using a function while it was a float from the sketch.
There are no errors, at least in the code.
At open processing where I’m testing its visibility the sketch shows a black canvas, on processing is running well.
I’m not sure if I’m writing over a function
ANYONE?

// Source monaLisa image
PImage base;
// Resize it
PImage smaller;
// Giant array of images
PImage[] allImages;
// Corresponding brightness value
//float[] brightness;
float[] bright;
// Images by brightness
PImage[] brightImages;

// Size of each "cell"
int scl = 10;
int w, h;

void setup() {
  size(1650, 1100);
  base = loadImage("pearl.jpg");

  // Use a smaller amount just for testing
  allImages = new PImage[100];
  // Need brightness average for each image
  bright = new float[allImages.length];

  // Only 256 brightness values
  brightImages = new PImage[256];

  // Deal with all the images
  for (int i = 0; i < allImages.length; i++) {
    //get all images
    allImages[i] = loadImage("nW_" + nf(i, 4) + ".jpg");
    // Load the image
    //PImage img = loadImage(filename);
    PImage img = allImages[i];
    // Shrink it down
    allImages[i] = createImage(scl, scl, RGB);
    allImages[i].copy(img, 0, 0, img.width, img.height, 0, 0, scl, scl);
    allImages[i].loadPixels();

    // Calculate average brightness
    float avg = 0;
    for (int j = 0; j < allImages[i].pixels.length; j++) {
      float b =  brightness(allImages[i].pixels[j]);
      avg += b;
    }
    avg /= allImages[i].pixels.length;
    bright[i] = avg;
    allImages[i].updatePixels();
  }

  // Find the closest image for each brightness value
  for (int i = 0; i < brightImages.length; i++) {
    float record = 256;
    for (int j = 0; j < bright.length; j++) {
      float diff = abs(i - bright[j]);
      if (diff < record) {
        record = diff;
        brightImages[i] = allImages[j];
      }
    }
  }

  // how many cols and rows
  w = base.width/scl;
  h = base.height/scl;

  smaller = createImage(w, h, RGB);
  smaller.copy(base, 0, 0, base.width, base.height, 0, 0, w, h);
}

void draw() {
  background(0);
  smaller.loadPixels();
  // Columns and rows
  for (int x =0; x < w; x++) {
    for (int y = 0; y < h; y++) {
      // Draw an image with equivalent brightness to source pixel
      
      int index = x + y * w;
      color c = smaller.pixels[index];
      int imageIndex = int(brightness(c));
      //image(brightImages[val], x*scl, y*scl, scl, scl);
      image(brightImages[imageIndex], x*scl, y*scl, scl, scl);
    }
  }
  noLoop();
  smaller.updatePixels();
}