Class Notes, 6 Mar 2018

Bruce Sterling and the future of design

Bruce Sterling talk at 5pm, 7 March, Kresge.

Bruce Sterling’s closing keynote at IXDA

Bruce Sterling: Closing Keynote from Interaction Design Association on Vimeo.

Bill Baxton’s collection of Interactive Devices

Science Fiction and Interaction Design

William Gibson, “Neuromancer

William Gibson and Bruce Sterling, “The Difference Engine

K. W. Jeter, “Dr. Adder

Blade Runner 2049 at Row Theatre

Assignment Six


For this assignment, I wanted to further explore the serial protocol between p5.js and Arduino. Specifically, how to send more complex information from p5 (long strings) and read multiple values on the Arduino. I created a sketch that acts as a NeoPixel color picker where you can slide along and set the color, then click on the corresponding box to light that exact NeoPixel on the Arduino.

***This project will be updated shortly to include gyro sensor***

Password: MakingThingsInteractive

Arduino Code:


Assignment 6: Mouse motion based on wire protocol

Move an object based on accelerometer movement. I used an ADXL362 and the wire protocol to move an object on the screen. The accelerometer sends the raw XYZ values and a state of a button, the P5Js scripts map the raw acceleration values to areas on the screen.

Todo: Need to update the p5js script and improve documentation and add photos.



Assignment6 – spatial sensor viz experiment

This is a preliminary experiment for my project which aims to visualize sensor network data of a room/building in three dimensions. For this first test, I took temperature data through I2C and visualized particles on Unity that changes the alpha of color depending on the sensor readings. The demo is a bit unintuitive since only a single sensor is being used,  but the intention is to take temperature data from each part of a room, manually map the reading location on Unity, and visualize for the entire room.


Assignment 6

For this assignment, I decided to do another iteration of my assignment 4 light project using Neopixel.

I used the same basic GUI with three settings: Sleep, Bathroom, and Movie. The sleep mode is a green light, the bathroom mode is a red light, and the movie mode is a blue light.

I only got one neopixel to work so far because of some arduino issues / my original neopixel was broken.


Future work:

I want to create the full lighting system idea with neopixels. I also hope to integrate it into an interactive standing desk and make it bluetooth controlled. I also want to work on different light diffusion techniques to create a brighter light display.



Assignment 6: complex I/O

Use an input or output that uses a complex serial protocol on the SDA/SLC pins, tied to a p5.js sketch.    Read a sensor and generate a useful or interesting interface in p5.js or use a p5.js interface to control a stepper or series of NeoPixel LEDs.  [Edit: The goal here was to use SDA/SCL, if you didn’t, please use it in a future project.]

Assignment 4

My plan was to use the wind turbines in the united states as my data input, and display their location on a map of the world. I was then going to have the little location dots change colors when clicked (just to get some more object programming in).

I got the map to appear:

and I can zoom in and out and that’s kind of fun:

but whenever I try to load data onto the page I get this lovely display:

forever and ever.

So here’s my code.

Maps turbines

Assignment Five

Simple Shapes

For this, I wanted to investigate different Arduino inputs and how that might control elements of my objects in p5. I used two pots and two tact switches. The pots control size and spacing, while the switches can add and subtract a rectangle element. Right now there are two circles, however I’d like to work and see more ways to add an object.

Arduino Code:
//--------NEOPIXEL SETUP --------
#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
#include <avr/power.h>
static const int PIN = 40;
static const int NUMPIXELS = 1;
Adafruit_NeoPixel pixels = Adafruit_NeoPixel(NUMPIXELS, PIN, NEO_GRBW + NEO_KHZ800);

//--------POT & TACT LEFT--------
static const int potLeft = A0;
int potValLeft;
int mapValLeft;

static const int switchLeft = 2;
int switchStateLeft = 0;
int lastStateL = LOW;

//--------POT & TACT RIGHT--------
static const int potRight = A1;
int potValRight;
int mapValRight;

