Computation in Design 3

Data Spaces

Workshop
Sensable Objects

Workshop
Sensable Objects

Workshop
Sensable Objects

This workshop explores sensing data from both human and machine perspectives. It comes in two parts: we begin with human sensing, using touch as a simple example.

Next, we connect a basic touch sensor to a physical object and our laptops. The challenge is to create expressive visual responses to touch events that make objects sensable.

This workshop builds on the skills you acquired in last semester's Computation in Design class, in which you used Arduino and p5.js to create interactive experiments.

We have lost touch with touch. Most of us now interact with the world through glass screens, often missing out on the rich sensory information that our bodies naturally gather, such as texture, temperature, weight or vibration. This workshop will give a glimpse into seeing your hand again as the sophisticated sensing instrument it is.

Workshop
Sensable Objects

Instead of using complex touchscreens and keyboards, we will use a simple capacitive touch sensor. Working within these limitations encourages creative problem solving. It's like making music with just one drum compared to a full orchestra because limitations can often spark the most innovative ideas.

Traditional interfaces are designed for efficiency, with keyboards for typing and a mouse for pointing and clicking. But what if touching a sensor could bring out emotions, trigger memories, or inspire visual poetry? We will explore how physical interaction can become a form of creative expression, turning a gentle touch into visuals or an erratic tap into fractured digital patterns.

Our devices constantly demand our attention with notifications and updates. In this workshop, we will explore the concept of a different kind of computing: one that is calm and non-intrusive, and more like furniture than smartphones. What if we can look at ways in which technology could make our lives better without taking over?

Although this may sound ambitious, let's keep an open mind and consider technology beyond our everyday experiences. Imagine ways of living and communicating where humans and machines sense the world meaningfully and immersively.

 

Workshop
Sensable Objects

Touch

Interaction

+

// Two variables to hold numeric values 
// coming from external events
let smoothValue = 0; // A smoothed value that is drawn on screen
let rxtxValue = 0;   // The raw incoming value from rxtx events


function setup() {
  // Create a canvas that fills the browser window
  createCanvas(windowWidth, windowHeight);

  // Connect to the external rxtx library 
  // (e.g., sensors, data stream)
  // 'this' refers to the p5 sketch context 
  // so rxtx can send events here
  rxtx.connect(this);
}

function draw() {
  
  background(0);
  
  // Smoothly move smoothValue towards dim1 
  // (low-pass filter / easing)
  // This avoids sudden jumps when 
  // data changes abruptly
  smoothValue += (rxtxValue - smoothValue) * 0.05;
  
  // Draw a white circle in the 
  // center of the canvas
  stroke(255);
  noFill();
  ellipse(width / 2, height / 2,4 + smoothValue * 0.1);
}

// this code-block is required when 
// starting a new p5js sketch, hence, you need
// to copy the following code over.

function rxtxEvent(theEvent) {
  // Called whenever a new rxtx event arrives
  // Log the full event object to the console for debugging
  console.log(theEvent.value);

  // Take the first element of the incoming value array
  // and assign it to dim1 (the target value for dim0)
  rxtxValue = theEvent.value[0];
}

This workshop comes in 2 parts

Human Sensing

Workshop
Sensable Objects

Part 1

Human Sensing

Workshop
Sensable Objects

1

Human Sensing

Workshop
Sensable Objects

1

In order to better understand how an object could feel, we start with our own ability to sense and feel.

Know Your Own Sensing Apparatus

Workshop
Sensable Objects

  1. Each student touches their own palm, forearm, cheek

1.1

Know Your Own Sensing Apparatus

Workshop
Sensable Objects

  1. Each student touches their own palm, forearm, cheek
     
  2. Measure your personal sensing baseline:
    What does "normal" skin temperature feel like?
    How sensitive are your fingertips today?

1.1

Know Your Own Sensing Apparatus

Workshop
Sensable Objects

  1. Each student touches their own palm, forearm, cheek
     
  2. Measure your personal sensing baseline:
    What does "normal" skin temperature feel like?
    How sensitive are your fingertips today?
     
  3. Quick group discussion: Are we all sensing similarly?

1.1

Know Your Own Sensing Apparatus

Workshop
Sensable Objects

  1. Each student touches their own palm, forearm, cheek
     
  2. Measure your personal sensing baseline:
    What does "normal" skin temperature feel like?
    How sensitive are your fingertips today?
     
  3. Quick group discussion: Are we all sensing similarly?
     
  4. The purpose of this quick exercise is to establish your own individual sensing baseline before we move on to explore external objects that are all around us

1.1

Sensing Journey

Workshop
Sensable Objects

  1. You will explore different objects and materials by systematically touching them and recording how they feel.
     
  2. In the second part of the workshop, you will compare your discoveries and brainstorm ways in which these physical sensations could inspire digital interactions with a simple touch sensor.


Each group to have a piece of paper ready

