Fantastic Animated Fish 🐟 Programming by HTML

Ticker

10/recent/ticker-posts

Fantastic Animated Fish 🐟 Programming by HTML

AK Creative 12/05/2020 03:38:00 PM

Fish 🐟 Animation With HTML & CSS  🐟



<!DOCTYPE html>

<html>

    <head>

        <title>Page Title</title>

    </head>

    <body>

 <center><script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script>

     <script type="text/processing" data-processing-target="myCan">

     size(400, 500);

   var yPoz = 0;

   var xPoz = 0;

   var count = 0;

   var centerX = 0;

   var centerY;

   var bodyLength;

   var bodyHeight;

   var bodyColor;

   var eyeColor;

   var tailColor;

var drawFish = function(centerX, centerY, bodyLength, bodyHeight, bodyColor, eyeColor, tailColor, speed) {

       xPoz +=0.2;

       centerX += xPoz;

       if (xPoz >470) {

           xPoz = -280;

       }

       noStroke();

       fill(bodyColor);

    

       ellipse(centerX, centerY, bodyLength, bodyHeight);

      

       fill(tailColor);

       var tailWidth = bodyLength/4;

       var tailHeight = bodyHeight/2;

       triangle(centerX-bodyLength/2, centerY, centerX-bodyLength/2-tailWidth, centerY-tailHeight, centerX-bodyLength/2-tailWidth, centerY+tailHeight);

 

 fill(eyeColor);

 ellipse(centerX + bodyLength/4, centerY, bodyHeight/5, bodyHeight/5);

 };

   draw = function() {

       background(89, 75, 125);

      drawFish (100, 100, 100, 80, color(26, 50, 255), color(245, 58, 44), color(14, 52, 176));

     drawFish (200, 200, 100, 50, color(24, 29, 104), color(46, 41, 39), color(240, 72, 145));

       drawFish (257, 284, 90, 120, color(21, 232, 49), color(9, 95, 153), color(13, 138, 227));

       drawFish (100, 280, 100, 100, color(158, 157, 38), color(68, 255, 0), color(8, 201, 18));

       drawFish (161, 50, 118, 70, color(255, 20, 50), color(0, 255, 238), color(184, 11, 11));

      var x1;

       var y1;

     var bubble = function(x1, y1, bSize) {

         noFill();

         stroke(208, 225, 245);

         strokeWeight(1);

         yPoz += 0.14;

         y1 -= yPoz ;

         if (yPoz > 900) {

             yPoz = 0;

         }

         count++;

         ellipse(x1, y1, bSize, bSize);

     };

     bubble(167, 330, 10);

     bubble(184, 279, 15);

     bubble(167, 430, 18);

     bubble(251, 629, 13);

     bubble(308, 779, 25);

     bubble(200, 799, 38);

     bubble(59, 429, 9);

     bubble(315, 299, 30);

     bubble(36, 355, 14);

     bubble(365, 525, 20);

     noStroke();

     var stone = function(x1, y1) {

         fill(156, 130, 130);

         ellipse(x1, y1, 47, 26);

     };

   

 fill(255, 237, 99);

    rect(0, 368, 400, 152);

     stone(40, 389);

    stone(98, 378);

    stone(150, 390);

     stone(200, 371);

   stone(270, 385);

     stone(342, 380);

    var z;

     var grass = function(x1, y1, z) {

         fill(0, 143, 10);

         ellipse(x1, y1, 5, z);

     };

grass(100, 317, 199);

grass(100, 315, 199);

grass(100, 317, 145);

grass(100, 317, 199);

grass(100, 317, 156);

grass(172, 342, 180);

grass(215, 302, 232);

grass(296, 328, 260);

grass(380, 305, 174);

grass(10, 315, 240);

bezier(378, 388, 319, 101, 359, 308, 358, 202);


bubble(28, 750, 35);

bubble(48, 580, 30);

bubble(170, 680, 25);

bubble(270, 530, 40);

bubble(360, 730, 29);

bubble(297, 740, 18);

bubble(138, 470, 22);

bubble(69, 730, 16);

bubble(210, 460, 26);

bubble(249, 430, 27);

bubble(238, 370, 35);

bubble(49, 730, 38); 

   };

   </script>

     <canvas id="myCan"></canvas>

    </center></body>

</html>


OUTPUT




Post a Comment

