Nature of Code – Particles Systems

The web Fire Bird

For this assignment, I’ve started creating a web version for the Fire Bird mythology, that I’ve been working on since last semester. I want to find an interesting and compelling way of telling the story in the web-browser using text, visual effects, and simple interactivity. I’m creating this as an experimental art piece for the browser, but it can also be seen as a first step towards designing a game based on this character’s story. Find the code here.

The Triangles represent fire seeds that are thrown by the Fire Bird

The story of the Fire Bird is based on recent environmental disasters caused by fires in the Amazon Rainforest and has three movements: the Fire Bird flies away from home because their house was put on fire by someone who couldn’t understand the way the Fire Bird was living; the Fire Bird flies to the city, alone, carrying a fire seed inside their belly and finds a place to sleep; the Fire Bird dreams for so long, that the invisible seed that was inside of their belly grows and turns into a tree. For this sketch, I’m focusing on the part of the narrative in which they fly away from home to the city.

The Fire Bird is moved by the mouse position in the canvas

The code has an image that moves and changes its direction according to the mouse position (the cursor is hidden by the function “noCursor();”) using a “Vehicle Class“. When you click the mouse, a rotating triangle flies away from the center of the image and is affected by a gravity force until it disappears after the bottom of the canvas. The “PartycleSystem” class is being used to push a new particle into an empty array (particles) and remove it after the particle is “dead” as well as applying the force to all particles. The death is caused by a lifespan variable inside the class Particle, which acts as a countdown timer. It has an initial value and when it becomes 0, the particle is dead. Another important point to remember is that I’m connecting the position of the image and the position from where the triangles are thrown with the sentence: “system.addParticle(v.position.x, v.position.y);”. The “addParticle” function is inside the “SystemParticles” class, and its “x” and “y” variables are connected to the position vector of the constructor of the Particle class, which itself is being affected by the vehicle class.

The next step is creating the landscape for the sketch and finding an interesting design to write the story of the Fire Bird as part of it. I’ve been thinking about drawing the landscape with moving text…I have started to try a different behavior fot the seed when it heats the ground (which has to be created) in this code.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: