Class

Tangible User Interfaces

A class at UC Berkeley's School of Information where I got to build with Arduino, C++, and Processing, and learn how physical inputs change the feel of a digital system.

Role Student

Organization UC Berkeley I-School

Year 2025

Tools Arduino · C++ · Processing

rotatePushPop | Processing 4.3

rotatePushPop

 1 // Rotate Push Pop. Demonstrates the use of pushMatrix()
 2 // and popMatrix() to save and restore the coordinate system.
 3
 4 float a = 0.0;
 5 float ang1, ang2, ang3, ang4;
 6
 7 void setup() {
 8   size(640, 360);
 9   fill(255);
10   noStroke();
11 }
12
13 void draw() {
14   background(0);
15   a += 0.01;
16   ang1 = cos(a);
17   ang2 = cos(a*2);
18   ang3 = cos(a*3);
19   ang4 = cos(a*4);
20
21   pushMatrix();
22   translate(width/2, height/2);
23   rotate(ang1);
24   rect(0, 0, 240, 40);
25   translate(120, 0);
26   rotate(ang2);
27   rect(0, 0, 120, 30);
28   popMatrix();
29 }

A potentiometer turns the circle's size in the sketch.

A photoresistor in my palm dims and brightens the sketch.

A piezo speaker turns Processing audio into a glowing pattern.

About this class

Tangible User Interfaces was a class at UC Berkeley's School of Information about designing interactions that live in the physical world: things you press, twist, tap, and feel, with a screen reacting in real time. It was my chance to step away from the browser for a semester and build with my hands.

Most weeks we built a small experiment. I wired sensors and actuators into Arduino boards, wrote the firmware in C++, and had the board stream events over serial to a Processing sketch on a laptop that drew the response on screen. By the end I had a small collection of these little physical-digital toys, and a much better feel for what tangible inputs do to a system that's otherwise just pixels.

Read one of the writeups on Medium →

Next project

Tangible User Interfaces

About this class

be · betrothy →