Array has error every other object

p5.js Coding Questions
1

hi,

the array seems to not work for every other object; on the second click, another object is spawned even if the click is outside of the contains/bounds of the shape.

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

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

function preload(){
  roll = loadImage("bread.PNG");
  title = loadImage("IMG_1247.PNG");
  boom = 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 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);
  } 
  }
}

function mouseClicked(){
  for (let i = breads.length - 1; i >= 0; i--) {
    if (breads[i].contains(mouseX,mouseY))
  {
    breads.splice(i,1);
   // stars.push(new Star(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);
      stars.push(new Star(mouseX,mouseY));
    }
  } 
}

function mouseReleased(){
  boom.reset();
  stars.pop();
}

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

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

I cannot understand what your problem is can u run your code in the p5js editor and then share the link to it so that we can see what the problem is here is a link to that u can try it out
https://editor.p5js.org/

1 Like
3

I am not sure I understand. You don’t have any comments telling your goal in the code section.

I understand when you press a bread roll, a new roll is inserted. And a new star.

BUT why do you push so many new breads in here:

This happens not only when the mouse is found to be on the bread, but EVERY time (see position of the } after breads.splice(i,1); in your code)

Post your code and tell us your goal please

Chrisir

1 Like
4

@Chrisir @ReyzArtz
https://editor.p5js.org/georg2a/sketches/iJa4RxiRf

thank you both for your replies! here is a link to the code. i want the breads to disappear only when the mouse is clicked over it and for a new bread to appear in a random location, like a whac-a-mole game. it only seems to work for every other bread in the array though.

originally i made the bounds from circles, then substituted the bread PNG over the circle areas, so it’s assessing whether the mouse is over the invisible circle, not the bread, if that helps?

i apologise for the vagueness, i am very new to code!

5

You haven’t answered

6

Thats some strange behavior. Not entirely sure whats happening, but I think the issue has something to do with the scale(…) call in Star’s show(). Try wrapping it in push() and pop() calls:

  show() {
    push();
    scale(0.8);
    stroke(255);
    fill(125);
    image(boom, this.x, this.y - 70);
    pop();
  }
2 Likes
7

wow this worked!!! thank you ever so much:-)

1 Like