LAB

Experiments make the potatoDie web development and graphics lab such a wonderfully vibrant and dangerous place. Put on your goggles and enter!

(Don't stumble on the boxes as I'm constantly moving things around.)

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.

F
F

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

Explore

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.

nosing

There is a version with dutch terminology too.

Portamento

Interactive tool to control the transition of a musical note to another using Bezier easing.

Wear ear protection, then explore

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.

Explore

Dr. 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.