https://github.com/ArtBIT/triangulate-image

Image Triangulation
https://github.com/ArtBIT/triangulate-image

html5 html5-canvas image-effect image-processing javascript triangulation

Last synced: 4 months ago
JSON representation

Image Triangulation

• Host: GitHub
• URL: https://github.com/ArtBIT/triangulate-image
• Owner: ArtBIT
• License: mit
• Created: 2012-08-01T17:13:56.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2017-02-22T13:24:46.000Z (almost 8 years ago)
• Last Synced: 2024-10-12T01:29:04.525Z (4 months ago)
• Topics: html5, html5-canvas, image-effect, image-processing, javascript, triangulation
• Language: JavaScript
• Size: 176 KB
• Stars: 20
• Watchers: 6
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Image Triangulation

===================

![Triangulation example](images/example.png?raw=true)

Simple Web App that tries to turn an image into a triangulated mosaic. Check [this link](http://artbit.deviantart.com/gallery/38261066) for example results.

# Demo

[Click Here](http://artbit.github.io/triangulate-image/index.html) to see a live demo.

# Example Usage

    

        // let's say the `img` variable holds a reference to an image element with the uploaded image

            var w = img.width;

            var h = img.height;

        // create canvas element

            var canvas = document.createElement('canvas');

            canvas.width = w;

            canvas.height = h;

        // draw the image onto the canvas

            var ctx = this.canvas.getContext('2d');

            ctx.drawImage(img, 0, 0, w, h);

        // get the pixel data

            image_data = ctx.getImageData(0, 0, w, h);

        // process the pixels

            var pixelNetwork = new PixelNetwork(image_data);

            pixelNetwork.process();

            pixelNetwork.reduce();

        // get the resulting points

            var points = pixelNetwork.getPoints();

        // triangulate points

            var triangles = Triangulate(points);

        // draw the triangles

            for (var i in triangles) {

                var triangle = triangles[i];

                ctx.beginPath();

                ctx.moveTo(triangle.v0.x, triangle.v0.y);

                ctx.lineTo(triangle.v1.x, triangle.v1.y);

                ctx.lineTo(triangle.v2.x, triangle.v2.y);

                ctx.closePath();

                var triangle_center = {

                    x: ((triangle.v0.x + triangle.v1.x + triangle.v2.x) / 3) | 0,

                    y: ((triangle.v0.y + triangle.v1.y + triangle.v2.y) / 3) | 0

                };

                // find out the color of the pixel at the center of the triangle, see the source for helper functions used

                var rgba = arrayToRgba(getPixel(this.original_image_data, triangle_center.x, triangle_center.y));

                this.ctx.strokeStyle = rgba;

                this.ctx.fillStyle = rgba;

                this.ctx.fill();

                this.ctx.stroke();

            }

    

See the [index.html](http://github.com/ArtBIT/triangulate-image/blob/master/index.html) file for an example app.