Artefacts

A code and physical artefact inspired by my data visualization of a treemap chart with the colors and patterns of HDB gates.

Code Artefact - Description

I created a p5js sketch that randomizes the layout, colors, and sizes of rectangles with a keypress function. As such, the outcomes of the generative code are intended to mimic the shapes and colors of an HDB gate and the data visualization treemap chart. On the other hand, this sketch can be reiterated as a pattern generator for other potential design works.

Link to p5js sketch

Physical Artefact - Description

Moving onto the physical artefact, I created 1:12.5 scale models of a standard 4 by 7 feet HDB gate based on the designs and patterns generated by the earlier code artefact. The gates are made from thin foam boards and arranged diagonally based on popularity across an A3-sized form board.

Furthermore, depending on the angle the person is looking at, they can see different variations and patterns of the physical artefact, for example, from the sides or both ends of the board, making the physical artefact interactive.