1.2

Sensing Journey

Workshop
Sensable Objects

1.2

Sensing Journey

Workshop
Sensable Objects

Planning Your Sensing Journey
In your groups, pick 3 objects from the matrix below, 1 from each of the 3 categories. Write them on paper.

5

1.2.1

Natural / Organic


Synthetic / Manufactured
 

In-betweens

 

Tree bark, leaves, stone, soil,
water, plants, grass

Metal railing, plastic chair, concrete,
glass, fabric

wood furniture, ceramic, paper, rubber, composite materials

Type of object

For example

Tactile Mapping

Workshop
Sensable Objects

The Tacticle Mapping Exercise is the main hands-on activity that takes place in the classroom and around LASALLE's campus.

25

1.2.3

  1. Group rotates through all 3 objects selected
     
  2. For each object fill out one worksheet to record sensed data

Sensing Journey

Workshop
Sensable Objects

1.2

I see you all back in class at 3:20pm

Workshop
Sensable Objects

Human Sensing → Machine Sensing

Making Sense of What We Sensed

Workshop
Sensable Objects

Based on the objects sensed and data collected, lets do a brief analysis of what you discovered.

1.4

  1. Most unexpected feeling
    Which object felt completely different than you thought?
  2. Favorite Texture
    Which one of the objects did feel the most interesting?
  3. Weirdest discovery
    What made you go "woah, that's strange"?
  4. Sensing Sequence
    Which one of the Sensing Sequences did you like the best?
  5. Any other observations?
  1. Most unexpected feeling
     
  2. Favorite Texture
     
  3. Weirdest discovery
     
  4. Sensing Sequence
     
  5. Any other observations?

What Objects Could Become Interactive?

Workshop
Sensable Objects

Think about everyday objects and how you could make them interactive as a Sensable Object to tell a  visual story?

1.5

  1. Furniture
    What if a table edge could sense touch and respond with light?
  2. Natural Objects
    Could a potted plant react when you touch its leaves?
  3. Fabric, Clothing
    What about a a piece of fabric that changes an animation?
  4. Art materials
    Paper that draws abstract visuals on screen when you touch it?
  1. Furniture
     
  2. Natural Objects
     
  3. Fabric, Clothing
     
  4. Art materials

Workshop
Sensable Objects

Let's move on to part 2: Machine Sensing, a Sensable Object.

Machine Sensing, a Sensable Object.

Workshop
Sensable Objects

Part 2

Machine Sensing, a Sensable Object.

As a group, and based on your findings from the part 1 exercise, develop an idea for a sensable object.

As demonstrated in class, the object should connect to an Arduino using a wire, a copper tape or anything that conducts electricity.

The Arduino then connects to p5.js as demonstrated and outlined in the next slides. The objective is to create a simple experience for your next session on Thursday.

Workshop
Sensable Objects

Machine Sensing, a Sensable Object

Workshop
Sensable Objects

Object

Code

+

// Two variables to hold numeric values 
// coming from external events
let smoothValue = 0; // A smoothed value that is drawn on screen
let rxtxValue = 0;   // The raw incoming value from rxtx events


function setup() {
  // Create a canvas that fills the browser window
  createCanvas(windowWidth, windowHeight);

  // Connect to the external rxtx library 
  // (e.g., sensors, data stream)
  // 'this' refers to the p5 sketch context 
  // so rxtx can send events here
  rxtx.connect(this);
}

function draw() {
  
  background(0);
  
  // Smoothly move smoothValue towards dim1 
  // (low-pass filter / easing)
  // This avoids sudden jumps when 
  // data changes abruptly
  smoothValue += (rxtxValue - smoothValue) * 0.05;
  
  // Draw a white circle in the 
  // center of the canvas
  stroke(255);
  noFill();
  ellipse(width / 2, height / 2,4 + smoothValue * 0.1);
}

// this code-block is required when 
// starting a new p5js sketch, hence, you need
// to copy the following code over.

function rxtxEvent(theEvent) {
  // Called whenever a new rxtx event arrives
  // Log the full event object to the console for debugging
  console.log(theEvent.value);

  // Take the first element of the incoming value array
  // and assign it to dim1 (the target value for dim0)
  rxtxValue = theEvent.value[0];
}

Workshop
Sensable Objects

Machine Sensing, a Sensable Object

Preparing your p5.js sketch

Workshop
Sensable Objects

1 / 5

p5.js template 1
with comments

p5.js template 2 (2D)
without comments 

p5.js template 3 (3D)
without comments 

ChatGPT prompt to automatically copy Arduino connection code to your sketch

p5.js collection of all sketches

Preparing your p5.js sketch

<script src="https://cdn.jsdelivr.net/gh/sojamo/p5.rxtx@0.1.3/lib/p5.rxtx.min.js"></script>

Workshop
Sensable Objects

