A Walkable ASCII Cyberpunk City in One HTML File — Transcript

Full transcript

1. 0:00So, this is a fun little prototype I've
2. 0:02been working on.
3. 0:03I wanted to see if I could make a city
4. 0:05that feels alive, but is built entirely
5. 0:08from ASCII symbols.
6. 0:13The idea was to create something that
7. 0:16looks like you are walking through a
8. 0:18world made of data without it just being
9. 0:20a flat visual image.
10. 0:27It runs on a tiny custom engine I built
11. 0:29for the project.
12. 0:31Just JavaScript and canvas in a single
13. 0:34HTML file. So, there's no Unity, there's
14. 0:36no Unreal, there's no 3D models,
15. 0:39textures, or shaders.
16. 0:44Underneath the system, if you like, it's
17. 0:47a grid-based 3D world.
18. 0:50The city stores where roads, buildings,
19. 0:52trees, cars, and people are,
20. 0:55along with things like building height.
21. 0:57And every frame, the renderer casts rays
22. 1:00out from the camera across that grid,
23. 1:02finds the first thing each ray hits, and
24. 1:05uses the distance to work out
25. 1:07perspective, size, depth, and what
26. 1:09should be hidden behind other things.
27. 1:13The engine also handles collisions,
28. 1:15cars, pedestrians, and certain objects
29. 1:18correctly in front of or behind each
30. 1:21other.
31. 1:26So, instead of normal graphics, it turns
32. 1:29all of that into letters, numbers, and
33. 1:31symbols on a canvas.
34. 1:33Nearby objects use larger, brighter
35. 1:36clusters of characters.
36. 1:38Distant objects become [music] smaller
37. 1:40and fade into the dark.
38. 1:44So, in other words, it's a tiny 3D city
39. 1:47made from blocks, but you see it through
40. 1:49a screen of ASCII characters.
41. 1:53I think I'm going to carry on playing
42. 1:55around with this prototype.
43. 1:57Let me know what you think.