Problem with loadImage()

I am currently on Dan Shiffmans 7.8 p5js tutorial https://www.youtube.com/watch?v=i2C1hrJMwz0&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=36 and I have encountered this error “p5.js says: It looks like there was a problem loading your image. Try checking if the file path is correct, hosting the image online, or running a local server.”

My code is https://editor.p5js.org/vinceibay/sketches/mMXlCDozX

let bubble = [];
// let unicorn;

let flower;
let kitten = [];

function preload() {
  flower = loadImage("flower.png");
  for (let i = 0; i < 5; i++) {
    kitten[i] = loadImage("kitten${i}.  jpg");
    
  }
  
  
}

function setup() {
  createCanvas(600, 400);
  for (let i = 0; i < 20; i++) {
    let x = random(width);
    let y = random(height);
    let r = random(10, 50);
    bubble[i] = new Bubble(x, y, r);

  }
  // unicorn = new Bubble(400,200,10);

}

function draw() {  background(0);



  // if (bubble1.intersects(bubble2)) {
  //   background(200, 0, 100);
  // }

  //   unicorn.x = mouseX;
  //   unicorn.y = mouseY;
  //   unicorn.show();
  //   unicorn.move();

  for (let b of bubble) {
    b.show();
    b.move();
    let overlapping = false;
    for (let other of bubble) {
      if (b !== other && b.intersects(other)) {
        overlapping = true;
      }
    }
    
    if (overlapping) {
      b.changeColor(255) ;
    } else {
      b.changeColor(0);
    }
        
      

  }

}

class Bubble {
  constructor(x, y, r = 50) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.brightness = 0;
  }

  intersects(other) {
    let d = dist(this.x, this.y, other.x, other.y);
    if (d < this.r + other.r) {
      return true;

    } else {
      return false;
    }
  }

  changeColor(bright) {
    this.brightness = bright;

  }

  contains(px, py) {
    let d = dist(px, py, this.x, this.y);
    if (d < this.r) {
      return true;
    } else {
      return false;

    }
  }

  move() {
    this.x = this.x + random(-2, 2);
    this.y = this.y + random(-2, 2);

  }

  show() {
    image(kitten[0], this.x, this.y, this.r, this.r);
    // stroke(255);
    // strokeWeight(4);
    // fill(this.brightness, 125);
    // ellipse(this.x, this.y, this.r * 2);

  }

}
1 Like
kitten[i] = loadImage(`kitten${i}.jpg`);
1 Like

Tried this but still doesnt work :frowning:

here you go:
instead
“kitten${i}. jpg”
use

 kitten[i] = loadImage("kitten"+i+".jpg");

and a workover
https://editor.p5js.org/kll/sketches/ilMRwJOC9

2 Likes

Hi thanks for the fix! I dont really get how it works tho. I feel like I was typing the same thing?

[shift] or ![shift] that is [here] the {question}?
but 6 typo?
on the first look it could have been a copy from a other language?

1 Like