Copy the line of code below to the index.html file in your p5js sketch. In the p5js editor, click the arrow-button to open the file browser, or press Cmd-B

2 / 5

Preparing your p5.js sketch

function setup() {
  // Create a canvas that fills the browser window
  createCanvas(windowWidth, windowHeight);

  // Connect to the external rxtx library 
  // (e.g., sensors, data stream)
  // 'this' refers to the p5 sketch context 
  // so rxtx can send events here
  rxtx.connect(this);
}

Workshop
Sensable Objects

Copy the code on the left to your sketch.js file and add line 9 to the bottom of your setup() function.

3 / 5

Preparing your p5.js sketch

// Two variables to hold numeric values 
// coming from external events

let smoothValue = 0; // A smoothed value that is drawn on screen
let rxtxValue = 0;   // The raw incoming value from rxtx events

function rxtxEvent(theEvent) {
  // Called whenever a new rxtx event arrives
  // Log the full event object to the console for debugging
  console.log(theEvent.value);

  if (theEvent.value.length <= 0) return;

  // Take the first element of the incoming value array
  // and assign it to dim1 (the target value for dim0)
  rxtxValue = theEvent.value[0];
}

Workshop
Sensable Objects

Copy the code on the right to your sketch.js file.

The rxtxEvent function receives data from your Arduino, the data will be a single number stored in variable rxtxValue.

Remember that rxtxValue can become very large when there's high touch capacity.

4 / 5

Preparing your p5.js sketch

// Smoothly move smoothValue towards rxtxValue 
// (low-pass filter / easing)
// This avoids sudden jumps when 
// data changes abruptly
smoothValue += (rxtxValue - smoothValue) * 0.05;

Workshop
Sensable Objects

Then, copy the following to the top of your draw function inside sketch.js.

Line 5 will be used to smoothen the incoming data, it's called easing. The smoothened value be stored in variable smoothValue

5 / 5

Machine Sensing, a Sensable Object.

By the end of today's session you will have
 

  1. a working p5.js sketch that receives data from an Arduino
     
  2. a physical object to use as an interface with your p5.js sketch
     
  3. demonstrate step 1. and 2. to your lecturer
     
  4. Remember that you can go into fullscreen mode by pressing f inside the cavas

Workshop
Sensable Objects

Machine Sensing, a Sensable Object.

Good practice tips
 

  1. Take good documentation photos and videos so that you have enough material when you prepare for submission
     
  2. quality and presentation matters, make sure your object is well made and hide unnecessary details like the Arduino
     
  3. Take a simple approach, don't panic.

Workshop
Sensable Objects

Some references and inspiration.

Use easily accessible materials, pay a visit to Daiso, don't over-complicate, make something that you want to enjoy and see begin made.

Workshop
Sensable Objects

Workshop
Sensable Objects

Simple materials
Well crafted

Workshop
Sensable Objects

Textures
Found materials

Workshop
Sensable Objects

Card board
DIY aesthetics
Crafting
Quality 

Workshop
Sensable Objects

Crafting
Fabrication

Workshop
Sensable Objects

Exhibition objects
Aesthetics

Workshop
Sensable Objects

Found materials
Treated materials

Workshop
Sensable Objects

Curiosity
Think about the user, the audience
Narrative

Workshop
Sensable Objects

Guiding the user
Invitation to touch, interact

Workshop
Sensable Objects

Setup
Experience

Workshop
Sensable Objects

Screen experience
Coded and interactive animations

Workshop
Sensable Objects

Aesthetics
2D, 3D, algorithmic – avoid figurative approach

Workshop
Sensable Objects

Type narratives
Generative graphics

Workshop
Sensable Objects

Kinetic Type
Generative Type

Workshop
Sensable Objects

End of workshop.
Navigate to the right for next steps and deliverables.

Machine Sensing, a Sensable Object.

Workshop
Sensable Objects

Next Steps and Deliverables

Workshop
Sensable Objects

Next Steps

Independent study. As a group, work on your interactive Sensable Object which you will demonstrate to your lecturers on Thursday

Wednesday

Consult with your lecturers and document your setup and user interactions with photos and videos, capturing both the process and final outcomes.

Thursday

Workshop
Sensable Objects

Deliverables to show Andreas by Session 7

12 photos well shot and high-res process photos including Part 1: Human Sensing and Part 2: Machine Sensing, a Sensable Object.

4 photos well shot and high-res final outcome photos including interaction.

Photos

1 video documenting Part 1: Human Sensing

1 video presenting and explaining (including interaction) the video for Part 2: Machine Sensing, a Sensable Object. You have creative freedom to story-tell, edit and narrate.

Videos

Workshop
Sensable Objects

Returning of Arduino Boards

All Arduino boards must be returned at the end of the Data Spaces project, Session 9.

cid-3-sensable-objects-2526

By Andreas Schlegel

cid-3-sensable-objects-2526

  • 710

More from Andreas Schlegel