Typographic Mirror!

Processing Libraries
1

Hi all!!

I am a graphic designer using Processing for creative coding art projects, and right now I am part of an exhibition on typography. I am trying to create a mirror out of type.

BOOM, cool right

I am taking inspiration from Daniel Rozin’s mechanical “mirrors”, and this ASCII art code:

******The issue with this ASCII code is that it is a p5js. library and I am not familiar with that and would ideally like to use processing.

My code is based, largely at this point, on a Coding Train tutorial on computer vision that motion tracks differences in pixels and colour codes them accordingly (the longer code).

// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Code for: https://youtu.be/QLHMtE5XsMs
// basic motion detection mirror
// another try at the mirror
import processing.video.*;

Capture videoA;
PImage prevFrame;
int threshold = 50;

int count = 0;

float avgX = 0;
float avgY = 0;

void setup(){
  size(1280, 720);
  
  // find which camera to use
  String[] cameras = Capture.list();
  printArray(cameras);
  
  // begin video and initiate 'prev'
  videoA = new Capture(this, cameras[0]);
  videoA.start();
  prevFrame = createImage (1280, 720, RGB);
}

void captureEvent(Capture videoA){
  // give prevFrame the value of a copy of videoA's frames
  prevFrame.copy(videoA, 0, 0, videoA.width, videoA.height, 0, 0, prevFrame.width, prevFrame.height);
  prevFrame.updatePixels();
  videoA.read();
}

void draw(){
  videoA.loadPixels();
  prevFrame.loadPixels();
  image(videoA,width,0);
  
  loadPixels();
  // begin loop to walk through every pixel
  for (int x = 0; x < videoA.width; x++){
    for (int y = 0; y < videoA.height; y++){
      int location = x+y * videoA.width;
      // what is the current colour
      color currentColour = videoA.pixels[location];
      float r1 = red(currentColour);
      float g1 = green(currentColour);
      float b1 = blue(currentColour);
      color prevColour = prevFrame.pixels[location];
      float r2 = red(prevColour);
      float g2 = green(prevColour);
      float b2 = blue(prevColour);
      
      float d = distSq(r1, g1, b1, r2, g2, b2);
      
      if(d > threshold*threshold) {
        avgX += x;
        avgY += y;
        count++;
        pixels[location] = color(0);
      } else {
        pixels[location] = color(255);
      }
    }
  }
  // end modification of pixels
  updatePixels();
}

void mouseClicked(){
  saveFrame();
}

// create float distSq
float distSq(float x1, float y1, float z1, float x2, float y2, float z2) {
  float d = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1) +(z2-z1)*(z2-z1);
  return d;
}

I am having difficulty figuring out how to take the info of the pixels and apply it to the text. I managed to apply the pixel info to a for loop of the letter ‘x’ in this code:

// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Code for: https://youtu.be/QLHMtE5XsMs

import processing.video.*;

Capture video;
PImage prev;

float threshold = 25;

float motionX = 0;
float motionY = 0;

float lerpX = 0;
float lerpY = 0;

int letterX = 0;
int letterY = 0;

int sizeVariable = 10;

void setup() {
  size(640, 360);
  String[] cameras = Capture.list();
  printArray(cameras);
  video = new Capture(this, cameras[3]);
  video.start();
  prev = createImage(640, 360, RGB);
}

void captureEvent(Capture video) {
  prev.copy(video, 0, 0, video.width, video.height, 0, 0, prev.width, prev.height);
  prev.updatePixels();
  video.read();
}

void draw() {
  video.loadPixels();
  prev.loadPixels();
  image(video, 0, 0);

  threshold = 50;
  int count = 0;
  
  float avgX = 0;
  float avgY = 0;

  loadPixels();
  // Begin loop to walk through every pixel
  for (int x = 0; x < video.width; x++ ) {
    for (int y = 0; y < video.height; y++ ) {
      int loc = x + y * video.width;
      // What is current color
      color currentColor = video.pixels[loc];
      float r1 = red(currentColor);
      float g1 = green(currentColor);
      float b1 = blue(currentColor);
      color prevColor = prev.pixels[loc];
      float r2 = red(prevColor);
      float g2 = green(prevColor);
      float b2 = blue(prevColor);

      float d = distSq(r1, g1, b1, r2, g2, b2); 

      if (d > threshold*threshold) {
        //stroke(255);
        //strokeWeight(1);
        //point(x, y);
        avgX += x;
        avgY += y;
        count++;
        pixels[loc] = color(#FCFC00);
        sizeVariable = 15;
      } else {
        pixels[loc] = color(0);
        sizeVariable = 10;
      }
    }
  }
  updatePixels();

  for (int letterX = 0; letterX < 639; letterX = letterX+5){
    for (int letterY = 0; letterY < 370; letterY = letterY+10){
        textSize(sizeVariable);
        text("X",letterX,letterY);
        fill(255);
    }
  }
  
}

float distSq(float x1, float y1, float z1, float x2, float y2, float z2) {
  float d = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1) +(z2-z1)*(z2-z1);
  return d;
}

HOWEVER, this is making all the 'x’s in the for loop grid change size at once! whenever there is motion. I only want the x’s to get bigger where there is motion, like how the pixels are changing based on motion.

Any answers are good answers!!
Thank you!

2

please find:
PDE / Examples / Libraries / Video / Capture / AsciiVideo

sure you have

Video 1.0.1
The Processing Foundation
GStreamer-based video library for Processing.

installed as you want play with camera???

you can try
to show that on a HDMI TV
in processing
fullScreen();

1 Like
3

I didn’t realise that there was a processing ascii example already in the library! thank you, my mistake

1 Like