Module 2 Formstorming

Weekly Activity Template

Rayne Eckersall

Project 2

Module 2

In this module I paid attention to sounds in my environment and recorded the ones I found most interesting. I then explored p5 and different visual elements and then put all of my knowledge together to create a final interactive sound webpage header.

Activity 1

This is the sound that my instapot make when I open and close it. The picture is what it looks like.

This is my sisters desktop keyboard. The sound is her typing on it while doing schoolwork.

This is the sound my microwave makes when it is on. The image is what my microwave looks like.

These windchimes are hanging by my front door. This sound is what I hear whenever the wind moves them.

These are window shutters in my room. The sound is me opening and closing them.

This is a plastic wrapper that was protecting something I bought. The sound is of the plastic being crumpled.

This is my dryer. The sound is what it sounds like when the dryer is running. It is running very often in my house and I didn't realize how much it adds to the background noise of my home.

This is my cats wetfood. They get wetfood twice a day and the sound is of my sister opening the can.

This is my cat Remy. He is almost 1 years old and the sound is of him purring. He purrs a lot when I pet him when he is waking up from a nap.

This is my shower. The audio is what it sounds like when I turn it on.

This is the interior of my sisters car. We go on nighttime drives a lot. The sound is what I hear when we are driving around.

This is a makeup bag my dad gifted to me. The sound is of the zipper opening and closing.

These are my sisters tarot cards. She likes to use them as a hobby and the sound is of them being shuffled.

This is a grocery cart from the Superstore. The sound is me pushing it to the car return outside.

These are Advil liquid gels. I've always liked the sound they make when you shake them around in the bottle so thats what the audio is.

This is a picture of the conveyor belt at the grocery store. In the audio you can hear the cashier scanning my items.

This is a picture of my full car at the grocery store. The audio is all of the background noise you hear at the grocery store.

These are my kitchen scissors. The sound effect is me quickly opening and closing them.

This is my Brita water filter. The sound effect is me filling my glass with water from it.

This is my sisters car door which was covered in ice/snow. The sound is me opening the door and all of the ice falling down on to my hand.

This is a weird ice scraper thing that kind of helps to get ice off your car. The sound is of it being used on the window to get the ice off.

This is the spray bottle we use to water our plants and occasionally spray our cats when they are being bad. The sound effect is the bottle being sprayed.

This is the sound and picture of me walking on fresh crunchy snow after a snow storm.

This is the lock on my front door. The sound is me locking and unlocking the door.

This is my gas stove. The sound effect is what it sounds like when you turn it on.

Activity 2

This is a colourful visual I created using p5 and chat gpt for help with the javascript.

This is a visual I created using p5 and chat gpt for help with the javascript.

This is a soundwave visual I created using p5 and chat gpt for help with the javascript.

This is a circle visual I created using p5 and chat gpt for help with the javascript.

This is a visual I created using Steves tutorials.

This is a rain falling visual I created using p5 and chat gpt for help with the javascript.

This is a rectangular visual I created using p5 and chat gpt for help with the javascript.

This is a colourful circle visual I created using p5 and chat gpt for help with the javascript.

This is a circle and rectangle visual I created using p5 and chat gpt for help with the javascript.

This is a black and white circle visual I created using p5 and chat gpt for help with the javascript.

This is a blue circle visual I created using p5 and chat gpt for help with the javascript.

This is a really cool gradient drawing visual I created using p5 and chat gpt for help with the javascript.

This is a purple triangle visual I created using p5 and chat gpt for help with the javascript

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

This is my final webpage design. It is a website made for "Nexus Tech Solutions". They are an innovative technology company specializing in AI. My visual and audio interaction is a customized chatbot which has been made to help users navigate the website and get questions about the company answered quickly.

Here are some prompts you should try when testing it out (make sure to speak loudly):
- Hello
- My name is *
- What is Nexus Tech Solutions?
- Tell me a joke
- Why is my internet slow?
- What are the latest tech trends?
- What is AI?
- Can I speak to a human?
- I want to stop talking to you now.

Click here to see it working on my server

This is what my final site looks like. Click on the link above to check it out.