Close

studio ponnuki is a small creative studio hidden in the beautiful mountains of the kootenays

gef_round
geoffroy

Designer / Hacker / Maker

Loves green tea, meditation and noise

melina_round
melina

Photo / Fashion / Accounting

In house yoga teacher and Thais massage, run http://yinyogi.com

naome_round
naima

Drawing / Dirt Pudding / Maker

Loves green tea, meditation and noise

Articles

Find Us

We are based in one of the most beautiful places on earth. Come visit us!

March 6, 2010

fish pond


EDIT: Just so people are aware I am using the excellent book Learning processing written by Daniel Shiffman, which I forgot to mention since this article is part of a series of article about my self taught Processing training. END OF EDIT ~

This is my second project for processing fish pond. It’s not a game or anything, more an interactive pond where you control a fish that grows every time it eats food.

It’s mainly to practice object oriented programming with arrays and arrays of objects. With some random rain drop, I also practice with the rotate and translate function. Understanding that when using translate, your 0,0 coordinate becomes that translate. In order to draw a X and rotate it from it’s centre, you need to use negative value.

int r = 0;
void draw(){
translate(100,100);
line(-10,-10,10,10);
line(-10,10,10,-10);
rotate(radians(r));
r = r++;
}

Would create a X shape that rotate from it’s centre. The radians is used in order not to have to ply around with PI which is the default for the rotate function. I also used the % modulo to try to add some visual to the rotating X. The modulo is what remain after dividing a number by another number. So 10 % 3 is 1, and 9 % 3 is 0. It’s an interesting function to be able to create pulsing images.

In my last project blood in order to calculate if the mouse was on top of the first drop of blood I used a simple if mouseX to check if the mouse was over the drop. This time I used the dist function that calculate the distance between object. That created a cleaner code to verify if the fish was near enough of the food.

There is no goal to the game, simply to eat the food and grow the fish 😉 I guess my next project will combine a goal as well as an interactive part… stay tune!

  • Pratik Sathaye

    Hey 

    Really nice projectI want to use your fish sprite only.
    the part is I get upto tail of fish
    but how can I get the head side part !!I m confused cause  in Fish class you just used a single ellipse which is drawing the tail.
    but what about head part.
    can you please help me
    thnks

    • Anonymous

      Well the code is :

      for (int i =0;i < xpos.length; i++)
      {
      noStroke();
      fill(255-i*7,0,0,200);
      ellipse(xpos[i],ypos[i],((xpos.length)/3)-i,((xpos.length)/2)-i);
      }

      So you loop trough the xpos.lenght which is a variable that grow each time the fish eats. So the number of ellipse increment, as well as it's size.

      The magic happens with the ellipse line

      ellipse(xpos[i],ypos[i],((xpos.length)/3)-i,((xpos.length)/2)-i);

      Where you go trough the array and create these ellipse.

      The head color is also different because of the fill – that changes throughout the loop trough the array.

      Does this help ?