{"id":196,"date":"2017-02-27T16:39:05","date_gmt":"2017-02-27T16:39:05","guid":{"rendered":"https:\/\/projects-old.etc.cmu.edu\/wonderland\/?p=196"},"modified":"2017-05-13T19:14:17","modified_gmt":"2017-05-13T19:14:17","slug":"prototype-cute-fractals","status":"publish","type":"post","link":"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/2017\/02\/27\/prototype-cute-fractals\/","title":{"rendered":"Prototype: Cute Fractal"},"content":{"rendered":"<h1><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-535\" src=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/18051628_813834005433137_1380909546_n.jpg\" alt=\"\" width=\"886\" height=\"844\" srcset=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/18051628_813834005433137_1380909546_n.jpg 886w, https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/18051628_813834005433137_1380909546_n-300x286.jpg 300w, https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/18051628_813834005433137_1380909546_n-768x732.jpg 768w\" sizes=\"(max-width: 886px) 100vw, 886px\" \/><\/h1>\n<h2><span style=\"font-weight: 400;\">Core Concept<\/span><\/h2>\n<p>This prototype is intended to teach\u00a0<strong>Function Chaining\u00a0<\/strong>and\u00a0<strong>Recursion.<\/strong><\/p>\n<h2><span style=\"font-weight: 400;\">Why?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We made the choice to use fractals to teach function chaining because we found out that the concept of function calls is one of the more difficult computer science concepts \u00a0for students to understand (based on a survey\u00a0of local computer science and technology teachers). In addition to it, Fractals, in essence, are a visual representation of chained functions calling each other. We hope\u00a0that this prototype can clarify the order of execution when functions are chained together recursively.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">The Pitch<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Fractal Magic Prototype is a Virtual Reality experience in Oculus Rift that aims to illustrate the concept of function chaining. In this prototype, the player will create custom fractal magic by combining and layering spells that create shapes. The more complex the spells are, the more intricate and beautiful the resulting fractal is.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">The Actual Experience<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-537\" src=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/05.jpg\" alt=\"\" width=\"459\" height=\"383\" srcset=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/05.jpg 978w, https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/05-300x251.jpg 300w, https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/05-768x642.jpg 768w\" sizes=\"(max-width: 459px) 100vw, 459px\" \/><br \/>\nIn terms of computer science, the player will generate fractal shapes by\u00a0chaining different shape functions together. There will be two shapes: tetrahedron and cube. The player will be able to place the shapes into the custom function, and then use that function as \u201cmagic\u201d to generate the fractal shape he wants.<\/p>\n<h2><span style=\"font-weight: 400;\">Key Interactions<\/span><\/h2>\n<ul>\n<li>Grab a shape from the left side and put it into the middle; grab a magic out of the middle magic circle, and release. You will see a shape created in the space.<\/li>\n<li>Grab a shape onto one of the spheres on the right, and then grab a sphere onto itself. Grab this sphere onto the middle magic circle, and then grab a magic out of the middle magic circle. Release your hand, and you will see a fractal shape created.<\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Key Lessons<\/span><\/h2>\n<ul>\n<li>Learn the concept of recursion by creating a recursive function that generates shapes layer by layer recursively.<\/li>\n<li>Learn the order of execution by playing with the order of shapes put onto the sphere functions.<\/li>\n<\/ul>\n<h2><a href=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/05\/Cute-Fractal-Walkthrough-min.pdf\"><span style=\"font-weight: 400;\">Step-by-step Walkthrough Guide<\/span><\/a><\/h2>\n<p><span style=\"font-weight: 400;\">Our team believes people can\u00a0gain a better understanding of function chaining once they can visualize the fractal growing process. The fractal consists of different layers; if the player passes in the first layer cube and the second layer tetrahedron, the fractal will grow with first layer as cube and second layer as tetrahedron.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Demo Video<\/span><\/h2>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/WaZt9ttNnDY\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2><span style=\"font-weight: 400;\">Team Goals<\/span><\/h2>\n<p>Week 1<\/p>\n<ul>\n<li>Finalize\u00a0the design and finish the basic fractal generating\u00a0algorithm. Find out if it&#8217;s even possible to build this.<\/li>\n<\/ul>\n<p>Week 2<\/p>\n<ul>\n<li>Playtest and iterate the designs. Improve the fractal generating algorithm. Find out if generating fractals can actually teach people about function chaining and recursion.<\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Lessons Learned<\/span><\/h2>\n<h3>Usability<\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Our programmer found that both Oculus touch controllers must be used together, otherwise neither of them will work.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> The way we are currently representing functions make it easy to have infinitely recursive functions and due to technical limitations the resulting shapes will not show up, which may make things more confusing. However, the experience itself was still quite fun to play with and explore.<\/span><\/li>\n<\/ul>\n<h3>Teaching<\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The idea of recursion translates well in this experience.<\/span><\/li>\n<li style=\"font-weight: 400;\">It is important to highlight how different aspects of the experience relate to each other. We got several requests for a visual connection between the fractal layers and the shapes that were triggering them.<\/li>\n<li style=\"font-weight: 400;\">People playing the game will attribute significance to everything, so make sure everything is significant. Each layer of the fractals is a different color to make them easier to see and more visually appealing, and many players were struggling to figure out the significance of the colors or what caused them.<\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Role in a Lesson<\/span><\/h2>\n<p><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-210 alignright\" src=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/received_422964184714658-1024x952.png\" width=\"369\" height=\"343\" srcset=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/received_422964184714658-1024x952.png 1024w, https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/received_422964184714658-300x279.png 300w, https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/received_422964184714658-768x714.png 768w, https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/received_422964184714658.png 1028w\" sizes=\"(max-width: 369px) 100vw, 369px\" \/>This experience could be used as a way of introducing recursion if it were played at the beginning of a lesson. <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The magic circle represents the main function<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The spheres correspond to functions<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The shapes(Triangular pyramid and cube) correspond to commands.<\/span><\/li>\n<\/ul>\n<h2><\/h2>\n<p>This experience could be used in companion with the code snippet provided below, which in essence represents the interactions in the game.<\/p>\n<blockquote><p><strong>Sequential:<\/strong><br \/>\n1.<br \/>\nvoid main() {<br \/>\nnewLayer(triangle);<br \/>\n}<\/p>\n<p>2.<br \/>\nvoid main() {<br \/>\nnewLayer(triangle);<br \/>\nnewLayer(cube);<br \/>\n}<\/p>\n<p><strong>Recursive:<\/strong><br \/>\n1.<br \/>\nvoid blue() {<br \/>\nnewLayer(triangle);<br \/>\nblue();<br \/>\n}<br \/>\nvoid main() {<br \/>\nblue();<br \/>\n}<\/p>\n<p>2.<br \/>\nvoid orange() {<br \/>\nnewLayer(triangle);<br \/>\nnewLayer(cube);<br \/>\n}<br \/>\nvoid blue() {<br \/>\norange();<br \/>\nblue();<br \/>\n}<br \/>\nvoid main() {<br \/>\nblue();<br \/>\n}<\/p><\/blockquote>\n<h2><span style=\"font-weight: 400;\">Ideas for Future Development<\/span><\/h2>\n<ul>\n<li><span style=\"font-weight: 400;\">We would add more option for colors, size of shapes, and possibly different shapes, so that players can create\u00a0a variety of fractals.<\/span><\/li>\n<li>We would also want to highlight the shape in the middle circle or on the sphere corresponding to the fractal layer being drawn. By doing so, the players can more easily learn the execution order.<\/li>\n<li>It would be good to find a way to further differentiate the functions from the commands (the colored spheres from the white shapes).<\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Teacher Reactions<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Most of teacher play testers liked the experience and believed that this could be shown to the students to illustrate recursion. However, they wanted some extra features that could illustrate the execution order.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Student Reactions<\/span><\/h2>\n<p><b><span style=\"font-weight: 400;\">The students we showed this prototype to generally thought this was a cool experience, and particularly liked when they could make large fractals with many layers. Some understood the processes for making certain fractals better than others, but many of them were able to figure out exactly what was happening and why, which was quite encouraging.<\/span><\/b><\/p>\n<h2><span style=\"font-weight: 400;\">Thoughts From the Team<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Zach thinks that the cute fractal is a good prototype.<\/span> <span style=\"font-weight: 400;\">The players were able to understand the basic recursion computer science concept by generating fractals with customly \u201ccooked\u201d functions in the game. The controls were initially a bit confusing, but could be fairly understood. In game, players also tended to try to predict what the resulting shape would look like based on what they did. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Joe thinks the Cute Fractal is one of the best prototypes of our team, as it combines the engagement and learning together in an efficient way. People playing this game usually have an impression about how neat and clean using recursive function to achieve some goal with the same pattern over and over again in an easy understanding way.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Nick likes the cute fractal prototype a lot but he thinks there is a lot of space for improvement. For instance, if the prototype could show the exact recursion calling sequence, it will be very helpful to illustrate the sequence of recursion execution to the player. Also, since the prototype set a limit to fractal layer due to limitation of the graphic card, player cannot build a fractal with more than 6 layers. This limitation needs to be explained to the player so that they are not confused.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Miriam was pleasantly surprised by this prototype. She had wondered if the design was too simple if it would clearly convey the idea and be interesting. The more she saw people play it, though, the most she realized that it was quite engaging and that most people seemed to be making the connections we\u2019d hoped for.<\/span><\/p>\n<p>Luna was surprised by the phenomenon that experienced programmers tend to love this a lot while it is a little bit confused by the fractal layers and the function spheres. It will be a good teaching tool if it is with a thoughtful designed teaching plan, otherwise the concept itself is still hide below the table yet the playing experience is satisfying.<\/p>\n<p>Jiawen regards this as her favorite. This shows the CS concept clearly. And it is simple and elegant. Now it is more like a tool for kids to play and explore. However, if we have well designed levels for players to try, explore and accomplish. It could directly become a lesson for teachers to use. If we have more time, we can even add other operations on shapes, so that it would be able to show all the beauty about recursion.<\/p>\n<h2><a href=\"https:\/\/github.com\/taobingxue\/Prototype_FractalMagic\"><span style=\"font-weight: 400;\">Click Here to Get to the Code and Try It Out Yourself<\/span><\/a><\/h2>\n<p><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-212 aligncenter\" src=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/IMG_20170228_154813149_HDR-1-300x138.jpg\" alt=\"\" width=\"552\" height=\"254\" srcset=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/IMG_20170228_154813149_HDR-1-300x138.jpg 300w, https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/IMG_20170228_154813149_HDR-1-768x354.jpg 768w, https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/IMG_20170228_154813149_HDR-1-1024x472.jpg 1024w\" sizes=\"(max-width: 552px) 100vw, 552px\" \/><\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Further Reading<\/span><\/h2>\n<p>To learn more about this prototype and its development, check out the following blog posts:<\/p>\n<ol>\n<li><a href=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/2017\/02\/17\/week-5-quarters\/\">Week 5 &#8211; Design<\/a><\/li>\n<li><a href=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/2017\/02\/25\/week-6-wrapping-up-solar-system-and-fractal-magic\/\">Week 6 &#8211; Development<\/a><\/li>\n<li><a href=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/2017\/03\/03\/week-7-of-factories-and-flags\/\">Week 7<\/a><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-213 size-large\" src=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/IMG_20170228_155349667_HDR-1-1024x576.jpg\" width=\"1024\" height=\"576\" srcset=\"https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/IMG_20170228_155349667_HDR-1-1024x576.jpg 1024w, https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/IMG_20170228_155349667_HDR-1-300x169.jpg 300w, https:\/\/projects-old.etc.cmu.edu\/wonderland\/wp-content\/uploads\/2017\/02\/IMG_20170228_155349667_HDR-1-768x432.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/> <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use the magic of functions to create beautiful, intricate shapes in space!<\/p>\n","protected":false},"author":1,"featured_media":210,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"pgc_meta":"","footnotes":""},"categories":[4],"tags":[],"class_list":["post-196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-prototypes"],"_links":{"self":[{"href":"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/wp-json\/wp\/v2\/posts\/196"}],"collection":[{"href":"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/wp-json\/wp\/v2\/comments?post=196"}],"version-history":[{"count":17,"href":"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/wp-json\/wp\/v2\/posts\/196\/revisions"}],"predecessor-version":[{"id":538,"href":"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/wp-json\/wp\/v2\/posts\/196\/revisions\/538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/wp-json\/wp\/v2\/media\/210"}],"wp:attachment":[{"href":"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/wp-json\/wp\/v2\/media?parent=196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/wp-json\/wp\/v2\/categories?post=196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projects-old.etc.cmu.edu\/wonderland\/index.php\/wp-json\/wp\/v2\/tags?post=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}