Turning characters of a String into rectangles

Processing Coding Questions
1

Hello,
I’m having trouble with my code.
Basically, I have a text and want every letter to be replaced by a rectangle matching the letter with different colours in a row next to each other. It might seem stupid, but the problem is, that I can only see the first rectangles, because I couldn’t figure out how to place the String inside my window and to begin a new row when it’s longer than my width.
Is there a solution or am I making something completely wrong?
I am very new to Processing and would appreciate every answer!
Thanks a lot!

int y=0;


void setup() {
  size(600,360);
  background(255);
}


void draw() {
String myString ="Wie froh bin ich, daß ich weg bin! Bester Freund, was ist das Herz des Menschen! Dich zu verlassen, den ich so liebe, von dem ich unzertrennlich war, und froh zu sein! Ich weiß, du verzeihst mir’s. Waren nicht meine übrigen Verbindungen recht ausgesucht vom Schicksal, um ein Herz wie das meine zu ängstigen? Die arme Leonore! Und doch war ich unschuldig. Konnt’ ich dafür, daß, während die eigensinnigen Reize ihrer Schwester mir eine angenehme Unterhaltung verschafften, daß eine Leidenschaft in dem armen Herzen sich bildete? Und doch—bin ich ganz unschuldig? Hab’ ich nicht ihre Empfindungen genährt? Hab’ ich mich nicht an den ganz wahren Ausdrücken der Natur, die uns so oft zu lachen machten, so wenig lächerlich sie waren, selbst ergetzt? Hab’ ich nicht—o was ist der Mensch, daß er über sich klagen darf! Ich will, lieber Freund, ich verspreche dir’s, ich will mich bessern, will nicht mehr ein bißchen Übel, das uns das Schicksal vorlegt, wiederkäuen, wie ich’s immer getan habe; ich will das Gegenwärtige genießen, und das Vergangene soll mir vergangen sein. Gewiß, du hast recht, Bester, der Schmerzen wären minder unter den Menschen, wenn sie nicht—Gott weiß, warum sie so gemacht sind!—mit so viel Emsigkeit der Einbildungskraft sich beschäftigten, die Erinnerungen des vergangenen Übels zurückzurufen, eher als eine gleichgültige Gegenwart zu ertragen. Du bist so gut, meiner Mutter zu sagen, daß ich ihr Geschäft bestens betreiben und ihr ehstens Nachricht davon geben werde. Ich habe meine Tante gesprochen und bei weitem das böse Weib nicht gefunden, das man bei uns aus ihr macht. Sie ist eine muntere, heftige Frau von dem besten Herzen. Ich erklärte ihr meiner Mutter Beschwerden über den zurückgehaltenen Erbschaftsanteil; sie sagte mir ihre Gründe, Ursachen und die Bedingungen, unter welchen sie bereit wäre, alles herauszugeben, und mehr als wir verlangten—kurz, ich mag jetzt nichts davon schreiben, sage meiner Mutter, es werde alles gut gehen. Und ich habe, mein Lieber, wieder bei diesem kleinen Geschäft gefunden, daß Mißverständnisse und Trägheit vielleicht mehr Irrungen in der Welt machen als List und Bosheit. Wenigstens sind die beiden letzteren gewiß seltener. Übrigens befinde ich mich hier gar wohl. Die Einsamkeit ist meinem Herzen köstlicher Balsam in dieser paradiesischen Gegend, und diese Jahreszeit der Jugend wärmt mit aller Fülle mein oft schauderndes Herz. Jeder Baum, jede Hecke ist ein Strauß von Blüten, und man möchte zum Maienkäfer werden, um in dem Meer von Wohlgerüchen herumschweben und alle seine Nahrung darin finden zu können. Die Stadt selbst ist unangenehm, dagegen rings umher eine unaussprechliche Schönheit der Natur. Das bewog den verstorbenen Grafen von M., einen Garten auf einem der Hügel anzulegen, die mit der schönsten Mannigfaltigkeit sich kreuzen und die lieblichsten Täler bilden. Der Garten ist einfach, und man fühlt gleich bei dem Eintritte, daß nicht ein wissenschaftlicher Gärtner, sondern ein fühlendes Herz den Plan gezeichnet, das seiner selbst hier genießen wollte. Schon manche Träne hab’ ich dem Abgeschiedenen in dem verfallenen Kabinettchen geweint, das sein Lieblingsplätzchen war und auch meines ist. Bald werde ich Herr vom Garten sein; der Gärtner ist mir zugetan, nur seit den paar Tagen, und er wird sich nicht übel dabei befinden.";




for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'a'){
    fill (9.8);
    noStroke();
    rect(10*(i),y,10,10);
    
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'b'){
    fill (19.6);
    noStroke();
    rect(10*(i),y,10,10);
    
  }
}

for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'c'){
    fill (29.4);
    noStroke();
    rect(10*(i),y,10,10);
    
  }
}

