# Array problem with SLIDER VALUE through for loop

**URL:** <https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753>\
**Category:** Coding Questions\
**Created:** [September 14, 2022, 7:20am UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753 "2022-09-14T07:20:24Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![wasif9098](https://avatars.discourse-cdn.com/v4/letter/w/bb73d2/32.png) [@wasif9098](https://discourse.processing.org/u/wasif9098)\
**Post date:** [September 14, 2022, 7:20am UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753/1 "2022-09-14T07:20:24Z")

</div>

I’m new to JS and p5. **I was trying to make a slider** which **controls the number of objects through array and for loop**. But I’m facing two problems.

**Problem 1.**  
If the slider value is above 49, it gives this error  
“Cannot read property of undefined. Check the line number in error and make sure the variable which is being operated is not undefined.”

I think the array is not taking values above 49 index.

For this slider, createSlider(0,85), slider is supposed to be on 85, but it stays in 49. Here’s the code,

```auto
let bubbles = [];

let slider,s;

function setup() {
  createCanvas(700, 600);
  colorMode(HSB,360,100,100,1);
  
  //creating slider
  s = createSlider(0,85);
  
  //adding bubbles with slider value through for loop
  for (let i=0; i < s.value(); i++){
    
    let a = random (width);
    let b = random (height);
    bubbles[i] = new ball (a,b);
  }
 
  //till this 49 index the code runs but not above it
  print (bubbles[49])
}

function draw() {
  background(0);
  
  //showing, moving and bouncing bubbles
  for (let i=0; i < s.value(); i++){
    
    bubbles[i].show();
    bubbles[i].move();
    bubbles[i].bon();
  
  }
}

//bubble class
class ball {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.xd = +3;
    this.yd = -5;
  }

  show() {
    noFill();
    stroke(80,50,100,.5);
    strokeWeight(4);
    ellipse(this.x, this.y, 40, 40);
  }

  move() {
    this.x = this.x + random(-5, 5);
    this.y = this.y + random(-6, 6);
  }

  bon() {
    if (this.x > width || this.x < 0) {
      this.x = this.x * -1;
    }
    if (this.y > height || this.y < 0) {
      this.yd = this.y * -1;
    }
  }

}

```

**Problem 2.**  
If I set an initial value for slider createSlider(0,85,25), the slider doesn’t go above the initial value and shows same error.

```auto
let bubbles = [];

let slider,s;

function setup() {
  createCanvas(700, 600);
  colorMode(HSB,360,100,100,1);
  
  
  //creating slider
  s = createSlider(0,85,25);
  
  
  
  //adding bubbles with slider value through for loop
  for (let i=0; i < s.value(); i++){
    
    let a = random (width);
    let b = random (height);
    bubbles[i] = new ball (a,b);
  }
 

}

function draw() {
  background(0);
  
  
  //showing, moving and bouncing bubbles
  for (let i=0; i < s.value(); i++){
    
    bubbles[i].show();
    bubbles[i].move();
    bubbles[i].bon();
  
  }

}

//bubble class
class ball {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.xd = +3;
    this.yd = -5;
  }

  show() {
    noFill();
    stroke(80,50,100,.5);
    strokeWeight(4);
    ellipse(this.x, this.y, 40, 40);
  }

  move() {
    this.x = this.x + random(-5, 5);
    this.y = this.y + random(-6, 6);
  }

  bon() {
    if (this.x > width || this.x < 0) {
      this.x = this.x * -1;
    }
    if (this.y > height || this.y < 0) {
      this.yd = this.y * -1;
    }
  }
}

```

Can anyone please share how to sort it out? Any help is really appreciated.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 14, 2022, 1:02pm UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753/2 "2022-09-14T13:02:46Z")

</div>

Problem is in both cases that you initialize the array in setup once and for all

Theoretically you should redefine the array when you change the slider - or extend it

---

<div class="post-metadata">

**Author:** ![wasif9098](https://avatars.discourse-cdn.com/v4/letter/w/bb73d2/32.png) [@wasif9098](https://discourse.processing.org/u/wasif9098)\
**Post date:** [September 14, 2022, 2:41pm UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753/3 "2022-09-14T14:41:05Z")

</div>

Thanks for the info. Can you please guide how to do the array part then as I’m a newbie?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 14, 2022, 4:02pm UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753/4 "2022-09-14T16:02:01Z")

</div>

you need to call this part when the slider value changes.

```auto

  //adding bubbles with slider value through for loop
  for (let i=0; i < s.value(); i++) {
    
    let a = random (width);
    let b = random (height);
    bubbles[i] = new ball (a,b);
  }

```

It’s a bit more tricky because when we actually

- reduce the number of balls, we remove some
- increase the number of balls, we add some balls (instead of doing the entire array anew)

More suitable is a ArrayList in this case.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 14, 2022, 5:25pm UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753/5 "2022-09-14T17:25:13Z")

</div>

