How do I make variations of variables?

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;
}
}>

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.

2 Likes

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.

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

1 Like

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

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.

1 Like

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, It says that ellipse is not a function, do you know why?

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

still a problem though, can you help me pls ?

You can delete posts if you want.

I don’t think people check these anyways

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:

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);
  }
}
2 Likes

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

Thank you, It works perfectly.

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);
    }
  }
}

}

}>

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.

1 Like

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

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);
          }
        }
      }
    }
  }

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

1 Like

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);”

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.

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

1 Like