P5 makes me crazy！

[AbleYudada]

let planeImage
var easycam;
let eyex=200, eyey=100, eyez=200;
let cx=100, cy=10, cz=100;
let angle = 339;
let dx = 1.0, dy=1.0, dz = 1.0;
let pg =[];
let tv;


let p1, p2, p3, p4, p55, p6, p7, p8;
let d1, d2, d3, d4, d5, d6, d7, d8;
let shortWall, wall, wallN, wallS, s;
function preload() {
  planeImage = loadImage('data/plane.jpg');
  wall = loadImage ("data/sheet.jpg");
  p1 = loadImage ("data/sheet.jpg");
  p2 = loadImage ("data/sheet.jpg");
  p3 = loadImage ("data/sheet.jpg");
  p4 = loadImage ("data/sheet.jpg");
  p55 = loadImage ("data/sheet.jpg");
  p6 = loadImage ("data/sheet.jpg");

  s = loadImage ("data/sheet.jpg");
  tv = createVideo('data/splick.mp4');
  tv.loop();
 //tv.volume(50);
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  setAttributes('antialias', true);
  //easycam = createEasyCam();
 textureMode(NORMAL);

  perspective(1.15, float(width)/float(height), 10., 40000.);
  pg[0] = createGraphics(1920, 1080, WEBGL);
  keyPressed();
}
// function windowResized() {
//   resizeCanvas(windowWidth, windowHeight);
//   easycam.setViewport([0,0,windowWidth, windowHeight]);
// }
function keyPressed ()
{
//  console.log(keyCode);


// Motion keys - avatar moves, viewpoint changes.


  if (angle<0) angle = angle + 360.0;
   else if (angle > 360.0) angle = angle - 360.0;
  dx = bigcos(angle);
  cx = dx*20000.0;
  dz = bigsin(angle);
  cz = dz*20000.0;
//console.log(eyex,eyey,eyez,angle,dx,dz);


   if (eyey < 20) eyey = 20.0;   // Enforce depth rules.
    else if (eyey > 500.0) eyey = 500.0;
  if (eyex < 0) eyex = 1;
  if (eyex > 1000) eyex = 999;
  if (eyez < 0) eyez = 0;
  if (eyez > 1000) eyez = 1000;
}
function draw() {
// dx = mouseX;
//dy = mouseY;
  background(0);
  pg[0].background(0);

  pg[0].push();
  pg[0].rotateZ(PI);
  pg[0].translate(-pg[0].width / 2, -pg[0].height / 2,0);
//D
    pg[0].image(tv,0,0);

    pg[0].ellipse(150, 75, 60, 60);//Error in this place！！！ :sob:
//
//  pg[0].strokeWeight(4);
  pg[0].pop();




  //pg[0].rect(pg[0].width / 2, pg[0].height / 2, 50, 50);
  push()
  translate(100,100,10);

  image(pg[0],0,0,192,108);
  pop();
  if (keyIsPressed === true) {

    if (keyCode == UP_ARROW)              // Move 'forward'
    {
      eyex += 2*dx; eyez += 2*dz;
    } else if (keyCode == DOWN_ARROW)     // Move 'backward
    {
      eyex -= 1*dx; eyez -= 2*dz;

    }
     if (keyCode == LEFT_ARROW)     // Turn left a unit (CCW)
    {
      angle = angle + 1.0;
    } else if (keyCode == RIGHT_ARROW)    // Turn right a unit (CW)
      angle = angle - 1.0;

   if (key == 'w') eyey = eyey + 10;   // UP
    if (key == 's') eyey = eyey - 10;   // DOWN

      if (angle<0) angle = angle + 360.0;
       else if (angle > 360.0) angle = angle - 360.0;
      dx = bigcos(angle);
      cx = dx*20000.0;
      dz = bigsin(angle);
      cz = dz*20000.0;
    //console.log(eyex,eyey,eyez,angle,dx,dz);


       if (eyey < 20) eyey = 20.0;   // Enforce depth rules.
        else if (eyey > 500.0) eyey = 500.0;
      if (eyex < 0) eyex = 1;
      if (eyex > 1000) eyex = 999;
      if (eyez < 0) eyez = 0;
      if (eyez > 1000) eyez = 1000;

  }
  camera(eyex, eyey, eyez, cx, cy, cz, 0, -1, 0);
noStroke();
  ambientLight(255);
  prism (0, 0, 0, 1000, 500, 1000, p6, p1, p2, p3, s);
   drawWall1();
   drawWall2();
  normalMaterial();


//   push();
//   translate(0, 0, 0);
// //  rotateZ(frameCount * 0.01);
//   rotateX(PI/2);
//   //rotateY(frameCount * 0.01);
//   texture(planeImage);
//   plane(300);
//   pop();
//
//
// //  normalMaterial();
//   fill(255);
//   push();
//   translate(0, -150, 150);
// //  rotateZ(frameCount * 0.01);
// //  rotateX(PI/2);
//   //rotateY(frameCount * 0.01);
//   //texture(planeImage);
//   fill(230);
//   plane(300);
//   pop();
//
//   push();
//   translate(0, -150, -150);
// //  rotateZ(frameCount * 0.01);
// //  rotateX(PI/2);
//   //rotateY(frameCount * 0.01);
//   //texture(planeImage);
//   fill(230);
//   plane(300);
//   pop();
//
//   push();
//   translate(150, -150, 0);
// //  rotateZ(frameCount * 0.01);
//   rotateY(PI/2);
//   //rotateY(frameCount * 0.01);
//   //texture(planeImage);
//   fill(230);
//   plane(300);
//   pop();
//   push();
//   translate(-150, -150, 0);
// //  rotateZ(frameCount * 0.01);
//   rotateY(PI/2);
//   //rotateY(frameCount * 0.01);
//   //texture(planeImage);
//   fill(230);
//   plane(300);
//   pop();
}
function drawWall1()
{
     push();
// North wall
   translate (0, 0, dz);

   beginShape();
    if (p4 != null) texture(p4);
    vertex (200,  0,  500,  0, 1);
    vertex (800,  0,  500,  1, 1);
    vertex (800, 300, 500,  1, 0);
    vertex (200,  300, 500,  0, 0);
   endShape();
   pop();
}

