Circuits to Graphics: Hardware as Design Interface

Prototyping alternate drawing tools that connect the digital to the physical.

🔌

We will delve into how commonplace electronic components can be wired up to offer alternate yet powerful ways of brainstorming visual concepts for the screen.

Concept

When we have math, we have the ability to turn one set of data into another.
Words can be visuals, numbers give rise to form, design inches closer to development.
We must imagine unusual interfaces to question standard practices that often lead to standardized visual outcomes.

Part I - Novel processes for expected outcomes

Exploring the potential of alternate drawing tools where physical circuits and electronic components are the interface to create visuals

Control a color wheel with a potentiometer

Ultrasonic proximity sensor deciding when spring springs

Prototype → Identity

Joystick-led realtime graphics that inspired a custom tool

Part II - Novel processes for novel outcomes

Graphics created with the tool formed the components for a wider set of assets, each symbolizing the merging of art and code dualities. Read more about the project Virtual Creative Coding Fest

Circuits to Graphics: Workshop Follow-Along Guide

What You’ll Need

Physical materials

Laptop, USB to USB-C adapter, a sensor/actuator, arduino, wires, Arduino Uno

Digital materials

1. Hardware code → Arduino IDE

2. Digital Canvas → A text editor to write your code in. We will be using P5.js in VS Code running in a local environment. Make sure you have the p5 library reference linked as

<head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.13/lib/p5.js"></script>
   	<script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5.serialserver@0.0.28/lib/p5.serialport.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

3. Serial Communication → P5 Serial Control

→ Download Link

Now we begin…

ACT I: Get the hardware set up

// A0 Arduino pin connected to VRX pin
#define VRX_PIN A0
// Arduino pin connected to VRY pin
#define VRY_PIN A1 
#define SW_PIN   2

int xValue = 0; // To store value of the X axis
int yValue = 0; // To store value of the Y axis
bool buttonPressed = false;

void setup() {
  Serial.begin(9600) ;
  pinMode(SW_PIN, INPUT_PULLUP);
}

void loop() {
  // read analog X and Y analog values
  xValue = analogRead(VRX_PIN);
  yValue = analogRead(VRY_PIN);
    // read button — INPUT_PULLUP inverts it, so LOW = pressed
  buttonPressed = (digitalRead(SW_PIN) == LOW);
  // print data to Serial Monitor on Arduino IDE
  Serial.print("x = ");
  Serial.print(xValue);
  Serial.print(", y = ");
  Serial.print(yValue);                                  // <-- print, not println
  Serial.print(", b = ");
  Serial.println(buttonPressed ? "true" : "false");      // <-- println only on the LAST one
  delay(200);
}

ACT II: Get p5.serial to recognize the port

💡

Enable console and ASCII

ACT III: Receive the data in your p5 sketch

Beginner Sketch

p5.js Web Editor

A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

editor.p5js.org

This is your starter sketch.

p5.js Web Editor

A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

editor.p5js.org

Make sure to duplicate it to your own p5 account. However, it is preferred if you download the code and run it in your local IDE to avoid browser permission issues or delays in sensor monitoring

We will mostly be making changes to this block:

function draw() {
  if (getButtonPress()) {
    bgIndex = (bgIndex + 1) % palette.length;
  }
  let c = color(palette[bgIndex].bg);
  c.setAlpha(40);         
  background(c);

  stroke(palette[bgIndex].fg);
  //all 3 values being read from the serial communicator
  let xPos = parseInt(latestData[0].split("=")[1]);
  let yPos = parseInt(latestData[1].split("=")[1]);
  strokeWeight(20);
  translate(width/2,height/2);
  
  //💜 This is where you can map the values to anything you want.  
  let increment = map(xPos, 0, 1023, 0.01, 2);
  let finalxPos = map(xPos, 0, 1023, 0, width-100);
  let finalyPos = map(yPos, 0, 1023, 0,height-100);
  
   //💜 Create your own shapes, graphics, text 
  beginShape()
  for(let i = 0; i< PI*2; i=i+increment){
      let r1 = finalyPos;
      let r3 = r1+random(-15,15);
      let x = cos(i)*r3;
      let y = sin(i)*r3;
      vertex(x,y);
  }
  endShape(CLOSE)
  
  
  let increment2 = map(finalxPos, 0, width, 2,0.01)
    beginShape()
  for(let i = 0; i <PI*2; i=i+increment){
      let r2 = r +random(-15,15);
      let x = cos(i)*r2;
      let y = sin(i)*r2;
      vertex(x,y);
  }
  endShape(CLOSE)
  makeText();
}

EPILOGUE: Up the anté

Modify existing: Can the text grow and shrink? Can clicking the joystick add more shapes on canvas.
Bring in new: values from your own P5 sketches.
Use a different sensor! Do you have an ultrasonic? A potentiometer? See how varying the Arduino code lets you make things differently.

Resources:

Connecting p5 & Arduino through the serial port

Here is the example sketch along with links to source materials & the p5.serialcontrol application: https://editor.p5js.org/jesse_harding/sketches/93DuTsrh_

www.youtube.com

Connecting p5 & Arduino through the serial port

Arduino - Joystick | Arduino Getting Started

Learn how Joystick works, how to connect Joystick to Arduino, how to program Arduino step by step. The detailed instruction, code, wiring diagram, video tutorial, line-by-line code explanation are provided to help you quickly get started with Arduino.

arduinogetstarted.com

Arduino - Joystick | Arduino Getting Started

Open Hardware Summit

Circuits to Graphics: Hardware as Design Interface

Prototyping alternate drawing tools that connect the digital to the physical.

Concept

Part I - Novel processes for expected outcomes

Prototype → Identity

Part II - Novel processes for novel outcomes

Circuits to Graphics: Workshop Follow-Along Guide

What You’ll Need

Physical materials

Digital materials

Now we begin…

ACT I: Get the hardware set up

ACT II: Get p5.serial to recognize the port

ACT III: Receive the data in your p5 sketch

p5.js Web Editor

p5.js Web Editor

EPILOGUE: Up the anté

Resources:

Connecting p5 & Arduino through the serial port

Arduino - Joystick | Arduino Getting Started