Computation in Design Lab

Semester 1

25–26

The Computation in Design Lab runs across 2 semesters and a total of 4 blocks. Students can sign up for any or all 4 blocks.

Lab session will be conducted in a more casual and ad-hoc manner. The can serve as a refresher of previously learned techniques and tools or we can look into other topics relevant to students participating in the lab.

Lab 1

Semester 1
week 3-7

Tools

1. Coding

1.1. p5.js

1.2. JavaScript ecosystem

1.3. Python (Blender, TouchDesigner)

1.4. HTML and CSS

2. Hardware

2.2. Arduino

2.3. Electronics

3. Fabrication

3.1. Laser Cutting

3.2. 3D Printing

3.3. OpenSCAD

3.4. Blender

3.5. Making

4. Companions

4.1. ChatGPT

4.2. Ollama

4.3. Gemini
4.4. Claude Code

When it comes to working with Technology, having a good foundational understanding of tools that can be used for different purposes is key to conduct experiments, engage in explorations, build prototypes and prepare for production.

1. Sketching

2. Prototyping

3. Production

Tools

1. Coding

1.1. p5.js

1.2. JavaScript ecosystem

1.3. Python (Blender, TouchDesigner)

1.4. HTML and CSS

2. Hardware

2.2. Arduino

2.3. Electronics

3. Fabrication

3.1. Laser Cutting

3.2. 3D Printing

3.3. OpenSCAD

3.4. Blender

3.5. Making

4. Companions

4.1. ChatGPT

4.2. Ollama

4.3. Gemini

1. Coding

1.1. p5.js

2. Hardware

2.2. Arduino

3. Fabrication

3.1. Laser Cutting

3.5. Making

4. Companions

4.1. ChatGPT

4.4. Claude Code

1. Coding

1.1. p5.js

1.2. JavaScript ecosystem

TouchDesigner

1.4. HTML and CSS

2. Hardware

2.2. Arduino

3. Fabrication

3.1. Laser Cutting

3.4. Blender

3.5. Making

4. Companions

4.1. ChatGPT

1. Sketching

2. Prototyping

3. Production

Tools

Learning is easy since it is a teaching tool and has a large community base, chatGPT can understand and write p5.js code to assist you
Works well for simple applications, sketching and prototyping
can extend from simple 2D applications to more advanced and complex 3D or shader applications
can be used to create simple user interfaces and software tools
Benefits from the vast javascript ecosystem and is able to integrate computer vision libraries, connects with AI tools like gemini, allows for the integration of midi or Arduino based physical interfaces
Allows for outcomes that are screen-based, interactive, 2D or 3D, networked and more

p5.js

p5.js is a javascript and browser based framework for creative coding. It is excellent for quick code sketches and quickly proving and idea. Although it can be used for production ready applications it is not necessarily made for it.

A major advantage of p5.js is that it is easily available, has a strong community and is known within create technology communities.

Alternatives

three.js
JavaScript ecosystem
TouchDesigner

Tools

Learning is easy since it is a teaching tool and has a large community base, chatGPT can understand and write Arduino code to assist you
Works well for simple applications, sketching and prototyping
Interfaces the physical world with the digital world, but it can also be used in a physical, tangible, kinetic way only
Can be used to create simple user interfaces, tools and physical artefacts, products

Arduino

Arduino is a physical computing environment that enables designers to quickly prototype physical interface built around sensors (inputs) and actuators (outputs).

The Arduino is software and hardware. Code that is programmed in software is run on the microcontroller hardware.

Just like p5.js, the Arduino environment has an advantage over other similar tools due to its wide range of of applications, accessibility and community.

Social Software

AI x Design

Permacomputing

Humane Technology

Technologies

Application

Type

are.na

website

Google Docs

Miro, FigJam

Visual Studio Code

platform

tool

code, tool

collecting references

research repository

writing, organising

mapping, ideating

coding html, css, web-development

Arduino

Blender

Figma

node.js

Processing

p5js

Prompting

Python

Touch Designer

Unity

Unreal Engine

hardware, microcontroller

3D modelling, animation

ui/ux, wireframe, prototypes

system, desktop, server

generative, design, interactivity

web-based, generative, design

various generative AI tools

system, desktop, AI, machine learning

interactivity, real-time audio-visual

interactivity, mobile, AR, real-time

real-time, 3D, interactivity, VR

code (Arduino, c/c++)

