2021

Generative Drawing Triptych

A three-part p5.js landscape series exploring procedural drawing, reusable visual systems and simple interaction.

Creative Coding • Generative Drawing • Interaction

JavaScriptp5.jsHTMLCSS

01

Snowy Mountains

A geometric mountain scene built from layered shapes, repeated stars, and a soft gradient sky.

02

City Skyline

A night skyline drawing using repeated building forms, colour contrast, and a simple architectural rhythm.

03

Forest Cabin

A forest scene with small interactive details that bring more movement and atmosphere to the final piece.

Interactions

  • Press 1 — Launch a shooting star
  • Press 2 — Trigger a meteor shower
  • Press 0 — Clear the sky
  • Click & hold the cabin window — Turn on the light

Overview

Generative Drawing Triptych is an early creative coding project exploring how p5.js can be used to build procedural visual systems and simple interactions. The series includes three landscape scenes: Snowy Mountains, City Skyline and Forest Cabin. Each piece uses reusable drawing functions, 2D geometry, layered colour and repeated forms to create a distinct atmosphere while maintaining a consistent visual language across the set.

Build & Strategy

Each scene was built from simple 2D shapes, using reusable drawing functions to repeat, reposition and adapt elements across the compositions.

I created gradual sky transitions using repeated rectangles and colour arrays, adapting the system to produce different times of day and atmospheres.

I explored loops, arrays and class-based structures to generate repeated elements such as stars and understand how different approaches affected the code and visual outcome.

Forest Cabin introduced simple interaction states, including keyboard-triggered sky effects and a clickable window light.

The series was influenced by Saskia Freeke’s use of bold colour and geometric form, which helped shape a consistent visual language across the three scenes.

Reflection

This project was an early step in learning how code could be used as a visual material. It helped me understand the value of reusable functions, procedural repetition and interaction states while also showing how technical constraints can become part of a project’s visual style.