function drawWall2()
{
     push();
// North wall
   translate (0, 0, dz);

   beginShape();
    if (p5 != null) texture(p55);
    vertex (200,  0,  501,  0, 1);
    vertex (800,  0,  501,  1, 1);
    vertex (800, 300, 501,  1, 0);
    vertex (200,  300, 501,  0, 0);
   endShape();
   pop();
}

function prism (x,y,z,dx,dy,dz,north,south,east,west,top)
{
  push();
  translate (x, y, z);
// North
   beginShape();
    if (north != null) texture(north);
    vertex ( 0,  0, dz,  0, 1);
    vertex (dx,  0, dz,  1, 1);
    vertex (dx, dy, dz,  1, 0);
    vertex ( 0, dy, dz,  0, 0);
   endShape();

// South

   beginShape();
    if (south != null) texture(south);
    vertex ( 0,  0, 0,  0, 1);
    vertex (dx,  0, 0,  1, 1);
    vertex (dx, dy, 0,  1, 0);
    vertex ( 0, dy, 0,  0, 0);
   endShape();

// East

   beginShape();
   if (east != null) texture(east);
   vertex (dx, 0,  0,  0, 1);
   vertex (dx, 0,  dz, 1, 1);
   vertex (dx, dy, dz, 1, 0);
   vertex (dx, dy, 0,  0, 0);
   endShape();

// West

   beginShape();
   if (west != null) texture(west);
   vertex (0, 0,  0,  0, 1);
   vertex (0, 0,  dz, 1, 1);
   vertex (0, dy, dz, 1, 0);
   vertex (0, dy, 0,  0, 0);
   endShape();

// Top

   beginShape();
   if (top != null) texture(top);
   else fill (160, 82, 45); // Sienna
   vertex ( 0, dy, 0,  0, 0);
   vertex (dx, dy, 0, 1, 0);
   vertex (dx, dy, dz, 1, 1);
   vertex ( 0, dy, dz,  0, 1);
   endShape();

 // Bottom

   beginShape();
    if (planeImage != null) texture(planeImage);
   vertex ( 0, 0, 0,  0, 0);
   vertex (dx, 0, 0, 1, 0);
   vertex (dx, 0, dz, 1, 1);
   vertex ( 0, 0, dz,  0, 1);
   endShape();
  translate (-x, -y, -z);
  pop();
}

function bigsin (s)
{
 if (s > 360.0) s = s - 360.0;
 else if (s < 0.0) s = s + 360.0;

 if (s <= 90.0) return sin (s*DEG_TO_RAD);
 else if (s<=180.0) return sin ((180.0-s)*DEG_TO_RAD);
 else if (s<=270.0) return -sin((s-180.0)*DEG_TO_RAD);
 else return -sin((360.0-s)*DEG_TO_RAD);
}

function bigcos (s)
{
   if (s> 360.0) s = s - 360.0;
 else if (s<0.0) s = s+ 360.0;

  if (s <= 90.0) return cos (s*DEG_TO_RAD);
 else if (s<=180.0) return -cos ((180.0-s)*DEG_TO_RAD);
 else if (s<=270.0) return -cos((s-180.0)*DEG_TO_RAD);
 else return cos((360.0-s)*DEG_TO_RAD);

}

Hi guys!There is an error that can’t be solved！Who can help me!

p5.js:55792 Uncaught TypeError: Cannot read property ‘grid’ of undefined
at _main.default.Graphics._main.default._renderEllipse (p5.js:55792)
at _main.default.Graphics._main.default.ellipse (p5.js:55732)
at draw (sketch.js:81)
at p5._main.default.redraw (p5.js:58911)
at _draw (p5.js:51424)

[josephh]

Hi,

So this error is a little bit strange, let’s do some reverse engineering by checking the call stack (from the source code):

// sketch.js

pg[0].ellipse(150, 75, 60, 60);

---

// p5.js/core/shape/2d_pimitives.js

p5.prototype.ellipse = function(x, y, w, h, detailX) {
  p5._validateParameters('ellipse', arguments);
  return this._renderEllipse.apply(this, arguments);
};

---

The error is here :

// p5.js/src/core/shape/2d_pimitives.js

// internal method for drawing ellipses (without parameter validation)
p5.prototype._renderEllipse = function(x, y, w, h, detailX) {
  // ...

  //accessible Outputs
  if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
    this._accsOutput('ellipse', [vals.x, vals.y, vals.w, vals.h]);
  }

  // ...
};

So it’s trying to access the grid property of the _accessibleOutputs object which is supposed to be defined here :

// p5.js/src/core/main.js

class p5 {
  _initializeInstanceVariables() {
    this._accessibleOutputs = {
      text: false,
      grid: false,
      textLabel: false,
      gridLabel: false
    };

    // ...
  }
}

Now we know where the issue comes from, however this simple example works :

const pg = [];

function setup() {
  createCanvas(400, 400);
  
  pg[0] = createGraphics(width, height, WEBGL);
}

function draw() {
  background(220);
  
  pg[0].ellipse(0, 0, 50, 50);
  
  image(pg[0], 0, 0);
}

Is the error always there each time you run the sketch?

Anyway few points to improve your code :

• Instead of saying pg[0] each time, declare a variable and use it later :

  const buffer = pg[0];
  
  buffer.ellipse(...);
  

  So you can change the index without changing all the references to the variable. In JavaScript, it’s better to declare variables that don’t change to const so it removes bug sometimes.

  Also why are you using an array to store your buffer?

• If you run your code on the p5 web editor, go to Edit -> Tidy Code to auto format your code because you have indentation issues (spaces at the beginning of each line). If you use the Processing editor you can press Ctrl+T to format it.

• When posting on the forum, please remove any code that you commented in your code specially big blocks because we don’t need them. Also if you use images, we can’t really test your code that’s why it’s better to simplify the issue by providing a smaller code.

[AbleYudada]

@josephh

const buffer = pg[0];

Thank you very much for your reply. The tool I use is Atom.
According to your method, I have declared a variable to use it, but there is still this error, and it affects the operation of my entire program.
I use an array because I will use multiple Canvas later, even if I don’t use an array, it still cannot run.
Regarding the code, I’m sorry, I have simplified the code and posted it so that you can debug it easily. I can also run simple examples.

let planeImage
let eyex=200, eyey=100, eyez=200;
let cx=100, cy=10, cz=100;
let angle = 339;
let dx = 1.0, dy=1.0, dz = 1.0;
let pg =[];
let tv;


let p1, p2, p3, p4, p55, p6, p7, p8;
let d1, d2, d3, d4, d5, d6, d7, d8;
let shortWall, wall, wallN, wallS, s;
function preload() {
  planeImage = loadImage('data/plane.jpg');
  wall = loadImage ("data/sheet.jpg");
  p1 = loadImage ("data/sheet.jpg");
  p2 = loadImage ("data/sheet.jpg");
  p3 = loadImage ("data/sheet.jpg");
  p4 = loadImage ("data/sheet.jpg");
  p55 = loadImage ("data/sheet.jpg");
  p6 = loadImage ("data/sheet.jpg");

  s = loadImage ("data/sheet.jpg");
  tv = createVideo('data/splick.mp4');
  tv.loop();

}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  setAttributes('antialias', true);

 textureMode(NORMAL);

  perspective(1.15, float(width)/float(height), 10., 40000.);
  buffer = createGraphics(1920, 1080, WEBGL);

  keyPressed();

}

function keyPressed ()
{
//  console.log(keyCode);

// Motion keys - avatar moves, viewpoint changes.
  const buffer = pg[0];
  if (angle<0) angle = angle + 360.0;
   else if (angle > 360.0) angle = angle - 360.0;
  dx = bigcos(angle);
  cx = dx*20000.0;
  dz = bigsin(angle);
  cz = dz*20000.0;
//console.log(eyex,eyey,eyez,angle,dx,dz);
   if (eyey < 20) eyey = 20.0;   // Enforce depth rules.
    else if (eyey > 500.0) eyey = 500.0;
  if (eyex < 0) eyex = 1;
  if (eyex > 1000) eyex = 999;
  if (eyez < 0) eyez = 0;
  if (eyez > 1000) eyez = 1000;
}
function draw() {
// dx = mouseX;
//dy = mouseY;
  background(0);
  buffer.background(0);
  buffer.push();
  buffer.rotateZ(PI);
  buffer.translate(-buffer.width / 2, -buffer.height / 2,0);
  buffer.image(tv,0,0);
  buffer.ellipse(150, 75, 60, 60);//Still wrong
//  pg[0].strokeWeight(4);
  buffer.pop();

  //pg[0].rect(pg[0].width / 2, pg[0].height / 2, 50, 50);
  push()
  translate(100,100,10);
  image(buffer,0,0,192,108);
  pop();

  if (keyIsPressed === true) {

    if (keyCode == UP_ARROW)              // Move 'forward'
    {
      eyex += 2*dx; eyez += 2*dz;
    } else if (keyCode == DOWN_ARROW)     // Move 'backward
    {
      eyex -= 1*dx; eyez -= 2*dz;

    }
     if (keyCode == LEFT_ARROW)     // Turn left a unit (CCW)
    {
      angle = angle + 1.0;
    } else if (keyCode == RIGHT_ARROW)    // Turn right a unit (CW)
      angle = angle - 1.0;

   if (key == 'w') eyey = eyey + 10;   // UP
    if (key == 's') eyey = eyey - 10;   // DOWN

      if (angle<0) angle = angle + 360.0;
       else if (angle > 360.0) angle = angle - 360.0;
      dx = bigcos(angle);
      cx = dx*20000.0;
      dz = bigsin(angle);
      cz = dz*20000.0;
    //console.log(eyex,eyey,eyez,angle,dx,dz);


       if (eyey < 20) eyey = 20.0;   // Enforce depth rules.
        else if (eyey > 500.0) eyey = 500.0;
      if (eyex < 0) eyex = 1;
      if (eyex > 1000) eyex = 999;
      if (eyez < 0) eyez = 0;
      if (eyez > 1000) eyez = 1000;

  }
  camera(eyex, eyey, eyez, cx, cy, cz, 0, -1, 0);
  noStroke();
  ambientLight(255);
  prism (0, 0, 0, 1000, 500, 1000, p6, p1, p2, p3, s);
  drawWall1();
  drawWall2();
  normalMaterial();
}
function drawWall1()
{
     push();
// North wall
   translate (0, 0, dz);

   beginShape();
    if (p4 != null) texture(p4);
    vertex (200,  0,  500,  0, 1);
    vertex (800,  0,  500,  1, 1);
    vertex (800, 300, 500,  1, 0);
    vertex (200,  300, 500,  0, 0);
   endShape();
   pop();
}

function drawWall2()
{
     push();
// North wall
   translate (0, 0, dz);

   beginShape();
    if (p5 != null) texture(p55);
    vertex (200,  0,  501,  0, 1);
    vertex (800,  0,  501,  1, 1);
    vertex (800, 300, 501,  1, 0);
    vertex (200,  300, 501,  0, 0);
   endShape();
   pop();
}

