Parallel Array for ripple effect/rain drop

Processing Coding Questions
1

Hello guys and gals,

I’m trying to make something really weird and kinda stupid (ripple effect/rain drop effect). I’m trying to make a partial full array that can hold up to 1000 x & y cords pair. For me to do that I will need to make 2 parallel arrays. (bc x and y). On mouse click the mouseX and mouseY would be saved in the parallel arrays. Then another function will draw the circle from the stored x and y cord. I need help because I do not really understand parallel arrays. I for some reason just cannot wrap my head around how it works, I don’t know why.

This is kinda what I have but it feels kinda really wrong to me…

//Setting up an array list to collect instances of ripples as the size increases.
ArrayList <Ripple> ripples = new ArrayList<Ripple>();
color grey= color(92, 198, 234);
color green= color(52);

void setup() {
  size(500, 500);
  //classic frame rate for animations. 
  frameRate(60);
}

void draw() {
  gradientRect(0, 0, width, height, blue, grey);

//as long as i is smaller than 'size', i increases- 'gets' more and more ripples
  for (int i=0; i<ripples.size(); i++) {
    Ripple rippleTemp = ripples.get(i);
    rippleTemp.showRipple();
  }

  for (int i=0; i<ripples.size(); i++) {
    Ripple rippleTemp = ripples.get(i);
    //calls upon a function to remove the ripples so that they're stored in the arraylist indefinitely, taking up space.
    if (rippleTemp.finished) {
      ripples.remove(i);
    }
  }
  println(ripples.size());
}
//a function for a box with different colours at different points, producing a gradient.
void gradientRect(int x, int y, int w, int h, color c1, color c2) {
  beginShape();
  fill(c1);
  //will define as 0,0, start.
  vertex(x, y);
  //distance from start across top, will be defined as width, so it's the other corner.
  vertex(x+w, y);
  //next two points are a different colour at the bottom.
  fill(c2);
  //width across and length down from start, so bottom right corner.
  vertex(x+w, y+h);
  //length down from start, so bottom left corner.
  vertex(x, y+h);
  endShape();
}

void mouseClicked(){
  ripples.add(new Ripple(mouseX, mouseY, 2));
}

class Ripple {
  float startX;
  float startY;
  //increases until 20, at which point, finished becomes true: determines the max size of the ripple, and when the ripples should disappear.
  float size;
  //boolean to state when it is finished, and the ripples are deleted from the array, as seen above.
  boolean finished = false;

  Ripple(float pstartX, float pstartY, float psize) {
    startX=pstartX;
    startY=pstartY;
    size=psize;
  }
  //when ripple gets to size 20, finished will become true, and the ripples will be removed from the array list. 
  //So max size is 20 and then they disappear.
  void showRipple() {
    size += 26;
    if (size>20) { //bigger the number the more circles there are
      finished=true;
    }
    ripple();
  }
  void ripple() {
    noFill();
    strokeWeight(0.5);
    stroke(#A2F6FF);
    ellipse(startX, startY, size, size);
  }
}
1 Like
2

Think about something like this:

float x;
float y;

void setup(){
  size(500, 500);
  x = width/2;
  y = height/2;
}

void draw(){
  ellipse(x, y, 20, 20);
}

We have an x and y variable, which we use to draw a single ellipse.

If we wanted to draw multiple ellipses, we could create more variables:

float xOne;
float yOne;

float xTwo;
float yTwo;

void setup(){
  size(500, 500);
  xOne = width * .25;
  yOne = height * .25;
  xTwo = width * .75;
  yTwo = height * .75;
}

void draw(){
  ellipse(xOne, yOne, 20, 20);
  ellipse(xTwo, yTwo, 20, 20);
}

This gets more difficult as we add more variables, so we can improve our code using arrays and for loops:

int circleCount = 10;

float[] xArray = new float[circleCount];
float[] yArray = new float[circleCount];

void setup(){
  size(500, 500);
  for(int i = 0; i < circleCount; i++){
    xArray[i] = random(width);
    yArray[i] = random(height);
  }
}

void draw(){
  for(int i = 0; i < circleCount; i++){
    ellipse(xArray[i], yArray[i], 20, 20);
  }
}

This is an example of parallel arrays. We hold our X values in xArray and our Y values in yArray.

However, note that parallel arrays are generally a bad idea. You’d be better off using an array of PVector instances instead of maintaining two separate arrays.

Shameless self promotion: here are a few tutorials you might find useful:

1 Like