Final Project

Working with Alina Liu


Alina and I both love Japanese animation, and all the magical things. Getting inspiration from Card Captor Sakura, we planned to build a magic circle generator. User input their birthday, and the generator will create a unique magic circle for him or her.

We found some p5 reference about how to create a generator and try to under the logic of this interaction.

As for the visual effect, we want to create something sparkling and glowing (like the magic effect in animations), we also want to combine 2D patterns with 3D effect, so we might use WEBGL as well.

Our ambition is to create something as cool as this!


The first thing that Alina and I did is to discuss the basic structure of this project, we divided it into three part: the first part in the input device, the second part is the magic circle patterns, the third part is the rotating magic stone.

For the first part, Alina and I planned to use the input box, to let users type in their birthday. However, Ellen suggested us to use selector, which is a much better way. (Thanks Ellen!)


For the second part, we wanted the kinds of magic circle can be as much as possible. After studying the reference, we thought that we can use the values of “Month” to control the basic patterns and the shapes of magic stones, then use the values of “Day” to change details in the patterns.


For the third part, we got inspiration form the coding train tutorials about WEBGL, we create some magic stone’s obj files using Rhino, then upload them into our sketch. By changing the light (directionalLight) and material(specularMaterial), we create blinking magic stones successfully! Each moth has its own magic stone. The colors of stones are also related to the months.

Now the sketch is looking like this.⬇️

We planning to solve the following problems for the week14:


1. Divide the code into parts (the code is too long for us to find the part we need efficiently).👌

2. Add saveCanvas() function.👌

3. Achieve the function of entering full screen by clicking on the canvas.👌

4. Achieve the details changes controlled by “Day”.👌

5. Make the patterns shine like neon light.☹️

6. Add sounds.👌

7. Make entry page, fonts, mouse and other visual elements prettier.👌

8. Improve the interaction process.☹️