Description

This projects is a collection of small experimentations with web technologies (mostly Javascript).

Click on the title of each section to access the corresponding page (hosted on github.io).

Terminal

A CSS style for displaying an old-style terminal

Bubbles

A small game based on the mobile game Osmos.

Cloth

A simple cloth 2D simulation with a spring-mass system. The cloth can be torn with pointer events.

Aquabeads

Drawing board to make Aquabeads patterns (can be saved as SVG)

Sudoku

A Sudoku solver. Main page is in React, solver runs in a web worker using Donald Knuth’s dancing links technique.

There is also an alternate version of the interface in Svelte (seems to work better for iOS devices).

SVG

Generation of SVG code with JS, including support for 3D transformations (not in the SVG standard) by computing the resulting 2D transformation on relevant nodes of the SVG tree.

Rubik’s Cube

3D functional representation of the 3x3x3 Rubik’s cube using CSS 3D transformations.

Each sticker of the cube is represented by a square div element, rotated around the cube with each move.

Dithering

Implementation of Floyd-Steinberg dithering in Javascript following a Coding Train coding challenge.

The original tutorial used the p5.js library but it is here implemented directly in an HTML canvas by manipulating the pixels in the ImageData.

The original image is on the left. The central canvas is the result of the dithering algorithm on each component (each color component is either 0 or 255, for a total of 8 colors), the rightmost one is performed on a greyscaled version of the image resulting in an image with fully white or fully black pixels only.

Autostereogram

Generation of 3D autostereogram from a greyscale depth map.

The user can choose one of the available depth maps and tiles or upload files.

• The depth map image should represent a 3D object by representing the depth of a pixel by its intensity (brightest in front). If the image is a colored image, only the red component is considered.
• The tile image is used to produce the stereogram (by repeating the tile with horizontal shifts of pixels depending on depth). It is preferable to use a small (less than 128px) tilable pattern.

Perlin Flight

Travel across a wireframe landscape randomly generated from Perlin noise.

This script uses the p5.js library for drawing the wireframe landscape and for its Perlin noise generator.

Direction of movement can be controlled by the position of the hovering mouse cursor on the canvas (position relative to the center).

Recaman Sequence

Visual representation of the Recamán sequence (as presented in a Coding Train coding challenge).