# String of thumbnail images instead of characters
**URL:** https://discourse.processing.org/t/string-of-thumbnail-images-instead-of-characters/9725
**Category:** Coding Questions
**Created:** [March 28, 2019, 3:39pm UTC](https://discourse.processing.org/t/string-of-thumbnail-images-instead-of-characters/9725 "2019-03-28T15:39:11Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@gdesigner](https://discourse.processing.org/u/gdesigner)
#### Post date: [March 28, 2019, 3:39pm UTC](https://discourse.processing.org/t/string-of-thumbnail-images-instead-of-characters/9725/1 "2019-03-28T15:39:11Z")
Hello, I’m new to Processing and this forum but I’m trying to create a project for University, where you can create a unique street as you type.
I have started with the character string example, however, instead of a character appearing, I would like specific thumbnail images(buildings) to appear. A different jpeg image for each key, which would appear in the same way as typing a sentence would.
this is my code at the moment:
```auto
char letter;
String words = "Type...";
PImage img1;
PImage img2;
PImage img3;
PImage img4;
PImage img5;
PImage img6;
PImage img7;
PImage img8;
void setup() {
size(640, 360);
img1 = loadImage("img1.png");
img2 = loadImage("img2.png");
img3 = loadImage("img3.png");
img4 = loadImage("img4.png");
img5 = loadImage("img5.png");
img6 = loadImage("img6.png");
img7 = loadImage("img7.png");
img8 = loadImage("img8.png");
textFont(createFont("Georgia-48.vlw", 36));
}
void draw() {
background(0);
textSize(14);
textSize(36);
text(words, 10, 10, 620, 500);
}
void keyTyped() {
if ((key >= 'A' && key <= 'z') || key == ' ') {
letter = key;
words = words + key;
println(key);
}
}
```
I hope my explanation makes sense,
If anybody has any clues that would be great, thank you!
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [March 28, 2019, 4:42pm UTC](https://discourse.processing.org/t/string-of-thumbnail-images-instead-of-characters/9725/2 "2019-03-28T16:42:41Z")
-a- it could make sense if the images have
names by numbers
and you load them to a array.
-b- also the keyPressed characters you have in a word ( line )
could save to a intList as number ( fitting to image number )
sounds complicated but pays off later.
_ok, in my case i wanted to use pictures of numbers_
_so that thinking was more obvious._
click to see a
> **example**
>
> ```auto
> // in /data/ have b0.png .. b5.png ( here that are images of numbers )
> int btns = 6;
> PImage[] nums = new PImage[btns];
> IntList line;
> int imgwidth=90,imgheight=80;
>
> void setup() {
> size( 700, 100);
> for (int i=0; i < btns; i++) nums[i] = loadImage("data/b"+i+".png");
> line = new IntList();
> }
>
> void draw() {
> background(100,100,200);
> for ( int i =0; i < line.size(); i++ ) image(nums[line.get(i)], i*imgwidth, height - imgheight-5 );
> }
>
> void keyPressed() {
> println("key "+key+" keyCode "+keyCode+" int(key) "+int(key)); // 0 .. 5 as 48 .. 53
> int num = int(key) - 48;
> if ( num >= 0 && num < btns ) line.append(num);
> }
>
> ```
>
> 
hope you can use parts of that for your project.
---
### Author:  [@gdesigner](https://discourse.processing.org/u/gdesigner)
#### Post date: [March 31, 2019, 1:03pm UTC](https://discourse.processing.org/t/string-of-thumbnail-images-instead-of-characters/9725/3 "2019-03-31T13:03:06Z")
this was very useful, thank you so very much for your help.