for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'd'){
    fill (39.2);
    noStroke();
    rect(10*(i),y,10,10);
    
  }
}

for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'e'){
    fill (49);
    noStroke();
    rect(10*(i),y,10,10);
    
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'f'){
    fill (58.8);
    noStroke();
    rect(10*(i),y,10,10);
    
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'g'){
    fill (68.6);
    noStroke();
    rect(10*(i),y,10,10);
    
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'h'){
    fill (78.4);
    noStroke();
    rect(10*(i),y,10,10);
    
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'i'){
    fill (88.2);
    noStroke();
    rect(10*(i),y,10,10);
    
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'j'){
    fill (98);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'k'){
    fill (107.8);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'l'){
    fill (117.6);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'm'){
    fill (127.4);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'n'){
    fill (137.2);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'o'){
    fill (147);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'p'){
    fill (156.8);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'q'){
    fill (166.6);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'r'){
    fill (176.4);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 's'){
    fill (186.2);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 't'){
    fill (196);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'u'){
    fill (205.8);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'v'){
    fill (215.6);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'w'){
    fill (225.4);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'x'){
    fill (235.2);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'y'){
    fill (245);
    noStroke();
    rect(10*(i),y,10,10);
  }
}
for( int i=0; i< myString.length(); i++){
  if( myString.charAt(i) == 'z'){
    fill (255);
    noStroke();
    rect(10*i,y,10,10);
  }
}



}
2

here is my take on the project (code is in summary and is blured, click on it to unblur)

Summary 
String input = "This is the life I don't want";
int w = 10, scl = 60;
char chars[] = (" aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ").toCharArray();
void setup() {
  size(600,600);
}

void draw() {
  background(0);
  for(int i = 0; i < input.length(); i++) {
    float x = i % w;
    float y = floor(i/w);
    fill(map(getCharValue(input.charAt(i)),0,chars.length,0,255));
    rect(x*scl,y*scl,scl,scl);
  }
}

int getCharValue(char chr) {
  int value = -1;
  for(int i = 0; i < chars.length; i++) {
    if(chr == chars[i]) {
      value = i;
    }
  }
  
  return value;
}

image
image599×597 2.53 KB

All the unrecognised characters are rendered as pitch black. If you want you can paint them a random color

3

the issue with your program is that you do not go into the next line. I fixed it and shortened the code.

btw if you want to create lines you have to set w to a value

image
image599×600 6.16 KB

Summary 
int w = 10, max = 103,scl = 30;
void setup() {
  size(600,600);
}
void draw() {
  background(0);
  stroke(255);
  noFill();
  for(int i = 0; i < max; i++) {
    float x = i % w;
    float y = floor(i/w);
    rect(x*scl,y*scl,scl,scl);
    text(i,x*scl,(y+1)*scl);
  }
}
4

and you also forgot to add CAPITALISED letters. Processing won’t recognise A as ‘a’. You have to use

String a = "Aa";
char b = 'a';
boolean c = a.toLowerCase().charAt(1) == b;
println(c);
5

This is my approach. Note that casting a char to an int returns the character’s ASCII code. Letters a-z (lowercase) have codes 97…122 – this solution uses this value to determine brightness.

