The symbol said to be heart-shaped (in fact it does not resemble the shape of the heart of any creature known to man) is the universal sign of love. Ever heard about the elderly lady who texted her family "Aunt Julie passed away, LOL!", because she thought LOL stands for "Lots Of Love"? We'll draw plenty of hearts to show a whole lotta love.
After this longish nonsense introduction let's dive into the code!
Lines [1-8] initialize the Canvas and the variables.
[10] sets random parameters (color, position and size) of the first heart.
[11] kicks off the main animation function [13-30]:
[15-20] calculate the x and y coordinates of the next point on the arc. In this part of the drawing, the counter variable corresponds to the angle of the arc we are drawing. [19] plots one side and [20] the other, symmetrical one.
We draw the arc between the angles 60 and 226 degrees. Afterwards, we change to a straight line [22-26].
If the line is complete, we randomly select parameters for a new heart. The process repeats itself forever, like the circle of love - deep stuff!
[34] picks a random value of Red for the RGB color. The Green and Blue components are always 255 (maximum), resulting in different shades of pink/purple.
[9] and [39] move the (0,0) point of the Canvas to a randomly selected place on the canvas. This allows us to greatly simplify the formulas in [19-25] - the y axis is the line of symmetry for all our hearts - it just keeps moving to a new place after each heart is drawn.
[36] moves it back to the top-left corner of the Canvas. Otherwise after a couple of iterations we could end up drawing circles outside of our Canvas.
Experiment with the code for a while and then celebrate with your loved one! Happy Valentines!
| <html> |
| <canvas id='myCanvas' width='800' height='600'></canvas> |
| <script> |
| const endAngle = 226; |
| let canvas = document.getElementById('myCanvas'); |
| let context = canvas.getContext('2d'); |
| let counter = 60; |
| let radius, tx, ty; |
| context.translate(tx, ty); |
| randomize(); |
| requestAnimationFrame(animate); |
| function animate() { |
| let x, y; |
| if (counter <= endAngle) { |
| let radians = Math.PI / 180 * counter; |
| y = radius * Math.sin(radians); |
| x = radius * Math.cos(radians); |
| context.fillRect(radius / 2 - x, -y, 2, 2); |
| context.fillRect(-radius / 2 + x, -y, 2, 2); |
| } else { |
| x = counter - endAngle - radius * 1.2; |
| y = counter - endAngle + radius * .71; |
| context.fillRect(x, y, 2, 2); |
| context.fillRect(-x, y, 2, 2); |
| } |
| counter = counter + 1; |
| if (counter >= endAngle + radius * 1.2) randomize(); |
| requestAnimationFrame(animate); |
| } |
| function randomize() { |
| counter = 60; |
| context.fillStyle = 'rgba(255,' + Math.floor(Math.random() * 255) + ', 255 ,1)'; |
| radius = Math.random() * 100; |
| context.translate(-tx, -ty); |
| tx = Math.random() * canvas.width; |
| ty = Math.random() * canvas.height; |
| context.translate(tx, ty); |
| } |
| </script> |
| </html> |
Check out these programming tutorials:
JavaScript:
Optical illusion (18 lines)
Oldschool fire effect (20 lines)
Fireworks (60 lines)
Animated fractal (32 lines)
Physics engine for beginners
Starfield (21 lines)
Yin Yang with a twist (4 circles and 20 lines)
Tile Map Editor (70 lines)
Interactive animated sprites
Your first program in JavaScript: you need 5 minutes and a notepad
Fractals in Excel
Python in Blender 3d:
Domino effect (10 lines)
Wrecking ball effect (14 lines)3d fractal in Blender Python