Part II

1) Process: Design and Composition

Coding the warawara for this project was my first idea from the beginning, and the one that I stuck with, as I was struck by the themes explored by the film after watching it last year. I felt that the complex themes, and how the warawara embody many of them, lended well to the goal of this project. 

I first started by brainstorming what visuals I wanted to include (narrative, appearance, movement sections) and their accompanying themes or messages (symbolism/themes to convey and “warawara” sections). See the notes below: 

I recapped the narrative of the film from what I can remember, and aided that with looking up the plot and details about the warawara specifically online. I identified some key points that the project brief asked us to develop:

• habitat: the Sea World (the dreamlike world)
• what it eats: fish guts
• predators: pelicans
• appearance and movement: cute blob-like spirits with smiling faces. they can walk, run, tumble, and float. they tend to move together in masses.
• its story: as mentioned, the warawara desire to leave the Sea World and be born as humans. they accomplish this by eating fish guts, which allows them to mature. once they mature, they fly up into the sky to leave their world. on the way, they are pursued by Pelicans. another character that resides in the Sea World, Lady Himi, shoots fireworks at these birds to ward them off and prevent them from eating the warawara. if successful, the warawara fly away.

I felt that there was a lot of nuance (in the themes of the film and presence of the warawara) I could work with, but these also presented challenges in successfully conveying them. After identifying the narrative, I was easily able to identify the steps/stages I wanted to include in the sketch. From there, I was able  to start thinking about user interaction I wanted to create and how the sketch would transition between these stages. See the below notes:

 

One of the first interactions with the warawara in the film is feeding them fish guts. I thought I could use mouse pressed or key pressed for this. Once they eat enough fish guts, they’ll mature and fly. Carrot helped me set up y–  as the function for this. You can then see in my notes that I considered incorporating the pelicans in the sketch (most likely indirectly). I wrote down 3 possible scenarios, that resulted in  the warawara flying out of frame, being pursued by pelicans (but the user could generate fireworks to scare them away), or fly off successfully. As for the general animation and generative motion independent of user interaction, I thought about the sky changing color, the number of warawara that generate on RUN, and their design.

Below was the fun step of drawing the warawara out as a reference!

One of the squares is dedicated to their facial expressions, one to their movement on the ground, and one to the way they stick together. I also drew out the potential stages: what they look like when standing, floating, etc.

 

moving to p5

Instructor+Fellow Help

To help me get started, Prof. Moon provided me with two basic templates to build off of. One is this shape template. 

This template provided the structure for drawing the primitive shape, and includes console.log under the mousePressed function to detect where the mouse is pressed. The second thing he helped provide as a resource was an edited version of a primitive smiley face I coded at the start of the semester here. This used the map function as an example of interactivity I could try.

Carrot also helped provide the basic structure for the key movement I needed to code using y– and declaring variables: the warawara floating/flying. Here is an earlier version.

Coding Basic Sketches

Next, I started coding sketches of the 3 “forms” of the warawara I wanted to have: standing position, inflated position, and flying position.

Creating the background

Afterwards, I created the background.

I decided to make the background a blue gradient night sky with grass and flickering fireflies.

 

Adding generative motion

Something I tested out to make the warawara more visually interesting and dynamic was using what I learned in mini project 3 and adding noise to the bottom of the warawara, giving it more of a ghostlike/blob shape rather than an egg shape. It worked here, but didn’t look as fluid as I hoped, so I didn’t end up using it in the final version.

 

Bringing it together

Here’s the first attempt to combine the motion Carrot demonstrated to me with the background

 

And here is the process step by step!

Stand to fly:

 Stand to inflate:

Final version:

In the final version, when click on the warawara once, you can feed it the fish guts next to it, causing it to inflate. if you click on it one more time (feed it again), it will fly!

 

Technical process on next page –>