# How do I make variations of variables?

**URL:** <https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936>\
**Category:** Coding Questions\
**Created:** [December 3, 2020, 6:31pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936 "2020-12-03T18:31:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [December 3, 2020, 6:31pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/1 "2020-12-03T18:31:20Z")

</div>

stay with me but u know these brackets [] sometimes in other’s code I see it before the variable and idk what it does but I think it means you can have many variables that mean are the same in value but not exactly the same in the name. But basically, in the code below, I want it to be possible that you can create an infinite amount of ripples without stopping other ripples. Pls send help. Feel free to copy-paste the code.

\<let u = 0;  
let ripple = 0;  
let ghostX = 0;  
let ghostY = 0;  
function setup() {  
createCanvas(400, 400);  
}

function draw() {

ripple1();

}

function ripple1 (){

background(220);  
ripple = ripple + 1;  
for(x = 0; x \<= 400; x = x + 10){  
for(y = 0; y \<= 400; y = y + 10){  
if(u == 1){  
if(dist(ghostX,ghostY,0 + x,0 + y) \> ripple - 10 && dist(ghostX,ghostY,0 + x,0 + y) \< ripple + 10){  
ellipse(0 + x,0 + y,10);  
}  
}  
}  
}

if (mouseIsPressed) {

u = 1;  
ghostX = mouseX;  
ghostY = mouseY;  
ripple = 0;  
}  
}\>

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 3, 2020, 7:42pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/2 "2020-12-03T19:42:51Z")

</div>

Hi @olaf000olaf  
I really like your sketch.  
Storing values in arrays[] could in some way work drawing them on a set of different p5.Graphics that will switch every time mousePressed is used, but this is far-fetched.  
I would really think of making a Class instead.

> **[Objects \\ Processing.org](https://processing.org/tutorials/objects/)**

---

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [December 3, 2020, 8:56pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/3 "2020-12-03T20:56:36Z")

</div>

Thank you so much, I’m going to give it a go but from the p5js website since its a little differently formated. Without you mentioning classes I would be too afraid to even try, If I’ll have any problems could I talk to you? I’m still new to js only about 3 months or so.  
Goodnight (if you live in Europe) Idk about America though so I’m guessing good day.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 3, 2020, 9:04pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/4 "2020-12-03T21:04:27Z")

</div>

Daniel Shiffman has an awesome series of videos.  
See this one about arrays and objects and classes.