53 Comments

  1. Unique KnowDecember 5, 2020 at 3:39 PM

    Fantastic job 👌👌👌👌👌👌

    ReplyDelete
  2. UnknownDecember 5, 2020 at 3:40 PM

    wow good animation

    ReplyDelete
  3. ArzuDecember 5, 2020 at 3:41 PM

    mast

    ReplyDelete
  4. UnknownDecember 5, 2020 at 3:42 PM

    Attractive

    ReplyDelete
  5. UnknownDecember 5, 2020 at 3:43 PM

    very nice

    ReplyDelete
  6. UnknownDecember 5, 2020 at 3:43 PM

    Great

    ReplyDelete
  7. UnknownDecember 5, 2020 at 3:44 PM

    nice work

    ReplyDelete
  8. UnknownDecember 5, 2020 at 3:44 PM

    Wowww

    ReplyDelete
  9. UnknownDecember 5, 2020 at 3:45 PM

    Wonderful

    ReplyDelete
  10. UnknownDecember 5, 2020 at 3:45 PM

    Wow wow

    ReplyDelete
  11. UnknownDecember 5, 2020 at 3:46 PM

    Amazing Guys

    ReplyDelete
  12. KritikaDecember 5, 2020 at 3:46 PM

    Nicely done Guys

    ReplyDelete
  13. UnknownDecember 5, 2020 at 3:47 PM

    Interesting

    ReplyDelete
  14. UnknownDecember 5, 2020 at 3:48 PM

    Perfect 👌 👌 👌 👌 👌 👌

    ReplyDelete
  15. UnknownDecember 5, 2020 at 3:48 PM

    Wow Amazing

    ReplyDelete
  16. KKDecember 5, 2020 at 3:49 PM

    Wow Wonderful

    ReplyDelete
  17. UnknownDecember 5, 2020 at 3:49 PM

    Nice Animated Fish

    ReplyDelete
  18. UnknownDecember 5, 2020 at 3:50 PM

    Good

    ReplyDelete
  19. UnknownDecember 5, 2020 at 3:51 PM

    Great going guys

    ReplyDelete
  20. UnknownDecember 5, 2020 at 3:51 PM

    👌 Super

    ReplyDelete
  21. UnknownDecember 5, 2020 at 3:52 PM

    👌 Superb

    ReplyDelete
  22. snehaDecember 5, 2020 at 3:52 PM

    Superb

    ReplyDelete
  23. son aDecember 5, 2020 at 3:53 PM

    Lovely

    ReplyDelete
  24. UnknownDecember 5, 2020 at 3:53 PM

    Fantastic

    ReplyDelete
  25. UnknownDecember 5, 2020 at 3:54 PM

    Fantastic 👌 👌 👌 👌 👌 👌 👌

    ReplyDelete
  26. UnknownDecember 5, 2020 at 3:55 PM

    S 👌 U 👌 P 👌 E 👌 R 👌 B

    ReplyDelete
  27. UnknownDecember 5, 2020 at 3:56 PM

    Attractive & Effective

    ReplyDelete
  28. Jaunpur GPDecember 5, 2020 at 3:58 PM

    👌 Cool

    ReplyDelete
  29. WonderingDecember 5, 2020 at 3:59 PM

    Best

    ReplyDelete
  30. Excellent workDecember 5, 2020 at 4:00 PM

    Superb Quality

    ReplyDelete
  31. AwesomeDecember 5, 2020 at 4:01 PM

    Amazing

    ReplyDelete
  32. WonderfulDecember 5, 2020 at 4:01 PM

    Fantastic Animation

    ReplyDelete
  33. Rock_ArviDecember 5, 2020 at 4:02 PM

    Good Animation

    ReplyDelete
  34. A A ADecember 5, 2020 at 4:03 PM

    Perfect 👌

    ReplyDelete
  35. ArviDecember 5, 2020 at 4:03 PM

    Good Effects

    ReplyDelete
  36. UnknownDecember 5, 2020 at 4:04 PM

    Good Job

    ReplyDelete
  37. FabulousDecember 5, 2020 at 4:04 PM

    Great Boss

    ReplyDelete
  38. MLLDecember 5, 2020 at 4:05 PM

    Awesome Guys

    ReplyDelete
  39. SuperDecember 5, 2020 at 4:06 PM

    Superb

    ReplyDelete
  40. TanviDecember 5, 2020 at 4:51 PM

    Wow amazing 😊😊😊

    ReplyDelete
  41. TanviDecember 5, 2020 at 4:52 PM

    Great job boss 😝😝😝

    ReplyDelete
  42. TanviDecember 5, 2020 at 4:54 PM

    Wonderful 😝😝😝😝

    ReplyDelete
  43. TanviDecember 5, 2020 at 4:55 PM

    Good very good 😝😊😝😊

    ReplyDelete
  44. AnonymousDecember 5, 2020 at 5:01 PM

    Very good 😝😊😝😊😝

    ReplyDelete
  45. AnonymousDecember 5, 2020 at 5:02 PM

    Good very good 😊😝😊😝😊😝

    ReplyDelete
  46. Arjun panditDecember 5, 2020 at 5:16 PM

    Good,,,👌👌

    ReplyDelete
  47. SonaDecember 5, 2020 at 5:31 PM

    Supar

    ReplyDelete
  48. UnknownDecember 5, 2020 at 6:00 PM

    Kallu
    Wow very nice

    ReplyDelete
  49. UnknownDecember 5, 2020 at 6:25 PM

    Kallu
    Nice

    ReplyDelete
  50. Rinku rinku upadhyayDecember 6, 2020 at 7:26 PM

    👌👌👌👌👌

    ReplyDelete
  51. Rinku rinku upadhyayDecember 6, 2020 at 7:27 PM

    🍫🍫🍫🍫

    ReplyDelete
  52. UnknownDecember 9, 2020 at 11:00 AM

    wow amazing

    ReplyDelete
  53. UnknownDecember 16, 2020 at 8:42 PM

    Wow
    Brilliant
    Awesome
    Interesting

    ReplyDelete