Exporting Sketch to Website using Javascript Mode - Always shows Errors

Hi, I am trying to embed my processing sketches on my website using the Javascript Mode. Every time I export however, it comes up with some type of error within the console log and won't load my sketch. The errors I have received on two different sketches are:

VM20:145 Uncaught TypeError: circle.bind is not a function at eval (eval at attach (processing.js:872), :145:17) at Processing.Sketch.attach (processing.js:873) at executeSketch (processing.js:21501) at new Processing.Processing (processing.js:21535) at callback (processing.js:950) at XMLHttpRequest.xhr.onreadystatechange (processing.js:929)

VM20:29 Uncaught ReferenceError: createShape is not defined at Processing.Processing.setup (eval at attach (processing.js:872), :29:9) at executeSketch (processing.js:21508) at new Processing.Processing (processing.js:21535) at callback (processing.js:950) at XMLHttpRequest.xhr.onreadystatechange (processing.js:929)

I had to download the JavaScriptMode from an online source so I am not sure if it will work, but it seems to handle simple sketches just fine. Is it having problems with 2D arrays? or something else I am unaware of.

The code for one of the sketches not working is below:

` PImage logo;

// Three possible shapes
PShape[] shapes = new PShape[4]; //Pshape array
int shapesize = 100; //shape sizes
int cols = 5;
int rows = 5;
int[][] shapeNumbers;

color[][] colors; //2D color array
color[] colorsb = 
{ 
#F71F02, //red
#13C081, //green
#5BC0EB, //blue
#FDE74C, //yellow
#133C55,
//#FF00FF, //pink
//#FF8000, //orange
};




void setup() {
  size(1920, 1080, P2D);
  ellipseMode(CENTER);
 rectMode(CENTER);
 logo = loadImage("thesis_logo.png");
  shapes[0] = createShape(ELLIPSE,shapesize,shapesize,shapesize,shapesize);
  //shapes[0].setFill(color(255,0,0));
  //shapes[0].setStroke(255);
  shapes[1] = createShape(RECT,shapesize,shapesize,shapesize,shapesize);
  //shapes[1].setFill(color(0));
  //shapes[1].setStroke(255);
  shapeMode(CENTER);
  shapes[2] = createShape();  
  shapes[2].beginShape();
 //shapes[2].fill(0); //fill squares
 // shapes[2].setStroke(255);
   shapes[2].vertex(-14+shapesize, -20+shapesize);
   shapes[2].vertex(-47+shapesize, -15+shapesize);
   shapes[2].vertex(-23+shapesize, 7+shapesize);
   shapes[2].vertex(-29+shapesize, 40+shapesize);
   shapes[2].vertex(0+shapesize, 25+shapesize);
    shapes[2].vertex(29+shapesize, 40+shapesize);
    shapes[2].vertex(23+shapesize, 7+shapesize);
    shapes[2].vertex(47+shapesize, -15+shapesize);
     shapes[2].vertex(14+shapesize, -20+shapesize);
  shapes[2].vertex(0+shapesize, -50+shapesize);
  shapes[2].endShape(CLOSE);

   shapes[3] = createShape(TRIANGLE,30, 75, 58, 20, 86, 75);  


shapeNumbers = new int[rows][cols];
 colors();
mix();
}




void draw() {
  background(255);
 shapes(150,150);
  image(logo, 50, 50, width/8, height/8);



 if (keyPressed) {
      if(key==ENTER){
       mix();
       colors();
      }
    }
}

void shapes(int posx, int posy){
 pushMatrix();
  translate(width/3,200);
 for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {

      int shapeIndex = shapeNumbers[i][j];
PShape currentShape = shapes[shapeIndex];
     currentShape.setFill(colors[i][j]);
     currentShape.setStroke(false);
    shape(currentShape,i*posx,j*posy,shapesize,shapesize);

    if (mousePressed ==true){
      int x = i*posx+width/3;
      int y = j*posy+200;
     if (mouseX > x && mouseX < (x + shapesize) && mouseY > y && mouseY < (y + shapesize)){
      colors[i][j]=color(255);
    }
    }
    }
  }
    popMatrix();
}

void mix(){
 for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {

    shapeNumbers[i][j] = int(random(shapes.length));

    }}
}

void colors(){
  colors = new color[cols][rows];
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      int rand = (int)random(colorsb.length); //choose a random value in array
      colors[i][j] = color(colorsb[rand]); //random color from array
    }
  }
}`

Answers

  • The error says createShape is not defined. P.js doesn't have much support these days, so it is my understanding. You cannot use the current Processing reference but you need to use the reference based on Processing 2 or even 1.5 (@GoToLoop might know more about this). Have you consider using P5.js? For your second question, you should consider creating a diff post and provide the code.

    Kf

  • Yes I am trying to use P5.js but I am not sure on how to format my code into P5.js

    P5.js doesn't have the time syntax for 2D arrays and things like PShape. Can someone help format my code into P5.js?

Sign In or Register to comment.