My javascript + p5.js code is not working for no apperent reason

Question

For no reason my p5.js code is not working. It seems to all be correct, I have no errors in the console. I'm running it in the p5js web editor ( https://editor.p5js.org ) and I have four files

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="animal.js"></script>
  </body>
</html>

sketch.js:

let animals = [];

function setup() {
  createCanvas(400, 400);
  
  for (let i = 0; i < 6; i ++) {
    animals.push(new Animal(round(random(10, width - 10)), round(random(10, height - 10)), round(random(3, 4)), round(random(6, 9)), round(random(40, 100))));
  }
}

function draw() {
  background(220);
  
  for (let i in animals) {
    animals[i].display();
  }
}

animal.js:

class Animal {
  constructor(xTemp, yTemp, speedTemp, reproTemp, hungRateTemp) {
    this.x = xTemp;
    this.y = yTemp;
    this.speed = speedTemp;
    this.reprodcution = reproTemp;
    this.hungRate = hungRateTemp;
    
    this.hunger = 8;
    this.age = 0;
    this.clr = color(random(150, 255), random(150, 255), random(150, 255));
  }
  
  display() {
    fill(this.clr);
    ellipse(this.x, this.y, (this.size + 1) * 20, (this.size + 1) * 20);
  }
}

and style.css just has basic code that does like nothing.

So far all thats happened is it creates the 400, 400 canvas and rendering the background but none of the "animals" are rendering. I would expect it to render 6 circles on the screen, at random, static, points, with random colors that dont change

I've got no idea on whats happened, and it would be great if someone could help. Keep in mind in using the p5.js library

Thanks!

Answer 1

There are a few issues:

You are using a for (.. in..) loop when you should be using a for (.. of..) loop
this.size is never defined in your Animal class
Another issue with the for loop, you'll see below...

Another thing, p5.js doesn't like being ran in stack overflow, so don't click "run snippet", it won't do anything.

 // animal.js class Animal { constructor(xTemp, yTemp, sizeTemp, speedTemp, reproTemp, hungRateTemp) { // add sizeTemp argument this.x = xTemp; this.y = yTemp; this.size = sizeTemp; // add size this.speed = speedTemp; this.reprodcution = reproTemp; this.hungRate = hungRateTemp; this.hunger = 8; this.age = 0; this.clr = color(random(150, 255), random(150, 255), random(150, 255)); } display() { fill(this.clr); ellipse(this.x, this.y, (this.size + 1) * 20, (this.size + 1) * 20); } } // sketch.js let animals = []; function setup() { createCanvas(400, 400); for (let i = 0; i < 6; i++) { animals.push(new Animal(round(random(10, width - 10)), round(random(10, height - 10)), round(random(10, width/90)), round(random(3, 4)), round(random(6, 9)), round(random(40, 100)))); // Add an argument at the 3rd place } } function draw() { background(220); for (let animal of animals) { // Here animal.display(); // Here } }

Here's a link to view on the editor: https://editor.p5js.org/Samathingamajig/sketches/qpZRzeaVk

My javascript + p5.js code is not working for no apperent reason

Question

1 answers

solution1
1 ACCPTED 2020-11-12 22:33:20

My javascript + p5.js code is not working for no apperent reason

Question

1 answers

solution1 1 ACCPTED 2020-11-12 22:33:20

solution1
1 ACCPTED 2020-11-12 22:33:20