/triangles

Delaunay triangulation + Lambertian reflectance

Primary LanguageJavaScriptOtherNOASSERTION

Delaunay Triangulation pattern maker

This project allows you to create beautiful high quality images featuring a nice pattern created from Delaunay triangulation and applying a flat surface shader. These images could be used for:

  • Wallpapers
  • Blog post headers
  • Magazines
  • Posters
  • And more

The tool provides export to PNG and SVG formats. With SVG format you could create an image of virtually any size, even as big as a billboard. Go crazy with it!

Show me some results!

Here are a few of most obvious uses for the tool:

three devices two devices billboard

And I made a video on Youtube of the tool in action, creating 11 wallpapers in under 7 minutes: Video demo of the tool

You can also see some examples of the patterns made with this tool in this repository in the examples folder (the first one had text overlay added in Photoshop):

0 1 2 3 4 5 6 7

Using

  • To add a new light press Enter key on your keyboard or increase count manually via the slider.
  • To "drop" or "pick up" the currently selected light, press Space bar.
  • To change colors of the lights, change the ambient and diffuse color controls.
  • To export as SVG select SVG in the "renderer" panel and then export the image via "Export big" button. Then navigate to "File -> Save as" in the browser's menu to save the resulting image to your computer.

Running

Download this repository and run index.html in your browser or open this link.

Building

Install Dependencies:

npm install uglify-js@2.2.5

Build (cd into 'build' folder first):

node build.js

Inspiration

The iOS game called "Monument Valley" by ustwo served as an inspiration for this project. Specifically the simulation of the ocean in the game.

Acknowledgments

The shader work was done by Matthew Wagerfield on his MIT-licensed repository.

Author

Maksim Surguy @msurguy

TODO

There are a few things that can be improved to make this tool even better.

  • Add varying depth of the vertices of the triangles (Done as of 4/15/2014)
  • Add more color variation and presets (Done as of 4/25/2014 with the randomizer functionality)
  • Add text overlay and customizer for text

If you can do any of these things - feel free to make a pull request!

License

Licensed under MIT. Enjoy.