0

I'm trying to make a site where the user inputs their name and it appears in way as shown in the image. image1

I got this mapping from chatgpt and made few modifications but it's not as good as the desired requirement

This is what I have at the moment

I made 4 copies of rows and columns to make them appear bigger (with more seats/pixel boxes within them) but that doesn't give a smooth effect.

I want to know the easiest way to get the mapping for letters with as many blocks/seats/boxes as in image1.

I tried this site: https://www.text-image.com/convert/ but it wasn't helpful and I only found one other question like this (https://blender.stackexchange.com/questions/235201/stadium-seating-letters) but they are using blender.

It's my first post so I can't add images

Geshode
  • 3,600
  • 6
  • 18
  • 32
Ritsuki-c
  • 1
  • 1
  • 2
    You could do it by hand. You could draw letters on a canvas and read pixel data. You could create a sprite sheet of letters in an image program, with each cell being the same pixel resolution as the chairs, and read that. You could try [pixelating letters with svg/canvas](https://stackoverflow.com/questions/66624701/pixelate-a-whole-webpage/66625778). You could even try [a shader](https://www.shadertoy.com/view/dldXz7) in WebGL. It's a fun project, but I doubt anyone will write out a full answer of how to do it, because it's too broad for Stackoverflow, but maybe someone will prove me wrong. – Andy Ray Jun 05 '23 at 06:18
  • Have a go at coding @AndyRay first suggestion - the reason for choosing that is you can have complete control over the number of seats per row and the number of rows (aka pixels on the canvas). If still stuck when you've tried that, put your code into the question with a description of what isn't working so we can have another look. – A Haworth Jun 05 '23 at 09:07
  • @AndyRay & a-haworth Thanks for commenting. Tbh, I'm not familiar with the approaches you've listed so I'll google them, try it out and get back here. – Ritsuki-c Jun 05 '23 at 11:41

0 Answers0