Teochew Thunder: Web Tutorial: The Valentine Heart Animation

It's the Season of Love, folks! Valentine's Day is approaching!

This Valentine's Day, I have a web tutorial that's both simple and exciting. We will be playing with jQuery and jQuery UI.

What, jQuery?

Yes, jQuery. You didn't think I was going to do this the old-fashioned way, did you? Too much like work. Trust me, it'll be fun.

Here we go...

For this, we'll begin with a basic HTML page with a simple black background. Remember to add script links to jQuery and jQuery UI.

<!DOCTYPE html>
<html>
   <head>
       <title>Hearts</title>

       <style>
           body
           {
               background-color: #000000;
           }
       </style>

       <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
       <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

       <script>

       </script>
   </head>

   <body>

   </body>
</html>

Nothing much to see here... yet.

Let's put a div in the HTML, and give it an id of placeholder.

Now, we style placeholder. margin properties are set for it to be squarely in the middle of the screen. Note that we're not going to define height and width properties yet. Let's also give it a white outline so we can see what we're dealing with.

And all the divs within it. Yes, there will be divs. All of them will float left. They'll all have orange outlines for visibility.

See that thick white line? That's actually a div with a white outline and a height of 0 pixels (because we didn't specify height) and 100% width (because we didn't specify width).

For the purposes of this web tutorial, we'll do most of our animation from an object, named objAnimation. Now after declaring that object, use the ready() method, but don't place anything in there right now. It's a placeholder for more code to be executed later on. For that to happen, we must first get the objAnimation object in order.

One of the properties of objAnimation will be a method named generateRandomNo(). You guessed it, it generates a number between min and max.

           var objAnimation =
           {
               generateRandomNo: function(min, max)
               {
                   return Math.floor((Math.random() * (max - min + 1)) + min);
               },
           }

Next, we specify other properties such as color (set to red), a font size and what will be the width and height of each div inside the placeholder div. The property content is set to "x". We'll change it later on; this is just for simplicity.

OK, we're now going to define shape, the next property. It's a 10 x 10 matrix... OK fine, it's an array of arrays. You'll notice that the 1s form a heart! That's not a coincidence.

           var objAnimation =
           {
               generateRandomNo: function(min, max)
               {
                   return Math.floor((Math.random() * (max - min + 1)) + min);
               },
               content: "x",
               color: "rgba(255, 0, 0, 1)",
               fontSize: "30px",
               unitSize: 30,
               shape:
               [
                   [0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
                   [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                   [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                   [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                   [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                   [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                   [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                   [0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
                   [0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
                   [0, 0, 0, 0, 1, 1, 0, 0, 0, 0]
               ],
           }

Now for the really big stuff. Declare the next property as render(), a method.

Remember this block? Well, you can fill it in now. When the page loads, objAnimation's render() method will run.

           $(document).ready
           (
               function()
               {
                   objAnimation.render();
               }
           );

Now, inside render(), we declare a few variables. The first, ph, is set to the placeholder div. The rest are set to properties within the same object, thus the use of this.

               render: function()
               {
                   var ph = $("#placeholder");
                   var shape = this.shape;
                   var content = this.content;
                   var color = this.color;
                   var fontSize = this.fontSize;
                   var unitSize = this.unitSize;
               },

Now, we set some properties of ph. What we're trying to create here is a square made out of many smaller squares, to form the shape in shape. (Remember the heart?) First, we'll define the height and width of ph here. Since shape has 10 elements, the placeholder div will contain 10 squares by 10 squares. Each square will be unitSize pixels by unitSize pixels. Therefore placeholder's height and width should be (unitSize x shape.length) pixels.

                   var ph = $("#placeholder");
                   var shape = this.shape;
                   var content = this.content;
                   var color = this.color;
                   var fontSize = this.fontSize;
                   var unitSize = this.unitSize;

                   ph.attr
                   (
                       "style", "width:" + (unitSize * shape.length) + "px;"
                       + "height:" + (unitSize * shape.length) + "px;"
                   );

Aren't we clever... we just turned the thick white line into a box! Specifically, a box (unitSize x shape.length = 30 x 10 = 300) pixels in height and width!

Next, let's iterate through each element of shape...

                   ph.attr
                   (
                       "style", "width:" + (unitSize * shape.length) + "px;"
                       + "height:" + (unitSize * shape.length) + "px;"
                   );

                   $(shape).each
                   (
                       function (index)
                       {

                       }
                   );

Declare variable shapeRow and make it the current element pointed to by index. Then iterate through each element of shapeRow. shape is a two-dimensional array, remember?

                   $(shape).each
                   (
                       function (index)
                       {
                           var shapeRow = shape[index];

                           $(shapeRow).each
                           (
                               function (indexRow)
                               {

                               }
                           );
                       }
                   );

And for each element in shapeRow, we declare a variable piece and set it to a newly created div. Add classes according to the row and column. This will be useful later.

Then set the attributes of piece, which are the attributes of each and every div within ph! And then append piece to ph using the append() method.

                               function (indexRow)
                               {
                                   var piece = $("<div></div>");
                                   piece.addClass("row" + index);
                                   piece.addClass("col" + indexRow);
                                   piece.attr
                                   (
                                       "style", "color:" + color + ";"
                                       + "font-size:" + fontSize + ";"
                                       + "width:" + unitSize + "px;"
                                       + "height:" + unitSize + "px;"
                                   );

                                   ph.append(piece);
                               }

A white box filled with orange boxes!

OK, next let's fill each div with content.

You can now see the heart being formed.

Let's get rid of the outlines...

           #placeholder
           {
               margin: 10% auto 0 auto;
               outline: 0px solid #FFFFFF;
           }

           #placeholder div
           {
               text-align: center;
               float: left;
               outline: 0px solid #FF4400;
           }

And change the content property to use the ♥ symbol.

Ain't this just adorable?!

Animating the heart (or, er, hearts)

You didn't think we were done, did you? What we just did was to lay the groundwork for some truly neat stuff.

After we've rendered the heart of hearts, declare variable anim and set it to the current object. Then use the setInterval() function with an interval of, say, 2.5 seconds. Then, in the callback, run the animateObject() method with 0 passed in as the argument.

                   $(shape).each
                   (
                       function (index)
                       {
                           var shapeRow = shape[index];

                           $(shapeRow).each
                           (
                               function (indexRow)
                               {
                                   var piece = $("<div></div>");
                                   piece.addClass("row" + index);
                                   piece.addClass("col" + indexRow);
                                   piece.attr
                                   (
                                       "style", "color:" + color + ";"
                                       + "font-size:" + fontSize + ";"
                                       + "width:" + unitSize + "px;"
                                       + "height:" + unitSize + "px;"
                                   );

                                   if (shapeRow[indexRow] == 1)
                                   {
                                       piece.html(content);
                                   }

                                   ph.append(piece);
                               }
                           );
                       }
                   );

                   var anim = this;

                   setInterval
                   (
                       function()
                       {
                           anim.animateObject(0);
                       },
                       2500
                   );

We'll create the animateObject() method next. It will accept a parameter, animateId.

Again, declare the variables and set them to the properties of this object. Then let's have an If block to handle animateId being 0.

               animateObject: function (animateId)
               {
                   var shape = this.shape;
                   var color = this.color;
                   var fontSize = this.fontSize;

                   if (animateId == 0)
                   {

                   }
               }

Next, declare changeSize, changeColor and genRan. genRan is set to the generateRandomNo() method of this object. changeSize and changeColor are set to the animateSize() and animateColor() methods of this object respectively.

We should, of course, create those methods now. We've already created generateRandomNo() earlier. Each of these methods accepts three parameters - obj, delay and color or size. They then run jQuery UI's animate() method from the object referred to by obj. The duration of the animation is set by delay. The property to be manipulated depends on the method. animateColor() animates the color, changing it to color. And animateSize animates the font size, changing it to size pixels.

               animateObject: function (animateId)
               {
                   var shape = this.shape;
                   var color = this.color;
                   var fontSize = this.fontSize;
                   var changeSize = this.animateSize;
                   var changeColor = this.animateColor;
                   var genRan = this.generateRandomNo;

                   if (animateId == 0)
                   {

                   }
               },
               animateColor: function(obj, delay, color)
               {
                   $(obj).animate
                   (
                       {
                           color: color
                       },
                       delay
                   );
               },
               animateSize: function(obj, delay, size)
               {
                   $(obj).animate
                   (
                       {
                           fontSize: size
                       },
                       delay
                   );
               }

Now, back to the animateObject() method. Declare variable colorToChange and set it to a new rgba string by running genRan() for each red, green or blue value. You can use any range of values between 0 to 255. I've chosen these values to keep the heart mostly red or warm colors.

                   if (animateId == 0)
                   {
                       var colorToChange =
                       "rgba(" +
                       genRan(255, 255)
                       + "," +
                       genRan(50, 200)
                       + "," +
                       genRan(50, 200)
                       + ", 1)";
                   }

Now, iterate through each instance of shape.

                   if (animateId == 0)
                   {
                       var colorToChange =
                       "rgba(" +
                       genRan(255, 255)
                       + "," +
                       genRan(50, 200)
                       + "," +
                       genRan(50, 200)
                       + ", 1)";

                       $(shape).each
                       (
                           function (index)
                           {

                           }
                       );
                   }

During each iteration, use the setTimeout() function with an interval of (index x 100). This gives variable delays, which will result in a beautiful pattern. Just trust me on this...

And once the interval is reached, run the changeColor() method using the class name, a delay of 200 milliseconds, and colorToChange!

Ah, it's changed! Watch! Every 2.5 seconds, the object gradually changes a different color in a vertical cascade!

Now what if we changed it back a slight delay (index x 200) milliseconds later?

                   if (animateId == 0)
                   {
                       var colorToChange =
                       "rgba(" +
                       genRan(255, 255)
                       + "," +
                       genRan(50, 200)
                       + "," +
                       genRan(50, 200)
                       + ", 1)";

                       $(shape).each
                       (
                           function (index)
                           {
                               setTimeout
                               (
                                   function()
                                   {
                                       changeColor(".row" + index, 200, colorToChange);
                                   },
                                   index * 100
                               )
                           }
                       );

                       $(shape).each
                       (
                           function (index)
                           {
                               setTimeout
                               (
                                   function()
                                   {
                                       changeColor(".row" + index, 1000, color);
                                   },
                                   index * 200
                               )
                           }
                       );
                   }

Admit it, this is gorgeous. It changes from red, to a random color, then back to red.

Now, if you got the general idea, we can accelerate past the next part. In the render() method, change this.

                   setInterval
                   (
                       function()
                       {
                           anim.animateObject(1);
                       },
                       2500
                   );

In the animateObject() method, add an If block for if animateId is 1. In fact, go ahead and add If blocks for 2 and 3 as well.

               animateObject: function (animateId)
               {
                   var shape = this.shape;
                   var color = this.color;
                   var fontSize = this.fontSize;
                   var changeSize = this.animateSize;
                   var changeColor = this.animateColor;
                   var genRan = this.generateRandomNo;

                   if (animateId == 0)
                   {
                       var colorToChange =
                       "rgba(" +
                       genRan(250, 255)
                       + "," +
                       genRan(50, 200)
                       + "," +
                       genRan(50, 200)
                       + ", 1)";

                       $(shape).each
                       (
                           function (index)
                           {
                               setTimeout
                               (
                                   function()
                                   {
                                       changeColor(".row" + index, 200, colorToChange);
                                   },
                                   index * 100
                               )
                           }
                       );

                       $(shape).each
                       (
                           function (index)
                           {
                               setTimeout
                               (
                                   function()
                                   {
                                       changeColor(".row" + index, 1000, color);
                                   },
                                   index * 200
                               )
                           }
                       );
                   }

                   if (animateId == 1)
                   {

                   }

                   if (animateId == 2)
                   {

                   }

                   if (animateId == 3)
                   {

                   }

This next one repeats what we did earlier, accept the transition is from left to right! Copy and paste the code from the previous If block, but instead on operating on shape, operate on the first element of shape. Fittingly, we'll change index to indexCol to reflect what we're doing here - operating on columns. To that end, also make sure the class names are changed in the calls to changeColor().

                   if (animateId == 1)
                   {
                       var colorToChange =
                       "rgba(" +
                       genRan(250, 255)
                       + "," +
                       genRan(50, 200)
                       + "," +
                       genRan(50, 200)
                       + ", 1)";

                       $(shape[0]).each
                       (
                           function (indexCol)
                           {
                               setTimeout
                               (
                                   function()
                                   {
                                       changeColor(".col" + indexCol, 200, colorToChange);
                                   },
                                   indexCol * 100
                               )
                           }
                       );

                       $(shape[0]).each
                       (
                           function (indexCol)
                           {
                               setTimeout
                               (
                                   function()
                                   {
                                       changeColor(".col" + indexCol, 1000, color);
                                   },
                                   indexCol * 200
                               )
                           }
                       );
                   }

Great, right?!

Change this again...

                   setInterval
                   (
                       function()
                       {
                           anim.animateObject(2);
                       },
                       2500
                   );

This next one is also a transition from left to right, but this time, it uses the changeSize() method, thus changing the size! Kind of like a Kallang Wave. Copy the code from the previous If block, and instead of using the changeColor() method, use the changeSize() method. Of course, instead of colorToChange, declare and use sizeToChange. sizeToChange here is a size between 10 to 25 pixels, but feel free to implement your own.

                   if (animateId == 2)
                   {
                       var sizeToChange = genRan(10, 25) + "px";

                       $(shape[0]).each
                       (
                           function (indexCol)
                           {
                               setTimeout
                               (
                                   function()
                                   {
                                       changeSize(".col" + indexCol, 500, sizeToChange);
                                   },
                                   indexCol * 100
                               )
                           }
                       );

                       $(shape[0]).each
                       (
                           function (indexCol)
                           {
                               setTimeout
                               (
                                   function()
                                   {
                                       changeSize(".col" + indexCol, 500, fontSize);
                                   },
                                   indexCol * 200
                               )
                           }
                       );
                   }

Sweet!

Change this again!

                   setInterval
                   (
                       function()
                       {
                           anim.animateObject(3);
                       },
                       2500
                   );

This one uses both the changeSize() and changeColor() methods, passing in random colors and sizes respectively! I'll let you figure out on your own how this is done...

                   if (animateId == 3)
                   {
                       $(shape).each
                       (
                           function (index)
                           {
                               $(shape[index]).each
                               (
                                   function (indexCol)
                                   {
                                       setTimeout
                                       (
                                           function()
                                           {
                                               var colorToChange =
                                               "rgba(" +
                                               genRan(250, 255)
                                               + "," +
                                               genRan(50, 200)
                                               + "," +
                                               genRan(50, 200)
                                               + ", 1)";

                                               var sizeToChange = genRan(10, 65) + "px";

                                               changeSize(".row" + index + ".col" + indexCol, 500, sizeToChange);
                                               changeColor(".row" + index + ".col" + indexCol, 300, colorToChange);
                                           },
                                           0
                                       )
                                   }
                               );
                           }
                       );

                       $(shape).each
                       (
                           function (index)
                           {
                               $(shape[index]).each
                               (
                                   function (indexCol)
                                   {
                                       setTimeout
                                       (
                                           function()
                                           {
                                               changeSize(".row" + index + ".col" + indexCol, 500, fontSize);
                                               changeColor(".row" + index + ".col" + indexCol, 300, color);
                                           },
                                           100
                                       )
                                   }
                               );
                           }
                       );
                   }

Groovy! There are so many different ways you could play with this!

One last change. Instead of passing in an arbitrary number as an argument, pass in a random number between 0 and 3. This way, you get a random animation every 2.5 seconds.

                   setInterval
                   (
                       function()
                       {
                           anim.animateObject(anim.generateRandomNo(0, 3));
                       },
                       2500
                   );

We're done!

I went a bit overboard with the animation, but damn that felt good. We could have done it without jQuery, but this web tutorial might have taken twice as long. So yeah, I think it was worth it.

In my heart of hearts, I salute you!
T___T

Teochew Thunder

Pages

Wednesday, 13 February 2019

Web Tutorial: The Valentine Heart Animation

What, jQuery?

Here we go...

Animating the heart (or, er, hearts)

We're done!

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews