Skip to content

Repository files navigation

Cybernetic Design Network

An interactive visualization exploring design as a living, self-regulating system inspired by cybernetics and ecological networks.

Project Overview

This project presents a new design methodology where the design process operates as a dynamic network of interdependent nodes rather than a linear sequence. Each node represents a key aspect of design—such as material, form, structure, emotion, manufacturing, or cost—and creates continuous feedback loops that shape the entire system.

Concept

In this cybernetic model:

  • Each decision is an input that produces a design output
  • Outputs send feedback to other nodes, altering their conditions
  • The system constantly balances and adapts like an ecosystem maintaining homeostasis
  • Design becomes a living process that evolves through interconnected relationships

The visualization demonstrates how focusing on one design factor ripples through the network, transforming the entire outcome.

Features

  • Interactive Node Network: Click nodes to explore feedback loops and connection paths
  • Dynamic Visualization: Force-directed graph showing real-time relationships
  • Zoom & Pan: Mouse scroll or +/- buttons to navigate the network
  • Randomization: Generate alternative network configurations to explore system behavior
  • Path Tracking: See how decisions propagate through the design system
  • Feedback Animation: Visual pulse effects showing influence spread

Installation

npm install
npm run dev

Dependencies

  • React
  • TypeScript
  • D3.js
  • Vite

Usage

  • Click a node to highlight its connections and view the feedback path
  • Drag nodes to rearrange the network layout
  • Scroll to zoom in/out or use the +/- buttons
  • Click "Randomize Connections" to explore alternative system states
  • Click "Reset System" to restart the simulation

Design Nodes

The network includes five main design categories:

  • Form: Balance, modularity, scale, geometry, visual rhythm, structure, composition
  • Function: Adaptability, ergonomics, usability, maintenance
  • Material: Sustainability, texture, material choice, aging, thermal properties
  • Emotion & Aesthetics: Cultural reference, emotion, storytelling, identity
  • Process: Cost & time, fabrication, assembly, supply chain

Plus a central Feedback Loop node that represents the iterative nature of design.

Philosophy

By visualizing design as a cybernetic network, this project reveals:

  • Design is not fixed, but alive and adaptive
  • Every decision creates ripples throughout the system
  • Understanding feedback loops leads to better design outcomes
  • The design process is an ecosystem, not a checklist

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages