leentwentyone

Rendered Reality

RENDERED REALITY

Uses your camera

Live version. Your camera feed is processed locally in your browser. Nothing is recorded or uploaded.

An interactive installation that turns your live camera feed into a shifting layer of ASCII camouflage. A digital disguise that still exposes you. It started with the feeling of being constantly observed by technology, algorithms and data. Every frame reacts in real time, scanning, decoding and rebuilding you as part of a system that pretends to understand you. Created for “Freies Projekt” at Hochschule Mainz and exhibited at LUX in Mainz, where I gave my first talk in front of a larger audience. Uni project.

Year
2025
Role
Concept, Creative Coding, Exhibition

Tools

  • JavaScript

Code

rendered-reality / charset.js
const baseCharset = "@#Wm%&8Oo:,. ";
const disturbedCharset = "@#Wm%&8Oo:,.?!/\\|(){}[]<>^~-_=+*;:$%ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
const pixelSize = 6;
const whiteText = "NOTHINGISREALEXCEPTYOURCONSCIOUSNESS";
rendered-reality / camo.js
function camoColor(r,g,b){
  const l = (Math.max(r,g,b)+Math.min(r,g,b))/2/255;
  let base;
  if(l < 0.25) base = [47,79,42];
  else if(l < 0.45) base = [62,106,58];
  else if(l < 0.65) base = [90,138,85];
  else base = [139,191,130];
  return `rgb(${base[0]+Math.floor(Math.random()*20-10)},${base[1]+Math.floor(Math.random()*20-10)},${base[2]+Math.floor(Math.random()*20-10)})`;
}
rendered-reality / render.js
for(let y=0;y<rows;y++){
  for(let x=0;x<cols;x++){
    const i = (Math.floor(y*(vh/rows))*vw + Math.floor(x*(vw/cols)))*4;
    const r=img[i], g=img[i+1], b=img[i+2];
    const L = lum(r,g,b);
    let ch, color;
    if(Math.random() < noiseLevel) ch = charset[Math.floor(Math.random()*charset.length)];
    else if(L>0.85){ ch = whiteText[whiteIndex % whiteText.length]; whiteIndex++; color = "#8BBF82"; }
    else { const idx = Math.floor(L*(baseCharset.length-1)); ch = baseCharset[baseCharset.length-1-idx]; }
    color = color || camoColor(r,g,b);
    out += `<span style="color:${color}">${ch}</span>`;
  }
  out += '<br>';
}
rendered-reality / tracking.js
const filtered = detections.filter(d=>d.class==='person' && d.score>=0.6);
for(const det of filtered){
  const [sx, sy, sWidth, sHeight] = canvasToScreen(det.bbox[0], det.bbox[1], det.bbox[2], det.bbox[3], vw, vh);
  // ...
  tracked[key] = {
    center: [sx+sWidth/2, sy+sHeight/2],
    labelIndex,
    id: randId(),
    firstSeen: now,
    lastSeen: now,
    confidence: det.score,
    seen: true,
    screenBox: [sx, sy, sWidth, sHeight]
  };
}
Rendered Reality