> [@wasif9098](#):
>
> ```auto
> //creating slider
> s = createSlider(0,85);
>   
> //adding bubbles with slider value through for loop
> for (let i=0; i < s.value(); i++){
> 
> ```

B/c the max number of balls is 85, you’ll have to create 85 balls too:

```auto
  // Adding bubbles matching slider's max value through for loop:
  for (let i = 0; i < 85; ++i) {

```

BtW, the name of a class or constructor function, both in JS & Java, should follow the UpperCase naming convention:

- `bubbles[i] = new ball (a,b);` → `bubbles[i] = new Ball(a, b);`
- `class ball {` → `class Ball {`

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [September 14, 2022, 6:01pm UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753/6 "2022-09-14T18:01:11Z")

</div>

Hi,

You can do it this way …

[code](https://editor.p5js.org/mnse_forum/sketches/NM-g49QRWG)

Instead of pushing random values as in the code push balls.  
And in draw just simply iterate the balls and update/display it…

Cheers  
— mnse

PS: sorry, but I’m not able to copy/paste text from p5js editor nor format it from my mobile, hence the link with hopefully readable code … 😕

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 14, 2022, 8:45pm UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753/7 "2022-09-14T20:45:18Z")

</div>

When the slider has a max value you can also define as many balls in setup() as the maximum and then let the slider only define how many are visible.

- That might look nicer because otherwise balls spawn randomly but don’t have a continuous flight path?

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [September 15, 2022, 7:34am UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753/8 "2022-09-15T07:34:22Z")

</div>

Hi @wasif9098,

Now that I’m able to work on my box (not mobile) I’ve integrated my approach for adding/removing bubbles with your code included. This add and remove bubbles on slider changes regarding the slider value.

Cheers  
— mnse

PS: Still you need to consider if you want this or as @Chrisir suggested create all bubbles on setup and only display regarding slider value or if you want the approach to add and remove depending the slider value…

```auto
let slider;
let bubbles = [];

function setup() {
  createCanvas(700, 600);
  colorMode(HSB,360,100,100,1);  
  slider = createSlider(1, 100, 50);
  slider.input(valuechanged);
  valuechanged();
}

function valuechanged() {
  if (slider.value() < bubbles.length) {
    bubbles.length = slider.value();
  } else if (slider.value() > bubbles.length) {
    while (bubbles.length < slider.value()) {
      let a = random (width);
      let b = random (height);
      bubbles.push(new ball (a,b));
    }
  }
}

function draw() {
  background(0);
  
  //showing, moving and bouncing bubbles
  for (let i=0; i < bubbles.length; i++){
    bubbles[i].show();
    bubbles[i].move();
    bubbles[i].bon();
  }
}

//bubble class
class ball {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.xd = +3;
    this.yd = -5;
  }

  show() {
    noFill();
    stroke(80,50,100,.5);
    strokeWeight(4);
    ellipse(this.x, this.y, 40, 40);
  }

  move() {
    this.x = this.x + random(-5, 5);
    this.y = this.y + random(-6, 6);
  }

  bon() {
    if (this.x > width || this.x < 0) {
      this.x = this.x * -1;
    }
    if (this.y > height || this.y < 0) {
      this.yd = this.y * -1;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![wasif9098](https://avatars.discourse-cdn.com/v4/letter/w/bb73d2/32.png) [@wasif9098](https://discourse.processing.org/u/wasif9098)\
**Post date:** [September 15, 2022, 9:18am UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753/9 "2022-09-15T09:18:56Z")

</div>

@Chrisir Thanks for replying. Any documentation about ArrayList in p5.js? Would love to know about that then.

---

<div class="post-metadata">

**Author:** ![wasif9098](https://avatars.discourse-cdn.com/v4/letter/w/bb73d2/32.png) [@wasif9098](https://discourse.processing.org/u/wasif9098)\
**Post date:** [September 15, 2022, 9:26am UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753/10 "2022-09-15T09:26:37Z")

</div>

@mnse Thank you so much for the code. Love this very much supportive community guys! Actually, I don’t have much clear idea how input() works apart from typing which is in p5 reference. your code helped me to understand it.

Btw, I’m learning p5.js to apply as generative branding. I see it’s quite a long journey and requires some other knowledge like html as well. Thanks for all of this guys once again.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 15, 2022, 11:07am UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753/11 "2022-09-15T11:07:28Z")

</div>

Apparently ArrayList is a thing of native processing and not of o5

Anyway, the method that has been shown using push is equal to arraylist’s add() command

---

<div class="post-metadata">

**Author:** ![wasif9098](https://avatars.discourse-cdn.com/v4/letter/w/bb73d2/32.png) [@wasif9098](https://discourse.processing.org/u/wasif9098)\
**Post date:** [September 15, 2022, 6:23pm UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753/12 "2022-09-15T18:23:40Z")

</div>

Btw @mnse , I’ve just tweaked this little thing. 😅 Added an equal with greater condition in else if. Now this helped me to get number of bubbles matched to slider value. Earlier, while the slider value was 1, no bubble showed up.

```auto
else if (slider.value() >= bubbles.length) {
    while (bubbles.length < slider.value()) {
      let a = random (width);
      let b = random (height);
      bubbles.push(new ball (a,b));
      }
  }

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [September 16, 2022, 6:08am UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753/13 "2022-09-16T06:08:22Z")

</div>

Hi @wasif9098,

you don’t need to change to \>=, as my code do already the right thing. 🙂  
The issue is in your boundary check (under some positional circumstances) … 😉

Cheers  
— mnse