Prototype: Cute Fractal

Core Concept

This prototype is intended to teach Function Chaining and Recursion.

Why?

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  for students to understand (based on a survey of 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 that this prototype can clarify the order of execution when functions are chained together recursively.

The Pitch

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.

The Actual Experience


In terms of computer science, the player will generate fractal shapes by chaining 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 “magic” to generate the fractal shape he wants.

Key Interactions

  • 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.
  • 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.

Key Lessons

  • Learn the concept of recursion by creating a recursive function that generates shapes layer by layer recursively.
  • Learn the order of execution by playing with the order of shapes put onto the sphere functions.

Step-by-step Walkthrough Guide

Our team believes people can gain 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.

Demo Video

Team Goals

Week 1

  • Finalize the design and finish the basic fractal generating algorithm. Find out if it’s even possible to build this.

Week 2

  • Playtest and iterate the designs. Improve the fractal generating algorithm. Find out if generating fractals can actually teach people about function chaining and recursion.

Lessons Learned

Usability

  • Our programmer found that both Oculus touch controllers must be used together, otherwise neither of them will work.
  • 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.

Teaching

  • The idea of recursion translates well in this experience.
  • 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.
  • 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.

Role in a Lesson

This experience could be used as a way of introducing recursion if it were played at the beginning of a lesson.

  • The magic circle represents the main function
  • The spheres correspond to functions
  • The shapes(Triangular pyramid and cube) correspond to commands.

This experience could be used in companion with the code snippet provided below, which in essence represents the interactions in the game.

Sequential:
1.
void main() {
newLayer(triangle);
}

2.
void main() {
newLayer(triangle);
newLayer(cube);
}

Recursive:
1.
void blue() {
newLayer(triangle);
blue();
}
void main() {
blue();
}

2.
void orange() {
newLayer(triangle);
newLayer(cube);
}
void blue() {
orange();
blue();
}
void main() {
blue();
}

Ideas for Future Development

  • We would add more option for colors, size of shapes, and possibly different shapes, so that players can create a variety of fractals.
  • 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.
  • It would be good to find a way to further differentiate the functions from the commands (the colored spheres from the white shapes).

Teacher Reactions

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.

Student Reactions

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.

Thoughts From the Team

Zach thinks that the cute fractal is a good prototype. The players were able to understand the basic recursion computer science concept by generating fractals with customly “cooked” 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.

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.

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.

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’d hoped for.

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.

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.

Click Here to Get to the Code and Try It Out Yourself

Further Reading

To learn more about this prototype and its development, check out the following blog posts:

  1. Week 5 – Design
  2. Week 6 – Development
  3. Week 7