Typewriter in images

Hi guys,

I’m trying to make an interface for a future art project where users can type with images in such a way that it act like a keyboard, but instead of regular letters showing on the screen it’s images (which resemble the letters)

I looking for a way for the user to be able to spell out a sentence or two, with line breaks and then have a button to ‘re-set’/ delete everything or just a regular backspace

Any ideas how to set this up?
At the moment I’m trying to do it with keyboard in CHOP and a feedback loop.

Update: Example with just spelling out an ‘A’

And the TOX:
Live type tool (Test).toe (16.3 KB)

All feedback and help is much appreciated :pray:

So are you wanting to make a UI that is pictures that people can use, or are you wanting to use a keyboard or other interface to control things and then “type” out the images?

1 Like

Hi Lux,

Thank you for the reply. I think it is the latter.

Like, people use the keyboard: When they push e.g. ‘A’ an image of an A pops up and if they type ‘P’ two times and an ‘L’ and ‘E’ they’ve spelled ‘Apple’ with images of the letters. Hope this makes sense.

Recently i found this tutorial by Bileam Tschepe: Image Stacking which I’ll be having a look at, as it may help.

I’ll attach the TOX files i have working so far and an examples.

  • Lennart

So as far as I can think, you could go the route of having a pre-designed space for your type writing effect. So effectively, you start with a grid of 10x10 (or whatever dimensions you want) and you use that to say okay with will never be larger than this size. If you try to make it endless in terms of how much one can type, you’re going to really have to work on scaling in real time, because one person might type a few words and another might type a ton of stuff.

So after you have your dimensions, I’ve two directions you could go in doing this. The first is using texture instancing, so you have your letters already available and use texture instancing to decide what texture gets put where. So, for example, you could say "when the user presses _ letter, than it will fill in position 1x1, and then the “cursor” moves to position 1x2 and waits for the next input. The reason this might be nice is you could use a grid yo already space things out for you.

The second is using a feedback loop that moves the cursor along and then just builds up the letters over time. For this you’d have to position the cursor and then move it each time someone types a letter. This one requires you manually spacing things and also making sure you don’t start typing off the screen, but might be a bit simpler in terms of setup.

Others may have advice as well! So hopefully one of these or another idea helps you out.

1 Like

Thank you so much for your detailed explanation. This gives me some nice ideas to try out :v:

Do you have a .tox example or any further directions for research for this by any chance?

I do not have a .tox unfortunately, but I would say that you look into a few spaces such as texture instancing and Python.

Thanks man, that is great advice :pray:

1 Like