<br />
<b>Warning</b>:  Declaration of Jetpack_IXR_Client::query() should be compatible with IXR_Client::query(...$args) in <b>/home/clients/7267bc096562fcdb78c0ab60d3ac51fb/web/blog/wp-content/plugins/jetpack/class.jetpack-ixr-client.php</b> on line <b>91</b><br />
{"id":725,"date":"2016-01-29T17:40:54","date_gmt":"2016-01-29T17:40:54","guid":{"rendered":"http:\/\/barradeau.com\/blog\/?p=725"},"modified":"2016-02-03T17:31:52","modified_gmt":"2016-02-03T17:31:52","slug":"tangible","status":"publish","type":"post","link":"http:\/\/barradeau.com\/blog\/?p=725","title":{"rendered":"tracing things"},"content":{"rendered":"<p>tracing is one of the earliest forms of computer arts,\u00a0<a href=\"http:\/\/www.emohr.com\/articles-biblio\/Early_Computer_Art.pdf\" target=\"_blank\">a good read<\/a> if you&#8217;ve never heard of it <a href=\"https:\/\/twitter.com\/samim\/status\/692013033116307456\" target=\"_blank\">via<\/a> retweeted by\u00a0<a href=\"https:\/\/twitter.com\/bitcraftlab\" target=\"_blank\">BitcraftLab<\/a>. the more recent takes, with bigger formats and the use of colors always strike me with\u00a0the complexity of their patterns and yet plotters use the simplest tools available: points,\u00a0lines\u00a0and\u00a0curves. there are so many things to say about this topic but that&#8217;s way beyond the scope of this humble article. what I like the most is that, as opposed to a printer which\u00a0will output a clean snapshot of a sketch, a plotter will make (lots of) mistakes.<\/p>\n<p>last december\u00a0I saw <a href=\"https:\/\/twitter.com\/inconvergent\">Anders Hoff<\/a> having bags of fun with\u00a0his plotter\u00a0and\u00a0two weeks ago the <a href=\"http:\/\/www.makeblock.cc\/xy-plotter-robot-kit\/\" target=\"_blank\">XY plotter 2.0<\/a> arrived. I&#8217;m\u00a0probably the clumsiest handyman on the face of the earth, yet after 10\u00a0hours (over 3 days), I managed to mount it.\u00a0later, I found this carefully documented <a href=\"http:\/\/chelnyshops.ru\/how-to-make-makeblock-xy-plotter-v2-0\/\">step by step tutorial<\/a>, it would have helped.<\/p>\n<p>some things I did to make my life easier<\/p>\n<ul>\n<li>lower the servo by a good centimeter to use\u00a0regular pens or brushes ; by default\u00a0they are quickly\u00a0blocked by the\u00a0beam<\/li>\n<li>use one of the 30*4 screws &amp;\u00a0a bolt at the end of the lever\u00a0and tie the elastic on this rather than the default setting ; the pen needs to be pressed on the paper and by\u00a0default, the elastic&#8217;s tension is to weak<\/li>\n<li>replace the 30*4 screws by\u00a060*4 screws as it\u00a0allows bigger pens to fit<\/li>\n<li>use\u00a0a 50*50*3cm\u00a0wooden frame and a linoleum\u00a0surface. I attached\u00a0the plotter to the frame to\u00a0provides better\u00a0stability as the plotter may move a bit during fast or frequent moves. linoleum\u00a0is flat, waterproof,\u00a0easy to clean up\u00a0and\u00a0good\u00a0to\u00a0stick or move crepe tape (something you should use\u00a0if you don&#8217;t want\u00a0to\u00a0tear off the paper when you remove it) but more importantly the linoleum damps the &#8220;pen down&#8221; move, when plotting big sketches this noise becomes extremely bothering.<\/li>\n<\/ul>\n<p>on a side note, the cables from the board to the pen are short, they can&#8217;t\u00a0reach the\u00a0top left corner (x=0, y=1) I should\u00a0change them to use the whole surface.<\/p>\n<p>then I tried to trace something and\u00a0it\u00a0<strong>worked<\/strong>! it was properly calibrated and just worked.<\/p>\n<p>unfortunately,\u00a0the available software are rather limited ; mDraw is a generic purpose tool: you have to\u00a0place the sketch\u00a0manually, on import, it resizes every sketch\u00a0to a 15*15 cm representation, it&#8217;s possible to set the width and\u00a0height yet no way to set\u00a0the\u00a0X\/Y coordinates which is really irritating (if you want 2 or more colors, it&#8217;s a no go). well at least it properly uploads the firmware to the arduino board and gets you started quickly.<\/p>\n<p>there is a\u00a0second\u00a0software called BenBox, more of &#8220;technical&#8221; thing, I couldn&#8217;t get it to work (Win 10) even though\u00a0I tried to install &amp; run\u00a0each and every version I could get my hands on.<\/p>\n<p>the third option is to use Processing but then\u00a0again the demo won&#8217;t work for some reason (controls won&#8217;t show once connected) and <a href=\"https:\/\/github.com\/Makeblock-official\/XY-Plotter-2.0\" target=\"_blank\">the code on the repo<\/a> is pretty cryptic for a beginner like me. I gave up after 4 hours of struggle but\u00a0I should really try harder and make some sense of all this, especially the <a href=\"https:\/\/en.wikipedia.org\/wiki\/G-code\">GCode<\/a> bit that seems to be well supported.\u00a0some leads:\u00a0<a href=\"http:\/\/learn.makeblock.cc\/xy2\/\" target=\"_blank\">lead 1<\/a>\u00a0,\u00a0<a href=\"http:\/\/wiki.makeblock.cc\/index.php?title=Library_Download\" target=\"_blank\">lead 2<\/a>,\u00a0<a href=\"http:\/\/wiki.makeblock.cc\/library\/docs\/annotated.html\" target=\"_blank\">lead 3<\/a>,\u00a0<a href=\"http:\/\/forum.makeblock.cc\/t\/xy-plotter-v2-0-upload-of-gcodeparser-fails\/743\" target=\"_blank\">lead 4<\/a><\/p>\n<p>the last option is to use Python and send the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Numerical_control\">CNC<\/a> formatted instructions directly to the board, let&#8217;s call it\u00a0the\u00a0advanced approach (probably the most efficient).<\/p>\n<p>after the first tests, I tried to print something more complex\u00a0and used the result of the MST from the previous article.<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-729\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original.jpg\" alt=\"original\" width=\"1080\" height=\"1080\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original.jpg 1080w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original-1024x1024.jpg 1024w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/p>\n<p>the sketch is made of 23714 edges, it&#8217;s a very tricky subject as there are numerous\u00a0small elements.<br \/>\nlittle did I know how much time it\u00a0would take\u00a0(hint:\u00a0<strong>loooooooong\u00a0<\/strong>), which, after years spent working in (near)\u00a0real-time graphics, was a bit unsettling.<\/p>\n<p>after 15 hours of work, the plotter had not even\u00a0reached 10% of the total task.\u00a0this is because strokes can be traced in a\u00a0random order\u00a0;\u00a0it doesn&#8217;t matter if we start at the top, the bottom, or the center. each\u00a0time the plotter moves the pen\u00a0to trace the next\u00a0segment, it&#8217;ll take <em>some<\/em> time (roughly 50px\/second with the default settings), then it&#8217;ll take <em>some<\/em> time again to draw the line.\u00a0the servo moves pretty fast so the pen up\/down move&#8217;s duration is negligible.<\/p>\n<p>to help visualize what happens, I painted the unordered segments with a <em>hsl<\/em> mode where the\u00a0hue corresponds to their position in the array to the left and a single semi transparent\u00a0polyline that goes through all the edges&#8217; centers\u00a0(click for larger\u00a0pics).<\/p>\n<p><a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_hsl.jpg\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-730 size-medium\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_hsl-300x300.jpg\" alt=\"original_hsl\" width=\"300\" height=\"300\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_hsl-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_hsl-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_hsl-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_hsl-1024x1024.jpg 1024w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_hsl.jpg 1080w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a> <a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_path.jpg\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-731 size-medium\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_path-300x300.jpg\" alt=\"original_path\" width=\"300\" height=\"300\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_path-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_path-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_path-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_path-1024x1024.jpg 1024w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/original_path.jpg 1080w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>we can clearly see that the\u00a0edges\u00a0are almost randomly distributed, so the plotter will have to do the\u00a0series of <em>moveTo<\/em>\u00a0(to the right) + all the <em>moveTos\/lineTos<\/em> described by the segments (to the left) to finish the work. the length of the grey polyline is\u00a0~9.569.766 pixels. if we don&#8217;t resize the sketch and if the plotter moves at\u00a0a speed of 50px\/s it means it would take 43h for the plotter to simply<em>\u00a0move over the drawing.<br \/>\n<\/em>if we\u00a0want to plot\u00a0something even\u00a0fairly simple in a reasonable amount of time, we\u00a0need to find a way to sort the line segments.\u00a0below is the same graph with vertices sorted on the horizontal axis.<\/p>\n<p><a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_hsl.jpg\" data-rel=\"lightbox-image-2\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-734 size-medium alignnone\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_hsl-300x300.jpg\" alt=\"x_sort_hsl\" width=\"300\" height=\"300\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_hsl-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_hsl-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_hsl-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_hsl-1024x1024.jpg 1024w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_hsl.jpg 1080w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a> <a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_path.jpg\" data-rel=\"lightbox-image-3\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-735 size-medium alignnone\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_path-300x300.jpg\" alt=\"x_sort_path\" width=\"300\" height=\"300\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_path-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_path-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_path-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_path-1024x1024.jpg 1024w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/x_sort_path.jpg 1080w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>the length of the path between all segments&#8217; centers is now\u00a0~6.674.923 px which is 66%of the original, so far so good\u00a0( + the\u00a0&#8220;victorian veiled widow&#8221; comes for free)<\/p>\n<p>let&#8217;s try with a polar\u00a0sort (sorting by angle to the center):<\/p>\n<p><a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_hsl.jpg\" data-rel=\"lightbox-image-4\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-732 alignnone\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_hsl-300x300.jpg\" alt=\"radial_sort_hsl\" width=\"300\" height=\"300\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_hsl-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_hsl-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_hsl-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_hsl-1024x1024.jpg 1024w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_hsl.jpg 1080w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a> <a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_path.jpg\" data-rel=\"lightbox-image-5\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-733 size-medium alignnone\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_path-300x300.jpg\" alt=\"radial_sort_path\" width=\"300\" height=\"300\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_path-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_path-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_path-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_path-1024x1024.jpg 1024w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/radial_sort_path.jpg 1080w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>a ~2.208.824 px long polyline, 20% of the original work time!<\/p>\n<p>in fact this boils down to finding the <em>shortest path<\/em> between edges ; this is a very famous problem in graph theory that usually goes by the name of Traveling Salesman Problem or\u00a0TSP. there are various ways to\u00a0address it, often\u00a0involving\u00a0<a href=\"http:\/\/blog.johannes-beck.name\/?p=222\" target=\"_blank\">neural networks<\/a>\u00a0or\u00a0<a href=\"https:\/\/github.com\/parano\/GeneticAlgorithm-TSP\" target=\"_blank\">genetic algorithm<\/a>\u00a0(I believe\u00a0the latter is more robust)\u00a0but there&#8217;s another approach called <a href=\"https:\/\/en.wikipedia.org\/wiki\/Simulated_annealing\">Simulated Annealing<\/a> that mimics the way atomic structure\u00a0reorganizes itself in a medium as its temperature lowers. I had <a href=\"http:\/\/barradeau.com\/hidiho\/index96f1.html?p=67\">a take at the algorithm<\/a>\u00a0in actionscript a while back, and tried to apply this to find the shortest path. if it is very slow to obtain decent shortest path, it is relatively fast to obtain a coarse shortest path, here&#8217;s a codepen (click to reset).<\/p>\n<p><iframe loading=\"lazy\" width=\"300\" height=\"600\" style=\"width: 100%;\" scrolling=\"no\" src=\"\/\/codepen.io\/nicoptere\/embed\/Ejwpgq\/?height=600&amp;theme-id=4835&amp;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"http:\/\/codepen.io\/nicoptere\/pen\/Ejwpgq\/\">Traveling Salesman Problem (TSP) &amp; simulated annealing<\/a> by nicolas barradeau (<a href=\"http:\/\/codepen.io\/nicoptere\">@nicoptere<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>so I split the polar sorted segment set into <em>bins<\/em> of 500 vertices and\u00a0applied the TSP\u00a0on\u00a0each\u00a0<em>bin<\/em>, it looked like this:<\/p>\n<p><a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/polar_tsp.png\" target=\"_blank\" data-rel=\"lightbox-image-6\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-740 size-full\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/polar_tsp.png\" alt=\"polar_tsp\" width=\"1080\" height=\"1080\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/polar_tsp.png 1080w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/polar_tsp-150x150.png 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/polar_tsp-300x300.png 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/polar_tsp-768x768.png 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/polar_tsp-1024x1024.png 1024w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/a>the total length of all the bins using a coarse TSP was ~79.446 px, roughly 3.6% of the polar sorted version and ~0.7% of the original ; \u00a0theoretically ~30\u00a0minutes\u00a0to move the pen around. this doesn&#8217;t take the actual drawing into account but it&#8217;s already much better.<\/p>\n<p>when\u00a0this sorting problem was taken care of, I sent the file for plot and\u00a0got this brilliant failure\u00a0(all apologies for the crappy pictures):<br \/>\n<a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/0_portrait.jpg\" target=\"_blank\" data-rel=\"lightbox-image-7\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-751 size-full\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/0_portrait.jpg\" alt=\"\" width=\"1080\" height=\"1080\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/0_portrait.jpg 1080w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/0_portrait-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/0_portrait-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/0_portrait-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/0_portrait-1024x1024.jpg 1024w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/a><\/p>\n<p>you can clearly see the clockwise progression of the\u00a0plot and the point at which it decided to stipple rather than draw lines. this is because I thought it would be clever to use a contraption of my own, namely 2 springs pushing the caret against the lever to pinch the pen\u00a0;\u00a0my plan was to allow a simpler pen swap. this &#8211; of course &#8211; induced mechanical float so\u00a0after hitting the board\u00a02500\u00a0times, the pen went\u00a0(\u256f\u00b0\u25a1\u00b0)\u256f\ufe35 \u253b\u2501\u253b<\/p>\n<p><a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/1_landscape.jpg\" target=\"_blank\" data-rel=\"lightbox-image-8\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-750 size-full\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/1_landscape.jpg\" alt=\"1_landscape\" width=\"1080\" height=\"1080\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/1_landscape.jpg 1080w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/1_landscape-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/1_landscape-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/1_landscape-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/1_landscape-1024x1024.jpg 1024w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/a><\/p>\n<p>most strokes in this sketch have a length equal to or shorter than 1 mm, if there is\u00a0mechanical float, it won&#8217;t work\u00a0; the pen will go down, the plotter will move it in a given direction but not enough to compensate the float so the pen will remain stuck. during the plot,\u00a0I locked the pen firmly and added an extra elastic to maintain it\u00a0on the surface of the paper. from &#8220;noon&#8221; to nine, the drawing worked nicely and\u00a0<em>only<\/em> took ~5h30,\u00a0as compared to the first\u00a0attempt it was a brilliant failure.<\/p>\n<p>I believe the way the svg is formatted is important too ; in some previous attempts,\u00a0I described each stroke as a &lt;path&gt; element resulting in a 2.5+ Mo\u00a0files. here\u00a0I turned coordinates into <em>ints<\/em> and packed each TSP\u00a0<em>bin<\/em> as a path element, the file became 450 Ko and the plotter seemed happier about it.<\/p>\n<p>there are still things that I don&#8217;t understand ; for instance this &#8220;hulled clusters&#8221; version of the mesh took\u00a0roughly 20\u00a0minutes to plot for a 25 cm high drawing (which is big for the max surface is 31*38 cm).<\/p>\n<p><a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/hull_seed_0.png\" target=\"_blank\" data-rel=\"lightbox-image-9\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-759 size-full\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/hull_seed_0.png\" alt=\"hull_seed_0\" width=\"1080\" height=\"1080\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/hull_seed_0.png 1080w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/hull_seed_0-150x150.png 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/hull_seed_0-300x300.png 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/hull_seed_0-768x768.png 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/hull_seed_0-1024x1024.png 1024w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/a><\/p>\n<p>and this\u00a0&#8220;unknown pleasure&#8221;-ish version made of 99\u00a0series of segments took almost an hour (it&#8217;s 32cm high).<a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown_pleasure_x60_y99.png\" target=\"_blank\" data-rel=\"lightbox-image-10\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-760 size-full\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown_pleasure_x60_y99.png\" alt=\"unknown_pleasure_x60_y99\" width=\"1080\" height=\"1080\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown_pleasure_x60_y99.png 1080w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown_pleasure_x60_y99-150x150.png 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown_pleasure_x60_y99-300x300.png 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown_pleasure_x60_y99-768x768.png 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown_pleasure_x60_y99-1024x1024.png 1024w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/a><br \/>\n<a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown.jpg\" target=\"_blank\" data-rel=\"lightbox-image-11\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-765 size-full\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown.jpg\" alt=\"unknown\" width=\"1080\" height=\"1080\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown.jpg 1080w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/unknown-1024x1024.jpg 1024w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/a><\/p>\n<p>to improve the render time, we can\u00a0group series of consecutive segments into a path, minimize the <em>moveTos<\/em>,\u00a0simplify the paths, use\u00a0SVG&#8217;s built-in shapes\u00a0;\u00a0for instance this series of shapes uses straight lines and\u00a0quadratic curves (this is 2D btw).<\/p>\n<p><a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines_print.jpg\" target=\"_blank\" data-rel=\"lightbox-image-12\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-769 size-full\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines_print.jpg\" alt=\"lines_print\" width=\"1080\" height=\"1080\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines_print.jpg 1080w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines_print-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines_print-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines_print-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines_print-1024x1024.jpg 1024w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/a><a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines.jpg\" target=\"_blank\" data-rel=\"lightbox-image-13\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-768 size-full\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines.jpg\" alt=\"lines\" width=\"1080\" height=\"1080\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines.jpg 1080w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/lines-1024x1024.jpg 1024w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/a><\/p>\n<p>the Curve SVG instruction is much faster than tracing the same with a series of segments\u00a0but\u00a0at the end of the day, a complex shape will take more time than a simple shape&#8230;<\/p>\n<p>now as I mentioned Andreas at the beginning of the article, I had to try this shape!\u00a0(I don&#8217;t know how it&#8217;s called for realz, I called it Growth, it&#8217;s a recursively subdividing polyline)<br \/>\n<iframe loading=\"lazy\" width=\"300\" height=\"600\" style=\"width: 100%;\" scrolling=\"no\" src=\"\/\/codepen.io\/nicoptere\/embed\/QyVWmB\/?height=600&amp;theme-id=4835&amp;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"http:\/\/codepen.io\/nicoptere\/pen\/QyVWmB\/\">smooth growth<\/a> by nicolas barradeau (<a href=\"http:\/\/codepen.io\/nicoptere\">@nicoptere<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>and TADA! (15*15cm)<\/p>\n<p><a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/growth.jpg\" target=\"_blank\" data-rel=\"lightbox-image-14\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-773 size-full\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/growth.jpg\" alt=\"growth\" width=\"1080\" height=\"1080\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/growth.jpg 1080w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/growth-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/growth-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/growth-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/growth-1024x1024.jpg 1024w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/a><\/p>\n<p>what about pointillism?<\/p>\n<p>dots have a lot in common with particles, you need lots of them to\u00a0get something visually interesting. fortunately, computers like to compute and plotters like to plot so with a proper sorting method, sky is the limit (well not exactly but you get the idea). there are techniques I&#8217;d like to explore, the first\u00a0is the <a href=\"http:\/\/barradeau.com\/blog\/?p=549\" target=\"_blank\">stippling<\/a>, the second\u00a0is the <a href=\"http:\/\/codepen.io\/nicoptere\/pen\/waPOOm\" target=\"_blank\">dithering,<\/a>\u00a0both can lead to better dots distributions and allow <em>optical grayscale <\/em>(shades of grey by means of dots densities). dithering can lead to photorealistic representations and can be performed on the GPU. I&#8217;ll write about it if\/when I manage to get it to work. for now,\u00a0I&#8217;ll leave you with\u00a0this <em>zebra-striped giraffe<\/em>\u00a0<a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/girafe_only.png\" target=\"_blank\" data-rel=\"lightbox-image-15\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-763 size-full\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/girafe_only.png\" alt=\"girafe_only\" width=\"1080\" height=\"1080\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/girafe_only.png 1080w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/girafe_only-150x150.png 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/girafe_only-300x300.png 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/girafe_only-768x768.png 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/girafe_only-1024x1024.png 1024w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/a><\/p>\n<p>and its glorious plotted counterpart (26*13 cm, ~4h,\u00a020.878 points)<a href=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/giraffe.jpg\" target=\"_blank\" data-rel=\"lightbox-image-16\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-762 size-full\" src=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/giraffe.jpg\" alt=\"giraffe\" width=\"1080\" height=\"1080\" srcset=\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/giraffe.jpg 1080w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/giraffe-150x150.jpg 150w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/giraffe-300x300.jpg 300w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/giraffe-768x768.jpg 768w, http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/giraffe-1024x1024.jpg 1024w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>one\u00a0sure thing is that I&#8217;ve never been so excitedly happy with any device for the past 10 years :)<\/p>\n<p>also\u00a0I&#8217;ve posted some\u00a0<a href=\"http:\/\/graphicbug.tumblr.com\/\" target=\"_blank\">intermediate renders\/bugs here<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>tracing is one of the earliest forms of computer arts,\u00a0a good read if you&#8217;ve never heard of it via retweeted by\u00a0BitcraftLab. the more recent takes, with bigger formats and the use of colors always strike me with\u00a0the complexity of their patterns and yet plotters use the simplest tools available: points,\u00a0lines\u00a0and\u00a0curves. there are so many things &#8230; <span class=\"more\"><a class=\"more-link\" href=\"http:\/\/barradeau.com\/blog\/?p=725\">[Read more&#8230;]<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"sharing_disabled":false,"spay_email":"","jetpack_publicize_message":""},"categories":[3],"tags":[],"jetpack_featured_media_url":"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2016\/01\/giraffe.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/s4oXhx-tangible","_links":{"self":[{"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/725"}],"collection":[{"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=725"}],"version-history":[{"count":33,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/725\/revisions"}],"predecessor-version":[{"id":785,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/725\/revisions\/785"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/762"}],"wp:attachment":[{"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=725"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}