{"id":6448,"date":"2020-10-11T22:33:23","date_gmt":"2020-10-12T02:33:23","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/?p=6448"},"modified":"2020-10-12T01:36:03","modified_gmt":"2020-10-12T05:36:03","slug":"lampsauce-solisandbox-2-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/shivanapandrew-cmu-edu\/10\/11\/lampsauce-solisandbox-2-3\/","title":{"rendered":"lampsauce-SoliSandbox (2\/3)"},"content":{"rendered":"<h1 style=\"text-align: center\">3D Construction Toy<\/h1>\n<p><iframe title=\"3d construction toy\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/z489aJi1XJQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<pre>This project allows users to use Soli swipe events to describe various transformations on a cube in 3D space. The project was build using three.js and I learned many things about the THREE.Matrix4 object. I also initially copied some code from 2013 to handle collision detection. However, it was really buggy, so I wrote my own which works by calculating the axis-aligned bounding box (AABB) and detecting collisions. Since each cube must pass through 6 transformation filters, the program requires a lot of swipe gestures. In order to make the program easier to use and more toy-like, the number of cubes is limited to 4. Personally, I could not get the Soli tap event to work on my phone, which is why I only relied on swipe events. Perhaps using tap to drop could make the interaction less awkward.\r\n\r\nProject =&gt; ( <a href=\"https:\/\/3d-construction-toy.glitch.me\/\" target=\"_blank\" rel=\"noopener noreferrer\">app<\/a> | <a href=\"https:\/\/glitch.com\/edit\/#!\/3d-construction-toy\" target=\"_blank\" rel=\"noopener noreferrer\">code<\/a> )\r\n*use arrow keys in place of swipe events<\/pre>\n<div id='gallery-1' class='gallery galleryid-6448 gallery-columns-2 gallery-size-full'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<img width=\"256\" height=\"540\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/screen-20201011-092855.gif\" class=\"attachment-full size-full\" alt=\"\" loading=\"lazy\" \/>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<img width=\"480\" height=\"1013\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/screen-20201011-092855-2.gif\" class=\"attachment-full size-full\" alt=\"\" loading=\"lazy\" \/>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<p style=\"text-align: center\">Versions \/ Aesthetics I tried out<\/p>\n<div id='gallery-2' class='gallery galleryid-6448 gallery-columns-3 gallery-size-large'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/shivanapandrew-cmu-edu\/10\/11\/lampsauce-solisandbox-2-3\/screen-shot-2020-10-04-at-10-02-31-am\/'><img width=\"523\" height=\"568\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-04-at-10.02.31-AM.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-2-6451\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-04-at-10.02.31-AM.png 523w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-04-at-10.02.31-AM-442x480.png 442w\" sizes=\"(max-width: 523px) 85vw, 523px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-6451'>\n\t\t\t\tNormal material\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/shivanapandrew-cmu-edu\/10\/11\/lampsauce-solisandbox-2-3\/screen-shot-2020-10-07-at-10-17-40-am-copy\/'><img width=\"427\" height=\"461\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-07-at-10.17.40-AM-copy.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-2-6452\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-6452'>\n\t\t\t\tStandard material\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/shivanapandrew-cmu-edu\/10\/11\/lampsauce-solisandbox-2-3\/screen-shot-2020-10-11-at-10-05-10-pm-copy\/'><img width=\"840\" height=\"1011\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-11-at-10.05.10-PM-copy-851x1024.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-2-6453\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-11-at-10.05.10-PM-copy-851x1024.png 851w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-11-at-10.05.10-PM-copy-399x480.png 399w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-11-at-10.05.10-PM-copy-768x925.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-11-at-10.05.10-PM-copy.png 888w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-6453'>\n\t\t\t\tStandard material with lighting and shadows\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>3D Construction Toy This project allows users to use Soli swipe events to describe various transformations on a cube in 3D space. The project was build using three.js and I learned many things about the THREE.Matrix4 object. I also initially copied some code from 2013 to handle collision detection. However, it was really buggy, so &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/shivanapandrew-cmu-edu\/10\/11\/lampsauce-solisandbox-2-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;lampsauce-SoliSandbox (2\/3)&#8221;<\/span><\/a><\/p>\n","protected":false},"author":56,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/6448"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/comments?post=6448"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/6448\/revisions"}],"predecessor-version":[{"id":6483,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/6448\/revisions\/6483"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/media?parent=6448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/categories?post=6448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/tags?post=6448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}