ui, node-based, code (python)

ui, node-based

code (javascript)

code (java)

code (javascript)

text

node-based (python)

code, node-based (C#)

node-based

The Frog-Turtle Dilemma

Git and Github
Markdown
node.js

Git and Github

Git and Github helps you store your code project in one place rather than loosing it in your sea of files.

GitHub requires you to create an account before starting to use its Source Control.

VS Code
.gitignore
GitHub Desktop

most useful git commands

git clone Downloads a complete copy of a remote repository to your local machine.
git pull Fetches and merges the latest changes from a remote repository into your current branch.
git add Prepares and stages files for commit, telling Git which changes you want to include in your next commit.
git commit Saves your staged changes to the local repository with a descriptive message.
git push Uploads your local commits to a remote repository (like GitHub).
git branch Creates, lists, or deletes branches in your repository.
git checkout Switches between branches or restores files to a previous state.
git merge Combines changes from one branch into your current branch.
git status shows the current state of your working directory and staging area

Git and Github
Markdown
node.js

Markdown

Markdown is a simple markup language that uses intuitive symbols like asterisks (*) for italics, hashtags (#) for headings, and dashes (-) for lists to format plain text.

Created in 2004, it's widely used for documentation, blogs, and README files because it's readable in raw form and easily converts to HTML or other formats.

Markdown is extremely useful for chatbots and AI agents because it enables clear, structured responses with headers, lists, code blocks, and emphasis without complex HTML.

It's lightweight, widely supported across platforms, easy for AI models to generate consistently, and highly readable for users. Most modern AI systems use Markdown natively for formatting.

Markdown syntax (click)

Markdown is great for taking structured notes, it is both, human-readable and machine readable (forget docs).

Git and Github
Markdown
node.js

node.js

Node.js is a JavaScript runtime that lets you run JavaScript code outside web browsers, primarily for building server-side applications.

It's fast, handles many simultaneous connections efficiently, and uses the same language (JavaScript) for both frontend and backend development. Perfect for web servers, APIs, and real-time applications like chat apps, data-based apps and more.

What the browser can't do, the backend can help you with.

Getting started with Node.js on Mac: Install Node.js from nodejs.org or use Homebrew (brew install node).

Verify installation with node --version in Terminal. Create a new folder, make a file called app.js, write console.log("Hello World!"), then run node app.js. Use VS Code editor and follow online tutorials for building projects.

Resources

Pre-Mortem Activity

Activities

Method Toolkits

Design Kit Methods by IDEO don’t miss the Mindset videos

Design Method Toolkit University of Applied Sciences Amsterdam

MakeTools series of paper addressing research, experience, tools (see articles and videos)

Design Methods Toolbox Problem seeking, sharing, solving

Design Methods Finder (some links might be outdated) list of methods gives a good overview of common methods, gives you pros and cons, short description of what the method entails, its tools, goal(s), preparation and how-to steps.

User Experience methods catalogue: A curation of high-quality and helpful user experience methods categorised into the following phases: Understand, Define, Ideate, Design, Evaluate

Usability: Usability testing is the practice of testing how easy a design is to use with a group of representative users. It usually involves observing users as they attempt to complete tasks and can be done for different types of designs. It is often conducted repeatedly, from early development until a product’s release.

Designing Futures This website complements the book »Designing Futures – Speculation, Critique, Innovation. A guide to exploring, visualising and negotiating future scenarios.« (foreword by Riel Miller, published by Laurence King / Quercus / Hachette, 2024) with additional digital resources and links. See this miro board for ideation templates

A collection of methods to bring human-centred design into your project: Discover (Build a greater understanding of your problem and the people it impacts), Decide (Elaborate on research from your Discovery phase.), Make (Create a testable solution), Validate (Test a design hypothesis.), Fundamentals (Foundational methods for practising design research).

These resources can be helpful when it comes to ideating, prototyping, testing, observing, evaluating your work

Misc

Designing an experiential scenario: The People Who Vanished

These resources can be helpful when it comes to ideating, prototyping, testing, observing, evaluating your work

Co-creation and the new landscapes of design

Critical Design FAQ

Future Observatory: the Design Museum’s national research programme for the green transition

blackbox.ai: Blackbox AI is a cutting-edge artificial intelligence tool specifically designed to aid developers like you. It acts as a virtual coding companion, capable of understanding your requirements in plain English and translating them into functional code across various programming languages. how to link