Webdev and graphics Lab

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

Bishops and Rooks Swap Game

2020

Implementation of 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.

Used tools/libraries/languages
  • JavaScript
  • Vue.js, with vue-cli
  • webpack
  • SVG
Play

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.