Interaction: Sensors

Prototype sensor-driven visuals with simulated values first.

Example 1: Simulated Accelerometer

Code

let history = [];

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(252);
  const sensor = 0.5 + 0.5 * sin(frameCount * 0.04);
  history.push(sensor);
  if (history.length > width) history.shift();

  stroke(255, 45, 140);
  noFill();
  beginShape();
  for (let i = 0; i < history.length; i++) {
    const y = map(history[i], 0, 1, height - 30, 30);
    vertex(i, y);
  }
  endShape();

  fill(20);
  noStroke();
  text('sim sensor: ' + sensor.toFixed(2), 12, 20);
}

Try this: Replace the simulation value with real sensor or serial input later.

Open sketch in new tab

Example 2: Noise Sensor Dot

Code

let raw = 0;
let smoothed = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(248);
  raw = noise(frameCount * 0.02) * 1023;
  smoothed = lerp(smoothed, raw, 0.1);

  const r = map(smoothed, 0, 1023, 20, 180);
  fill(255, 45, 140, 180);
  noStroke();
  circle(width / 2, height / 2, r);

  fill(20);
  text('raw: ' + int(raw) + ' smooth: ' + int(smoothed), 12, 22);
}

Try this: Pattern for Web Serial: parse line -> map value -> smooth -> draw.

Open sketch in new tab

Resources