Hey

I 'm looking for an elastic image deformation per mouse click.
At the moment i have a sketch, where i can split the background into trinagles. ( see below)

But if I upload an image in the background, there is no elastic effect.
So I m looking for something to fix the image on the pattern.

I' m very thankfull for some great ideas.

Thanks!

Kind regards

Tamara





This is my sketch:

// http://wiki.processing.org/w/Triangulation
import org.processing.wiki.triangulate.*;

PImage img;
 
ArrayList triangles = new ArrayList();
ArrayList points = new ArrayList();
 
void setup()
{
  size(400, 400, OPENGL);
  smooth();
 
  points.add(new PVector(0, 0, 0));
  points.add(new PVector(width, 0, 0));
  points.add(new PVector(width, height, 0));
  points.add(new PVector(0, height, 0));
 
  img = loadImage("fo.png");
}
 
void draw()
{
  image(img,0,0);
 
  // draw the mesh of triangles
  stroke(0, 40);
  fill(255, 40);
 
  beginShape(TRIANGLES);
 
  for (int i = 0; i < triangles.size(); i++) {
    Triangle t = (Triangle)triangles.get(i);
    vertex(t.p1.x, t.p1.y);
    vertex(t.p2.x, t.p2.y);
    vertex(t.p3.x, t.p3.y);
  }
  endShape();
}

void mousePressed()
{
  points.add(new PVector(mouseX, mouseY, 0));
  triangles = Triangulate.triangulate(points);
}