NOC | W1 – Sharingan 👁️

• Working Process

• Inspiration：

Change of the idea:

At first, I intended to create a blooming lotus flower in the center of the water. However, after completing the petals of the lotus, I accidentally discovered that the image in front of me reminded me of the eyes of a clan in a Japanese anime that I loved watching in my childhood—the Sharingan of the Uchiha clan in Naruto.

 

[Sharingan in Naruto, Masashi Kishimoto]

About Sharingan:

1. Origin: The Sharingan originated from the Uchiha clan, evolving into different forms and powers within the clan.
2. Evolution Stages: The Sharingan has different evolutionary stages. Initially, it starts with three pupils, evolving into forms with more pupils, such as the Three-Tomoe Sharingan and Mangekyō Sharingan. The darker and deeper the inner darkness, the more powerful the eye abilities become.
3. Abilities: The Sharingan possesses powerful vision and analytical abilities. It can perceive and understand the movements of opponents, even seeing through genjutsu (illusion techniques) and ninjutsu (ninja techniques). Some advanced forms of the Sharingan also have potent offensive and genjutsu abilities.
4. Copying Skills: The Sharingan can copy and learn the techniques of other ninjas, making it a formidable weapon in battle.
5. Consumption: Using the abilities of the Sharingan puts a certain strain on the user’s body, especially when using higher-level forms and powers.

In conclusion, this is an ability that is both powerful and requires immense pain and cost.

What I wanted to make:

The Chinese name for the Sharingan is “写轮眼,” where the middle character is related to “轮胎” (tire). This gives people a sense of constant rotation and change. There are many different patterns, and I can’t display them all in one image. Therefore, I’ve decided to combine various forms of the Sharingan from the Uchiha clan. Additionally, besides showcasing the different patterns, I aim to portray the dark, powerful, and coexisting atmosphere of pain within the Sharingan in my work.

• Experiments

In the initial code for creating a lotus flower, I utilized the code from the classroom exercise, such as console.log(“vertex(” + mouseX + “,” + mouseY + “);”), to outline the general shape of a lotus petal. Subsequently, in my own code, I used the curveVertex function to depict the petal’s pattern, giving it a relatively smooth appearance. Once I decided to create the Sharingan, I attempted to modify the colors of the previous image. I also employed the rotate and scale functions to introduce variations in size and position to the graphics.

The image already exhibits some dynamism and a gloomy atmosphere, but it doesn’t quite resemble an eye yet. In the following steps, I refined the image step by step, overlaying the buffs associated with the Sharingan.

• How the “eye” got developed

I began by mimicking the Mangekyō Sharingan from Sasuke Uchiha in his sixties. As for why I chose him, firstly, Sasuke is my childhood crush, and secondly, I believe he represents the evolution of a boy into a man and the progression of the Sharingan within the Uchiha clan. His family suffered a tragic massacre, and he later killed his older brother due to misunderstanding and hatred. Therefore, his eyes reflect the transformation from a clear-eyed youth to a somber individual as he grows older. This Sharingan was gained after he killed his brother and knew the truth of his family’s tragic massacre. It was activated with the help of his brother.

[How Sasuke gained the Mangekyō Sharingan, Masashi Kishimoto]

I began by setting the background color to black and used translate(width/2, height/2) to center all the drawn elements relative to the center of the canvas. Then, I transformed the shape of the central pattern, using curveVertex, to resemble the design of the Mangekyō Sharingan. The subsequent use of rotate and angle functions allowed for continuous dynamic changes.

Next, I created a solid black circle in the center of the canvas. Following that, I used point, rotate, and angle functions (different from the previous angle as I needed points to form lines) to construct the outer border of the pupil (in red) and the part of the eye outside the pupil. I intentionally created intersections between them to evoke a sense of a rolling wheel in motion.

In this way, I achieved a representation of the Mangekyō Sharingan that closely resembles the original artwork.

However, to add more variety to the Sharingan, I used curveVertex to create the individual tomoe (comma shapes) of the Sharingan. This process was a bit challenging, as I couldn’t find a more efficient way to achieve the desired effect. I then rotated and duplicated them into six parts. You might have noticed in my code that I used /pattern1/scale/pattern2/, and the first pattern is not visible. This is intentional because I felt the first pattern was too large. Rather than manually adjusting each pattern’s coordinates, I opted to use the scale function to make them smaller and closer to the center of the pupil.

[There are 3 tomoes in the picture above (from Naruto, Mangekyō Sharingan). I have 12 in my work.]

Up to this point, the basic shape elements have been added. To enhance the interactivity and variability of the Sharingan, I made several additional adjustments:

1. Utilized constrain and scale functions to allow the kaleidoscope to expand and contract based on mouseX. Used the map function to adjust the transparency of the kaleidoscope based on the movement of mouseX.
2. Added a rotating white line outside the central black circle to provide clarity to the individual tomoe and kaleidoscope and to enhance dynamism and variation.
3. For the color of the area around the pupil, I used the random function and continuously increased a variable ‘e’. This was placed into the random function to achieve a transition from a pale blue color close to pure white, gradually deepening to black. （The choice of blue is because I feel it imparts a melancholic atmosphere. Sasuke often wore dark blue clothes in his childhood, and in my perception, he embodies a melancholic character. As for the transition from white to black, I believe it reflects the journey of a clear and innocent youth growing up, progressively discovering harsh truths, and undergoing the process of harvesting pain and shouldering responsibilities—a parallel to the essence of the Sharingan itself.）
4. The transparency of the individual tomoe decreased with the increase of ‘e’.
5. Used the lerp function to create red dots forming a line around the eyeball as the mouse moved. This was done to enhance interactivity—it could represent life’s trajectory, a maze, or even blood vessels in the eye.

• Finished Work

• Video (Turn on the volume!)
  

  
  
  

• Photos

 

• Reflections/Lessons Learned

About coding skills: As I mentioned in the self-introduction during the first class, I am not really proficient in coding. So, through this exercise, I attempted to understand the functionalities of some functions. For instance, I had never heard of or used lerp before (or maybe I forgot), but through learning in the class and checking on the p5.js website, I learned how to use these functions. Another significant takeaway was discovering the utility of console.log(“vertex(” + mouseX + “,” + mouseY + “);”). I had never thought about using it this way to conveniently create graphics. My use of curveVertex became relatively proficient through this exercise, from initially not knowing how to use it at all.

About the work itself: It truly was a refreshing journey down memory lane from my childhood! I didn’t use many colors in it, but later on, I realized that the Sharingan actually has other colors, although they are rare. If there were further development, I think I would use some conditional statements to change their colors under specific circumstances.

• Link to the Sketch (Click it!)