Net Noodlings with Nathan logo

Net Noodlings with Nathan

Subscribe
Archives
July 22, 2024

Experiment Cleanup and Tiny Phones

Hey friends,

I'm grateful for some rain and some cooler temperatures this week! 🌧️


Things I Built

I was doing a little spring/summer cleaning and dug up and better catalogued two experiments I had made: Brainwave Splines and a Delayed Mouse Tracker

I've written about this before, but the spline technique is pretty interesting. I learned this from George Francis who does a better job explaining everything in this post. The basic idea is you take an empty SVG and create six equidistant points on it, giving you a hexagon. Then you use the Catmull-Rom Spline algorithm to draw a line between those six points. The spline algorithm will create smooth organic lines which turns the hexagon into an almost-circle. Now when you randomly animate those points you get a neat organic blob! For this demo, the goal was to make them look like brainwaves, so I layered two blobs as stroke-only SVGs. The effect turned out pretty neat!

The mouse tracker was created as an experiment to draw some interest to a CTA button. We create an SVG circle on the page and track the mouse movement. We then kick off a loop that checks the distance between the circle and the mouse, then moves the circle towards the cursor at a predefined speed per animation loop (which is how we achieve the delay). We're also checking how close we are to the target button. We know the difference of the X/Y coordinates which means we have two sides of a triangle. BY THE POWER OF PYTHAGORAS (thanks high school math class) we can find the distance between the mouse and the button and apply a scaling effect as the mouse gets closer.


Interesting Web Bits

  • Google Docs will now convert Markdown on pasting or copy contents as Markdown, which is pretty neat.
  • Apparently you can use CSS vars to get the width and height of the viewport WITHOUT any JS overhead. 🤯
  • Hot Wax is delightful mix between tetris and ... burning candles?
  • I'm a big fan of using a work journal and it's interesting to see everyone's approaches. I talk about my own approach of keeping project logs in a post from a few months ago.
  • Stuff like this reminds me of the tiny phones of the past. But would I ACTUALLY want a tiny phone...? 🤔
Don't miss what's next. Subscribe to Net Noodlings with Nathan:
Powered by Buttondown, the easiest way to start and grow your newsletter.