TypeError: p.draw is not a function

Matthewdk54

So I am trying to render with javascript mode, a .pde that is essential and "drag and drop" media object, in the browser and I keep getting a blank screen when it loadsup. When I go to troubleshoot it (thinking its the preload as the image frames are loaded remotely) I get an error in the JS console of Firefox saying I have a TypeError: p.draw is not a function.

I have no idea what this is or how its connected to p.draw() call in processing.js ... My guess is it has something to do with my float placements.

Any help combing my code?

Thanks,

Here is the .pde code:

/* @pjs preload="https://sociallantern.weebly.com/files/theme/video1.png"; */
/* @pjs preload="https://sociallantern.weebly.com/files/theme/video2.png"; */
/* @pjs preload="https://sociallantern.weebly.com/files/theme/video3.png"; */
/* @pjs preload="https://sociallantern.weebly.com/files/theme/TV.png"; */

float a; 

PImage TVscreen;

PImage video1; 
PImage video2; 
PImage video3;

float bx;
float by;

float ix;
float iy;

float zx;
float zy;

//icon width/height dim
int bs = 40;

//select
boolean bover = false;
boolean bover1 = false;
boolean bover2 = false;

//pick up
boolean locked = false;
boolean locked1 = false;
boolean locked2 = false; 

//load
boolean draw = true;
boolean draw1 = true; 
boolean draw2 = true; 

//play
boolean drag1 = false;
boolean drag2 = false;
boolean drag3 = false;

//position change
float bdifx = 0.0; 
float bdify = 0.0; 

float bdifx1 = 0.0;
float bdify1 = 0.0;

float bdifx2 = 0.0;
float bdify2 = 0.0;

// drop in 
Boolean mouseOverRect0(int x, int y, int w, int h) {
  return (mouseX >= x && mouseX <= x+ w && mouseY >= y && mouseY <= y+h);
}

Boolean mouseOverRect1(int x, int y, int w, int h) {
  return (mouseX >= x && mouseX <= x+ w && mouseY >= y && mouseY <= y+h);
}

Boolean mouseOverRect2(int x, int y, int w, int h) {
  return (mouseX >= x && mouseX <= x+ w && mouseY >= y && mouseY <= y+h);
}

void setup() 
{
  size(640, 480);

  video1 = loadImage ("https://sociallantern.weebly.com/files/theme/video1.png");
  video2 = loadImage ("https://sociallantern.weebly.com/files/theme/video2.png");
  video3 = loadImage ("https://sociallantern.weebly.com/files/theme/video3.png");

  TVscreen = loadImage ("https://sociallantern.weebly.com/files/theme/TV.png");
}

