{"id":380,"date":"2017-07-19T15:09:55","date_gmt":"2017-07-19T15:09:55","guid":{"rendered":"http:\/\/www.giacomomiceli.com\/blog\/?p=380"},"modified":"2018-04-22T19:09:37","modified_gmt":"2018-04-22T19:09:37","slug":"fun-with-delaunay","status":"publish","type":"post","link":"https:\/\/jamez.it\/blog\/2017\/07\/19\/fun-with-delaunay\/","title":{"rendered":"Fun with Delaunay"},"content":{"rendered":"<div id=\"pusher\">\n<div id=\"frame\">\n    <svg id=\"mysvg\"\/>\n  <\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>Select an image or drag and drop a file.<\/p>\n<div id=\"controls\">\n<p><input type=\"file\" id=\"file-input\"><\/p>\n<form id=\"form-slider-op\">\n    <label>Color Opacity<\/label><br \/>\n    <input type=\"range\" name=\"bgopacity\" id=\"bgopacity\" value=\"90\" min=\"0\" max=\"100\" step=\"1\" onchange=\"rangevalue.value=value\"><br \/>\n    <output id=\"rangevalue\">90<\/output><br \/>\n<\/form>\n<form id=\"form-slider-in\">\n    <label>Initial points<\/label><br \/>\n    <input type=\"range\" name=\"init_points\" id=\"init_points\" value=\"50\" min=\"10\" max=\"100\" step=\"10\" onchange=\"rangevalue.value=value\"><br \/>\n    <output id=\"rangevalue\">50<\/output><br \/>\n<\/form>\n<\/div>\n<p>&nbsp;<\/p>\n<p>Delaunay Triangulations have been a very popular graphic tool for the past few years and they don&#8217;t seem to lose ground. If anything, it&#8217;s a style that seems to be accelerating, as the low-poly feel spreads from ICO websites to indie games.<\/p>\n<p>I had some fun time putting together a very simple editor that helps to create a Delaunay Triangulation filling each triangle with the colors of a picture. Yet another micro project with <a href=\"https:\/\/d3js.org\/\" target=\"_blank\">D3.js<\/a>.<\/p>\n<p>Feel free to try it out, the images are not uploaded anywhere &#8211; everything happens in the browser. If you wish to download the result as a SVG file, this is a really good Chrome plugin to help with that: <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/export-svg-with-style\/dkjdcaddoplepioppogpckelchefhddi\" target=\"_blank\">Export SVG with Style<\/a>.<\/p>\n<p>Generally, to process a foreground shape I have good results keeping the initial point count low, then adding points around the edges to give details. If it&#8217;s an image without a particular subject, go wild and increase the initial point count.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In which you too can Delaunize your picture with a simple editor and export it as vectors. &#8230;<\/p>\n<p><a class=\"understrap-read-more-link button button-black\" href=\"https:\/\/jamez.it\/blog\/2017\/07\/19\/fun-with-delaunay\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":406,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[23,78,10,14],"_links":{"self":[{"href":"https:\/\/jamez.it\/blog\/wp-json\/wp\/v2\/posts\/380"}],"collection":[{"href":"https:\/\/jamez.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jamez.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jamez.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamez.it\/blog\/wp-json\/wp\/v2\/comments?post=380"}],"version-history":[{"count":29,"href":"https:\/\/jamez.it\/blog\/wp-json\/wp\/v2\/posts\/380\/revisions"}],"predecessor-version":[{"id":680,"href":"https:\/\/jamez.it\/blog\/wp-json\/wp\/v2\/posts\/380\/revisions\/680"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jamez.it\/blog\/wp-json\/wp\/v2\/media\/406"}],"wp:attachment":[{"href":"https:\/\/jamez.it\/blog\/wp-json\/wp\/v2\/media?parent=380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jamez.it\/blog\/wp-json\/wp\/v2\/categories?post=380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jamez.it\/blog\/wp-json\/wp\/v2\/tags?post=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}