Webdev and graphics Lab

A rough selection of various experiments taking place in our potatoDie web development and graphics lab.

Rasterize

2020

App to load image and create adjustable raster based on it. Uses Vue for reactivity and modularity, and webpack for bundling and transpiling.

Used tools/libraries/languages
  • JavaScript
  • Vue
  • webpack
  • Canvas
Explore

Portamento

2020

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

Used tools/libraries/languages
  • JavaScript
  • ES2015 modules
  • Prepros
  • Web audio
  • SVG
  • d3js.drag
Explore

Puppy pursuit

2019 or earlier

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.

Used tools/libraries/languages
  • JavaScript
  • SVG
  • Canvas API
Explore

Dr. Psycho

2015-2020

Make your device relax, drawing spirographs. (Or hypotrochoids as they are officially called.) It might remind you a bit of Saul Bass (Hitchcock) or Maurice Binder (James Bond) title sequences.

Used tools/libraries/languages
  • JavaScript
  • Canvas
Explore
Roll your own

If you want to take over control, enter Studio Hypotrochoid.

Staircase calculator

2018

The staircase calculator is a tool to help design a straight staircase. If terms like nosing and run unit are not familiar to you, you might want to read the explanation of mathematics and terminology

Used tools/libraries/languages
  • d3js
  • JavaScript
  • SVG
Explore

There is a version with dutch terminology too.