{"id":16609596,"url":"https://github.com/artbit/triangulate-image","last_synced_at":"2025-10-29T17:30:18.649Z","repository":{"id":4148235,"uuid":"5262195","full_name":"ArtBIT/triangulate-image","owner":"ArtBIT","description":"Image Triangulation","archived":false,"fork":false,"pushed_at":"2017-02-22T13:24:46.000Z","size":180,"stargazers_count":21,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2023-03-24T14:34:13.640Z","etag":null,"topics":["html5","html5-canvas","image-effect","image-processing","javascript","triangulation"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArtBIT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-08-01T17:13:56.000Z","updated_at":"2022-01-26T02:37:17.000Z","dependencies_parsed_at":"2022-07-05T11:02:27.157Z","dependency_job_id":null,"html_url":"https://github.com/ArtBIT/triangulate-image","commit_stats":null,"previous_names":[],"tags_count":1,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArtBIT%2Ftriangulate-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArtBIT%2Ftriangulate-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArtBIT%2Ftriangulate-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArtBIT%2Ftriangulate-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArtBIT","download_url":"https://codeload.github.com/ArtBIT/triangulate-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219857406,"owners_count":16556062,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html5","html5-canvas","image-effect","image-processing","javascript","triangulation"],"created_at":"2024-10-12T01:29:09.785Z","updated_at":"2025-10-29T17:30:18.286Z","avatar_url":"https://github.com/ArtBIT.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Image Triangulation\n===================\n![Triangulation example](images/example.png?raw=true)\n\nSimple Web App that tries to turn an image into a triangulated mosaic. Check [this link](http://artbit.deviantart.com/gallery/38261066) for example results.\n\n# Demo\n[Click Here](http://artbit.github.io/triangulate-image/index.html) to see a live demo.\n\n# Example Usage\n\n    \u003cscript type='text/javascript'\u003e\n        // let's say the `img` variable holds a reference to an image element with the uploaded image\n            var w = img.width;\n            var h = img.height;\n\n        // create canvas element\n            var canvas = document.createElement('canvas');\n            canvas.width = w;\n            canvas.height = h;\n\n        // draw the image onto the canvas\n            var ctx = this.canvas.getContext('2d');\n            ctx.drawImage(img, 0, 0, w, h);\n\n        // get the pixel data\n            image_data = ctx.getImageData(0, 0, w, h);\n\n        // process the pixels\n            var pixelNetwork = new PixelNetwork(image_data);\n            pixelNetwork.process();\n            pixelNetwork.reduce();\n\n        // get the resulting points\n            var points = pixelNetwork.getPoints();\n\n        // triangulate points\n            var triangles = Triangulate(points);\n\n        // draw the triangles\n            for (var i in triangles) {\n                var triangle = triangles[i];\n\n                ctx.beginPath();\n\n                ctx.moveTo(triangle.v0.x, triangle.v0.y);\n                ctx.lineTo(triangle.v1.x, triangle.v1.y);\n                ctx.lineTo(triangle.v2.x, triangle.v2.y);\n\n                ctx.closePath();\n\n                var triangle_center = {\n                    x: ((triangle.v0.x + triangle.v1.x + triangle.v2.x) / 3) | 0,\n                    y: ((triangle.v0.y + triangle.v1.y + triangle.v2.y) / 3) | 0\n                };\n\n                // find out the color of the pixel at the center of the triangle, see the source for helper functions used\n                var rgba = arrayToRgba(getPixel(this.original_image_data, triangle_center.x, triangle_center.y));\n                this.ctx.strokeStyle = rgba;\n                this.ctx.fillStyle = rgba;\n                this.ctx.fill();\n                this.ctx.stroke();\n\n            }\n    \u003c/script\u003e\n\nSee the [index.html](http://github.com/ArtBIT/triangulate-image/blob/master/index.html) file for an example app.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartbit%2Ftriangulate-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartbit%2Ftriangulate-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartbit%2Ftriangulate-image/lists"}