# Debug to processing pjs from processing 3
**URL:** https://discourse.processing.org/t/debug-to-processing-pjs-from-processing-3/25004
**Category:** Coding Questions
**Created:** [October 29, 2020, 9:10am UTC](https://discourse.processing.org/t/debug-to-processing-pjs-from-processing-3/25004 "2020-10-29T09:10:03Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@adrianmc](https://discourse.processing.org/u/adrianmc)
#### Post date: [October 29, 2020, 9:10am UTC](https://discourse.processing.org/t/debug-to-processing-pjs-from-processing-3/25004/1 "2020-10-29T09:10:03Z")
> please format code with \ button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)
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,
```auto
// 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();
}
```
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [October 29, 2020, 11:15am UTC](https://discourse.processing.org/t/debug-to-processing-pjs-from-processing-3/25004/2 "2020-10-29T11:15:40Z")
> [@adrianmc](#):
>
> , however I’m not sure if _pixels_ is the new function that pjs is not reading.
_pixels[]_ isn’t a function but a PImage’ internal array:
[https://GoToLoop.GitHub.io/processing-js.github.io/reference/pixels\_/](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/](https://GoToLoop.GitHub.io/processing-js.github.io/reference/preload/)
---
### Author:  [@adrianmc](https://discourse.processing.org/u/adrianmc)
#### Post date: [October 29, 2020, 4:36pm UTC](https://discourse.processing.org/t/debug-to-processing-pjs-from-processing-3/25004/3 "2020-10-29T16:36:18Z")
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.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [October 29, 2020, 4:39pm UTC](https://discourse.processing.org/t/debug-to-processing-pjs-from-processing-3/25004/4 "2020-10-29T16:39:40Z")
> **[r/processing - What happened to processing.js](https://www.Reddit.com/r/processing/comments/i0omnj/what_happened_to_processingjs/g1fjosa?utm_source=share&utm_medium=web2x&context=3)**
>
> 6 votes and 7 comments so far on Reddit
---
### Author:  [@adrianmc](https://discourse.processing.org/u/adrianmc)
#### Post date: [October 29, 2020, 6:13pm UTC](https://discourse.processing.org/t/debug-to-processing-pjs-from-processing-3/25004/5 "2020-10-29T18:13:47Z")
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?
```auto
// 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();
}
```