# Transform text to colored pixels?

**URL:** https://discourse.processing.org/t/transform-text-to-colored-pixels/3633
**Category:** Coding Questions
**Created:** [September 18, 2018, 8:57am UTC](https://discourse.processing.org/t/transform-text-to-colored-pixels/3633 "2018-09-18T08:57:13Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![MAKESHADY](https://avatars.discourse-cdn.com/v4/letter/m/7cd45c/32.png) [@MAKESHADY](https://discourse.processing.org/u/MAKESHADY)
#### Post date: [September 18, 2018, 8:57am UTC](https://discourse.processing.org/t/transform-text-to-colored-pixels/3633/1 "2018-09-18T08:57:13Z")

</div>

I would like to create and image composed by a text. I would like to say on processing " a = blue pixel, b = red pixel … ". Transform 100 letters on 10x10 image ( or larger ).

THX !

---

<div class="post-metadata">

### Author: ![colin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/colin/32/230_2.png) [@colin](https://discourse.processing.org/u/colin)
#### Post date: [September 18, 2018, 9:33am UTC](https://discourse.processing.org/t/transform-text-to-colored-pixels/3633/2 "2018-09-18T09:33:46Z")

</div>

Hi, @MAKESHADY  
I’m not sure to get what you mean.  
You want a program that translate sentences to images letters by letters ?

If so here is an example :

```auto
String str = "some text";
color c[] = new color[str.length()];

for ( int i = 0 ; i < str.length() ; i ++ ) {
  char t = str.charAt(i);
  if ( t == 's' ) c[i] = color(255,0,0);
  if ( t == 'o' ) c[i] = color(0,255,0);
  // etc
}

for ( int i = 0 ; i < height ; i ++ ) {
  for ( int j = 0 ; j < width ; j ++ ) {
    int n = width * i + j ;
    if ( n < c.length ) set( j, i, c[n] );
  }
}

```

---

<div class="post-metadata">

### Author: ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [September 18, 2018, 9:54am UTC](https://discourse.processing.org/t/transform-text-to-colored-pixels/3633/3 "2018-09-18T09:54:20Z")

</div>

What you want is… not clear.

Here is some example code that I think is what you’re asking for.

```auto
color[] colors = new color[100];
char[] chars = new char[100];

void setup() {
  size( 440, 440 );
  textSize(32);
  for ( int i = 0; i < 100; i++ ) {
    colors[i] = color( random(255), random(255), random(255) );
    chars[i] = char( int ('A') + int( random(26) ) );
  }
}

void draw() {
  background(0);
  translate(20,20);
  int t = 0;
  for ( int y = 0; y < 10; y++ ) {
    for ( int x = 0; x < 10; x++ ) {
      fill( colors[t] );
      text( chars[t], 10 + 40 * x, 30 + 40 * y );
      t++;
    }
  }
}

```

Could you maybe draw a mock up image of what you want?

---

<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 24, 2018, 2:03am UTC](https://discourse.processing.org/t/transform-text-to-colored-pixels/3633/4 "2018-09-24T02:03:20Z")

</div>

@MAKESHADY – Note that one of the official Processing examples on the site is **Keyboard Functions** – an adaptation of John Maeda’s Color Typewriter:

[https://processing.org/examples/keyboardfunctions.html](https://processing.org/examples/keyboardfunctions.html)

Based on your description it seems like this example might be relevant.