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 p5.js Web Editor
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);
}
}