void draw() { 
  background(0, 0, 0, 0);

  // video player window
  fill(5, 5, 5);
  rect(75, 198, 405, 206);
  image(TVscreen, 40, 160); 
  fill(203, 252, 8);
  text("Drag and Drop Video Files into TV", 60, 180);
  image(video1, bx, by, bs, bs);
  image(video2, ix, iy, bs, bs);
  image(video3, zx, zy, bs, bs);

  // video 1 selector

  if (mouseX > bx-bs && mouseX < bx+bs && 
    mouseY > by-bs && mouseY < by+bs) {

    bover = true;  
    if (!locked) { 
      stroke(255); 
      fill(153);
      bover1 =false;
      bover2 =false;
      locked1=false;
      locked2=false;
    }
  } 
  else {
    stroke(153);
    fill(153);
    bover = false;
    bx = 570;
    by = 220;
  }

  //video 2 selector
  if (mouseX > ix-bs && mouseX < ix+bs && 

    mouseY > iy-bs && mouseY < iy+bs) {

    bover1 = true;  
    if (!locked1) { 
      stroke(255); 
      fill(153);
      bover =false;
      bover2 =false;
      locked=false;
      locked2=false;
    }
  } 
  else {
    stroke(153);
    fill(153);
    bover1 = false;

    ix = 570;
    iy = 280;
  }

  //video 3 selector
  if (mouseX > zx-bs && mouseX < zx+bs && 

    mouseY > zy-bs && mouseY < zy+bs) {

    bover2 = true;  
    if (!locked2) { 
      stroke(255); 
      fill(153);
      bover1 =false;
      bover =false;
      locked=false;
      locked1=false;
    }
  } 
  else {
    stroke(153);
    fill(153);
    bover2 = false;

    zx = 570;
    zy = 340;
  }

  // video 1 

  int qx = 75;
  int qy = 198;
  int qw = 405;
  int qh = 206;

  if (mouseOverRect0 (qx, qy, qw, qh) && bover == true && locked==false) {
    draw = false;
    draw1 = true;
    draw2 = true;
    drag1 = true;

    bx = 570;
    by =220;
  } 

  if (bx == 570 && by == 220 && draw == false) {
    image(video1, 75, 198, 405, 206);
    fill(203, 252, 8);
    text("Drag and Drop Video Files into TV", 60, 180);
  }

  if (draw == false) {

    image(TVscreen, 40, 160);
    fill(203, 252, 8);
    text("Drag and Drop Video Files into TV", 60, 180);
  }

  //video 2 

  int fx = 75;
  int fy = 198;
  int fw = 405;
  int fh = 206;

  if (mouseOverRect1 (fx, fy, fw, fh) && bover1 == true && locked1==false) {
    draw1 = false;
    draw = true;
    draw2 = true;
    drag2 = true;

    ix = 570;
    iy =280;
  } 
  if (ix == 570 && iy == 280 && draw1 == false) {
    image(video2, 75, 198, 405, 206);
    fill(203, 252, 8);
    text("Drag and Drop Video Files into TV", 60, 180);
  }
  if (draw1 == false) {

    image(TVscreen, 40, 160);
    fill(203, 252, 8);
    text("Drag and Drop Video Files into TV", 60, 180);
  }

  int cx = 75;
  int cy = 198;
  int cw = 405;
  int ch = 206;

  if (mouseOverRect2 (cx, cy, cw, ch) && bover2 == true && locked2==false) {
    draw2 = false;
    draw = true;
    draw1 = true;
    drag3 = true; 

    zx = 570;
    zy = 340;
  } 
  if (zx == 570 && zy == 340 && draw2 == false) {
    image(video3, 75, 198, 405, 206);
    fill(203, 252, 8);
    text("Drag and Drop Video Files into TV", 60, 180);
  }

  if (draw2 == false) {

    image(TVscreen, 40, 160);
    fill(203, 252, 8);
    text("Drag and Drop Video Files into TV", 60, 180);
  }

}

void mousePressed() {

  // video 1 pick up
  if (bover) { 
    locked = true; 
    fill(255, 255, 255);
  } 
  else {
    locked = false;
  }

  bdifx = mouseX-bx; 
  bdify = mouseY-by; 

  //video 2 pick up
  if (bover1) { 
    locked1 = true; 
    fill(255, 255, 255);
  } 
  else {
    locked1 = false;
  }

  bdifx1 = mouseX-ix; 
  bdify1 = mouseY-iy; 

  //video 3 pick up
  if (bover2) { 
    locked2 = true; 
    fill(255, 255, 255);
  } 
  else {
    locked2 = false;
  }

  bdifx2 = mouseX-zx; 
  bdify2 = mouseY-zy;
}
void mouseDragged() {
  //video 1 move
  if (locked) {

    bx = mouseX-bdifx; 
    by = mouseY-bdify;
  }
  //video 2 move
  if (locked1) {

    ix = mouseX-bdifx1; 
    iy = mouseY-bdify1;
  }
  //video 3 move  
  if (locked2) {

    zx = mouseX-bdifx2; 
    zy = mouseY-bdify2;
  }
}

void mouseReleased() {

  locked = false;
  locked1 = false;
  locked2 = false;
}

GoToLoop

As already asked by your other thread below, plz format your posted codes w/ CTRL+K! :-w
http://forum.processing.org/two/discussion/4371/sprite-class-loading-and-processing-js-javascript-mode

TypeError: p.draw is not a function.

In JS, unlike Java, function references are stored in variables as well.
But at least they're invoked the same way, by suffixing a () pair!

However, you've got couple of lines where a boolean value is assigned to variable draw.
draw = true; draw = false;

Therefore, the function reference which draw once had is lost "forever"! :O
And next attempt Processing tries to callback variable draw using () ends up crashing the program instead!
B/c variable draw now holds a boolean rather than its previous function reference after what you've done to it! :P

PhiLho

BTW, no need to return a Boolean from some functions, a boolean is enough.