ICM final

Ideation:

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

We found some p5 references 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 effects, so we might use WebGL as well.

https://editor.p5js.org/ThKaspar/sketches/SyWHzMH_m

https://editor.p5js.org/ThKaspar/sketches/SyWHzMH_m

Our ambition is to create something as cool as this!

Progress:

The first thing that Alina and I did is to discuss the basic structure of this project, we divided it into three parts: the first part is 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 we use a selector, which is a much better way. (Thanks Ellen!)

For the second part, we wanted the kinds of magic circles 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 from 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(specular material), we create blinking magic stones successfully! Each month has its own magic stone. The colors of stones are also related to the months.

Based on this we did the following work:

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 the full screen by clicking on the canvas.

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

5. Add sounds.

6. Make the entry page, fonts, mouse, and other visual elements prettier.

And what we planned to achieve but didn't work:

1. Make the patterns shine like a neon light.

2. Improve the interaction process.

Come on and test!⬇️

code:

https://editor.p5js.org/jm8988/sketches/D92BoWdGw

full-screen experience:

https://editor.p5js.org/jm8988/full/D92BoWdGw