Junhao Zhu, Magnemite.

P5JS Code for Magnemite.

Here is a demo for this project:

Magnemite-DEMO.mov

DESCRIPTION

Magnemite is a newly-found creature living in energy-rich Dark-Energy Voids. They exhibit a tendency of staying in a unified form and appear most active against a dark environment.

ABSTRACT

Discovered by accident in 2033 during the 'VoidSim' project, Magnemite is a peculiar, energy-based virtual lifeform that exhibits a strong tendency for mutual attraction from the moment of its creation. Conceptually, it is designed as an 'organic magnet,' with its energy-based nature visually manifested through electrical, lightning-like arcs. Furthermore, this organism is defined by its capacity for continuous evolution.

You are an intern at VoidSim Lab. Today is a big day at the lab because a new creature has been found. You are super excited because you have the opportunity to learn about its characteristics. Your primary task is to guide and observe how Magnemite adapts and changes in the 'VoidSim' container.

Magnemite Charging

Magnemite Shrinking

Magnemite Decouples

Design and Composition

In this part, I will demonstrate how I design this project from two aspects: Appearance and Interaction Design.

Appearance:

My initial design for the virtual creature is to build a kind of creature that follows the trajectory or guidance of winds or a certain kind of shapeless field. To implement this, I have been studying a tutorial on building Perlin Noise Flow Fields.

Based on the code sample from the tutorial, I modified the color of the particles to represent different variants of the creature, as well as the implementation of adding the noise to change the direction and movement of the creature.

Perlin Noise Flow Fields

My Early Idea

Unown

However, after I discussed this idea with Professor Gottfried Haider, I figured out this early sketch of a virtual creature seemed to be a little bit too abstract, since each individual lacks a specific shape and is only composed of points. I then attempted to design a creature with a more defined form, seeking to integrate it with the concept of a flow field. The first appropriate flow field that came to my mind was the magnetic field.

Building upon the idea of the magnetic field, I thought one great concept for the creature that could fit in was the magnet. The two polarities, typically represented by red and blue, could serve as the two variants of the creature. For the main body of the creature, I was inspired by Unown from Pokemon, since its minimal appearance is cute yet catchy. Also, a sketch of a moving pupil from class helped me decide that the overall appearance of this creature could be a combination of half of a magnet and an actual living thing, with a pupil being an optimal feature to add.

Below are the three variants (Positive, Negative, Neutral) that I designed after I finalized my design.

Positive

Negative

Neutral

Interaction Design:

Since I hope to turn this virtual creature into an 'organic magnet', it should follow some rules of the magnetic field in the real world. The most important rule of the magnetic field is that opposite polarities attract. To adapt this rule for my project, I interpret it as one characteristic of Magnemit: a tendency to attract each other and live in a unified form.

My first interaction design aims to emphasize this characteristic. At the beginning of the interaction, the user will be able to click on two spaces on the canvas, serving as the two spawn points for positive and negative Magnemites. The user will then witness how the two creatures attract each other. The user will then witness how the two creatures attract to each other. Before the interaction day, the creatures attracted each other only at a constant speed. To add some reality, I introduced acceleration to make the attracting movement more vivid and dynamic.

Another concept that is strongly related to the magnetic field is the electricity. After finding this cool lightning strike effect, I thought it could be a good idea to generate lightning bursts from around its body. This lightning burst can also have a mechanism that allows it to change intensity, either growing stronger or weaker. This mechanism can be triggered when the creature absorbs something on the canvas. This change in intensity can then be visually indicated on the creature's body. Below includes a demo that I recorded when testing how the creature grows bigger when absorbing the red dots on the canvas.

In my initial design, the attracting movement was only triggered at the beginning and never appeared for a second time. To fix this issue, I introduced a new red spark on the canvas so that when the unified creature absorbs it, the creature will lose all its energy and decouple.

Project A Movement Demo.mov

Movement Demo

Lightning Strike Effect

Technical

Creature Appearance

On the left side is the code snippet that is used for drawing an isolated creature at any given coordinate (x,y). I divided the creature into several parts: body, eye, and pupil, each being drawn by a specific, correspondingly-named function.

Then, one of the challenging parts was how to represent the unified creature, since the two individuals needed to face each other before unifying. That's I introduced the rotate(creatureAngle) and explicitly save pupilOffsetX and PupilOffsetY.

On the left is how the unified state is drawn. The calculatePupilOffset function will return an x and y coordinate pair, indicating how much the pupil should move with respect to the position of the mouse cursor. Then the two individuals with be drawn in a mirrored method, so I tweated the passed value into finalAngle + PI, and change the pupiloffset into negative so that two pupils will move in the same direction.

Charge Management

Since I am not able to use arrays for this project, managing each charge is complicated. To solve this issue, my solution is to set the coordinates for 5 charges, each of which will be drawn by the drawSingleCharge function. If a charge is not absorbed, its coordinates are not changed, so the charges appear to be static, but in reality, the drawing function keeps drawing them continuously. Once the charge is absorbed by the creature, its coordinates are changed, and the charge is teleported to a new place.

Whether a charge has been absorbed is determined by regularly checking the distance between the body of the creature and the saved coordinates of every charge. Once this distance is smaller than a set threshold, it will trigger a raise in the creature's power level as well as a random function to set a new coordinate.

The power level is a variable that I added for the lightning effect. This variable controls the intensity as well as the color of the lightning strikes.

Attracting Movement

To make the attracting movement more vivid, I drew inspiration from physical principles for calculating the moving distance of a real-world object. The solution is pretty simple. I added an attractionForce so that the moving distance will be large when the distance is huge, and will gradually decrease as the distance becomes closer and closer.

Reflection and Future Development

My idea has actually evolved a lot compared to the initial abstract design based on a flow field. After my discussion with dear Professor Gohai, I decided to keep the context of the field, replace the creature with a more concrete appearance, and think about the storytelling aspect for this creature.

My revised version included several new rules, such as Magnemites randomly changing into a different variant once they attract each other or absorb the charge, and following the trajectory of lightning strikes produced by others. However, adding so many rules proved to be overwhelming during interaction, preventing users from grasping the key features of the creature within a short time. Therefore, I tried to limit the rules to those that best fit my storytelling.

As for the result that I have achieved, I am satisfied with the appearance of my creature as it is minimal and cute. The lightning strike around its body, the aura, as well as the arcs within its eyes are all super cool. Also, I enjoyed dragging it around the container to see how it evolved while absorbing the charges inside.

During Interaction Day and the final presentation, I have received following feedbacks that are useful to further polish my project:

The generated lightning strikes can have some interactions with the background. Ideally, the background would change to something different, as the current one is plain.
Consider the decoupling process. When a unified creature splits into two individuals, the user can control one of them, try to gain back some energy, and then attract the other individual back.
In the current setting, when the creature absorbs enough number of charges to reach max power level, it will stop evolving. I could change its core behavior. Instead of just evolving, maybe at max power it stops absorbing charges and instead starts generating them, or it begins to actively seek out its counterpart to unify.

Reference:

The lightning strike effects is inspired by: https://editor.p5js.org/karnagetm/sketches/FboCkYJBG
The appearance of Magnemite is inspired by Unown from Pokemon.
Moving pupil Sketch from Professor Gottfried Haider.
Perlin Noise Flow Field Tutorial is from: https://www.youtube.com/watch?v=sZBfLgfsvSk
Code Sample: https://editor.p5js.org/BarneyCodes/sketches/2eES4fBEL

Page updated

Report abuse