{"id":22771724,"url":"https://github.com/stonet2000/polytomizator","last_synced_at":"2025-04-15T05:30:23.717Z","repository":{"id":37216308,"uuid":"133820592","full_name":"StoneT2000/Polytomizator","owner":"StoneT2000","description":"A website that helps make/generate poly art with an uploaded image.","archived":false,"fork":false,"pushed_at":"2023-02-28T18:54:11.000Z","size":11301,"stargazers_count":23,"open_issues_count":5,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-28T16:21:25.171Z","etag":null,"topics":["art","canvas","css","edge-detection","generative-art","html","javascript","lowpoly","p5js","poly-art","triangulation"],"latest_commit_sha":null,"homepage":"https://stonet2000.github.io/Polytomizator","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/StoneT2000.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,"governance":null}},"created_at":"2018-05-17T13:52:35.000Z","updated_at":"2024-11-27T16:22:44.000Z","dependencies_parsed_at":"2023-01-25T16:30:48.540Z","dependency_job_id":"8a72ae3d-1353-4cf8-8f1d-e12b908e0d11","html_url":"https://github.com/StoneT2000/Polytomizator","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StoneT2000%2FPolytomizator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StoneT2000%2FPolytomizator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StoneT2000%2FPolytomizator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StoneT2000%2FPolytomizator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StoneT2000","download_url":"https://codeload.github.com/StoneT2000/Polytomizator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249014442,"owners_count":21198603,"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":["art","canvas","css","edge-detection","generative-art","html","javascript","lowpoly","p5js","poly-art","triangulation"],"created_at":"2024-12-11T16:16:54.081Z","updated_at":"2025-04-15T05:30:23.672Z","avatar_url":"https://github.com/StoneT2000.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Polytomizator\nA web applet that helps generate poly art using an uploaded background image.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src =\"https://github.com/StoneT2000/StoneT2000.github.io/blob/old/images/PolyFlowerEffect2.gif\" width=\"800\" height=\"auto\"\u003e\u003c/img\u003e\n\u003c/p\u003e\nThis was made using JS and HTML. Primary library used was p5.js.\n\n## Using this program\nA working link to this program is provided here https://stonet2000.github.io/Polytomizator\n\nOr... (the following is less recommended as it takes longer and was really done because I was learning how to use Electron, npm etc.)\n\nYou can clone and run this repository through \u003ca href=\"https://www.npmjs.com/\"\u003enpm\u003c/a\u003e. You will need \u003ca href=\"https://git-scm.com/\"\u003eGit\u003c/a\u003e and \u003ca href=\"https://nodejs.org/en/download/\"\u003eNode.js\u003c/a\u003e installed however. Using your command line (e.g Terminal on Mac OSX), run\n\n``` bash\n# To clone this repository\ngit clone https://github.com/StoneT2000/Polytomizator.git\n# Then to enter the repostory\ncd Polytomizator\n# Install dependencies and start up the app\nnpm install \u0026\u0026 npm start\n```\n\nTo compile this into an app run\n\n``` bash\n# Download all app distributions\nnpm run build\n# Mac OSX\nnpm run build:osx\n# Windows\nnpm run build:win\n# Linux\nnpm run build:linux\n```\n\nOr if you want to skip all this techy stuff, head over to the \u003ca href=\"https://github.com/StoneT2000/Polytomizator/releases\"\u003ereleases page\u003c/a\u003e to download the latest version. This is built with \u003ca href=\"https://electronjs.org\"\u003eElectron\u003c/a\u003e.\n\n\n## Features\n### Making Poly Art\n- Upload local image files to the page to make poly art with\n- Different brushes, brush sizes, and densities to play around with to add or remove points onto the canvas\n- Triangulates the points using Delaunay triangulation. Algorithm used provided by https://github.com/mapbox/delaunator\n- Poly art can be created instantly or with a \"flowering effect\" with the colors being added to the triangles starting from the center and radially expanding outwards\n- Poly art can be auto-generated by computer. A combination of randomness and edge detection algorithms help make the poly art look better.\n- Can auto-generate two kinds of poly art, normal, and cubic like\n- Can snap vertices or draw vertices on to a set grid\n- Can undo or redo placement of vertices\n- Has other display modes of the triangulation (e.g. displaying the respective circumcircles instead of the triangles)\n- Can download at varying sizes depending on the desired number of megapixels. (On a MacBook Air 2017, I was able to create a 120MP sized poly art image)\n- Can adjust canvas size to work on for bigger or smaller screens\n### Downloading and Loading Work\n- Creates poly art from triangulation and can be downloaded at high resolutions\n- Save created points, triangles, and colors in between browsing sessions (Just don't clear cache)\n- Save poly art to a .svg file for further editing or manual scaling with other applications\n\n## Planned Features\n- Other cool/interesting forms of poly art that can be generated by computer\n- More options to work with\n- Improved auto-generated poly art (basically make it look even nicer)\n\n## Some poly art made by this program\n\u003cp align=\"center\"\u003e\n  \u003cimg src =\"https://github.com/StoneT2000/StoneT2000.github.io/blob/old/images/NasaShuttle.jpg\" width=\"399\" height=\"auto\"\u003e\u003c/img\u003e\n  \u003cimg src =\"https://github.com/StoneT2000/StoneT2000.github.io/blob/old/images/NasaShuttlePolyArt.png\" width=\"399\" height=\"auto\"\u003e\u003c/img\u003e\n  \u003cimg src =\"https://github.com/StoneT2000/StoneT2000.github.io/blob/old/images/MountainHimilayas.jpg\" width=\"800\" height=\"auto\"\u003e\u003c/img\u003e\n  \u003cimg src =\"https://github.com/StoneT2000/StoneT2000.github.io/blob/old/images/MountainHimilayasPoly.jpg\" width=\"800\" height=\"auto\"\u003e\u003c/img\u003e\n  \u003cimg src =\"https://github.com/StoneT2000/StoneT2000.github.io/blob/old/images/PolyFlowerEffect2.gif\" width=\"800\" height=\"auto\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n## Further Technical Details\n\n### How it works:\nVertices stored in a hash map for quick searches (allows for far faster erasing of vertices)\n\nDelaunay Triangulation algorithm generates triangles from vertices.\nThe program finds the average color of all pixels within each triangle and stores into an array for colors.\nThe program then runs a loop through all the triangles and displays the triangles and their corresponding colors.\n\n#### Downloading the poly art\nFirst, an off-screen canvas is made with p5. That canvas is then enlarged, and the coordinates of all the triangles are all scaled upwards, creating larger triangles. Then the enlarged canvas is downloaded.\n\nThe SVG file is created by creating a file with the proper SVG formatting. The program goes through all the triangle vertices and their colors to create an SVG file (primarily using the \u003cpolygon ... /\u003e tag. Allows users to import these shapes into a program that parses SVG files.\n\n#### Poly Art Auto Generation\nAlgorithms run are done on a separate thread using web-workers, allowing for a nice loading screen to be displayed.\n\nEdge detection algorithms created through the convolution of a 3x3 smoothing kernel and 3x3 edge detection kernel. The kernels create a photo where edges are bright, which are detected by scanning through the entire array of pixels and for those that are bright, an 'edge' vertex is placed at its position. Then a for loop is run through the detected edge vertices in order of decreasing brightness, and vertices around the detected edge vertex are erased, a form of Poisson disk sampling.\n\nThen some filler vertices are placed randomly around the canvas.\n\nOnce scanned and filtered with edges detected, it doesn't need to be run again unless a new image is put up or if the canvas is resized.\n\nIn general, a combination of edge detection methods and some vertex filtering functions help create neat looking poly art.\n\n## Acknowledgements\nMany thanks to @Vince14Genius and many others as well for giving suggestions and great feedback.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstonet2000%2Fpolytomizator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstonet2000%2Fpolytomizator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstonet2000%2Fpolytomizator/lists"}