[![](https://img.youtube.com/vi/fBqaA7zRO58/maxresdefault.jpg "7.3: Arrays of Objects - p5.js Tutorial") ](https://www.youtube.com/watch?v=fBqaA7zRO58&t=742s)

---

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [December 3, 2020, 9:06pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/5 "2020-12-03T21:06:26Z")

</div>

thx I’ll check that in the morning because I have school tmrw.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 3, 2020, 9:19pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/6 "2020-12-03T21:19:11Z")

</div>

Also KevinWorkman has excellent tutorials on his blog  
See this step by step one, about objects and then on the bottom a link to the next one about classes.

> **[Using Objects in p5.js](https://happycoding.io/tutorials/p5js/using-objects)**
>
> Learn how to use objects in p5.js to group related variables together.

---

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [December 3, 2020, 9:23pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/7 "2020-12-03T21:23:48Z")

</div>

For some reason when I’m doing this

\<let ellipse;

function setup() {  
createCanvas(400, 400);  
ellipse = new Circle();  
ellipse.move();  
ellipse.display();  
}

function draw() {  
background(220);  
}

class Circle {  
constructor(speed,locX,locY){  
this.speed = 1;  
this.locX = random(0,400);  
this.locY = 200;  
}

move(){  
this.locX += this.speed;

}

display(){  
ellipse(this.locX,this.locY,10,10);

}  
}\>

like in this example I found [https://p5js.org/examples/objects-objects.html](https://p5js.org/examples/objects-objects.html), It says that ellipse is not a function, do you know why?

---

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [December 3, 2020, 9:24pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/8 "2020-12-03T21:24:39Z")

</div>

actually i’m so stupid i put the display and move in setup

---

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [December 3, 2020, 9:25pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/9 "2020-12-03T21:25:41Z")

</div>

still a problem though, can you help me pls ?

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 3, 2020, 9:25pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/10 "2020-12-03T21:25:49Z")

</div>

You can delete posts if you want.

---

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [December 3, 2020, 9:26pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/11 "2020-12-03T21:26:11Z")

</div>

I don’t think people check these anyways

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 3, 2020, 9:57pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/12 "2020-12-03T21:57:13Z")

</div>

> [@olaf000olaf](#):
>
> still a problem though, can you help me pls ?

Oh, I oversaw this one because you posted so fast.  
It’s not a good idea to name an object equal to a function like ellipse().  
Rename it different like:

```auto
let ellips; // Declare object

function setup() {
  createCanvas(710, 400);
  // Create object
  ellips = new Circle();
}

function draw() {
  background(50, 89, 100);
  ellips.move();
  ellips.display();
}

// Circle class
class Circle {
  constructor() {
    this.locX = random(width);
    this.locY = random(height);
    this.speed = 1;
  }

  move() {
    this.locX += this.speed;
    this.locY = 200;
  }

  display() {
    ellipse(this.locX, this.locY, 10, 10);
  }
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 3, 2020, 10:03pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/13 "2020-12-03T22:03:07Z")

</div>

Don’t forget to read the link happy coding above.

---

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [December 4, 2020, 6:47am UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/14 "2020-12-04T06:47:23Z")

</div>

Thank you, It works perfectly.

---

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [December 4, 2020, 4:35pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/16 "2020-12-04T16:35:54Z")

</div>

I’ve done what you recommended and it works perfectly, I also added that when the rippleSize is bigger than the screen it dies, so you can spam and don’t worry about lag. For visual purposes i changed that to 100 instead of the screen and when there is no ripples being drawn at anytime the code crashes, what can I do about that?

\<let grids = [];  
let us = [];

let grid1;

function setup() {  
createCanvas(400, 400);

}

function mousePressed(){

let grid = new Grid();  
grids.push(grid);

}

function draw() {  
background(220);

if(grids.length \> 0){  
for(i = 0; i \< grids.length; i = i + 1){

grids[i].move();  
grids[i].display();

}  
}  
}

class Grid {  
constructor(){  
this.x = 5;  
this.y = 5;

```
this.rippleStartX = mouseX;
this.rippleStartY = mouseY;
  
this.ripple = 0;

```

}  
move(){  
this.ripple = this.ripple + 1;

```
if(this.ripple == 100) {
  grids.splice(i,1);
}

```

}  
display(){

```
for(this.x = 5; this.x <= windowWidth; this.x = this.x + 10){
  for( this.y = 5; this.y <= windowHeight; this.y = this.y + 10){
    if(dist( this.rippleStartX,this.rippleStartY,this.x, this.y) < this.ripple + 10 && dist(this.rippleStartX,this.rippleStartY,this.x, this.y) > this.ripple - 10){
    ellipse(this.x, this.y,8);
    }
  }
}

```

}

}\>

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 4, 2020, 4:41pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/17 "2020-12-04T16:41:24Z")

</div>

Do you have problems with text selecting on your device?  
The coding block is only partial.  
But I’ll try to copy it anyway.  
It would be nice if you could edit your code.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 4, 2020, 4:46pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/18 "2020-12-04T16:46:50Z")

</div>

I guess that you are trying to limit the ring expansion.  
I would do it this way:

```auto
display() {
    if (this.ripple < 300) {
      for (this.x = 0; this.x <= width; this.x = this.x + 10) {
        for (this.y = 0; this.y <= height; this.y = this.y + 10) {
          if (dist(this.rippleStartX, this.rippleStartY, this.x, this.y) < this.ripple + 10 &&               
              dist(this.rippleStartX, this.rippleStartY, this.x, this.y) > this.ripple - 10) {
            ellipse(this.x, this.y, 8);
          }
        }
      }
    }
  }

```

---

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [December 5, 2020, 9:06am UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/19 "2020-12-05T09:06:56Z")

</div>

thx, actually thats going to be easier, instead of 300 i used pythagorus to find the diagonal of the screen.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 5, 2020, 10:45am UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/20 "2020-12-05T10:45:01Z")

</div>

Great, you’re doing well.  
In the last post, I forgot to include the splice() function to limit the number of objects in the grids[] array.  
Here is the full display() method. Classes are great because they handle and keep track of each object separately. So you just write “grids.splice(this.grid, 1);”

```auto
display() {
    fill(this.c);
    if (this.ripple < 200) {
      for (this.x = 0; this.x <= width; this.x = this.x + 10) {
        for (this.y = 0; this.y <= height; this.y = this.y + 10) {
          if (dist(this.rippleStartX, this.rippleStartY, this.x, this.y) < this.ripple + 10 &&                 
              dist(this.rippleStartX, this.rippleStartY, this.x, this.y) > this.ripple - 10) {
            ellipse(this.x, this.y, 8);
          }
        }
      }
    } else {
      grids.splice(this.grid, 1);
    }
  }

```

So now that you have a class, you can give other properties to each individual object like size or color,  
Let’s do that.

https://editor.p5js.org/noelpil/present/J7bTVBZEw

---

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [December 5, 2020, 4:47pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936/21 "2020-12-05T16:47:20Z")

</div>

I’m still working on the appearance just got the technical down, i’ll show you the fine product since you helped a lot.