{"id":3937,"date":"2015-08-04T08:48:28","date_gmt":"2015-08-04T14:48:28","guid":{"rendered":"http:\/\/www.realtimerendering.com\/blog\/?p=3937"},"modified":"2022-06-01T11:33:45","modified_gmt":"2022-06-01T17:33:45","slug":"freezing-time-at-siggraph","status":"publish","type":"post","link":"https:\/\/www.realtimerendering.com\/blog\/freezing-time-at-siggraph\/","title":{"rendered":"Freezing Time at SIGGRAPH"},"content":{"rendered":"<p>Andrew Glassner and I are running a fun little workshop called &#8220;Freezing Time&#8221; this Sunday, as part of Making @ SIGGRAPH. <strong>Details:<\/strong> 12:15-1:45 PM,\u00a0South Hall G &#8211; Studio Workstation Area<\/p>\n<p>We&#8217;ll be teaching how to use <a href=\"https:\/\/github.com\/erich666\/T2Z\">T2Z<\/a>, &#8220;Time To Z&#8221;, a program that lets you generate a 2D animation and then turn it into a 3D printable sculpture. Participants will be provided workstations, and there will be high-speed 3D printers available after the workshop. Can&#8217;t make it? Read on&#8230; Can make it? <a href=\"https:\/\/github.com\/erich666\/T2Z\">Get the code now<\/a> and have fun on the plane ride to Los Angeles.<\/p>\n<p>T2Z takes the frames of your animation and stacks them to form a 3D sculpture.\u00a0<a href=\"http:\/\/erich.realtimerendering.com\/323\/threejs\/animate.html\">This three.js program<\/a> shows the transition for a number of animations\u00a0&#8211; use the mouse to\u00a0change the camera&#8217;s view. It&#8217;ll also get your cooling fan cranking, if your GPU is like mine. Turning &#8220;cycles&#8221; down to 1 keeps it sane.<\/p>\n<p>Here&#8217;s a simple example. This animation:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/erich.realtimerendering.com\/323\/shapeways\/Squib.gif\" alt=\"squib animation\" width=\"500\" height=\"500\" \/><\/p>\n<p>gives this sculpture when you stack the frames:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5663\" src=\"http:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/squib.png\" alt=\"\" width=\"413\" height=\"472\" srcset=\"https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/squib.png 413w, https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/squib-263x300.png 263w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/p>\n<p>The (self-imposed) challenge is to create an interesting, looping animation that also creates a visually-pleasing and printable sculpture. This example is pretty good, though the animation doesn&#8217;t quite perfectly loop. It would be easy enough to make it loop, but then we lose the base it can sit on. Tricky! If you want to hack on this code, it&#8217;s the Wobbly animation in T2Z.<\/p>\n<p>There are many more examples in <a href=\"http:\/\/bit.ly\/323spot\">our gallery<\/a>. I&#8217;ve been playing with the idea of data translation in general; you&#8217;ll see some experiments there. It&#8217;s been a great excuse for me to learn to use various tools at the local makerspace, <a href=\"http:\/\/artisansasylum.com\/\">Artisan&#8217;s Asylum<\/a>, though I&#8217;ve not worked up the courage to actually use the plasma cutter yet. There are also plenty of fun &amp; free tools for data manipulation, such as <a href=\"http:\/\/www.123dapp.com\/make\">123D Make<\/a>, third-generation <a href=\"https:\/\/photosynth.net\/preview\">Photosynth<\/a>, <a href=\"https:\/\/sketchfab.com\/erich\">Sketchfab<\/a>, <a href=\"http:\/\/www.123dapp.com\/catch\">123D Catch<\/a>, and on and on.<\/p>\n<p>Even if you can&#8217;t attend the workshop, you can easily do this sort of experimentation at home. The <a href=\"https:\/\/github.com\/erich666\/T2Z\">T2Z code<\/a> is free and open source, and <a href=\"http:\/\/htmlpreview.github.io\/?https:\/\/github.com\/erich666\/T2Z\/blob\/master\/docs\/ProjectT2Z.html\">well-documented<\/a>. Companies such as <a href=\"https:\/\/www.shapeways.com\/designer\/323spot\">Shapeways<\/a> give you the ability to print high-quality models. We have lots of little animations in <a href=\"https:\/\/github.com\/erich666\/T2Z\/blob\/master\/src\/ProjectT2Z\/Animations.pde\">Animations.pde<\/a> &#8211; go mess with them! There are also super-hacky &#8220;animations&#8221; at the end of this file:\u00a0<span class=\"pl-en\"><em>AnimatedGifReader<\/em> turns a GIF into an STL 3D print file,\u00a0<em>FolderOfFramesReader<\/em> does the same for a set of PNGs, and\u00a0<em>HeightField<\/em> takes a grayscale image and uses the gray as a measure of height, e.g.<\/span><\/p>\n<p><a href=\"http:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/Skull3dRelief.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-3939 alignleft\" src=\"http:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/Skull3dRelief-300x220.png\" alt=\"Skull3dRelief\" width=\"300\" height=\"220\" srcset=\"https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/Skull3dRelief-300x220.png 300w, https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/Skull3dRelief-409x300.png 409w, https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/Skull3dRelief.png 672w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/skull_relief.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-3940 alignnone\" src=\"http:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/skull_relief-178x300.png\" alt=\"skull_relief\" width=\"178\" height=\"300\" srcset=\"https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/skull_relief-178x300.png 178w, https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/skull_relief.png 487w\" sizes=\"auto, (max-width: 178px) 100vw, 178px\" \/><\/a><\/p>\n<p>Processing is entirely fun to hack on (Debugger? We don&#8217;t need no stinkin&#8217; debugger, println() is our only friend). It&#8217;s Java plus stuff to make graphics easy. I like the fact that to run the program you are faced with the code &#8211; the system invites you to start poking at the program from the outset. Andrew wrote most of the code, being a Processing pro (he <a href=\"http:\/\/smile.amazon.com\/Processing-Visual-Artists-Expressive-Interactive\/dp\/1568817169?tag=realtimerenderin\">wrote a book<\/a> and\u00a0<a href=\"http:\/\/www.glassner.com\/computer-graphics\/2d-animation-and-interaction\/\">teaches a course in it<\/a>; the first half of his\u00a0course is free). Me, I translated the Marching Cubes code to Processing: each pixel of each image is treated as a voxel, the 3D model is from the isosurface formed between the objects and the background.<\/p>\n<p>We hope to see you on Sunday! Or better yet, online, where we hope to see you sending us animations for the gallery and\u00a0pull requests for code you&#8217;ve added.<\/p>\n<p>Where did all this come from? Last year around May Andrew started making a series of looping GIFs using Processing, taking after the <a href=\"http:\/\/beesandbombs.tumblr.com\/\">Bees &amp; Bombs Tumblr feed<\/a>. His goal was to make animations worth posting. These can now be found on <a href=\"http:\/\/theimaginaryinstitute.tumblr.com\/\">Andrew&#8217;s\u00a0Tumblr feed<\/a>.\u00a0Steve Drucker and I were the critics, over more than half a year.<\/p>\n<p>During this time I was attending and organizing 3D printer meetups in the Boston area. <a href=\"http:\/\/markjstock.com\/\">Mark Stock<\/a>\u00a0pointed out a fascinating way of modeling: instead of explicitly using union operations on\u00a03D models, the traditional CAD approach, he instead deposited objects into a large voxel grid. It&#8217;s much simpler and faster to figure out if a voxel is inside some given primitive vs. performing a union or other constructive solid geometry operation on a set of models. For example, computing the union of thousands upon thousands of spheres will bring most CAD modelers to their knees. Voxel in\/out functions are trivial to compute for spheres, and Marching Cubes then guarantees a watertight, well-formed model with no geometric singularities, precision problems, etc. 3D printers themselves have limits to precision, so using voxels is a good match. Here&#8217;s <a href=\"https:\/\/www.shapeways.com\/product\/3TA5XNCYH\/spherical-dendrite-2-50?li=user-profile&amp;optionId=42182099\">an example of Mark&#8217;s work<\/a>:<\/p>\n<p><a href=\"https:\/\/images2.sw-cdn.net\/model\/picture\/625x465_2677364_8017461_1429737537.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/images2.sw-cdn.net\/model\/picture\/625x465_2677364_8017461_1429737537.jpg\" alt=\"Dendrite by Mark Stock\" width=\"625\" height=\"465\" \/><\/a><\/p>\n<p>So, for me, these two things combined: animations could be used to define voxels, and Marching Cubes used to generate 3D representations. I made an exceedingly slow GIF to STL converter in Perl and ran a bunch of Andrew&#8217;s GIFs through it. A few interesting forms turned up and that got me started on playing with what I call &#8220;323,&#8221; converting from some three-dimensional form of data (an animation being 2D plus time) to another (a sculpture).<\/p>\n<p>Seeing the call for Making @ SIGGRAPH, we decided to go further and give a workshop on the process. The T2Z program that resulted is massively faster than my original Perl program, generating sculptures in a few seconds. It&#8217;s also much more usable, allowing you to make your own animations, hook up sliders to variables, and easily export them as GIFs, a set of PNGs, or a 3D STL model. Programming all this\u00a0sucked up way more time than expected, and of course was highly addictive.\u00a0Andrew made this Processing program do things that Nature did not intend (e.g., binary STL output and multi-window UI).<\/p>\n<p>Personally, I find this whole design\u00a0process\u00a0entertaining. In idle moments (or at the dentist) I imagine what might make both an interesting animation and a worthwhile sculpture. It&#8217;s a fun way to think about modeling and animation, and one where my intuition doesn&#8217;t always pay off. The more I play, the more I learn.<\/p>\n<p>Here&#8217;s a screenshot, to whet your appetite &#8211; click it for the full-size readable version:<\/p>\n<p><a href=\"http:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/screenshot.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-3941\" src=\"http:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/screenshot.png\" alt=\"screenshot\" width=\"1424\" height=\"1161\" srcset=\"https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/screenshot.png 1424w, https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/screenshot-300x245.png 300w, https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/screenshot-1024x835.png 1024w, https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2015\/08\/screenshot-368x300.png 368w\" sizes=\"auto, (max-width: 1424px) 100vw, 1424px\" \/><\/a><\/p>\n<p>So download the thing, <a href=\"http:\/\/htmlpreview.github.io\/?https:\/\/github.com\/erich666\/T2Z\/blob\/master\/docs\/ProjectT2Z.html\">install Processing and three little libraries<\/a> (easy!), and start sliding sliders, pushing buttons, and hacking code! And let us know what you find.<\/p>\n<p>BTW, if you want just one link to bookmark, it&#8217;s this: <strong><a href=\"http:\/\/bit.ly\/t2zspot\">http:\/\/bit.ly\/t2zspot<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Andrew Glassner and I are running a fun little workshop called &#8220;Freezing Time&#8221; this Sunday, as part of Making @ SIGGRAPH. Details: 12:15-1:45 PM,\u00a0South Hall G &#8211; Studio Workstation Area We&#8217;ll be teaching how to use T2Z, &#8220;Time To Z&#8221;, a program that lets you generate a 2D animation and then turn it into a [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[237,581,582,202,9],"class_list":["post-3937","post","type-post","status-publish","format-standard","hentry","category-resources","tag-3d-printing","tag-bees-bombs","tag-marching-cubes","tag-processing","tag-siggraph"],"_links":{"self":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts\/3937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/comments?post=3937"}],"version-history":[{"count":5,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts\/3937\/revisions"}],"predecessor-version":[{"id":5664,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts\/3937\/revisions\/5664"}],"wp:attachment":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/media?parent=3937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/categories?post=3937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/tags?post=3937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}