P5.js iframe not loading?

p5.js Coding Questions
1

hi,

https://editor.p5js.org/georg2a/present/DjlxhZ2W6T

i’ve embedded multiple p5.js files into a website and all have worked except the one above; it freezes on “Loading…” as it does on processing.org. i’m not sure why its any different to the others, it has https too.

thanks for anyone who takes the time to read/respond to this!

let breads=[];
let title;
let stars=[];

function preload(){
  roll = loadImage("bread.PNG");
  title = loadImage("IMG_1247.PNG");
  stars = loadImage("IMG_0187.GIF");
}

function setup() {
  createCanvas(600, 600);
  imageMode(CENTER);
  for (let i=0;i<1;i++){
   let x = random(width);
   let y = random(height);
   let r = (35);
   let b = new Rolly(x,y,r);
   breads.push(b);
  }
}

function mousePressed(){
  for (let i = breads.length - 1; i >= 0; i--) {
    if (breads[i].contains(mouseX,mouseY))
  {
      breads.splice(i,1);
    image(stars,mouseX,mouseY)
    }
    for (let i=0; breads.length < 1; i++){
      let x = random(width);
      let y = random(height);
      let r = (35);
      let b = new Rolly(x,y,r);
      breads.push(b);
    }
  } 
}

function mouseReleased(){
   for (let i=0; breads.length < 1; i++){
           stars.push(new Star(mouseX,mouseY));
    //stars.reset();
    // stars.pop();
    }
}

function draw() {
  background(0);
  image(title,width/2,height/2,600,600);
  
  for (var i = 0; i < stars.length; i++){  
    stars[i].show();
  }
  
  for (let i = 0; i < breads.length; i++){  
    breads[i].show();
    
     if (breads[i].contains(mouseX,mouseY))
  {
    cursor(HAND);
  } else {
    cursor(ARROW);
  } 
  }
}

class Star{
  constructor(x,y){
    this.x = x;
    this.y = y;
  }
  show(){
    //scale(0.8);
    stroke(255);
    fill(125);
    image(stars,this.x,this.y);
    }
}

class Rolly {
  constructor(x,y,r){
  this.x = x;
  this.y = y;
  this.r = r;
  }
  
  contains(px,py){
    let d = dist(px,py,this.x,this.y);
    if (d < this.r){
      return true;
    } else {
      return false;
    }
  }
  
  show(){
    stroke(255);
    strokeWeight(4);
   // ellipse(this.x,this.y,this.r*2);
    image(roll,this.x,this.y,120,120);
  }
}
2

It could be that your image is too big for the p5js online editor. You can try to isolate your problem by loading one image at a time in a new sketch. Also, you should remove script tag for images in the index.html.

1 Like
3

I tried running it, is unable to load the GIF file check the network tab in the devtools
try using some other gif or a png just to test it if it works or not

1 Like
4

thank you! will try this

5

thanks for your response! i tried replacing the GIF with a random JPEG but it still doesn’t load… thanks though