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