Uncategorized

Class 2: Fishes

FIshes was inspired by the childhood memory of feeding the golden fish. (When I wasn’t allowed to have a cat.)

Original idea was to let the fishes move left to right slowly and when click, all the fishes would gather around to the click point slowly. I tried the first part, it was not hard to achieve. However, I am still finding the solution to the second.

If it is going to swim around slowly from left to right, that mean it use some function that runs constantly, like function draw(); if there will be also another function to do constantly after mousePressed(); and the former draw(); function has to stop. I currently don’t know how to achieve that yet.

I made a little compromise on the function, in order to fit all the requirements from the assignment, which are

  • One element controlled by the mouse.  (small fish running around the mouse,big fish’s eye following around the mouse)
  • One element that changes over time, independently of the mouse. (big fish swimming independently)
  • One element that is different every time you run the sketch. (something use the function random(); ) [???not really sure about this one]

Colors were inspired from pictures I got online, and also Finding Nemo, yeah!!

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-19-17-59-43

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-18-22-49-44

 

*BIG FISH*

I started with trying the function using simple ellipse to represent the shape of fish, here is the big fish I code after reading chapter 8  Motion from Getting Started with  P5.js.

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-18-23-09-52

character design:

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-19-22-16-39

I also struggle a bit when using curve, and it went out well. As for the tail part, I used a circle and a triangle that cut in the middle and the same color as the background, my original idea was to use rotated circles to form a heart shape, but… I decided to leave that rotate part for later and gave myself a rest after the headache of coding all day ; )

*SMALL FISH*

I did got inspired from the book Getting Started with  P5.js Example 5-13 when coding the small fish,  I spent sometime on figuring out each line of the code, and it paid off.

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-19-22-16-28

I really love the blush on the small fish’s face, it really added the character. I used arc for the tail and made the arc’s radius and degree a little to make it looks like really swimming!!

*THE REST*

I added three floating bubbles to the background they will pop up again from the button when arrive the top.

Leave a Reply

Your email address will not be published. Required fields are marked *