I need help with my code, I don't know why it isn't working

p5.js Beginners
1

I have tried to make ellipses with random positions on the canvas which disappear when they are clicked on, I tried doing this by putting an if statement in a for loop which should check if the mouse is inside one of the circles but it doesn’t work and I have no idea why. If the answer seems obvious to you please keep in mind that I am a beginner.
my attempt at coding

2

Hello!

What is the link to the code please?

This is only the running presentation.

Thanks!

3

Hey, and welcome to the forum!

Great to have you here!

4

excuse me. is this better?

5

thank you Chrisir. I’m happy to be here

6

http://p5js.SketchPad.cc/sp/pad/view/ro.CaQVvhrEKxAeXd/latest

7

I would much rather know why my code doesn’t work

8

This is your loop inside mousePressed() callback:

function mousePressed() {
  for (var x = 0; Blasen.length; x++) {
    Blasen.clicked()
    if (Blasen.clicked) {
      Blasen.splice(x,1)
    }
  }
}

Compare that w/ mine:

function mousePressed() {
  for (let i = balls.length; i--; )
    if (balls[i].isMouseWithinCircle()) {
      const tail = balls.pop();
      if (i !== balls.length)  balls[i] = tail;
      redraw();
      break;
    }
  return false;
}

The way you attempt to use method splice() inside your loop won’t work properly.

But you also lack a proper stop condition in your loop for (var x = 0; Blasen.length; x++) {.

2 Likes
9

thanks much apretiated

10

why doesn’t splice work in my for loop. besides it not having an stop condition?

11

B/c when we splice() an indexed-based container all elements on the right side where the splice() occurs have their indices decreased by 1.

There are 2 workarounds to counter that:

  1. Also decrease the current loop iterator variable after each splice().
  2. Or do a backwards loop instead, where we start at the last index towards index 0.

In some cases, there’s a 3rd option: Just break or return after the 1st splice().

That’s what I did to fix your loop (although I find my approach w/ pop() for efficient :wink:):

function mousePressed() {
  for (var i = 0; i < Blasen.length; ++i)
    if (Blasen[i].clicked())  return Blasen.splice(i, 1)
}

However your method clicked() was in a very bad shape and I had to fix that as well: :adhesive_bandage:

  clicked() {
    return dist(mouseX, mouseY, this.x, this.y) < this.breite / 2
  }

The same clicked() method but w/o relying on dist(): :sunglasses:

  clicked() {
    return (mouseX - this.x)**2 + (mouseY - this.y)**2 < (this.breite >> 1)**2
  }

For further reading about collision detection go to the link below: :link:
CrHallberg.com/CollisionDetection/Website/point-circle.html

12

thank you very much you have been a great help

13

I have changed it to this but it doesn’t work for some reasonhttps://editor.p5js.org/thorax1st/sketches/KPvFLqT2L

14

Your variable Blasen refers to an array container.

The most common way to access an array’s index is via operator [] like I did in my fix:
if (Blasen[i].clicked()) return Blasen.splice(i, 1)

BtW, convention dictates that variables should use lowerCaseCamel.

And if they refers to a container they also should be a plural or collective name.

15

I have changed the “mousePressed” function to look like your example and also did that with your first example of “clicked”. But it doesn’t work

16

Well, I’m pretty sure if your copy & paste both callback mousePressed() & method clicked() your sketch should just work. :thinking:

1 Like
17

what ever. I think I’m gonna try something else but thanks for every thing. :smile: