Alright, let’s talk about this little thing I worked on, the whole “waving the checkered flag” idea. It wasn’t anything massive, just a bit of fiddling around, really.
So, I got this idea stuck in my head. Needed a simple visual, you know, like an end-of-race thing, or maybe just something to add a bit of life to a static page. A checkered flag seemed classic. But just sticking a flat image felt kinda boring. I wanted it to move, to actually wave a bit.
Getting Started
First thing, I needed the actual flag pattern. Didn’t feel like drawing one, so I just looked around online for a basic black and white checkered image. Found a decent one pretty quickly, nothing fancy, just a standard pattern. Saved that to my computer.
My first thought was, maybe just use CSS? Could probably fake some movement. But nah, I wanted that ripple effect, something that looked more like cloth moving in the wind. CSS felt like it would be a pain for that, probably end up looking stiff.
Decided to use the HTML Canvas. Seemed like the right tool for drawing something custom and animating it frame by frame. Plus, it’s been a while, good excuse to brush up.
Putting it Together
So, I cracked open my editor. Made a super simple HTML file. Just the basics, and dropped a <canvas> element in there. Gave it an ID so I could grab it with JavaScript.
Then came the JavaScript part. Wrote a little script.
- Got the canvas element using its ID.
- Got the 2D drawing context. Standard stuff.
- Loaded up that checkered flag image I saved earlier using the Image() object.
- Waited for the image to load, then basically slapped it onto the canvas using drawImage(). Okay, step one done, flag visible.
Making it Wave
Now for the main bit – the waving. This needed a bit more thought. I figured I could redraw the flag constantly, but distorting it each time. How to distort it? Sine waves seemed like the obvious answer. They go up and down, kinda like a wave, right?
My plan was to draw the flag image slice by vertical slice. For each slice, I’d calculate a vertical offset using a sine function. This offset would depend on two things: the horizontal position of the slice (so the wave moves across the flag) and the current time (so the wave animates).
I set up an animation loop using requestAnimationFrame. Inside the loop:
- Clear the canvas.
- Loop through the width of the flag image, maybe one pixel column at a time.
- For each column `x`, calculate a `y` offset using something like *(x frequency + time speed) amplitude.
- Use drawImage() to draw just that one-pixel-wide slice of the source image onto the canvas at the calculated `y` offset.
Fired it up. And yeah, it kinda worked. But it looked really rigid, too perfect. Like a metal sheet wobbling, not a flag.
Tweaking and Finishing
So, I started messing around with the formula. The key, I figured, was making it less uniform.
- Tried adding a second sine wave with a different frequency and speed, and combined them. Made it a bit more irregular.
- Made the amplitude (how much it moves up and down) smaller near the “pole” side (let’s say the left edge) and larger towards the free end. A flag doesn’t wave uniformly, right?
- Played with the speed and frequency numbers a lot. Just trial and error, changing values, reloading, seeing how it looked.
After a fair bit of tweaking, I got something that looked… well, flag-like enough. Not gonna win any awards, but it had that basic waving motion. It rippled across and moved up and down in a way that wasn’t perfectly predictable. Good enough for me.
And that was pretty much it. Got the image, set up the canvas, wrote the drawing loop, struggled a bit with making the wave look natural, tweaked the math until it felt okay. Job done, checkered flag waved. Simple little exercise, but satisfying to get it working.
