{"id":2169,"date":"2015-05-04T22:48:21","date_gmt":"2015-05-04T21:48:21","guid":{"rendered":"http:\/\/www.matthijskamstra.nl\/blog\/?p=2169"},"modified":"2015-05-04T23:13:03","modified_gmt":"2015-05-04T22:13:03","slug":"openfl-papertoy-art-project","status":"publish","type":"post","link":"https:\/\/www.matthijskamstra.nl\/blog\/2015\/05\/04\/openfl-papertoy-art-project\/","title":{"rendered":"Openfl papertoy art project"},"content":{"rendered":"<p>I love to create projects where you take stuff from the digital world (temporarily, intangible) and drag it into the &#8220;real&#8221; world. This project is a good example of that. I create a papertoy generated in code and cut by a machine.<\/p>\n<p>Besides filling my blog with new content, I have two other reasons to write this post:<\/p>\n<ol>\n<li>You can use <a href=\"http:\/\/haxe.org\/\" target=\"_blank\">Haxe<\/a>\/<a href=\"http:\/\/www.openfl.org\/\" target=\"_blank\">Openfl<\/a> for something else then game-developement! I know I am not the only one, but this group of developers are not as present as the game-defs.<\/li>\n<li>It&#8217;s a long and complicated process to get to the end result: it&#8217;s difficult to explain this in detail to others, so I wrote down the whole story for interested friend\/family\/colleagues\/fans???<\/li>\n<\/ol>\n<p>If I ever grow a pair, this post be one of the two talks I would give during <strong><a href=\"http:\/\/wwx.silexlabs.org\/2015\/\" target=\"_blank\">wwx2015<\/a><\/strong> just to balance the all tech talks during the event.<br \/>\nBut nothing is growing besides my hair, so instead I will write about the process and end-result.<\/p>\n<p>Feedback is always nice, so please don&#8217;t hesitate to comment!<\/p>\n<p><!--more--><\/p>\n<h2>Intro<\/h2>\n<p>I always say I have two jobs: during the day I am a developer (AS3, javascript, Haxe, Openfl, lately some Java) at <a href=\"http:\/\/www.fonk-amsterdam.com\" target=\"_blank\">Fonk<\/a> but at night I change into an awesome papertoy engineer (superhero \ud83d\ude1b ).<\/p>\n<p>The <a href=\"https:\/\/www.google.nl\/search?q=papertoy\" target=\"_blank\">papertoy<\/a> stuff I do at night, is extremely fun hobby: beside that people download and build my designs I am also featured in some books:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.amazon.com\/Urban-Paper-Designer-Toys-Build\/dp\/1600611230\/ref=pd_sim_b_12?ie=UTF8&#038;refRID=1MTRXDEEAKYZQCS4HST4\" target=\"_blank\">Urban-Paper-Designer-Toys<\/a><\/li>\n<li><a href=\"http:\/\/www.amazon.com\/Papertoy-Monsters-Cool-Papertoys-Yourself\/dp\/0761158820\" target=\"_blank\">Papertoy-Monsters<\/a><\/li>\n<li><a href=\"http:\/\/www.amazon.com\/Paper-Robots-Fantastic-Buid-Yourself\/dp\/3848004232\/ref=pd_bxgy_b_img_y\" target=\"_blank\">Paper-Robots<\/a><\/li>\n<li>And there is another book coming out &#8230; soonish <\/li>\n<\/ul>\n<p>And this post is about both of them; I managed to fuse them together in a <strong>Code generated papertoys<\/strong>!<\/p>\n<h2>Where did the idea start?<\/h2>\n<p><img decoding=\"async\" src=\"http:\/\/content.provocraft.com\/b\/pages_images_02_2014\/explore-family\/one_hero.jpg\" alt=\"Cricut Explore Family\" \/><br \/>\nI while back I got a <a href=\"http:\/\/us.cricut.com\/home\/learn\/machines\/explore-family\" target=\"_blank\">Cricut Explore<\/a> from the Cricut company to try out. It&#8217;s a nice machine which is extremely good in cutting. Just for the readers that never have build a papertoy, the cutting is the part that you really want to skip&#8230; especially if the model is complex. That&#8217;s why papertoys are very simple shaped and usually on one page: it&#8217;s easy to cut, easy to understand and doable in one hour.<\/p>\n<p>So what makes the Cricut useful? The cutting! So here the idea started to make a papertoy that is complex to cut.<\/p>\n<h2>What&#8217;s the &#8220;brief&#8221;?<\/h2>\n<p>It&#8217;s always a good idea to set some limits in a project, so here are the ones I worked with.<br \/>\nThere is a papersize limit that the Cricut can do: it&#8217;s around a A3. Yes, vague, I know, but remember the machine isn&#8217;t on sale in Europe yet so it&#8217;s not on &#8220;our&#8221; <a href=\"http:\/\/betweenborders.com\/wordsmithing\/a4-vs-us-letter\/\" target=\"_blank\">paper-size-system<\/a> yet.<br \/>\nBut eventually I decide to use A4 size paper.<br \/>\nReason for this: <\/p>\n<ul>\n<li>A4 will take less time to print<\/li>\n<li>the bigger the papertoy, the heavier the paper needs to be to support itself<\/li>\n<li>less intimidating to build<\/li>\n<\/ul>\n<p>So just one piece of paper, in this case A4 (or letter). It should be easy to build, so not a lots of parts to assemble.<br \/>\nVery quick result during building.<\/p>\n<p>But what I really want: an Art installation: big red button, press it and &#8230;<br \/>\nGenerate a papertoy, machine cut and <em>presto<\/em>: an uniquely generated papertoy to build.<\/p>\n<h2>Design a papertoy that can be cut by machine<\/h2>\n<p>First a papertoy design that is easy to build and fits on one piece of paper:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/sketch_papertoy2.jpg\" alt=\"First papertoy Pixlrr sketch\" width=\"454\" height=\"350\" class=\"alignnone size-full wp-image-2172\" srcset=\"https:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/sketch_papertoy2.jpg 454w, https:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/sketch_papertoy2-300x231.jpg 300w\" sizes=\"auto, (max-width: 454px) 100vw, 454px\" \/><br \/>\nI decide to call it <strong>Pixlrr<\/strong>!<\/p>\n<h2>Randomize the papertoy shape<\/h2>\n<p>Some ideas just linger in the back of my mind, waiting for a little push\/help in the right direction.<br \/>\nSame with this project, I had some ideas how to randomize the shape of the papertoy but all of them didn&#8217;t &#8220;fit&#8221;.<br \/>\nTill I red about an awesome project by <a href=\"http:\/\/davebollinger.org\/works\/pixelspaceships\/\" target=\"_blank\">Dave Bollinger: pixelspaceships<\/a>And it was exactly what I needed! <\/p>\n<p>So to experiment with the idea I build a <a href=\"http:\/\/www.matthijskamstra.nl\/blog\/2015\/02\/13\/pixel-sprite-generator-editor\/\" target=\"_blank\">pixel-sprite-generator-editor<\/a>, so it was easier to change the design and see the outcome.<br \/>\n<em>Btw the pixel-sprite-generator-editor is opensource at <a href=\"https:\/\/github.com\/MatthijsKamstra\/Pixel-Sprite-Generator-Editor\" target=\"_blank\">Github<\/a>.<\/em><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/Screen-Shot-2015-05-04-at-17.17.05-1024x519.png\" alt=\"Flash export of the Pixel Sprite Generator Editor\" width=\"1000\" height=\"507\" class=\"alignnone size-large wp-image-2174\" srcset=\"https:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/Screen-Shot-2015-05-04-at-17.17.05-1024x519.png 1024w, https:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/Screen-Shot-2015-05-04-at-17.17.05-300x152.png 300w, https:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/Screen-Shot-2015-05-04-at-17.17.05.png 1672w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>The pixel-sprite-pattern in which I eventually generated the papertoy is:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/pattern.png\" alt=\"Pixlrr pattern\" width=\"851\" height=\"251\" class=\"alignnone size-full wp-image-2183\" srcset=\"https:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/pattern.png 851w, https:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/pattern-300x88.png 300w\" sizes=\"auto, (max-width: 851px) 100vw, 851px\" \/><br \/>\n<em>Quick reminder: dark-blue is a border, blue is empty\/body and green is body\/border. The pattern is mirrored, which creates a nice symmetry.<\/em><\/p>\n<p>This is the output (100%) if you export to Neko, yes&#8230; small&#8230; because it&#8217;s done in pixels \ud83d\ude00<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/pixlrr_1430642957000.png\" alt=\"pixlrr_1430642957000\" width=\"85\" height=\"50\" class=\"alignnone size-full wp-image-2176\" \/><br \/>\nOkay, a little bigger:<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/pixlrr_1430642957000.png\" alt=\"pixlrr_1430642957000\" width=\"100%\" \/><br \/>\n<em>The left part is the body of the papertoy and the right is the mask\/face.<\/em><\/p>\n<h2>Vectorize the pixel image<\/h2>\n<p>Pixels are fine if you only have to print the image. I haven&#8217;t tried it, but I am not sure it will print the pixels sharp.<br \/>\nI not only want to print it (and keep the image sharp) but I need to feed it to the Cricut Explorer. And it needs vectors to calculate a cutting path.<br \/>\nHow to convert this pixel image into something that is scalable?<\/p>\n<p>Funny how some ideas help other ideas: I while back I started (and quickly ended again&#8230; \ud83d\ude00 ) a <a href=\"http:\/\/gen.matthijskamstra.nl\/\" target=\"_blank\">blog<\/a> (blog-engine <a href=\"https:\/\/github.com\/MatthijsKamstra\/cybermonk\" target=\"_blank\">CyberMonk<\/a> is also written by me) with patterns I created &#8230; with code and exported to <code>.svg<\/code>.<\/p>\n<p>Currently <a href=\"http:\/\/en.wikipedia.org\/wiki\/Scalable_Vector_Graphics\" target=\"_blank\">Scalable Vector Graphics (.svg)<\/a> are very common for web-development and it&#8217;s nice format because it looks like xml. <\/p>\n<p>So I already had a way to create <code>.svg<\/code> with code!<\/p>\n<p>The rest is not that difficult, eventually you need a bitmap, but from there it&#8217;s straight forward:<\/p>\n<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\nfor (y in 0..._height) {\r\n\tfor (x in 0..._width) {\r\n\t\tvar color : Int = _bitmap.bitmapData.getPixel(x, y);\r\n\t\t\/\/ trace (&quot;color: &quot; + StringTools.hex(color,6));\r\n\t\t_colorArray.push  (color);\r\n\t}\r\n}\r\n<\/pre>\n<p>Check: <a href=\"http:\/\/docs.openfl.org\/openfl\/display\/BitmapData.html#getPixel\" target=\"_blank\">getPixel openfl documentation<\/a><\/p>\n<p>Once you have indexed all pixel-colors you generate the <code>svg<\/code> with a lot of rectangles.<br \/>\nI do some clever things like grouping them, but it&#8217;s really is just a lot of rectangles:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&lt;rect id=&quot;rectangle_63866_1_&quot; x=&quot;160&quot; y=&quot;10&quot; fill=&quot;#ED264A&quot; width=&quot;10&quot; height=&quot;10&quot;\/&gt;\r\n<\/pre>\n<h2>Let&#8217;s be honest<\/h2>\n<p>The generation of the papertoys are not entirely automated.<br \/>\nI generate lines for folding and cutting. But I couldn&#8217;t get the code to work for the biggest outline used for cutting (all the red en black pixels together). I got it working for simple shapes, but somewhere in my code I end op in a infinity loop. I probably will fix this later (or not).<br \/>\nBut to speed up the process, I just united this black\/red-&#8220;pixels&#8221; in Illustrator.<\/p>\n<p>Other part that could be better, but I have little controle over. You need to upload the <code>svg<\/code> into the editor of Cricut (online). There you need to add it to the canvas, change some of the layers to folding\/scorning, &#8220;fix&#8221; the image (lets say it&#8217;s just one click extra you need to do), save the project online and send the data to the machine.<br \/>\nAll this means that if I want 100 unique Pixlrr papertoys, I need to have 100 projects online with the changes I just described&#8230; It really is not unique, although I can generate the papertoy very easily and in great numbers. <\/p>\n<p>Printing the pattern on the paper (and cutting it) is not impossible, but very labor-intensive. I haven&#8217;t even tried it.<\/p>\n<h2>Final<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/header_pixlrr-1024x398.png\" alt=\"header_pixlrr\" width=\"1000\" height=\"389\" class=\"alignnone size-large wp-image-2173\" srcset=\"https:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/header_pixlrr.png 1024w, https:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/header_pixlrr-300x117.png 300w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><br \/>\nI am very happy with the end-result. Even when you cut Pixlrr out on plain white paper they look great.<br \/>\nThe process of getting to this papertoy was fun. It created 3 new projects on my computer \ud83d\ude00 .<\/p>\n<h2>Problems! \/ Solutions?<\/h2>\n<p>Okay I know problems are just just problems till they get solved. But these are the ones I ran into.<\/p>\n<ol>\n<li>Printing and Cutting are on two different machines<\/li>\n<li>Folding\/scorning of the Cricut is not precise (or deep) enough for my papertoy<\/li>\n<li>Cricut Explorer works only in the cloud<\/li>\n<li>I need to hack the Cricut machine to get access to it by code to really create unique papertoys<\/li>\n<li>The paper need to placed on a sticky cutting mat<\/li>\n<li>Outline the big shape in code<\/li>\n<li>&#8230;<\/li>\n<\/ol>\n<p>Here my ideas to fix these:<\/p>\n<ol>\n<li>Colored paper works, but I think I will cut up some old comics to make it even more awesome!<\/li>\n<li>I will create a dotted line where I want to fold and cut that way a fold<\/li>\n<li>Bummer, can&#8217;t change that unless I change <\/li>\n<li>I have looked into that, but don&#8217;t think I want to go that way<\/li>\n<li>Perhaps a laser cutter &#8230; but for now not a solution<\/li>\n<li>on my todo list<\/li>\n<li>&#8230;<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>I love to create projects where you take stuff from the digital world (temporarily, intangible) and drag it into the &#8220;real&#8221; world. This project is a good example of that. I create a papertoy generated in code and cut by a machine. Besides filling my blog with new content, I have two other reasons to [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2173,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,360,385,11],"tags":[412,383,309,119,123,388,160],"class_list":["post-2169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-haxe","category-openfl","category-urban-papercraft","tag-haxe","tag-openfl","tag-paper","tag-papertoy","tag-papertoys","tag-scalable-vector-graphics","tag-vector"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/2169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/comments?post=2169"}],"version-history":[{"count":19,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/2169\/revisions"}],"predecessor-version":[{"id":2194,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/2169\/revisions\/2194"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/media\/2173"}],"wp:attachment":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/media?parent=2169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/categories?post=2169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/tags?post=2169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}