How to create ripple effects over an image?

Processing Coding Questions
1

Ok, I am fairly new to processing so forgive me if this question is stupid or if this is not a suitable place to ask.

The following code is taken from Dan Shiffman, The only modification made to this Is that I draw the previous frame in the draw loop rather than in setup and I have increased the dampening and overall size.
I am posting this as It is so that people can see what I am aiming for.

int cols = 400;
int rows = 400;

float [][] current;
float [][] previous;

float dampening = 0.99;

void setup() {
 size(400,400);

 cols = width;
 rows = height;
 current  = new float [cols][rows];
 previous = new float [cols][rows]; 
 
}

void draw() {
  previous[200][200] = random(255);

  loadPixels();
   for (int i = 1; i < cols-1; i++) {
    for (int j = 1; j < rows-1; j++) {
      
     current[i][j] = (
      previous [i-1][j] +
      previous [i+1][j] +
      previous [i][j-1] +
      previous [i][j+1]) /2 -
      current [i][j];
      current[i][j] = current[i][j] * dampening;
      
      int index = i + j * cols;
      pixels[index] = color(current[i][j]*255);
    }
  }
  updatePixels();
  float[][] temp = previous;
  previous = current;
  current = temp;
}

Ok,so I would like to access the pixels of the image below and have the ripple effect going through it warpping the image as it goes.
Please note: The art is my own origional work and is not CC.
The following code is what I have been doing to try to make it work…
It does not work obviously.

water
water.jpg596×842 510 KB 

PImage water;

Triangle[] _TriangleArr = {}; 
int _num = 5; 

int cols = 600;
int rows = 800;

float [][] current;
float [][] previous;

float dampening= 0.99;

void setup () {
  size (600,800);
  water = loadImage("water.png");
  drawTriangle();
  
 cols = width;
 rows = height;
 current  = new float [cols][rows];
 previous = new float [cols][rows]; 
}


void draw() {
 background(water);
 // image(water,0, 0, width, height); 
 
 
  for (int i = 0; i < _TriangleArr.length; i++) {
    Triangle thisTriangle = _TriangleArr[i];
    thisTriangle.updateMe();
  }
  
  previous[300][100] = random(255);

  water.loadPixels();
   for (int i = 1; i < cols-1; i++) {
    for (int j = 1; j < rows-1; j++) {
      
     current[i][j] = (
      previous [i-1][j] +
      previous [i+1][j] +
      previous [i][j-1] +
      previous [i][j+1]) /2 -
      current [i][j];
      current[i][j] = current[i][j] * dampening;
      
      int index = i + j * cols;
      water.pixels[index] = color(current[i][j]*255);
    }
  }
   water.updatePixels();
  float[][] temp = previous;
  previous = current;
  current = temp;
}

void drawTriangle() { 
  for (int i=0; i<_num; i++) { 
    Triangle thisTriangle = new Triangle ();
    thisTriangle.drawMe();
    _TriangleArr = (Triangle[])append(_TriangleArr, thisTriangle);
  }
}

//TRIANGLE CLASS:
class Triangle {
  float x, y, x1, y1, x2, y2;
  color linecol, fillcol;
  float alph; 
  float xmove, ymove;
  float rot;

  Triangle() {
    x = random(width);
    y = random(height);
    x1 = random(width)-random(10);
    y1 = random(height)-random(5, 10);
    x2 = random(width)+random(10);
    y2 = random(height)-random(5, 10);
    linecol = color(random(10,50), random(10,50), random(150,255));
    fillcol = color(random(10,50), random(10,50), random(150,255));
    alph = random(80, 150);

    xmove = random(-2, 2);
    ymove = random(-2, 5); 
    rot=radians(x*6);
  }

  void drawMe() {
    noStroke();
    fill(fillcol, alph);
    triangle(x, y, x1, y1, x2, y2);
  }
}

If anyone has suggestions or pointers that would be much appriciated.

1 Like
2

This above is missing.

Also, format your code. It is hard to read and code not formatted properly could be missing characters.

Edit post, select code and hit the button </>

Kf

1 Like
3

@kfrajer;

Sorry about the mess of the code, I’m new to coding and forgot about formating, I normally do that when I am finished.

You stated that there was a missing part of the code.
this.Triangle.updateMe();
But it is in the code.

Do you have any insights into how I might get the ripple to distort my image?
artisan.

4

@artisan
If you check the code above, the definition of updateMe() is missing. If you copy and paste the code above, you will see the code does not run. Please make sure the code that you share runs. This is very important so people that are volunteering to help spend less time trying to figure out how to make your code work and instead, they spend their energy trying to find the root cause of your problem.

After you double-check the code works, please go back to both of your previous posts and fix the formatting of them. You can hit the pencil symbol to edit the post. Then you can select the code and click the icon with this symbol: </>. Then you need to save the changes.

Just to clarify: I can run your first example but not the second one.

Kf

2 Likes