F
F
Hello, Gooey
A simple tool to play with gooey filters, in case you're in a gooey mood.
Flipping out with symmetry
Filling a 2D plane flipping and unfolding using the third dimension. The first example is pure CSS. Well the animation is. Click to fold open, click again to close.
The following demo goes a step further. A recursive JavaScript function multiplies all fragments that exist at each step.
Kaleidoscopy
Taking a kaleidoscope demo from some time ago a little further, today's kaleidoscope features choosing the base image used (pictured here a botanical drawing by Dianne Sutherland), just to name one obvious improvement. Another one: you can't share your design on Facebook anymore, since I gave up on Facebook.
You see those dashed circles above, with their two-headed arrows? Those are rotators. Wouldn't you like to give them a swing?
Loupe
Explore image details with a draggable magnifying glass. Adjust magnification factor and size of loupe as you like. All of this is in our power with the loupe tool.
Code of the basics can be found at CodeSandbox. The programmer thinks out loud in this post.
Bishops and Rooks Swap Game
The classic Bishops Swap Game with an optional alternative view of the same puzzle: Rooks Swap Game. I thought offering an extra view was appropriate, since programming the game was intended as an exercise in working with the JavaScript framework Vue.js.
Looks simple, but the puzzle is quite difficult to solve.
Accept the challenge.
Load an image and create an adjustable raster based on it. Uses Vue for reactivity and modularity, and webpack for bundling and transpiling.
I started out with SVG to draw all the dots, but that turned out to be way too slow. Canvas is much faster for this kind of thing.
Used tools/libraries/languages
- JavaScript
- Vue
- webpack
- Canvas
Staircase calculator
The staircase calculator is a tool to help design a straight staircase. If you are curious about staircase-specific terms like nosing and run unit, read this explanation of mathematics and terminology.
There is a version with dutch terminology too.
Portamento
Interactive tool to control the transition of a musical note to another using Bezier easing.
Puppy pursuit
This combines SVG and Canvas techniques: Two arrow shapes chase each other along a path in SVG, while the pursuing arrow leaves a trace on Canvas.
ExploreDr. Psycho
Make your device relax, drawing spirographs. Watching your device draw may help you unwind as well, since it draws in a pleasant Andante tempo. The animation appears to have a touch of Saul Bass (Hitchcock) or Maurice Binder (James Bond) title sequences.
Spirograph drawings are also known as hypotrochoids among mathematicians.
Roll your own
If you want to take over control, enter Studio Hypotrochoid.