Playground 
Lab, Archive, Experimental & Fun
Most of these projects I wrote, to familiarize myself with the underlying principles or technology. But also for fun, of course. Although they're not perfect (some are not even optimized for mobile phones), they can be considered the starting point for me. Nevertheless, I would like to share them with you.
3D Sampler
Each sphere is an instrument with a different sound (sample). It pulses according to the sound. They can be started and stopped independently.
three.jsFFTWebGLvue.jsSound API
Chicken Scratch
In browser doodling app with different pens, tipsizes and colors. This was a 2 day fun project.
CanvasKinetic.jsjQuery
Crack List Timer
We love to play Crack List. This is the missing countdown timer for your mobile phone. It's not like you always have an hourglass with you.
HTMLCSSJavaScript
Binary Clock
Binary clock with four changeable themes. It's a nerdy concept, but I like it.
HTMLCSSjQuery
Marbles
In this project I learned how to integrate a physics engine into three.js. As a proof of concept I realised a simple matrix of marbles falling on a heightfield (cloth).
three.jsPhysi.js
Drumkit
A 3D model of a drumkit utilising sound API. You can click/tap on a drum or cymbal to play it. Fun project to learn more about raycasting.
Vue.jsthree.jsModelloadersRaycaster
Sound Mesh
A 3D mesh reacting to the played sound. Mesh is either sinusodial or heightfield. Change pattern by dbl-clicking on the mesh.
three.jsVue.jsSimplex NoiseSound APIFFT
Drum Machine
808 style drum machine. 6 tracks, adjustable measure (4th/8th/16th notes) and bpm. First project using Tone.js.
Tone.jsVue.jsSound API
Simple Todo List
Implementation of PWA (Progressive Web App) principles with service workers and indexedDB. Once loaded, the app works offline.
Vue.jsindexedDBDexieService WorkersPWA
Earth from Space
My very first three.js project. Animated earth, moon and satellite.Basic shapes, texture mapping, model loader (satellite) and bump maps.
three.jsVue.jsTexturesModelloaders
Foolpage Slider
Fully responsive fullpage (foolpage 🤡) slider with animations. This has been the p.o.c. for a part of a customers website.
GSAPCSS
Game of Life 3D
Conway's Game of Life mapped onto a 3d cube. It's a simple example of how to use three.js with canvas renderer.
three.jsCanvas
Spitfire
webGL 3D model of a SupermarineSpitfire. Example of how to use three.js with webGL renderer.
three.jsModelloaders
Solarsystem
A model of the solar system completeley written in CSS. No Javascript needed. Example for CSS animations.
HTMLCSS
Happiness Report
World happiness report. Using datasets from 2015 to 2022. It shows the happiness level of the countries. Project to learn more about D3.js.
AngularD3.js
Soundmeter
The played song represented as a ring of bars. The bars are animated according to the sound.
Vue.jsthree.jsSound APIFFT
Thyclock
The analog alarmclock plugin, which I wrote more than 10 years ago as a jQuery plugin, is now ported and I offer it as a web component via npm.
jQueryLitCanvas
Color
The background color changes every second. A click will stop the clock and the closest possible color name will be revealed. This utilizes K-nearest neighbor algorithm.
jQueryKNNCSS
Cubemaps
In computer graphics, cube mapping is a method of environment mapping that uses the six faces of a cube as the map shape. The reflecting spheres are just eye candy. (Drag to view around).
three.jsShadertextures
Game of Life
Conway's Game of Life. This is a cellular automat based on a 2 dimensional grid. Every cell interacts with its eight neighbours, according to 4 simple rules.
CanvasjQueryCSS
Smart Image Mapper
A tool to create image maps in your browser by drawing shapes onto an image. Export them as HTML, SVG or JSON.
GSAPCSS
Slidecordion
Fully responsive two state accordion slider. This has been the p.o.c. for a section on a customers website.
jQueryHTMLCSS