TypeError:a is undefined - Sketch works in processing program but not processing.js

nalahan

TypeError:a is undefined - Sketch works in processing program but not processing.js

in Processing with Other Languages • 5 months ago

Hi there!
Working on a project for uni and have encountered an issue. Not sure whether i've done something wrong, whether the processing.js website im using is wrong or something else all together.

Essentially i have the code below which runs perfectly fine within processing the program (using the JavaScript mode, this emulates processing.js correct?) however when I transfer it to the website to run through actual processing.js it appears to break. The error I get is "TypeError: a is undefined" This error started to appear after i changed the ArrayLists from arrays and also after I implemented the separate method within the Butterfly Class.

Any help would be great. If you need any more info just ask.
Sorry about the messy script :P

Thanks!

/* @pjs font="/media/css/Chunkfive-webfont.ttf"; */

float sizeRatio = 1; //ratio for all sizes. This scales the animation including how many butterflies there are, how much food
// how fast each should move (randomness factor is scaled down), turn speed, physical scales etc.
// 1 = 1000x414 like the front page should be.

color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
int[] colors = {
lightBlue, darkBlue, orange
};
PGraphics backgroundPattern;

PFont chunkfive;
String tagline = "Learn to Program. Creatively.";

int numB = floor(4*sizeRatio); //number of Butterflys
int numF = ceil(numB/2); // Number of Food in the system, proportinate to the number of butterflys so as to keep a balance.
int totalDeaths = 0;
Food[] foods = new Food[numF]; //create array for the food.

int foodCreated = numF; // how much food is in the system.

boolean drawBackground = true;

class Food {
PVector location;
boolean eaten;
int r;

Food() {
    location = new PVector(random(width), random(height));
    eaten = false;
    r = round(random(5, 25));
}

void recreate() {
    if (eaten) {
      location = new PVector(random(width), random(height));
      r = round(random(5, 25));
      eaten = false;
      for (int k = 0; k < butterflys.size(); k++) {
        Butterfly b = butterflys.get(k);
        int closestFood = b.distanceToClosest();
        b.setFoodSource(foods[closestFood]);
      }
    }
}

boolean isEaten() {
    return eaten;
}
void setEaten(boolean _eaten) {
    eaten = _eaten;
}

void display() {

    stroke(255, 100);
    strokeWeight(.5);
    fill(orange, 255);
    ellipse(location.x, location.y, r, r);
    for (i = 2; i<10; i++) {
      ellipse(location.x, location.y, r/i, r/i);
    }
    //rect(food.x,food.y,9,9);
}
}

