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!

Samathingamajig · Accepted Answer · 2020-11-12 22:33:20Z

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

answered Nov 12, 2020 at 22:33

Samathingamajig

13.5k3 gold badges19 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

graph100 Over a year ago

Ok thank you so much! Also i indended to get the size with this.age but i forgot lol. Thank you!

Samathingamajig Over a year ago

Yeah i just assumed that you wanted to have size be an argument, but that works too.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related