Help: elastic image deformation sketch

Programming Questions

tamaw1

Help: elastic image deformation sketch

in Programming Questions • 3 months ago

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

Replies(3)

tamaw1

new version

3 months ago

This is my newest version. But i didn't find a final solution.

// 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, P3D);
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");

textureMode(NORMAL);
}

void draw()
{
// image(img,0,0);
background(255);

// draw the mesh of triangles
stroke(0, 40);
fill(255, 40);

beginShape();
texture(img);

for (int i = 0; i < triangles.size(); i++) {

    Triangle t = (Triangle)triangles.get(i);

    float u1 = map(t.p1.x, 0, width, 0, 1);
    float v1 = map(t.p1.y, 0, height, 0, 1);
    float u2 = map(t.p2.x, 0, width, 0, 1);
    float v2 = map(t.p2.y, 0, height, 0, 1);
    float u3 = map(t.p3.x, 0, width, 0, 1);
    float v3 = map(t.p3.y, 0, height, 0, 1);

    vertex(t.p1.x, t.p1.y, 0, u1, v1);
    vertex(t.p2.x, t.p2.y, 0, u2, v2);
    vertex(t.p3.x, t.p3.y, 0, u3, v3);

}
endShape();

}

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

quarks

Re: Help: elastic image deformation sketch

3 months ago

You might mess about with the code from this sketch (created with Traer physics)

tamaw1

Final Solution

3 months ago

               
                Link: 
                

                https://github.com/ixd-hof/Processing/blob/master/Examples/Visualization/Triangulation_Texture/Triangulation_Texture.pde
// 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
                , 
                P3D
                );
               
               
                  
                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
                ));
               
               
                  
                triangles 
                = 
                Triangulate
                .
                triangulate
                (
                points
                );
               
               
                  
               
               
                  
                // Image: NASA
               
               
                  
                img 
                = 
                loadImage
                (
                "nasa_buzz.jpg"
                );
               
               
                  
               
               
                  
                textureMode
                (
                NORMAL
                );
               
               
                }
               
               
                 
               
               
                void 
                draw
                ()
               
               
                {
               
               
                 
                // image(img,0,0);
               
               
                  
                background
                (
                255
                );
               
               
                 
               
               
                  
                // draw the mesh of triangles
               
               
                  
                beginShape
                (
                TRIANGLES
                );
               
               
                  
                texture
                (
                img
                );
               
               
                 
               
               
                  
                for 
                (
                int 
                i 
                = 
                0
                ; 
                i 
                < 
                triangles
                .
                size
                (); 
                i
                ++) 
                {
               
               
                    
               
               
                    
                Triangle 
                t 
                = 
                (
                Triangle
                )
                triangles
                .
                get
                (
                i
                );
               
               
                    
               
               
                    
                // Create UV coordinates
               
               
                    
                float 
                u1 
                = 
                map
                (
                t
                .
                p1
                .
                x
                , 
                0
                , 
                width
                , 
                0
                , 
                1
                );
               
               
                    
                float 
                v1 
                = 
                map
                (
                t
                .
                p1
                .
                y
                , 
                0
                , 
                height
                , 
                0
                , 
                1
                );
               
               
                    
                float 
                u2 
                = 
                map
                (
                t
                .
                p2
                .
                x
                , 
                0
                , 
                width
                , 
                0
                , 
                1
                );
               
               
                    
                float 
                v2 
                = 
                map
                (
                t
                .
                p2
                .
                y
                , 
                0
                , 
                height
                , 
                0
                , 
                1
                );
               
               
                    
                float 
                u3 
                = 
                map
                (
                t
                .
                p3
                .
                x
                , 
                0
                , 
                width
                , 
                0
                , 
                1
                );
               
               
                    
                float 
                v3 
                = 
                map
                (
                t
                .
                p3
                .
                y
                , 
                0
                , 
                height
                , 
                0
                , 
                1
                );
               
               
                    
               
               
                    
                vertex
                (
                t
                .
                p1
                .
                x
                , 
                t
                .
                p1
                .
                y
                , 
                t
                .
                p1
                .
                z
                , 
                u1
                , 
                v1
                );
               
               
                    
                vertex
                (
                t
                .
                p2
                .
                x
                , 
                t
                .
                p2
                .
                y
                , 
                t
                .
                p2
                .
                z
                , 
                u2
                , 
                v2
                );
               
               
                    
                vertex
                (
                t
                .
                p3
                .
                x
                , 
                t
                .
                p3
                .
                y
                , 
                t
                .
                p3
                .
                z
                , 
                u3
                , 
                v3
                );
               
               
                  
                }
               
               
                  
                endShape
                ();
               
               
                  
               
               
                }
               
               
                

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

Top Reply