"getImageData is not a function" error when using P3D processing.js

Processing Coding Questions
1

Hello.
I am trying to display one of my processing sketches in the browser with processing.js and it works fine both from processing “Run” and the browser when I am using size(1900,1200), but when I add P3D to size(), then the program works from processing with run, but not in the browser giving me this error:
Uncaught TypeError: drawing.$ensureContext(…).getImageData is not a function processing.js:19173

I tried digging into the processing.js code, but quickly got lost and I don’t know what to do now. It seems that P3D render mode does not support getImageData.

Code:

/* @pjs preload="Logo.jpg"; */

ArrayList<PVector> points = new ArrayList<PVector>();
float o;
void setup() {
 size(1088,156,P3D);
 points = JpgToPVec(0,0);
}

ArrayList<PVector> JpgToPVec(float extraX, float extraY) {
  PVector location;
  ArrayList<PVector> pointsTemp= new ArrayList<PVector>();
  PImage img = loadImage("Logo.jpg");
  loadPixels();
  for(float x = 0; x < width; x++){
  for(float y = 0; y < height; y++) {
   location = new PVector(x,y,0);
   int loc = (int)x+(int)y*width;
   float r = red(img.pixels[loc]);
   float g = green(img.pixels[loc]);
   float b = blue(img.pixels[loc]);
   if(r >= 250 && g >= 250 && b >= 250) {
     x+=extraX;
     y+=extraY;
     pointsTemp.add(location);
   }
  }
 }
  return pointsTemp;
}
void draw() {
  background(0);
  points = JpgToPVec(random(0.05,0.3),random(0.2,3.9));
  for(o = 0; o < points.size(); o++) {
    float x = points.get((int)o).x;
    float y = points.get((int)o).y;
    stroke(255,200,60);
    ellipse(x,y,1,1);
  }
}
1 Like
2

I did some refactoring on your code and got it working on Pjs too using renderer P3D: :partying_face:

JpgToPVec/
    JpgToPVec.pde
    index.html
    img.jpg

index.html:

<script defer src=https://CDN.JSDelivr.net/processing.js/latest/mainfile></script>
<canvas data-processing-sources=JpgToPVec.pde></canvas>

JpgToPVec.pde:

/**
 * JpgToPVec (v1.1)
 * by Heiwan (2019/Jan/14)
 * mod GoToLoop
 *
 * https://Discourse.Processing.org/t/
 * getimagedata-is-not-a-function-error-when-using-p3d-processing-js/7505/2
 */

/* @pjs preload="img.jpg"; pauseOnBlur="true"; */

static final String FILENAME = "img.jpg";

//static final String RENDERER = JAVA2D;
static final String RENDERER = P3D;

static final color BG = 0, COLOUR = #FFC83C, MIN_COLOR = 250;
static final float BOLD = 1.0;

import java.util.List;
final List<PVector> points = new ArrayList<PVector>();

PImage img;

void settings() {
  img = loadImage(FILENAME);
  size(img.width, img.height, RENDERER);
}

void setup() {
  if (1/2 == 1/2.)  settings();

  colorMode(RGB);
  stroke(COLOUR);
  strokeWeight(BOLD);
}

void draw() {
  background(BG);
  jpgToPVec(img, random(.05, .3), random(.2, 3.9), points);
  for (final PVector v : points)  point(v.x, v.y);
}

static List<PVector> jpgToPVec(PImage img, float xx, float yy) {
  return jpgToPVec(img, xx, yy, null);
}

static List<PVector> jpgToPVec(PImage img, float xx, float yy, List<PVector> vecs) {
  if (vecs == null)  vecs = new ArrayList<PVector>();
  else               vecs.clear();

  img.loadPixels();

  final color[] pix = img.pixels;
  final int w = img.width, h = img.height;

  for (float x = 0; x < w; ++x)  for (float y = 0; y < h; ++y) {
    final color p = pix[(int) y*w + (int) x];
    final color r = p >> 020 & 0xff, g = p >> 010 & 0xff, b = p & 0xff;

    if (r >= MIN_COLOR && g >= MIN_COLOR && b >= MIN_COLOR) {
      vecs.add(new PVector(x, y));
      x += xx;
      y += yy;
    }
  }

  return vecs;
}
1 Like