2022 / Creative Coding

The Way

An interactive 3D web experience that uses minimalist cubes, movement, and spatial transformation as a symbolic journey.

Role
Programmer, Art Designer
Tools
Three.js, p5.js, JavaScript, WebGL

Overview

The Way is an interactive experience as well as a visual performance. The project creates a conceptual space with minimalist aesthetics and invites the audience to make their own interpretation. It uses the fundamental element of the cube to present contrast and transformation, playing with ideas such as start and end, order and chaos, few and many, alone and together. These contrasts can be read as a metaphor for life and for many kinds of personal journeys.

Experience

Instruction: hold the mouse to look and move forward. The player moves along the road toward the end, but can also use WASD to explore the space more freely.

The flow of the experience follows the three-act structure of storytelling. It starts with a peaceful environment, gradually moves into an unstable place, confronts danger, and finally reaches an answer or destination. To present the project as a story, the background music was carefully chosen to match the visual style and atmosphere. Some parts of the music were used to guide visual animation timing, even though the visual language was not designed from the music at first.

Inspiration

The transformation of building walls in the video game Control was a major inspiration. Its simple geometry and dark, cold material create an industrial and futuristic environment, while the animated bricks make the building feel alive and conscious. I wanted to experiment with a similar sense of architectural transformation in Three.js.

Technical

  • p5.js
  • Three.js
  • JavaScript classes
  • Lights and materials in a browser-based 3D environment
  • Mathematical and physics-based animation

Technically, I learned a lot of creative coding knowledge through this project, including using mathematical and physics formulas to create visual effects. I used classes in JavaScript to build the project more efficiently and explored lights and materials in a 3D environment.

Artistically, I experimented with minimalism and symbolic storytelling. I researched similar visual styles and structures to find inspiration for the design, then used a small set of forms to build a larger emotional and spatial progression.

The Way video documentation.
Interactive 3D space.
Interactive 3D space.
Inspiration reference: Control.
Inspiration reference: Control.
Three.js visual study.
Three.js visual study.
Three.js visual study.
Three.js visual study.