function prism (x,y,z,dx,dy,dz,north,south,east,west,top)
{
  push();
  translate (x, y, z);
// North
   beginShape();
    if (north != null) texture(north);
    vertex ( 0,  0, dz,  0, 1);
    vertex (dx,  0, dz,  1, 1);
    vertex (dx, dy, dz,  1, 0);
    vertex ( 0, dy, dz,  0, 0);
   endShape();

// South

   beginShape();
    if (south != null) texture(south);
    vertex ( 0,  0, 0,  0, 1);
    vertex (dx,  0, 0,  1, 1);
    vertex (dx, dy, 0,  1, 0);
    vertex ( 0, dy, 0,  0, 0);
   endShape();

// East

   beginShape();
   if (east != null) texture(east);
   vertex (dx, 0,  0,  0, 1);
   vertex (dx, 0,  dz, 1, 1);
   vertex (dx, dy, dz, 1, 0);
   vertex (dx, dy, 0,  0, 0);
   endShape();

// West

   beginShape();
   if (west != null) texture(west);
   vertex (0, 0,  0,  0, 1);
   vertex (0, 0,  dz, 1, 1);
   vertex (0, dy, dz, 1, 0);
   vertex (0, dy, 0,  0, 0);
   endShape();

// Top

   beginShape();
   if (top != null) texture(top);
   else fill (160, 82, 45); // Sienna
   vertex ( 0, dy, 0,  0, 0);
   vertex (dx, dy, 0, 1, 0);
   vertex (dx, dy, dz, 1, 1);
   vertex ( 0, dy, dz,  0, 1);
   endShape();

 // Bottom

   beginShape();
    if (planeImage != null) texture(planeImage);
   vertex ( 0, 0, 0,  0, 0);
   vertex (dx, 0, 0, 1, 0);
   vertex (dx, 0, dz, 1, 1);
   vertex ( 0, 0, dz,  0, 1);
   endShape();
  translate (-x, -y, -z);
  pop();
}

function bigsin (s)
{
 if (s > 360.0) s = s - 360.0;
 else if (s < 0.0) s = s + 360.0;

 if (s <= 90.0) return sin (s*DEG_TO_RAD);
 else if (s<=180.0) return sin ((180.0-s)*DEG_TO_RAD);
 else if (s<=270.0) return -sin((s-180.0)*DEG_TO_RAD);
 else return -sin((360.0-s)*DEG_TO_RAD);
}

function bigcos (s)
{
   if (s> 360.0) s = s - 360.0;
 else if (s<0.0) s = s+ 360.0;

  if (s <= 90.0) return cos (s*DEG_TO_RAD);
 else if (s<=180.0) return -cos ((180.0-s)*DEG_TO_RAD);
 else if (s<=270.0) return -cos((s-180.0)*DEG_TO_RAD);
 else return cos((360.0-s)*DEG_TO_RAD);

}

[AbleYudada]

@josephh

const pg = [];

function setup() {
  createCanvas(400, 400);
  
  pg[0] = createGraphics(width, height, WEBGL);
}

function draw() {
  background(220);
  
  pg[0].ellipse(0, 0, 50, 50);
  
  image(pg[0], 0, 0);
}

onst pg = [];

function setup() {
  createCanvas(400, 400, WEBGL);

  pg[0] = createGraphics(width, height,WEBGL);
}

function draw() {
  background(220);
  pg[0].background(0);
  // pg[0].translate(-width/2,-height/2)
  pg[0].ellipse(mouseX-width/2, mouseY-height/2, 50, 50);

  image(pg[0], -width/2, -  height/2);
}

This code can run on the P5 online editor, but I can’t run it on Google Chrome with Atom

[GoToLoop]

@AbleYudada

This code can run on the P5 online editor, but I can’t run it on Google Chrome with Atom

Web editor -- offline?

Most of the time, I just use a simple text editor like Notepad2 to write JS code and host them online at OpenProcessing.org or as a GitHub gist: For more complex stuff, like writing TS or CS code, I use the Atom IDE and host them as a GitHub repo:

P5.js - not displaying static gif image

For Atom I use “atom-live-server-plus” + “tool-bar” plugins in order to get a button to open a local server on a browser for the current project folder:

P5.js - not displaying static gif image

Some notes about your posted “index.html” file: You’re loading the same library 2 times: the unmodified & minimized versions. That is, “p5.js” + “p5.min.js”, “p5.gif.js” + “p5.gif.min.js”. Should pick 1 or the other: And a more serious 1: you’re loading p5.js addon libraries before the p5.js main library! Here’s their correct order for each category: <!-- p5.js main library: --> <script defer src=https://cdn.JsDelivr.net/npm/p5></script> <!-- p5.js addon libraries: --> <script defer src…

[AbleYudada]

Thank you for your reply, I don’t know what changed, maybe it’s the order in html, but it can run now.

[AbleYudada]

Up to now, ellippse still cannot be run under createGraphics(xx,xx,WEBGL).

[josephh]

It works fine, try to run the previous example I posted :

@josephh

const pg = [];

function setup() {
  createCanvas(400, 400);
  
  pg[0] = createGraphics(width, height, WEBGL);
}

function draw() {
  background(220);
  
  pg[0].ellipse(0, 0, 50, 50);
  
  image(pg[0], 0, 0);
}