For my final project, I decided to make a website with javascript that represents an interactive history of the world cup that was played this year in Qatar.
Since not everyone watches football, I’ll try to keep it simple, adding the teams from the round of 16 to the final.
The web app has to be with vivid reddish colors that represent Qatar. The experience that I want the user to have is between suspense and emotion since that is what these important matches transmit. The user will make certain decisions that may or may not be wrong but will not change the course of the story.
The site will have several images to represent each moment, it will also have text explaining the story and what happens as the user progresses, with bright colors, short options, and clear fonts for the user to be entertained with the story.

For my final project I will be expanding on the interactive story / web app assignment. I want to focus on the design elements and refine the aesthetics of the site. I also want to add audio to various pages, and create an animation of a starship. I would like the animation to be created with THREE.js, allowing the user to move the camera view with the mouse to see all angles of the ship (however, I am not exactly sure how I would go about accomplishing this).

For the final project, I will create a p5 processing project about a fairy tale museum filled with fictional characters.

The Design

• The top half of the screen will have the museum with fictional characters that the user can pan and will use the p5 library.
• The bottom part of the screen will contain information about the selected fictional characters. If no fictional characters are selected, then the bottom part of the screen will have a ghost character with nothingness.
• It will be a single page website but the website content will change based on what content the user interacts with.
• The aesthetic and the characters overall will be fairy tale themed from my imagination.
• If there is extra time for this project, I may add animation to objects in the museum, maybe to elements in the webpage and possibly even the character.
• If there is time, I will draw the characters using an image editing program, Paint.net, Photoshop, etc. If there is not enough time, I may have to improvise the project by taking screenshots out of the outfits I made in Royale High and Roblox and edit the screenshot in the image editing program so that I can use it in the project.

Things The Person Can Do

• The user can navigate through the museum by panning left and right of the museum exhibits. 
• When the person clicks on the fictional character, the website will bring up more information about the selected fictional character and will load the design, sound, css, and the overall aesthetic that matches the tone and theme for the fictional character.
  • The information will contain the backstory about the character and the basic information of the character like name, age, gender, height, skin color, hair color, etc.
  • Each fictional character will be created by me (Frances George) from my childlike imagination.
• for the bottom part of the webpage that reflects the atmosphere and the design of the fictional character. This project takes inspiration from the previous interactive story project in MMP310 with professor Roberts.

Conclusion

I will use Replit coding platform to do work on this project since Replit is much more user friendly than p5 Processing and Glitch editors. I’ve used p5 processing to edit works but when I attempted to download the project used in the p5 editor I got bad gateway error message most of the time and the times that I didn’t get a bad gateway error message, p5 processing downloads the zip file project on the computer but media assets (images, sound,etc.) doesn’t load because it’s corrupted and I had to spend a lot extra time to fix up the assets to get it working correctly and I don’t want to go through that again. The project will be an interactive website with fictional characters.