static const int switchRight = 3;
int switchStateRight = 0;
int lastStateR = LOW;

int count = 2;

const bool isInterrupt = true;

unsigned long lastSampleTime = 0;
unsigned long sampleInterval = 500;


void setup() {
 // put your setup code here, to run once:

pinMode(switchLeft, INPUT);
 pinMode(potLeft, INPUT);
 pinMode(potRight, INPUT);
 pinMode(switchRight, INPUT);


void loop() {
 unsigned long now = millis();

potValLeft = analogRead(potLeft);
 potValRight = analogRead(potRight);

switchStateLeft = digitalRead(switchLeft);
 switchStateRight = digitalRead(switchRight);

if (lastSampleTime + sampleInterval < now) {
 lastSampleTime = now;

mapValLeft = map(potValLeft, 0, 1023, 20, 350); // sends offset
 mapValRight = map(potValRight, 0, 1023, 20, 300); // sends size

if (switchStateLeft && switchStateLeft != lastStateL) {
 if (count <= 12 && count > 2) {
 count -= 1;
 } else {
 count = 2;
 } else if (switchStateRight && switchStateRight != lastStateR) {
 if (count < 12) {
 count += 1;
 } else {
 count = 12;
 lastStateL = switchStateLeft;
 lastStateR = switchStateRight;


/* //-----DEBUGGING-----
 Serial.print("count: ");

Serial.print("Left Pot Send: ");

Serial.print("Right Pot Send: ");
p5.js Code:
  Based on "Sea Shell" by Michael Pinn

var serial;
var portName = '/dev/cu.usbmodem1411';

var xLen = 1200;
var yLen = 700;

var bubbles;
var bubbles2;

var latestData;
var aNum = 0; // number of squares from arduino
var aOff = 0; // offset number from arduino
var aSize = 0; // size number from arduino

function setup() {
 serial = new p5.SerialPort();
 // now set a number of callback functions for SerialPort
 serial.on('list', printList);
 serial.on('connected', serverConnected);
 serial.on('open', portOpen);
 serial.on('error', serialError);
 serial.on('close', portClose);
// serial.on('data', serialEvent);
 serial.on('data', gotData);


// set up our drawing environment
 createCanvas(xLen, yLen);

bubbles = new Bubble(240,0); // sets the location
 bubbles2 = new Bubble(240,5); // sets the location


function draw() {
 background(240);,100, 8, aOff); // sets up the size, offset, rotational controller (mouse position here, aOff, aNum, mouseX); // sets up the size, offset, rotational controller (mouse position here)

class Bubble {
 constructor (l, w){
 this.l = l;
 this.w = w;

show(s, o, n, m){
 this.s = s;
 this.offset = o;
 this.n = n;
 this.m = m;

 translate(width/2, height/2);
 for (var i = 0; i < 360; i += 360/this.n) {
 this.x = sin(radians(i)) * this.offset;
 this.y = cos(radians(i)) * this.offset;
 translate(this.x, this.y);
 rotate(radians(+i + this.m));
 fill(sin(radians(i / 2)) * 255, 50, 100);


function printList(portList) {
 for (var i = 0; i < portList.length; i++) {
 print(i + " " + portList[i]);

function serverConnected() {

function portOpen() {

function gotData() {
 var stringRead = serial.readLine(); // read the incoming string
 trim(stringRead); // remove any trailing whitespace
 if (!stringRead) return; // if the string is empty, do no more
 // console.log(stringRead); // println the string
 latestData = stringRead; // save it for the draw method

var aString = latestData.split(",");
 if (aString.length>5)
 aNum = aString[1];
 aOff = aString[3];
 aSize = aString[5];
 // console.log("aNum: " + aNum + "aOff: " + aOff + "aSize: " + aSize);

function serialError(err) {
 print('serialError ' + err);

function portClose() {

Arduino, p5.js, Fritzing files