# Process text as shapes?

**URL:** <https://discourse.processing.org/t/process-text-as-shapes/10006>\
**Category:** Coding Questions\
**Created:** [April 5, 2019, 4:56pm UTC](https://discourse.processing.org/t/process-text-as-shapes/10006 "2019-04-05T16:56:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daniela.gutierrezr](https://avatars.discourse-cdn.com/v4/letter/d/eb8c5e/32.png) [@Daniela.gutierrezr](https://discourse.processing.org/u/Daniela.gutierrezr)\
**Post date:** [April 5, 2019, 4:56pm UTC](https://discourse.processing.org/t/process-text-as-shapes/10006/1 "2019-04-05T16:56:44Z")

</div>

Hi guys,

Is there a way to code a program that proceses text and displays them as specific shapes in processing?

An example of this is the work of Leslie Roberts  
[https://leslierobertsart.com/section/425019-Recent-works-on-panel.html](https://leslierobertsart.com/section/425019-Recent-works-on-panel.html)

we’ve tried making an array with the keyboard keys and the shapes as classes but so far nothing has worked.

thanks!

---

<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:** [April 5, 2019, 6:45pm UTC](https://discourse.processing.org/t/process-text-as-shapes/10006/2 "2019-04-05T18:45:55Z")

</div>

show your code then

that’s the most simple:

```auto
int lowerRightCornerX; 
String list="asd"; 

//
// ---------------------------------------------------------------
//
void setup()
{
  // init
  size(800, 600);

  lowerRightCornerX=86 ;
} // func 

void draw() 
{ 
  background(255);

  int x=1; 

  for (char c : list.toCharArray()) {

    switch (c) {

    case 'a':
      triangle(60*x+4, 75, 
        58*x+4, 20, 
        lowerRightCornerX*x*1+4, 75);
      break; 

    case 's':
      rect(60*x+4, 20, 
        33, 56);  
      break; 

    case 'd':
      ellipse(60*x+4, 20+33, 
        33, 33);
      break; 

    default: 
      break;
    }//switch
    x++;
  }//for
} // func 
//
// =====================================================================

```

---

<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:** [April 5, 2019, 6:48pm UTC](https://discourse.processing.org/t/process-text-as-shapes/10006/3 "2019-04-05T18:48:51Z")

</div>

Wow, by now I improved it greatly!

Also see P.3 in here: [http://www.generative-gestaltung.de/1/code](http://www.generative-gestaltung.de/1/code)

---

<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:** [April 7, 2019, 6:15pm UTC](https://discourse.processing.org/t/process-text-as-shapes/10006/4 "2019-04-07T18:15:02Z")

</div>

Agreed that Generative Gestaltung is a great resource for projects like yours. Note that they have a little “EN” link if you want the English version of the pages, or direct link:

[http://www.generative-gestaltung.de/1/lang/en](http://www.generative-gestaltung.de/1/lang/en)

> [@Daniela.gutierrezr](#):
>
> we’ve tried making an array with the keyboard keys and the shapes as classes

You should share what you have attempted!

Do you want something more like an interactive shape typewriter, or do you want to load a text file and display an image?

---

<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:** [April 7, 2019, 6:26pm UTC](https://discourse.processing.org/t/process-text-as-shapes/10006/5 "2019-04-07T18:26:30Z")

</div>

Here is a very, very simple example of an interactive “shape typer” – no classes, just a core concept.

```auto
/**
 * SimpleShapeTyper
 * 2019-04 Processing 3.4
 * discourse.processing.org/t/process-text-as-shapes/10006/4
 **/
PVector cursor;
int dim = 20;

void setup() {
  cursor = new PVector(0, 0);
}
void draw() {
}
void keyPressed() {
  if (key%2==0) {
    rect(cursor.x, cursor.y, dim, dim);
  } else {
    ellipse(cursor.x+dim/2, cursor.y+dim/2, dim, dim);
  }
  cursor.add(dim, 0);
  if (cursor.x >= width) {
    cursor.add(-cursor.x, dim);
  }
  if (cursor.y >= height) {
    cursor.set(0, 0);
    background(192);
  }
}

```

![08%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f6bec5016800311e0132755ff94eb2908b3e59eb.png)