The concept for our final project is to create a âvirtual art museumâ, where the user can explore different art âstudiosâ where the user can create their own art. The main html page will show an image of elevators doors, as if the user is inside the elevators of an art museum. The user can then click one of two buttons to explore the two art studios: the piano studio, and the drawing studio. Clicking on the buttons for the specific studio âfloors,â will cause the elevator doors to âopenâ (through employment of the draw() function in p5), and the user will click on the âEnter Studioâ sign which is revealed to be behind the elevator doors. Depending on which button was clicked initially, the âEnter Studioâ background will link to a new html page for the piano studio or the drawing studio.
For the piano art studio, a piano keyboard will appear on the web page and instructions will tell the user to press certain computer keys to play their corresponding note on the piano. As each specific computer key is pressed, its corresponding note will play and the corresponding piano key will look like it is being pressed and it will change color slightly to indicate the key being pressed. To go with the auditory elements of the piano, we wanted to incorporate a visual representation of each note. To do this, we will assign a color to each key, so that when each piano key is pressed, its corresponding color will flash onto the screen above the piano key that was pressed. Our hope is that we can include a way to record the auditory and visual art that the user creates by playing the piano.
For the drawing studio, the web page will consist of a blank space with a pen tool and a variety of colors to choose from, as well as a range slider to adjust the thickness of the pen. We will also have a few stickers to choose from for users to have the option to add a sticker, or draw something with a streak of the chosen sticker. There is an eraser tool that the user can choose, or if the user is not satisfied, they can clear the entire template and start over. We also aim on having a background selection, where the user can choose to color in a template that we have provided, or choose to keep the space blank, and use their own creativity. Something that we want to implement is a âsaveâ function, where if the user likes the work they have created, they can save it without fear of clearing the template and losing their work.