InSpace
The ANU Institute for Space (InSpace) represents a pioneering approach to space research, uniting technology, sustainability, and knowledge discovery through interdisciplinary collaboration. Through creative coding and generative design, this identity system translates the abstract concepts of space phenomena, interconnected research networks, and collaborative discovery into dynamic visual language.
Creative Code Project
*
Creative Code Project *
Approach
We developed a generative design system using p5.js to create three distinct interactive code sketches, each producing unique visual patterns that maintain brand consistency while offering infinite variation. The system translates abstract concepts of space phenomena, interconnected networks, and collaborative research into dynamic visual language.
Core Design Principles:
Minimalist aesthetic with flat colours and clean lines
Dark backgrounds representing the void of space
Tri-colour system mapping to brand pillars (blue/technology, green/sustainability, yellow/knowledge)
Interactive elements emphasising collaboration and discovery
Generative patterns ensuring every application feels fresh yet cohesive
Challenge
Create a comprehensive dynamic identity system for ANU InSpace that visually communicates the institute's three core pillars—technology, sustainability, and the pursuit of knowledge—while evoking the expanse and wonder of space exploration.
Outcome
The identity system successfully balances technical sophistication with accessibility, creating a visual language that feels simultaneously futuristic and grounded in scientific inquiry. The generative approach ensures scalability while maintaining brand recognition across all touch points.
Skills Demonstrated:
Creative coding (p5.js), brand strategy, typography, colour theory, Adobe Illustrator, Photoshop, UI/UX design, project management
Project Brief
Project Type: Brand Identity & Interactive Design
Client: ANU Institute for Space (Academic Brief)
Duration: University Semester Project 2024
Team: Amanda Lim, Amelia Robertson, Sophie Atkins
Role: Coded p5.js deliverables and assisted with print and screen developments
Solution
Two p5.js Sketches:
Trajectories - Radiating curved lines that respond to mouse interaction, symbolising exploration paths and the pursuit of knowledge
Nodes - Organic network of connected points using Perlin noise, representing interdisciplinary collaboration and knowledge exchange
Deliverables:
Logo and typography system (Stick No Bills + Gotham)
Print materials (posters, business cards, signage)
Digital applications (website mockups, Instagram posts)
Comprehensive brand guidelines
Interactive Creative Code
Trajectories
My Solution Process
1. Establishing the Foundation | I started by defining InSpace's brand colour palette as constants, ensuring consistency across all visual outputs. The dark background (#1E1B22) immediately evokes space, while the three primary colours map to the brand's pillars.
2. Creating Depth & Atmosphere | To avoid a flat, lifeless canvas, I generated 100 random background stars that subtly drift using Perlin-like randomness (random(-0.5, 0.5)). When stars float off-screen, they regenerate at new positions, creating an endless starfield effect that suggests infinite space.
3. Building Dynamic Trajectories | The core visualisation uses 10 initial trajectories radiating from the centre. Each trajectory has:
An angle for circular positioning around a central point
A pulsating radius using sin(frameCount) to create breathing, organic motion
A colour representing one of InSpace's three pillars
4. Adding Interactivity | The breakthrough was making trajectories respond to mouse position through Bézier curves. The curved paths bend toward the cursor, symbolising how human curiosity guides space exploration. This creates an immediate connection between user and visualisation.
5. Evolution Over Time | Every 300 frames, trajectories randomly shift colours between blue, green, and yellow—representing the fluid, interconnected nature of technology, sustainability, and knowledge in space research.
6. User Participation | Mouse clicks spawn new yellow trajectories, emphasising collaborative discovery and individual contribution to collective knowledge—a core InSpace value.
Nodes
My Solution Process
1. Establishing the Foundation | I used the same brand colour palette as the trajectories, with the dark background (#1E1B22) immediately evoking space. Each node randomly selects from the three brand pillar colours (blue/technology, green/sustainability, yellow/knowledge).
2. Creating Organic Movement | To avoid static, disconnected points, I implemented Perlin noise-based movement for each node. The noise function uses both spatial coordinates and frameCount to create smooth, natural drifting patterns that suggest the organic flow of ideas and research networks.
3. Building Dynamic Networks | The system starts with 10 initial nodes, each with randomized properties:
Position scattered across the canvas
Color representing one of InSpace's three pillars
Size variation (10-30px) suggesting different research scales
Speed variation creating diverse movement patterns
4. Adding Interactivity | The breakthrough was enabling user-driven network expansion. When users click, the system finds the nearest existing node and creates a connection to a new node spawned at the mouse position. This creates meaningful relationships rather than random connections.
5. Evolution Over Time | Nodes continuously drift using Perlin noise while staying within canvas bounds, representing the dynamic, ever-evolving nature of space research and interdisciplinary collaboration.
6. User Participation | Mouse clicks literally build the research network, emphasizing collaborative discovery and individual contribution to collective knowledge—a core InSpace value. Each interaction expands the connected system organically.
This creates a visual metaphor for how research networks grow through both natural evolution and deliberate human connection-making.