Week 3: Imaginary Creature

Imaginary Creature

Link to my Sketch: https://www.openprocessing.org/sketch/1115201

Demo

 

Coding

 

Fabrication

Sketches of the fish

Failure and Success

1. Replicating the wave

         At first, I attempt to replicate and translate the sin wave using translate():

        But no matter how I change the max value of i, there are only two waves so I cannot replicate 4 waves using translate(). 

        I decided to switch the method by passing a variable to the renderWave function so that I can translate the wave vertically the moment it is replicated. This method turned out to be successful. But I haven’t figure out why I cannot use translate() to replicate and translate the graphic.

 

2. Controlling the frequency of sin() while replicating patterns

        I followed the example codes on p5js.org and utilized sin() and cos() to create and transform shapes and patterns. However, I found every time I replicate the patterns created using sin(), the phase velocity increases. 

         I met the same problem when replicating the fish pattern, which also contains sin(). I decrease the value of increment variables “theta” and “angle” to decrease the overall angular velocity and succeed. But I haven’t figured out why the replication increases the velocity.

3. Scaling and rotating the replicated fish

        After scaling the replicated fish, the translate function works strangely as I cannot position the fish at the transited point. It seems that the scale function affects the translate function. But I haven’t figure out a way to eliminate such influences. So I manually adjust the positions.

4. Creating bubbles for mouse interaction

        I intended to let the fish bubble once the mouse is clicked. I wanted to use the map function to make the bubbles float upward and disappear at some point. However, when creating the mouse interaction, I found that the created bubbles cannot disappear as I used a for loop and didn’t draw the background every time it looped. However, when I put the drawBackground() in the for loop, it causes troubles for other functions and the translate() messed up the background’s position. 

        I then switch to adjust fill() opacity in the for loop. But I failed again as the bubbles are not animated. 

5. Create patterns on the fish’s body

        I created several curves to draw patterns on the fish, but found it hard to animate them according to the breathing movements. And it’s also exhausting to adjust the point position. 

        Due to the time limit, I commented them…

Help Credits

1. Creating the waves using sin(): https://p5js.org/examples/math-sine-wave.html
2. Synchronizing the movements of eyes, tail and fins with the movements of fish body using sin() and cos(): https://p5js.org/examples/math-sine-cosine.html
3.  Making the body movements using sin(): https://p5js.org/examples/math-sine.html

 

Reflection

1. What is the effectiveness of utilizing translate() in your code?

• It spares me from repetitive and complicated calculations of positions, which helps a lot in composing multiple figures. 
• It enables me to arrange the replicated graphics more efficiently

2. What differences do you find between drawing with a common tool and programming the computer to draw for you?

        The traditional tools such as pencils or digital painters are easy to pick up and I can draw down immediately anything in my mind without thinking hard. However, proficient hand drawing (that produces clean, smooth, and accurate lines) requires a large number of practices. In comparison, drawing with computer programming is hard to pick up because we have to group, transit, and transform the basic shapes to form the ideal graphic we want, using languages that are highly logical and abstract. However, once we get familiar with the language and thinking mode, we can generate perfect, accurate, and complicated graphics with way less time and effort than hand drawing. In animation, computer programming saves a lot of repetitive works that exhaust me in frame-by-frame animation. 

3. Are you able to identify processes in your own drawing that are changed radically because of using p5.js (JavaScript)?

        Before using p5.js, I always sketch the strokes first and then fill in colors. I tend to focus on details and ruin up the overall image. Now I start to use simple geometric shapes to compose and organize my drawings and try to build up my characters with color blocks. This makes the overall look of my painting much better than before.

4. Do you think that the tools that you have used for those processes will change over time? How do you imagine them to be in the future?

        I think traditional tools such as pencils and brushes will be more and more digitized and integrated into the computers (e.g. apple pencils and drawing/animation software). They will be combined with computer programming, maximizing the advantages of both tools and benefiting the future generations in art creation.

 

Future Attempts

1. Try using arrays to store the bubbles and change their opacity throughout the time and delete them once the opacity decreases to 0. Or figure out other ways to create bubbles animation.
2.  Try adding patterns to the fish’s body and animating them according to the breathing movements. I also want to try sin() for pattern creation.