INFO  /  INDEX

2023 — web experiment
TILES


Truchet and Wang tiles are square tiling methods used in algorithmic art that rely on simple rules to construct generative patterns. Truchet tiles, named after 18th-century mathematician Sébastien Truchet, typically feature simple motifs—such as curves or diagonal lines—and can be rotated to produce intricate maze-like designs. Wang tiles, developed in the 1960s by mathematician Hao Wang, use a slightly varied logic, relying on edge constraints rather than rotation, to match together colored or labeled sides in order to produce larger forms when placed next to each other. This web experiment explores the generative qualities of these systems with a custom style set that combines rotation and edge matching.

For my custom style set, I chose to include 16 total tiles: 1 unconnected shape, 4 connecting to 1 side, 4 connecting to 2 adjacent sides, 2 connecting to 2 opposite sides, 4 connecting to 3 sides, and 1 connecting to all 4 sides. 

I sketched the initial shapes of the tiles in a drawing application on my tablet and then began to render the forms using a set of equations and shapes in p5.js. I made sure to start the edges of the matching tiles at the same coordinates to ensure that the darker part of the shape could continue into the next seamlessly. Because my set allowed for rotations, I only created 5 original tiles and then used rotations on the following. 


From there, I wrote the tile placement algorithm to have the following logic:
  1. Start by placing a random tile in the top-left corner of the grid.
  2. Proceed left to right, top to bottom through the grid.
  3. At each position, check the surrounding tiles to determine which of the 16 tile options are compatible based on edge matching.
  4. From the valid candidates, randomly select a tile and place it.

The final renderings resulted in a floral, maze-like motif. I really enjoy how the negative space mimics the floral forms of the unconnected tile simply by using the round curves from the connecting tiles. In future iterations, I would like to experiment more deliberately with the contours of the filled areas to sculpt the negative space or even create a less predictable rendering that strays from the look of a maze altogether. 







Using: p5.js, HTML, CSS

DANCE 4 ME


[2024 — web]
‘Dance4Me' (Dance For Me) is a web project that uses Google’s Pose Landmark Detection deep learning framework to pinpoint the coordinates of one’s body to create a sound experience in which a “song reacts to you as you react to it.” By enabling the webcam and uploading a .wav file within the site, the coordinate data is used to create sound alterations that will interfere with the playback of the song as the user moves in front of the camera. Some examples of sound alteration include pitch shift, a phaser, feedback delay, distortion, and playback rate.