class Butterfly {
PVector location;
PVector velocity;
PVector acceleration;

Food foodSource;

int life;
float distance;
float maxSpeed;
float maxForce;
float[] distances = new float[numF];
boolean dead;
float lifeOpacity;
float angle;

Butterfly() {
    location = new PVector(random(width), random(height));
    acceleration = new PVector(0, 0);
    velocity = new PVector(0, 0);
    life = 10; //life for each butterfly
    maxSpeed = random(3, 10)*sizeRatio;
    maxForce = 0.5;
    dead = false;
}

void run() {
    update();
    checkEdges();
    display();
    isEaten();
}

void update() {
    if (!dead) {
      lifeOpacity = map(life, 0, 10, 0, 1);
      velocity.add(acceleration);
      velocity.limit(maxSpeed);
      location.add(velocity);
      acceleration.mult(0);
      lifeCheck();
      if (!foodSource.isEaten()) {
        seek(foodSource.location);
      }
      if (frameCount % 100 == 0) { // every 2 seconds remove a life point.
        life--;
      }

      distance = PVector.dist(location, foodSource.location); // used to calculate hit test.
    }
    else {
      reCreate(); //if dead reCreate.
    }
}
void seek(PVector target) {
    PVector desired = PVector.sub(target, location);
    desired.normalize();
    desired.mult(maxSpeed);
    //PVector steer = PVector.sub(desired, velocity);
    desired.sub(velocity);
    desired.limit(maxForce);
    applyForce(desired);
}

void separate(ArrayList<Butterfly> butterflys) {
    //println("test");
    float desiredseparation = 50;
    PVector sum = new PVector();
    int count = 0;
    for (Butterfly other : butterflys) {
      float d = PVector.dist(location, other.location);

      if ((d > 0) && (d < desiredseparation)) {
        PVector diff = PVector.sub(location, other.location);
        diff.normalize();
        sum.add(diff);
        count++;
      }
    }

    if (count > 0) {
      sum.div(count);
      sum.mult(maxSpeed);
      PVector steer = PVector.sub(sum, velocity);
      steer.limit(maxForce);
      applyForce(steer);
    }
}

void applyForce(PVector force) {
    acceleration.add(force);
}

void reCreate() {
    location = new PVector(random(width), random(height));
    life = 10;
    dead = false;
}

boolean isDead() {
    return dead;
}
void setDeath(boolean _dead) {
    dead = _dead;
}

void lifeCheck() {

    if (life <=0) {
      setDeath(true);
      totalDeaths++;
      //println(totalDeaths); // curious at how many died.
    }
}
void setFoodSource(Food _foodSource) {
    foodSource = _foodSource;
}

int distanceToClosest() {
    int result=20;
    for (int p=0; p<foods.length; p++) {
      distances[p] = PVector.dist(location, foods[p].location);
    }
    float smallestDistance = min(distances);
    for (int j = 0; j<foods.length; j++) {
      if (distances[j] == smallestDistance) {
        result = j;
      }
    }
    return result;
}

void isEaten() {
    if (distance <= 8) {
      foodSource.setEaten(true);
      foodSource.recreate();
      life++;
    }
}

void display() {
    //stroke(0);
    float s = 0.8*sizeRatio;
    float s2x = 0.55*sizeRatio;
    float s2y = 0.35*sizeRatio;
    if (!dead) {
      angle = atan2(velocity.y, velocity.x) ;
      pushMatrix();
      rectMode(CENTER);
      translate(location.x, location.y);
      rotate(angle + radians(90));
      scale (s);
      smooth();
      strokeWeight(1/0.5*sizeRatio);
      //triangle(0,0,10,-15,-10,-15);
      //rect(0,0,30,10);
      fill(lightBlue, 255*sizeRatio);
      stroke(darkBlue, 255);
      ellipse(0, -22, 8, 14);

      beginShape();

      fill(lightBlue, 220*sizeRatio);
      //LEFTSIDE
      curveVertex(-4, -16);
      curveVertex(-4, -16);
      curveVertex(-25, -40);
      curveVertex(-35, -35);
      curveVertex(-37, -20);
      curveVertex(-34, -10);
      curveVertex(-30, -0);
      curveVertex(-30, -0);
      curveVertex(-35, 15);
      curveVertex(-28, 30);
      curveVertex(-15, 35);
      curveVertex(-2, 15);
      curveVertex(-2, 15);
      //TAIL
      curveVertex(-1, 25);
      curveVertex(1, 25);
      //RIGHT SIDE
      curveVertex(2, 15);
      curveVertex(2, 15);

      curveVertex(15, 35);
      curveVertex(28, 30);
      curveVertex(35, 15);
      curveVertex(30, 0);
      curveVertex(30, 0);
      curveVertex(34, -10);
      curveVertex(37, -20);
      curveVertex(35, -35);
      curveVertex(25, -40);
      curveVertex(4, -16);
      curveVertex(4, -16);
      endShape();
      popMatrix();

      pushMatrix();
      translate(location.x, location.y);
      rotate(angle + radians(90));
      scale (s2x, s2y);
      strokeWeight(1/0.5*sizeRatio);
      //orangefill
      //0.7*(sizeRatio), 0.6*(sizeRatio
      noStroke();
      fill(orange, 200*lifeOpacity);
      beginShape();

      //LEFTSIDE
      curveVertex(-4, -16);
      curveVertex(-4, -16);
      curveVertex(-25, -40);
      curveVertex(-35, -35);
      curveVertex(-37, -20);
      curveVertex(-34, -10);
      curveVertex(-30, -0);
      curveVertex(-30, -0);
      curveVertex(-35, 15);
      curveVertex(-28, 30);
      curveVertex(-15, 35);
      curveVertex(-2, 15);
      curveVertex(-2, 15);
      //RIGHT SIDE
      curveVertex(2, 15);
      curveVertex(2, 15);

      curveVertex(15, 35);
      curveVertex(28, 30);
      curveVertex(35, 15);
      curveVertex(30, 0);
      curveVertex(30, 0);
      curveVertex(34, -10);
      curveVertex(37, -20);
      curveVertex(35, -35);
      curveVertex(25, -40);
      curveVertex(4, -16);
      curveVertex(4, -16);
      curveVertex(-4, -16);
      curveVertex(-4, -16);
      endShape();
      popMatrix();
      noStroke();
    }
}

// void fastedRoute() { //Perhaps add width or height to the location of the food.
//send the dot towards the new foods location while retaining the old foods location image.
//once it hits the side it would transfer over and then force it to find the closest food.

//if ((location.x + foodSource.x) < (max(location.x,foodSource.x) - min(lcoation.x,foodSource.x)) {
// seek(foodSource.x+width)

void checkEdges() {
    if (location.x >= width) {
      location.x = 1;
      int foodNumber = distanceToClosest();
      setFoodSource(foods[foodNumber]);
    }
    else if (location.x <= 0) {
      location.x = width-1;
      int foodNumber = distanceToClosest();
      setFoodSource(foods[foodNumber]);
    }
    if (location.y >= height) {
      location.y = 1;
      int foodNumber = distanceToClosest();
      setFoodSource(foods[foodNumber]);
    }
    else if (location.y <= 0) {
      location.y = height-1;
      int foodNumber = distanceToClosest();
      setFoodSource(foods[foodNumber]);
    }
}
} //End dot/butterfly Class
float xpos;
PGraphics pg;
ArrayList<backgroundDot> dots; //craete the arraylist with object type backgroundDot
ArrayList<Butterfly> butterflys; //create the arraylist with object type Butterfly
void setup() {
size(1000, 414);
background(255);

frameRate(50);
pg = createGraphics(width, height);
pg.beginDraw();
pg.rect(0, 0, width, height);
pg.endDraw();
// backgroundPattern = createGraphics(1000, 414);
butterflys = new ArrayList<Butterfly>();
dots = new ArrayList<backgroundDot>();
// dots = new ArrayList<backgroundDot>();
for (int i = 0; i < numB; i++) {
    butterflys.add(new Butterfly());

    dots.add(new backgroundDot());

    backgroundDot d = dots.get(i);
    Butterfly b = butterflys.get(i);
    d.getButterfly(b);
}
for (int i = 0; i < foods.length; i++) {
    foods[i] = new Food();
    foodCreated++;
}
for (int k = 0; k < butterflys.size(); k++) {
    Butterfly b = butterflys.get(k);
    int closestFood = b.distanceToClosest();

    b.setFoodSource(foods[closestFood]);
}

int taglineHeight = 3*height/40;
chunkfive = createFont("/media/css/Chunkfive-webfont.ttf", taglineHeight);
}

