Interactive Rainbow Canvas
When I set out to build this portfolio site, I knew I wanted an interactive element as the homepage hero. Inspired by Josh Comeau's metal shavings component on his blog, my initial idea was to mask a rainbow flag somehow and then reveal it on mouseover.
So naturally, I created an HTML canvas and drew a rainbow flag. Tada!
The problem was, I wasn't sure how to implement the reveal. Not just technically, I mean I wasn't even sure what I wanted it to look like. I've run into this problem a lot making videos. Like so many ideas, it felt fully formed until I really had to think about the execution. For me, the solution is almost always some form of storyboarding. I tried sketching out a few ideas, and in addition to noting a bunch of things I did not want to do (some of these are included down below, just for fun), I did figure out that I wanted the reveal to sort of trail the mouse.
A little aside on how I learn:
In a flurry of googling, I found Josh talking about the principles behind his design during a Frontend Horse charity livestream from a couple years ago. This was a great help—not only did it point me in the right direction, but when I looked closely, I was able to discern a bunch of hints about what my end product needed to look like. For example, you never see Josh's custom hooks, but you do see what they return. (Though in the case of his normalize( ) utility function, I got lucky and was able to pause the video and steal it line for line.) These are my favorite kinds of resources because they keep me from spinning my wheels while still leaving me plenty to figure out on my own. It's how I learn best.
The toolkit
Note that I happened to build this in React, but the principles apply to other frameworks.
- A custom hook to return mouse position
- Another custom hook to set up your canvas—it returns:
- A ref to identify your canvas element
- A bounding box, so you can know when the mouse position overlaps the canvas
- A canvas context that scales based on pixel ratio, so your cool project looks good on retina displays
- A selection of dope colors
The basic steps
- Draw a grid of dots and paint them your preferred colors. The initial draw takes four loops — I'm looping over my color selection, the number of rows, and the number of columns I want to create (I'll get to the fourth loop in just a minute).
- You already know where the mouse is relative to the canvas, so now you can manipulate the radius of each dot based on mouse position.
- Next you need to calculate the distance from the center of each dot to your cursor using the 🤗Pythagorean Theorem🤗. And that allows you to only affect dots that are a particular distance from the mouse.
- Now we're ready for that fourth loop. Wrapped around all the loops from step 1, I'm looping over the most recent 30 mouse positions. That's where the drag comes from. I have a little multiplier to ensure the dots get smaller as the mouse moves away, and then I just fiddled with all the numbers until I achieved a sort of paint spatter effect.
And that's about the gist. I am pretty happy with where I landed, but as promised, here are some snapshots from the journey.