snorpey
commented
9 years ago The actual triangulation of the image starts in the process.js in a function called processImage.
An overview what happens in there:
- The image is put on two separate canvas elements. The image data on the first canvas is used for calculating the shape of the polygons. Several filters are applied to this canvas throughout the process. The image data on the second canvas is never changed and used for calculating the color of the polygons later.
- The image data is blurred, using Superfast Blur by @quasimondo . This blurring library may not be quite as accurate as others (Though I haven't compared it to other libraries extensively, so I might be wrong), but it is very fast, which I think is more important here.
- A greyscale filter is applied to the image data
- Edges are detected
- Edge point coordinates are calculated from the edges image data
- From all edge point coordinates, a random number is selected
- The point coordinates are fed into @ironwallaby's delaunay.js library, which calculates polygons based on those coordinates.
- It calculates the center coordinate of each polygon and looks up the color for this coordinate in the original image (the second canvas from step 1)
- it draws the polygons on the screen
Let me know if this helps or if you want me to clarify anything. :-)
RoyiAvital
Could you explain how do you create this effect?
Namely:
Thank You.