Final Website Link
🐱 11/21/2022 - "Glitch City" Camera GUI Website
This is a city builder website. Users are able to create their own glitch city and have Pokemon characters to live in the city as citizen with only mouse/cursor movement.
The GUI panels on the left helps users to adjust the camera angles and position to view the city better and find their pokemons.
Instructions:
press on the canvas to activate camera
move your cursor around to build glitch blocks!
drag your mouse to put pokemon residents in your city!
📈 Design & Problems
This project is a little follow-up experiment of homework 4. I wanted to test out different ways to generate irrgular spaces that are composed of different components (in this project is the Pokemon characters).
Building Blocks Glitch Position
Initially, I planned to have the building blocks to switch position along with the glitch. Soon, I figured that it might be too much for the eyes and it's also disorienting. Therefore, I only make the glitch effects inside the camera texture on the building blocks.
Gif Unexpected Glitching
I realized that Gif images will start glitching if it's not 100% facing front of the camera, which makes my sketch looks very glitchy right now. When I was testing out with P5 editor, it looks smoother. See below (drag on the canvas):
Camera Position & GUI
The camera position in p5 WEBGL function is very hard to navigate. I spent a long time to try to position everything somewhat in the middle. Initially, I wanted the camera to forever go forward and the building blocks will be built beside it. However, I realize the x and y value will became too big and hard to sync up with the speed of the camera going forward, so instead I let the camera to swing and use the GUI to control it.
The final website version looks very different than what I prototyped in P5 editor. The difference in the size of the viewports will effect how much scene the camera captures. Therefore the P5 one looks more like being in the city anf the website version looks more like a third person view looking from far away. If I have time, I might add walking function in it so the user can jump around the city.