void draw() {
//String time = round(millis()/1000); //Normal timer. Testing how long it can run for. Should be infinite.
//String framerate = (round(frameRate));
// Fade the background
noStroke();
fill(255, 255);
rect(width/2, height/2, width, height);

if (frameCount % 100 == 0) {
    pg.beginDraw();
    pg.fill(255, 20);
    pg.rect(0, 0, width, height);
    pg.endDraw();
    println("clearing");
}

if (drawBackground) {
    image(pg, 0, 0);
}
else {
}
for (int i = 0; i<butterflys.size(); i++) {
    Butterfly b = butterflys.get(i);
    b.separate(butterflys);
    b.run();
}

// every once in a while create some food.
if (frameCount % 200 == 0 && foodCreated<numF) {
    createFood();
}
for (int i = 0; i< foods.length; i++) {
    foods[i].display();
}

fill(darkBlue);
//textFont(chunkfive);
textAlign(CENTER, CENTER);
text(tagline, width/2, height/2);
//text(time,width/2, height-50); //timer.
//text(framerate,width/2+100,height-50);

if (frameCount % 10 == 0) {
    for (backgroundDot d : dots) {

      d.displayDot();
    }
}
}

void createFood() {
foodCreated ++;
for (int k = 0; k < butterflys.size(); k++) {
    Butterfly b = butterflys.get(k);
    int closestFood = b.distanceToClosest();
    b.setFoodSource(foods[closestFood]);
}
}
void mousePressed() {
noLoop();
}

void mouseReleased() {
loop();
}

void keyPressed() {
drawBackground = !drawBackground;
}

class backgroundDot {
float xpos1;
float ypos1;
float r;
Butterfly butterfly;

backgroundDot() {

    //x = _x;
    //y = _y;
    //r = _r;
}

void getButterfly(Butterfly _Butterfly) {
    butterfly = _Butterfly;
}

void setLocation() {

    xpos1 = butterfly.location.x + cos(butterfly.angle) * -10;
    ypos1 = butterfly.location.y + sin(butterfly.angle) * -10;
    r = 10;
}
void displayDot() {
    setLocation();
    int colorChoice = round(random(0, 1));

    // println("adding dot");
    pg.beginDraw();

    pg.noStroke();
    if (colorChoice == 0) {
      pg.fill(darkBlue, 100*butterfly.lifeOpacity);
    }
    else if (colorChoice == 1) {
      pg.fill(lightBlue, 100*butterfly.lifeOpacity);
    }
    pg.ellipse(xpos1, ypos1, 10, 10);
    pg.endDraw();
}
}

Replies(2)

PhiLho

Re: TypeError:a is undefined - Sketch works in processing program but not processing.js

5 months ago

Where do you have this error? When does it appear?
I pasted your code in a simple PJS HTML file, and it worked fine (even if I don't have the font).

nalahan

Re: TypeError:a is undefined - Sketch works in processing program but not processing.js

5 months ago

Hi there,
Thanks for the reply. I use a website for uni that is designed by the lecturer. Not sure if I should link it here or not but it essentially allows us to login and store our sketches as we as edit etc. the error appears the second I click play and it crashes the java/processing.js script as the window goes unclickable and does not disappear until I refresh the page. (The way the website is setup is that when you hit play a window appears on the page then when you click off it, it disappears)

If you can run the script properly then I think it might be a issue with the website itself. I shall inform my Lecturer unless you see another way to fix it.

Thankyou.

Top Reply