String of thumbnail images instead of characters

Processing Coding Questions
1

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:

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!

1 Like
2

-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 
// 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);
}

SNAG-0031
SNAG-0031.jpg1013×725 93.5 KB

hope you can use parts of that for your project.

2 Likes
3

this was very useful, thank you so very much for your help.

1 Like