// declare string once outside draw()
final String myString = "Wie froh bin ich, daß ich weg bin! Bester Freund, was ist das Herz des Menschen! Dich zu verlassen, den ich so liebe, von dem ich unzertrennlich war, und froh zu sein! Ich weiß, du verzeihst mir’s. Waren nicht meine übrigen Verbindungen recht ausgesucht vom Schicksal, um ein Herz wie das meine zu ängstigen? Die arme Leonore! Und doch war ich unschuldig. Konnt’ ich dafür, daß, während die eigensinnigen Reize ihrer Schwester mir eine angenehme Unterhaltung verschafften, daß eine Leidenschaft in dem armen Herzen sich bildete? Und doch—bin ich ganz unschuldig? Hab’ ich nicht ihre Empfindungen genährt? Hab’ ich mich nicht an den ganz wahren Ausdrücken der Natur, die uns so oft zu lachen machten, so wenig lächerlich sie waren, selbst ergetzt? Hab’ ich nicht—o was ist der Mensch, daß er über sich klagen darf! Ich will, lieber Freund, ich verspreche dir’s, ich will mich bessern, will nicht mehr ein bißchen Übel, das uns das Schicksal vorlegt, wiederkäuen, wie ich’s immer getan habe; ich will das Gegenwärtige genießen, und das Vergangene soll mir vergangen sein. Gewiß, du hast recht, Bester, der Schmerzen wären minder unter den Menschen, wenn sie nicht—Gott weiß, warum sie so gemacht sind!—mit so viel Emsigkeit der Einbildungskraft sich beschäftigten, die Erinnerungen des vergangenen Übels zurückzurufen, eher als eine gleichgültige Gegenwart zu ertragen. Du bist so gut, meiner Mutter zu sagen, daß ich ihr Geschäft bestens betreiben und ihr ehstens Nachricht davon geben werde. Ich habe meine Tante gesprochen und bei weitem das böse Weib nicht gefunden, das man bei uns aus ihr macht. Sie ist eine muntere, heftige Frau von dem besten Herzen. Ich erklärte ihr meiner Mutter Beschwerden über den zurückgehaltenen Erbschaftsanteil; sie sagte mir ihre Gründe, Ursachen und die Bedingungen, unter welchen sie bereit wäre, alles herauszugeben, und mehr als wir verlangten—kurz, ich mag jetzt nichts davon schreiben, sage meiner Mutter, es werde alles gut gehen. Und ich habe, mein Lieber, wieder bei diesem kleinen Geschäft gefunden, daß Mißverständnisse und Trägheit vielleicht mehr Irrungen in der Welt machen als List und Bosheit. Wenigstens sind die beiden letzteren gewiß seltener. Übrigens befinde ich mich hier gar wohl. Die Einsamkeit ist meinem Herzen köstlicher Balsam in dieser paradiesischen Gegend, und diese Jahreszeit der Jugend wärmt mit aller Fülle mein oft schauderndes Herz. Jeder Baum, jede Hecke ist ein Strauß von Blüten, und man möchte zum Maienkäfer werden, um in dem Meer von Wohlgerüchen herumschweben und alle seine Nahrung darin finden zu können. Die Stadt selbst ist unangenehm, dagegen rings umher eine unaussprechliche Schönheit der Natur. Das bewog den verstorbenen Grafen von M., einen Garten auf einem der Hügel anzulegen, die mit der schönsten Mannigfaltigkeit sich kreuzen und die lieblichsten Täler bilden. Der Garten ist einfach, und man fühlt gleich bei dem Eintritte, daß nicht ein wissenschaftlicher Gärtner, sondern ein fühlendes Herz den Plan gezeichnet, das seiner selbst hier genießen wollte. Schon manche Träne hab’ ich dem Abgeschiedenen in dem verfallenen Kabinettchen geweint, das sein Lieblingsplätzchen war und auch meines ist. Bald werde ich Herr vom Garten sein; der Gärtner ist mir zugetan, nur seit den paar Tagen, und er wird sich nicht übel dabei befinden.";

void setup() {
  size(800, 400);
  background(255);
  noStroke(); // move to setup (called once only)
}


void draw() {
  background(255);
  for ( int i=0; i< myString.length(); i++) {
    int ascii = (int) Character.toLowerCase(myString.charAt(i)); // get ascii code for character
    if (ascii >= 97 && ascii <= 122) { // if char is a...z
      ascii-=97; // rebase a to 0, b to 1, etc.
      fill (ascii*10.2); // 255/25 = 10.2
      int xPos = 10*i; // raw x-pos
      xPos %= width; // wrap raw x-pos around the stage using modulo operator (%)
      int rowNumber = floor((10*i) / width); // calc how many times raw x-pos was wrapped around
      rect(xPos, rowNumber*10, 10, 10); // multiply row number by rect height to draw at correct position
    }
  }
}

image
image802×438 7 KB

6

Wow, thanks a lot for your help! This looks totally different than my approach and works out quite perfect. I will try to understand what you did.

7

Thank you for your solution! It’s a great idea to return the ASCII code instead and the explanation is a really big help. I will try to experiment with this!

8

Is there also a way to connect different sound like different frequencies from a sine wave in addition to that to the chars, which plays successively?

9

Hello,

There are lots of good resources (references, libraries, tools, tutorials, examples, etc.) here:

Check out the Sound tutorial:
Sound / Processing.org < FFT examples

And here in Processing PDE (File > Examples> …) :

image
image252×516 8.36 KB

Reference:

:)

Note:
A signal (sound in this case) is the sum of different frequency sine waves with different amplitudes. :)

This example adds up the sine waves and is approaching a square wave:

The different frequency sine wave components can the be extracted using FFT to a frequency and amplitude.

Have fun!

10

Thanks a lot. Yes, I already checked the tutorials and examples out. My problem is more about how to correctly connect it to the chars in my code. I already tried, but couldn’t come up with a solution yet.

11

Hello,

Some additions to the library FFT example:

// Define how many FFT bands to use (this needs to be a power of two)
int bands = 32;

    rect(i*barWidth, height, barWidth, -sum[i]*height*scale);
    textSize(16);
    fill(0);
    char ch = char('a' + i);
    text(ch, i*barWidth, height -sum[i]*height*scale - 20);

image

:)

12

I’ve never used it, but the SinOsc library looks like a good candidate:

…where you’d set frequency using .freq(hz), where hz is a value that depends on the character; possibly using something like hz = map(ascii, 0, 25, 500, 4000).

1 Like