HiKS - Generative Design Tool

2022-09-06

HiKS (live) is a generative design tool developed and designed for the Swedish platform HiKS - Hitta Kliniska Studier, which makes clinical studies searchable. It was designed in collaboration with Swedish design firm BBDO Nordics.

The tool features a stylized simulation of cells in a petri dish and was created using Vue(UI), Tailwind(CSS), p5.js + WebGL (graphics) and matter.js (soft body physics). The WASM library h264-mp4-encoder was used for in-app creation of high quality mp4 output. The HiKS tool was then distributed as an Electron application to the client. The source code of this project is closed.

HiKs user interface

The HiKS Tool

The control panel on the left side of the user interface allows the creation of cells. Size, irregularity and color (from a predefined color palette) are parameters that can be controlled. The WebGL canvas on the right side of the interface is interactive. Cells can be clicked on to be selected for deletion. The simulation can also be paused and continued.

Concept design of HiKs

High quality stills and videos can be rendered from this tool, allowing for use in web design, poster design or social media content design. The appearance of the cells was designed in close collaboration with BBDO Nordics, who helped guide me to sharpen my eye for visual detail.

Application Structure

The application uses simple state management using Vue’s Reactivity API. A central store object was created to store all parameters of the entire application, including user interface, graphics, physics engine and recording module. As there were many nested components in the application, this allowed for simple communication between them.

Timeline

The tool was developed from initial conception to client delivery over a period of 8 weeks.