Transit Tale is an interactive project based on the idea of exploring the bustling cities of New York and Shanghai through the lens of a foreigner. The user will dive into the vibrant streets and diverse cultures of these two iconic metropolises by a compilation of pictures and interfaces that show the iconic landmarks of New York to the futuristic skyline of Shanghai. Let’s embark on a journey through Transit Tale!
Journey:
When coming up with the ideas for this project I thought of only doing an interactive map of the two cities, where you would click on a specific landmark and it will direct you to a photo album. However, when talking to professor Leon I decided to add more interactions.
Sketch.js: (Visuals)
The idea with the visual was to combine real images and elements drawn in the sketch.js section.
Environment 1:
In the intro page you can see me and two suitcases that I used the draw function for, and then I put two png images on top.
In this part I also added a start button for the interaction to start navigating the interactions. After clicking the grey button the user will be directed to a room.
Environment 2:
In this part I used the draw function for everything again, except for the image displayed on the computer screen that is supposed to show how I did online classes during the day and night during my freshman year. One aspect that I think could’ve done a lot of improvement and I received feedback during the presentation day, is that the text is not clear enough, since this canvas is (600,600) a full screen could have worked better or making the text more visible by putting a rectangle in the back so it stands out more and increase the textSize.
To go to the next interaction the user needs to press the spacebar, because I was the one who designed the project I knew what to press to continue the story, but looking at it from the user’s perspective an instruction text would be great.
Environment 3:
In this part the user founds themselves in some sort of game, where they control the plane by moving the mouse up and down. At the beginning, I wanted it to be controlled by the arrows up and down but then one of my friends suggested to use the mouse to make the movement smoother. Inspired by the game flappy bird.
In this game the aim is not to crash with the pipes however in mine I thought it would add a little bit of fun to crash against the clouds to go to the NYC interaction.
In this part I did include the instruction on how to pilot the plane, nevertheless I still think they could be clearer in terms of the color.
Environment 4 and 5:
In this part I set the background to be a picture of a digitally illustrated map of New York by Jasmijn Solange Evans. My initial idea was to use a google maps picture and then draw the landmarks like the Empire State, Statue of Liberty, etc (other elements that can be seen in the picture) but they have a too geometric appearance and I wanted it to be more cartoony; therefore, I used illustrations by the same artist trying to achieve the same aesthetics.
I was going to include only a selection of pictures in this part but I decided that it would be more interactive if I used the knowledge from CCLab so I coded this two parts within the map that will pop in the screen by clicking on top of the Statue of Liberty and the Taxi.
To move to the last part of this “story” the user has to press the key F (fly to Shanghai). Where last interaction shows a picture to make the user interested in continue the story as well linking the canvas to the rest of the website.
After this part if you scroll down you will find two cameras that have a “Go to Album…” description, when the user clicks on it, another page opens and its a short compilation of pictures I have taken during my studying abroad years. This section of the project aims more to make the future recipient question how much cities have changed, I think that we can learn about the past by looking at images that are simple but yet capture the essence or skyline of a city.
HTML/CSS:
Technical aspect:
-Sketch.js
Overall the code combines different components such as drawing shapes, images loading, and motion of elements (such as collision detection)
I think the most challenging part of my code are the following
- Class definition: There are several class definitions (Airplane, clouds, liberty, taxi, bund) for different elements. (Example airplane interaction)
-
class Airplane { constructor(x) { this.x = x; this.y = height / 2; // Start the airplane at the center of the canvas this.size = 50; // Reduced size for better collision detection } update(mouseY) { this.y = mouseY; // Update y-coordinate to follow the mouse } drawAirplane() { // Draw airplane image image(airplaneImg, this.x - 25, this.y - 20, 150, 150); } // Function to check collision with a cloud checkIfHitsCloud(cloud) { let distance = dist(this.x, this.y, cloud.x, cloud.y); if (distance < (this.size / 2) + (cloud.size / 2)) { return true; } return false; } } class Cloud { constructor() { ... } update() { this.x -= this.speed; } drawClouds() { ... } function resetGame() { // Reset game state airplane = null; clouds = []; isGameOver = false; hasGameBegun = false; score = 0; nextSpawnDistance = 0; } function keyPressed() { if (keyCode === 32) { // Check if space bar is pressed hasPressedSpace = true; if (!hasGameBegun) { hasGameBegun = true; mapNYC= true; airplane = new Airplane(100); }
-the movement of the airplane is controlled obey the update method within the airplane class. In then sets the y-coordinate (this.y) to move this within the y axis, to make a vertical movement controlled by the cursor on the canvas.
-the cloud movement is also controlled by a similar method update() [ this.x-=this.speed] where the cloud move towards the left side of the canvas is called in the draw function to update the position of each cloud.
function draw() { background(138, 229, 255); if (hasPressedSpace) { // Check if space bar has been pressed if (hasGameBegun) { drawAirplane(); } else if (mapNYC){ drawNYC();} else if (mapSH){ drawSH(); } } else { if (isInRoom) { // Draw room environment drawRoom(); } else { // Draw character and button drawCharacter(); drawButton(); drawMaleta1(); } } }
-This part of the sketch is continuously executed in a loop to render the visuals on the canvas. I started by setting the initial background color of the canvas to a light blue color, and then by setting conditional statement the first one is to check if the space bar has been pressed then it executes. There is nested conditional statements inside the first if block they are if the game has begun it calls drawAirplane else if the game has not begun and MapNyc is true then is drag the New York City scene and the interaction within it. Else if the mapSH is true then it draws the Shanghai scene. The next block is if the spacebar is pressed then it draws the room environment and the drawCharacter function which is the beginning of the sketch. A recurrent error I made in this part was the logic aspect which will lead to unintended behavior. For instance, there were times where I misplaced conditions which cause certain scenes or elements not to be drawn when expected.
function keyPressed() { if (keyCode === 32) { // Check if space bar is pressed hasPressedSpace = true; if (!hasGameBegun) { hasGameBegun = true; mapNYC= true; airplane = new Airplane(100); } } if (key === "s" || key ==="S") { if (hasGameBegun && mapNYC) { mapNYC = false; } } if (key === "f" || key === "F") { if (mapNYC) { mapNYC=false mapSH = true; } } }
This part of the code is the keyPressed() function, which is called whenever a key is pressed. For this part, is set to true when the spacebar is pressed it shows that the game has begun (airplane) additionally, it after sets the map of NYC by playing the interaction. If the player is in the NYC map pressing F key switches to the map. It sets `mapNYC` to `false` and `mapSH` to `true`, indicating that the player is now in the Shanghai map. One challenge was ensuring that key presses are handled correctly, especially when multiple keys are pressed. Without proper instructions, users might find it challenging to understand the controls and navigate the game effectively.
-HTML/CSS
In this part I think I didn’t have any major challenges as this were more simple interactions. The way I designed the website was to have a main page where all the crucial information is such as; the canvas, project description, as well as the `message to the future generation. And then I did two copies of the index.html to do the album pages.
This HTML code sets up a web page for the “Transit Tale” project, which allows users to explore the cities of New York and Shanghai through photo albums. Let’s break down the important parts and how scrolling is implemented:
Each city section (`<section id=”new-york”>` and `<section id=”shanghai”>`) includes a title, an image container, and a button to go to the respective photo album. I also added a custom font to make it look more visually appealing, by stating the @font-face rule to import a font I saved from the internet.
The #p5-canvas-container div is styled to be a flex container with centered alignment, to ensure that the sketch inside the container is centered both vertically and horizontally. This ensures that the p5.js sketch inside this container is centered vertically and horizontally.
Comparing the end product to the proposal one of the interactions was used which is the idea of the map. Besides that I wanted to put more interactions, but it was hard enough for me to figure out how to put them together. I think it was not such a great idea to do them separately and then try to put them together on a same sketch which took some time.
I think some areas that could been improved is definitely the visuals aspect I felt that in some part they didn’t match and the quality of the preload images was also not that clear, which professor Eric pointed out during the feedback. Besides a more detailed instruction page. I think also because I was having difficulty linking the interactions to the NYC map I just didn’t persevere on the idea of having a lot more.
For the future of this project I will like to make the storyline more of a narrative. I feel that without my explanation that I gave during the presentation my main idea and what I tried to convey through the visuals are not that clear.
4) Credits & References
https://www.w3schools.com/css/
https://www.youtube.com/watch?v=r2S7j54I68c
https://github.com/ImKennyYip/flappy-bird/blob/master/flappybird.js