New-ish to creative coding. Was wondering if something like this could be made with Processing?

Processing Project Guidance
1

I’m interested in experimenting with Live Motion Capture and Typography. Any help is much appreciated.

2 Likes
2

try
processing 3.5.3 IDE

load lib ( /Tools/ Add Tool / Libraries /

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

start / File / Examples / Libraries / Video / Capture / AsciiVideo
and have a USB webcam connected.

video_acii_webcam
video_acii_webcam642×512 79 KB

1 Like
3

Yeah, definitely possible…!

4

Yes, you definitely can. Mapping a grid of values (color, brightness, hue, depth) to text is a fairly common operation in creative coding. One of my favorite personal examples is Talking Cure.

The trick is setting up the motion capture / stream with the kind of values you want. Based on that image, it looks like a depth camera image – the parts that are farther away have smaller letters. Although it might just be a silhouette, or a drawing that was then run through a type filter. One method of sampling each frame is to resize is to the number of samples you need, then extract them directly.

The actual renderer can be done as a function in around 10-20 lines. The thing that is different about your example is that it seems to use the same text string over and over, rather than picking characters based on value (as in ASCII art) or showing a larger document (as in Talking Cure).

So, without sharing a full code solution, I made these, which repeat “PROCESSING” instead of “BOOGIE”:

TextGrid-0 TextGrid-255

with a function like this:

/**
 * Draw a letter grid of letters, on for each pixel in a source image.
 * Letter size uses brightness, letter fill uses pixel color.
 */
void textGrid(PImage img, String label,
              float w, float h,
              float minText, float maxText){
  // ...
  // loop over image pixels and call text() here
  // ...
}

and

  textGrid(img, "PROCESSING", width, height, 3, 32);

Also, note that your Instagram example doesn’t incorporate an common acrostic trick to use with repeating text. When using a repeating string, always set the columns equal to a multiple of the string length +1. Then you can read BOOGIE both left-right AND up-down. So, if your string “PROCESSING” is 10 letters long, then your number of columns should be 11, or 21, 31, 41, etc. See the white example above, which is 41 columns, and notice that it can be read in either orientation.

2 Likes