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

**URL:** <https://discourse.processing.org/t/new-ish-to-creative-coding-was-wondering-if-something-like-this-could-be-made-with-processing/13941>\
**Category:** Project Guidance\
**Created:** [September 12, 2019, 3:28am UTC](https://discourse.processing.org/t/new-ish-to-creative-coding-was-wondering-if-something-like-this-could-be-made-with-processing/13941 "2019-09-12T03:28:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vosmeves](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vosmeves/32/6409_2.png) [@Vosmeves](https://discourse.processing.org/u/Vosmeves)\
**Post date:** [September 12, 2019, 3:28am UTC](https://discourse.processing.org/t/new-ish-to-creative-coding-was-wondering-if-something-like-this-could-be-made-with-processing/13941/1 "2019-09-12T03:28:52Z")

</div>

> **[\[Album\] nikita iziev](https://www.instagram.com/p/B2SAThLhzDu/)**

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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 12, 2019, 8:50am UTC](https://discourse.processing.org/t/new-ish-to-creative-coding-was-wondering-if-something-like-this-could-be-made-with-processing/13941/2 "2019-09-12T08:50:37Z")

</div>

try  
processing 3.5.3 IDE

load lib ( /Tools/ Add Tool / Libraries /

> [Video](http://processing.org/reference/libraries/video/index.html) 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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8112c480c2e6c0de4e9ca69ee1eb2508f3093e84.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 12, 2019, 12:12pm UTC](https://discourse.processing.org/t/new-ish-to-creative-coding-was-wondering-if-something-like-this-could-be-made-with-processing/13941/3 "2019-09-12T12:12:04Z")

</div>

Yeah, definitely possible…!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 12, 2019, 7:04pm UTC](https://discourse.processing.org/t/new-ish-to-creative-coding-was-wondering-if-something-like-this-could-be-made-with-processing/13941/4 "2019-09-12T19:04:01Z")

</div>

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.

> [@Vosmeves](#):
>
> Live Motion Capture and Typography

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c9d805f0c99e27fd69c358f4bfe2c3e23b027ecb.png) ![TextGrid-255](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/05b7ab25b498b8a2a52104bf5b3c1832751ede5c.png)

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.