2) Process: Technical 

I will describe the coding process here, technical challenges, and solutions I found/compromises I had to make.

Basic Sketches

Here are the links to the sketches I made of the different versions of warawara: one, two, three, four, five, six. Each sketch is a slight variant of each other.

The body is made up of one ellipse, and the feet and arms of ellipses or curveVertex shapes. These were fun to code, although maybe kind of unecessary/wasteful of time, as I had to essentially redraw them in order to scale them down to place on the final sketch. The only sketch I really had an issue with was the one where I used noise at the bottom of the warawara’s body. This was more of an issue of positioning to make it look natural. Here’s the code.

 

Background Sketch

For the background, I created 3 new functions: gradient, fireflies, and ground. I’ll break them down here.

Function gradient uses the topColor and bottomColor I declared before and under setup. It creates a static gradient, with darker blue on the top and lighter blue on the bottom.

Reflection: I could’ve used two colors with greater differences in value, as the gradient is pretty subtle.

Function fireflies uses frameCount to randomly generate yellow ellipses across the canvas

Reflection: I think I would increase the rate of fireflies that are generated at once and the speed at which they do so, as they are kind of sparse.

 

Function ground uses noise, which I positioned at the bottom of the canvas. I changed the amplitude to make it look more like grass.

Coding the Motion

Referring back to the structure Carrot helped me code, I met with her to discuss how I can manipulate the entire creature (a combination of different shapes and other components), and not just the single circle that she used to first demonstrate the movement. 

She helped explain that I can create a separate function for the creature itself, and use xpos and ypos, push and pop, and translate it’s position.

X and Y must be declared before setup, and the creature is called under draw.

 

Starting to build the final sketch

Here is the stand to fly video again! 

Again, I had to redraw the warawara for the final sketch. A major issue I had was something I carried over from the earlier larger sketches I made: keeping the origin and code consistent.

Take a look at the code for my earlier sketches, particularly the coordinates:

I only placed the body (ellipse) within push and pop, so it was translated. All the other components that were coded after not translated. Compare it to the code for the final version:

This was honestly a huge hump I had to get over when it came to redrawing the warawara, as I had caused myself unnecessary confusion my not keeping the origin of the canvases consistent. I had to create a guide for myself to get used to the different values and directions in drawing, as you can see below.

 

Final Version

Here are all the variables declared at the start of my code. Take note of stand and inflate. These are two forms of the warawara- the other is the creature.

 

stand is the first form of the warawara you see when you run the sketch. here is part of the code for this.

 

next to the warawara when it’s standing are the fish guts when you click on the warawara once, you feed it, causing it to inflate. here’s how it’s controlled:

the inflated warawara is its own function:

here’s the code for the fish guts, which was an image of a Procreate doodle I made and preloaded.

 

 

 

 

 

 

 

My intention was to have that image be on the canvas after the first click (first time you feed the warawara) as well, but I think there’s an error where it disappears after you click only one time. It looks like the code is checking if the warawara is both standing AND inflated, which cannot be true.

here is where stand and inflate are declared before setup:

here is the portion of code that dictates the order in which my custom functions are executed. prof moon added the line of code following creature to slightly add more of a natural motion to the warawara when it takes flight. originally it just flew up smoothly:

and finally here Is the code for the flying warawara, which is called creature here:

and here’s the main interaction, mouse pressed. the if / else if statements check for multiple conditions. if the distance between the mouse and the creature is less than 400 pixels AND the creature is detected as standing, Go is set to true and stand is set to false, so the creature starts floating. Otherwise, the creature is inflated.