Animated text loop: Lissajous curves
Here's how it works (full code below):
Lines [1-6] set up the HTML5 Canvas.
[7] Set the blur - this is what makes the letters 'glow'.
[8] Reset the main counter.
[9] The text we want to display.
[11-25] The main animation loop:
[12] Clear the previous frame.
[13] For each letter:
[14] Calculate the auxiliary counter
[15-16] The x and y coordinates of the letter are calculated using a formula that calculates sine/cosine of the auxiliary counter (Lissajous curve around the center of the canvas).
Try playing with different values, I arrived at these using trial-and-error.
[17] The RGB color of the letter:
The Red component depends on the x coordinate.
The Green component is always zero.
The Blue component depends on the y coordinate.
This results in the following color map:
[18-19] apply the color to the letter and the shadow (blur).
[20] The size of the letter (font) depends on the x coordinate.
[21] Draw the letter.
[23] Increase the main counter.
[24] Request the next frame.
[26] Start!
| <html> |
| <body bgcolor='black'> |
| <canvas id="myCanvas" width="600" height="400"></canvas> |
| <script> |
| let canvas = document.getElementById("myCanvas"); |
| let context = canvas.getContext("2d"); |
| context.shadowBlur = 20; |
| let counter = 0; |
| let text = 'Loading........'; |
| function animate() { |
| context.clearRect(0, 0, canvas.width, canvas.height); |
| for (let i = 0; i < text.length; i++) { |
| let counter2 = counter / 10 + i; |
| let x = canvas.width / 2 + 200 * Math.sin(counter2 / (Math.PI * 1.2)); |
| let y = canvas.height / 2 + 160 * Math.cos(counter2 / (Math.PI * 8)); |
| let color = `rgb(${Math.floor(x / 2)}, 0, ${Math.floor(y)})`; |
| context.fillStyle = color; |
| context.shadowColor = color; |
| context.font = 'bold ' + x / 10 + 'px sans-serif'; |
| context.fillText(text.charAt(i), x, y); |
| } |
| counter++; |
| window.requestAnimationFrame(animate); |
| } |
| animate(); |
| </script> |
| </body> |
| </html> |
Check out these programming tutorials:
JavaScript:
Goldmine - idle game (~200 lines)
Tunnel run game (~170 lines)
Tower game (84 lines)
Optical illusion (18 lines)
Spinning squares - visual effect (25 lines)
Oldschool fire effect (20 lines)
Fireworks (60 lines)
Animated fractal (32 lines)
Physics engine for beginners
Physics engine - interactive sandbox
Physics engine - silly contraption
Starfield (21 lines)
Yin Yang with a twist (4 circles and 20 lines)
Tile map editor (70 lines)
Sine scroller (30 lines)
Interactive animated sprites
Image transition effect (16 lines)
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