Triangulation.. Finally! Want it so bad for a semester. Luckily having a winter break to do it. Have a lot of rooms for improvement but still, one step further!<\/p>\n
New version.<\/strong>\u00a0Normal speed!<\/p>\n<\/iframe><\/p>\n<p style=\"font-family: HelveticaNeue, Arial, 'Helvetica Neue', Helvetica, FreeSans, 'Liberation Sans', 'Nimbus Sans L', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; line-height: 21px;\">In the middle of documentation, the ill performance, both low speed running and wrong color picking bothered me a lot, so I went through the whole codes again and making adjustment around. And then I found out what the problem is! It’s the\u00a0<span style=\"text-decoration: underline; color: #17e8be;\"><strong>random plotting of\u00a0points<\/strong><\/span>\u00a0for triangles! It not only slows down the process, but also causes the ill performance of choosing the right color for the triangle. OH YEAH SO HAPPY. It’s the similar “bitter yet sweet moment” I usually will have when coding… I think I’m ready for the new semester!<\/p>\n<p style=\"font-family: HelveticaNeue, Arial, 'Helvetica Neue', Helvetica, FreeSans, 'Liberation Sans', 'Nimbus Sans L', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; line-height: 21px;\"><strong>Old version.<\/strong>\u00a0x3 speed! Slow and chaos.<\/p>\n<p style=\"font-family: HelveticaNeue, Arial, 'Helvetica Neue', Helvetica, FreeSans, 'Liberation Sans', 'Nimbus Sans L', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; line-height: 21px;\"><iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/84256296?color=c9ff23\" height=\"585\" width=\"800\" allowfullscreen=\"\" frameborder=\"0\"><\/iframe><\/p>\n<p style=\"font-family: HelveticaNeue, Arial, 'Helvetica Neue', Helvetica, FreeSans, 'Liberation Sans', 'Nimbus Sans L', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; line-height: 21px;\"><strong>Old Line version.<\/strong> Slow but it\u00a0seems to have better outcome with the random plotting points methods!!<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/84251593?color=c9ff23\" height=\"585\" width=\"800\" allowfullscreen=\"\" frameborder=\"0\"><\/iframe><\/p>\n<p> <\/p>\n<p><strong>Image Gallery<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-701\" alt=\"colorV20252\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/colorV20252.jpg\" width=\"720\" height=\"480\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/colorV20252.jpg 720w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/colorV20252-300x200.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/line544.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-681\" alt=\"line544\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/line544.jpg\" width=\"720\" height=\"480\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/line544.jpg 720w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/line544-300x200.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome06.jpg\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-696\" alt=\"outcome06\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome06.jpg\" width=\"1000\" height=\"336\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome06.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome06-300x100.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a> <a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome01.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-691\" alt=\"outcome01\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome01.jpg\" width=\"1000\" height=\"500\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome01.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome01-300x150.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a> <a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome04.jpg\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-694\" alt=\"outcome04\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome04.jpg\" width=\"1000\" height=\"751\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome04.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome04-300x225.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a> <a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome02.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-692\" alt=\"outcome02\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome02.jpg\" width=\"1000\" height=\"340\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome02.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome02-300x102.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a> <a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome03.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-693\" alt=\"outcome03\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome03.jpg\" width=\"1000\" height=\"751\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome03.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome03-300x225.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a> <a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome05.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-695\" alt=\"outcome05\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome05.jpg\" width=\"1000\" height=\"336\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome05.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome05-300x100.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a> <a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome07.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-697\" alt=\"outcome07\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome07.jpg\" width=\"1000\" height=\"284\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome07.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome07-300x85.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<p> <\/p>\n<p><strong>Basic idea of code<\/strong><\/p>\n<ol>\n<li>capture image from webcam and save as PImage <em>source<\/em><\/li>\n<li>iterate through source, pick up every pixel, compare either <span style=\"text-decoration: underline;\">a) colors<\/span> or <span style=\"text-decoration: underline;\">b) brightness<\/span> difference(I found comparing by colors will be more accurate).<\/li>\n<li>if the difference is bigger than certain threshold, plant a point in class <em>Voronoi.\u00a0<\/em>Voronoi does all the calculation to transform points into triangles.<\/li>\n<li>for each triangle gotten out from Voronoi, using getCentroid() to pickup the color to fill the triangle built up with beginShape(), endShape() and vertex().<\/li>\n<li>wipe out Voronoi and build a new one every 10 frames to speed up the performance.<\/li>\n<\/ol>\n<p> <\/p>\n<p><strong>References<\/strong><\/p>\n<ul>\n<li>from <a href=\"http:\/\/robbietilton.com\/blog\/?p=607\" target=\"_blank\">Robbie Tilton<\/a>. ITP alumnus! This is where my base came from! Clear description made me not afraid of trying the code out! From him, I got the idea of using Cols and Rows to boost up the performance, and\u00a0plotting points for triangles with a random deviation of 5 pixels to make it look less grid-like(<span style=\"text-decoration: underline; color: #000000;\"><span style=\"text-decoration: underline;\">BUT randomness is not good for picking color, and it also slows down the performance<\/span><\/span>).<\/li>\n<li><span style=\"font-size: 1em;\">from <\/span><a style=\"font-size: 1em;\" href=\"http:\/\/vormplus.be\/blog\/article\/voronoi-paintings-with-toxiclibs\" target=\"_blank\">Jan Vantomme<\/a><span style=\"font-size: 1em;\">. Very well documentation! From him, I learned the difference between getCentroid() and getSites(), and also learned that, since getCentroid() and getSites()\u00a0don\u2019t return the voronoi regions and points in same order, to fill the right color for right position it has to be looped to iterate through, picking and filling up the color at the same time.<\/span><\/li>\n<\/ul>\n<p> <\/p>\n<p><strong>Inspiration & Further<\/strong><\/p>\n<ul>\n<li>amazing <a href=\"http:\/\/www.fastcodesign.com\/1672028\/algorithmic-portraits-reimagine-faces-as-software#1\" target=\"_blank\">algorithmic portraits<\/a> by Diana Lange.<\/li>\n<li>triangulation <a href=\"http:\/\/learn.postspectacular.com\/hg\/bezalel-2011-delaunayunwrap\/\" target=\"_blank\">tools<\/a> done by\u00a0<a href=\"http:\/\/www.flickr.com\/photos\/toxi\/5639608667\/in\/set-72157626419717867\" target=\"_blank\">Bezalel workshop<\/a>, so complicated yet the outcomes are so gorgeous.<\/li>\n<li><a href=\"http:\/\/hemesh.wblut.com\/\" target=\"_blank\">hemesh<\/a> –> being able to make 3D triangulation mesh(printable too)<\/li>\n<\/ul>\n<p> <\/p>\n<p><strong>Code<\/strong>, as below: <!--more--><\/p>\n<pre class=\"brush: java; gutter: true\">\/\/references:\r\n\/\/http:\/\/www.processing.org\/tutorials\/pixels\/\r\n\/\/http:\/\/robbietilton.com\/blog\/?p=607\r\n\/\/http:\/\/vormplus.be\/blog\/article\/voronoi-paintings-with-toxiclibs\r\n\r\nimport toxi.geom.*;\r\nimport toxi.geom.mesh2d.*; \r\nimport toxi.util.*;\r\nimport toxi.util.datatypes.*; \r\nimport toxi.processing.*;\r\nimport processing.video.*;\r\n\r\nCapture video;\r\nfloat size = 10000;\r\nVoronoi voronoi;\r\nPImage source;\r\n\r\nint pointDensity = 70;\r\nint cols, rows;\r\nint x, y;\r\nint numPixels;\r\nfloat colorThreshold = 30;\r\n\r\nvoid setup() {\r\n size(640,480);\r\n \/\/size(source.width, source.height);\r\n video = new Capture(this, width, height);\r\n video.start();\r\n\r\n \/\/source = loadImage("test.png");\r\n source = createImage(640,480,RGB);\r\n smooth();\r\n\r\n cols = width\/pointDensity;\r\n rows = height\/pointDensity;\r\n numPixels = source.width * source.height;\r\n\r\n voronoi = new Voronoi(size);\r\n\r\n}\r\n\r\nvoid addPoint() {\r\n source.copy(video,0,0,640,480,0,0,640,480);\r\n source.updatePixels();\r\n\r\n for (x=1; x<source.width; x+=cols) {\r\n for (y=1; y<source.height; y+=rows) { int loc = x + y*source.width; color pix = source.pixels[loc]; int leftLoc = (x-1) + (y-1)*source.width; color leftPix = source.pixels[leftLoc]; \/\/ compare ver: color float r1 = red(pix); float g1 = green(pix); float b1 = blue(pix); float r2 = red(leftPix); float g2 = green(leftPix); float b2 = blue(leftPix); float diff = dist(r1,g1,b1,r2,g2,b2); \/\/ compare ver: brightness \/\/ float diff = abs(brightness(pix)-brightness(leftPix)); if (diff > colorThreshold) {\r\n\/\/ voronoi.addPoint(new Vec2D(x+random(-2, 2), y+random(-2, 2)));\r\n voronoi.addPoint(new Vec2D(x, y));\r\n }\r\n }\r\n }\r\n} \r\n\r\nvoid drawTriangle(){\r\n\r\n for (Triangle2D t : voronoi.getTriangles()) {\r\n color pix;\r\n\r\n \/\/ use Centroid's color\r\n Vec2D locVec = t.computeCentroid();\r\n int loc = (int)((locVec.x) + (locVec.y)*source.width);\r\n\r\n pix = source.pixels[constrain(loc,0,numPixels-1)];\r\n\/\/ stroke(pix,100);\r\n fill(pix);\r\n\/\/ noFill();\r\n noStroke();\r\n\r\n beginShape(TRIANGLES);\r\n stroke(pix);\r\n\/\/ strokeWeight(.1);\r\n vertex(t.a.x, t.a.y);\r\n vertex(t.b.x, t.b.y);\r\n vertex(t.c.x, t.c.y);\r\n endShape(); \r\n }\r\n}\r\n\r\nvoid draw() {\r\n background(255);\r\n video.read();\r\n \/\/image(video,0,0);\r\n\r\n if(showImg) {\r\n image(source, 0, 0);\r\n } else {\r\n addPoint(); \r\n drawTriangle();\r\n }\r\n\r\n fill(0); \r\n rect(15,5,30,20);\r\n\r\n \/\/ show frame rate\r\n fill(255);\r\n text(int(frameRate), 20, 20);\r\n\r\n updatePixels();\r\n\r\n if (frameCount%10 == 0)\r\n voronoi = new Voronoi(size);\r\n\r\n}\r\n\r\nboolean showImg = false;\r\nboolean saveImg = false;\r\n\r\nvoid keyPressed() {\r\n if(key == 'i')\r\n showImg = !showImg;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Triangulation.. Finally! Want it so bad for a semester. Luckily having a winter break to do it. Have a lot of rooms for improvement but still, one step further! *UPDATE*(in… <a class=\"read-more\" href=\"http:\/\/www.jhclaura.com\/triangulation\/\">Read The Rest →<\/a><\/p>\n","protected":false},"author":1,"featured_media":712,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[127,2],"tags":[30,24,99,98,261],"_links":{"self":[{"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/posts\/677"}],"collection":[{"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/comments?post=677"}],"version-history":[{"count":10,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/posts\/677\/revisions"}],"predecessor-version":[{"id":919,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/posts\/677\/revisions\/919"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/media\/712"}],"wp:attachment":[{"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/media?parent=677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/categories?post=677"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/tags?post=677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/iframe><\/p>\n<p style=\"font-family: HelveticaNeue, Arial, 'Helvetica Neue', Helvetica, FreeSans, 'Liberation Sans', 'Nimbus Sans L', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; line-height: 21px;\">In the middle of documentation, the ill performance, both low speed running and wrong color picking bothered me a lot, so I went through the whole codes again and making adjustment around. And then I found out what the problem is! It’s the\u00a0<span style=\"text-decoration: underline; color: #17e8be;\"><strong>random plotting of\u00a0points<\/strong><\/span>\u00a0for triangles! It not only slows down the process, but also causes the ill performance of choosing the right color for the triangle. OH YEAH SO HAPPY. It’s the similar “bitter yet sweet moment” I usually will have when coding… I think I’m ready for the new semester!<\/p>\n<p style=\"font-family: HelveticaNeue, Arial, 'Helvetica Neue', Helvetica, FreeSans, 'Liberation Sans', 'Nimbus Sans L', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; line-height: 21px;\"><strong>Old version.<\/strong>\u00a0x3 speed! Slow and chaos.<\/p>\n<p style=\"font-family: HelveticaNeue, Arial, 'Helvetica Neue', Helvetica, FreeSans, 'Liberation Sans', 'Nimbus Sans L', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; line-height: 21px;\"><iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/84256296?color=c9ff23\" height=\"585\" width=\"800\" allowfullscreen=\"\" frameborder=\"0\"><\/iframe><\/p>\n<p style=\"font-family: HelveticaNeue, Arial, 'Helvetica Neue', Helvetica, FreeSans, 'Liberation Sans', 'Nimbus Sans L', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; line-height: 21px;\"><strong>Old Line version.<\/strong> Slow but it\u00a0seems to have better outcome with the random plotting points methods!!<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/84251593?color=c9ff23\" height=\"585\" width=\"800\" allowfullscreen=\"\" frameborder=\"0\"><\/iframe><\/p>\n<p> <\/p>\n<p><strong>Image Gallery<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-701\" alt=\"colorV20252\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/colorV20252.jpg\" width=\"720\" height=\"480\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/colorV20252.jpg 720w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/colorV20252-300x200.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/line544.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-681\" alt=\"line544\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/line544.jpg\" width=\"720\" height=\"480\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/line544.jpg 720w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/line544-300x200.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome06.jpg\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-696\" alt=\"outcome06\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome06.jpg\" width=\"1000\" height=\"336\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome06.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome06-300x100.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a> <a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome01.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-691\" alt=\"outcome01\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome01.jpg\" width=\"1000\" height=\"500\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome01.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome01-300x150.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a> <a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome04.jpg\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-694\" alt=\"outcome04\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome04.jpg\" width=\"1000\" height=\"751\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome04.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome04-300x225.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a> <a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome02.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-692\" alt=\"outcome02\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome02.jpg\" width=\"1000\" height=\"340\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome02.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome02-300x102.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a> <a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome03.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-693\" alt=\"outcome03\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome03.jpg\" width=\"1000\" height=\"751\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome03.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome03-300x225.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a> <a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome05.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-695\" alt=\"outcome05\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome05.jpg\" width=\"1000\" height=\"336\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome05.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome05-300x100.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a> <a href=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome07.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-697\" alt=\"outcome07\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome07.jpg\" width=\"1000\" height=\"284\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome07.jpg 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2014\/01\/outcome07-300x85.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<p> <\/p>\n<p><strong>Basic idea of code<\/strong><\/p>\n<ol>\n<li>capture image from webcam and save as PImage <em>source<\/em><\/li>\n<li>iterate through source, pick up every pixel, compare either <span style=\"text-decoration: underline;\">a) colors<\/span> or <span style=\"text-decoration: underline;\">b) brightness<\/span> difference(I found comparing by colors will be more accurate).<\/li>\n<li>if the difference is bigger than certain threshold, plant a point in class <em>Voronoi.\u00a0<\/em>Voronoi does all the calculation to transform points into triangles.<\/li>\n<li>for each triangle gotten out from Voronoi, using getCentroid() to pickup the color to fill the triangle built up with beginShape(), endShape() and vertex().<\/li>\n<li>wipe out Voronoi and build a new one every 10 frames to speed up the performance.<\/li>\n<\/ol>\n<p> <\/p>\n<p><strong>References<\/strong><\/p>\n<ul>\n<li>from <a href=\"http:\/\/robbietilton.com\/blog\/?p=607\" target=\"_blank\">Robbie Tilton<\/a>. ITP alumnus! This is where my base came from! Clear description made me not afraid of trying the code out! From him, I got the idea of using Cols and Rows to boost up the performance, and\u00a0plotting points for triangles with a random deviation of 5 pixels to make it look less grid-like(<span style=\"text-decoration: underline; color: #000000;\"><span style=\"text-decoration: underline;\">BUT randomness is not good for picking color, and it also slows down the performance<\/span><\/span>).<\/li>\n<li><span style=\"font-size: 1em;\">from <\/span><a style=\"font-size: 1em;\" href=\"http:\/\/vormplus.be\/blog\/article\/voronoi-paintings-with-toxiclibs\" target=\"_blank\">Jan Vantomme<\/a><span style=\"font-size: 1em;\">. Very well documentation! From him, I learned the difference between getCentroid() and getSites(), and also learned that, since getCentroid() and getSites()\u00a0don\u2019t return the voronoi regions and points in same order, to fill the right color for right position it has to be looped to iterate through, picking and filling up the color at the same time.<\/span><\/li>\n<\/ul>\n<p> <\/p>\n<p><strong>Inspiration & Further<\/strong><\/p>\n<ul>\n<li>amazing <a href=\"http:\/\/www.fastcodesign.com\/1672028\/algorithmic-portraits-reimagine-faces-as-software#1\" target=\"_blank\">algorithmic portraits<\/a> by Diana Lange.<\/li>\n<li>triangulation <a href=\"http:\/\/learn.postspectacular.com\/hg\/bezalel-2011-delaunayunwrap\/\" target=\"_blank\">tools<\/a> done by\u00a0<a href=\"http:\/\/www.flickr.com\/photos\/toxi\/5639608667\/in\/set-72157626419717867\" target=\"_blank\">Bezalel workshop<\/a>, so complicated yet the outcomes are so gorgeous.<\/li>\n<li><a href=\"http:\/\/hemesh.wblut.com\/\" target=\"_blank\">hemesh<\/a> –> being able to make 3D triangulation mesh(printable too)<\/li>\n<\/ul>\n<p> <\/p>\n<p><strong>Code<\/strong>, as below: <!--more--><\/p>\n<pre class=\"brush: java; gutter: true\">\/\/references:\r\n\/\/http:\/\/www.processing.org\/tutorials\/pixels\/\r\n\/\/http:\/\/robbietilton.com\/blog\/?p=607\r\n\/\/http:\/\/vormplus.be\/blog\/article\/voronoi-paintings-with-toxiclibs\r\n\r\nimport toxi.geom.*;\r\nimport toxi.geom.mesh2d.*; \r\nimport toxi.util.*;\r\nimport toxi.util.datatypes.*; \r\nimport toxi.processing.*;\r\nimport processing.video.*;\r\n\r\nCapture video;\r\nfloat size = 10000;\r\nVoronoi voronoi;\r\nPImage source;\r\n\r\nint pointDensity = 70;\r\nint cols, rows;\r\nint x, y;\r\nint numPixels;\r\nfloat colorThreshold = 30;\r\n\r\nvoid setup() {\r\n size(640,480);\r\n \/\/size(source.width, source.height);\r\n video = new Capture(this, width, height);\r\n video.start();\r\n\r\n \/\/source = loadImage("test.png");\r\n source = createImage(640,480,RGB);\r\n smooth();\r\n\r\n cols = width\/pointDensity;\r\n rows = height\/pointDensity;\r\n numPixels = source.width * source.height;\r\n\r\n voronoi = new Voronoi(size);\r\n\r\n}\r\n\r\nvoid addPoint() {\r\n source.copy(video,0,0,640,480,0,0,640,480);\r\n source.updatePixels();\r\n\r\n for (x=1; x<source.width; x+=cols) {\r\n for (y=1; y<source.height; y+=rows) { int loc = x + y*source.width; color pix = source.pixels[loc]; int leftLoc = (x-1) + (y-1)*source.width; color leftPix = source.pixels[leftLoc]; \/\/ compare ver: color float r1 = red(pix); float g1 = green(pix); float b1 = blue(pix); float r2 = red(leftPix); float g2 = green(leftPix); float b2 = blue(leftPix); float diff = dist(r1,g1,b1,r2,g2,b2); \/\/ compare ver: brightness \/\/ float diff = abs(brightness(pix)-brightness(leftPix)); if (diff > colorThreshold) {\r\n\/\/ voronoi.addPoint(new Vec2D(x+random(-2, 2), y+random(-2, 2)));\r\n voronoi.addPoint(new Vec2D(x, y));\r\n }\r\n }\r\n }\r\n} \r\n\r\nvoid drawTriangle(){\r\n\r\n for (Triangle2D t : voronoi.getTriangles()) {\r\n color pix;\r\n\r\n \/\/ use Centroid's color\r\n Vec2D locVec = t.computeCentroid();\r\n int loc = (int)((locVec.x) + (locVec.y)*source.width);\r\n\r\n pix = source.pixels[constrain(loc,0,numPixels-1)];\r\n\/\/ stroke(pix,100);\r\n fill(pix);\r\n\/\/ noFill();\r\n noStroke();\r\n\r\n beginShape(TRIANGLES);\r\n stroke(pix);\r\n\/\/ strokeWeight(.1);\r\n vertex(t.a.x, t.a.y);\r\n vertex(t.b.x, t.b.y);\r\n vertex(t.c.x, t.c.y);\r\n endShape(); \r\n }\r\n}\r\n\r\nvoid draw() {\r\n background(255);\r\n video.read();\r\n \/\/image(video,0,0);\r\n\r\n if(showImg) {\r\n image(source, 0, 0);\r\n } else {\r\n addPoint(); \r\n drawTriangle();\r\n }\r\n\r\n fill(0); \r\n rect(15,5,30,20);\r\n\r\n \/\/ show frame rate\r\n fill(255);\r\n text(int(frameRate), 20, 20);\r\n\r\n updatePixels();\r\n\r\n if (frameCount%10 == 0)\r\n voronoi = new Voronoi(size);\r\n\r\n}\r\n\r\nboolean showImg = false;\r\nboolean saveImg = false;\r\n\r\nvoid keyPressed() {\r\n if(key == 'i')\r\n showImg = !showImg;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Triangulation.. Finally! Want it so bad for a semester. Luckily having a winter break to do it. Have a lot of rooms for improvement but still, one step further! *UPDATE*(in… <a class=\"read-more\" href=\"http:\/\/www.jhclaura.com\/triangulation\/\">Read The Rest →<\/a><\/p>\n","protected":false},"author":1,"featured_media":712,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[127,2],"tags":[30,24,99,98,261],"_links":{"self":[{"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/posts\/677"}],"collection":[{"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/comments?post=677"}],"version-history":[{"count":10,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/posts\/677\/revisions"}],"predecessor-version":[{"id":919,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/posts\/677\/revisions\/919"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/media\/712"}],"wp:attachment":[{"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/media?parent=677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/categories?post=677"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/tags?post=677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}