CODEWITHSUNDEEP
javascriptrenderingp5.js
graph100
graph100

Reputation: 67

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

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!

Upvotes: 1

Views: 1493

Answers (1)

Samathingamajig
Samathingamajig

Reputation: 13245

There are a few issues:

  1. You are using a for (.. in ..) loop when you should be using a for (.. of ..) loop
  2. this.size is never defined in your Animal class
  3. 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

Upvotes: 1

Related Questions