Module 2 Formstorming

Weekly Activity Template

Cerin Noupbaev

Project 2

Module 2

Activity 1

When beginnning Activity 1, I decided to record my daily life, beginning with my commute. This is what waiting for the 56 Oakville GO bus sounds like.

Once I'm on the bus, there's a variety of sounds around me: other people talking to each other or over the phone, the hum of air conditioning, phone notifications, the bus engine roaring, the bus jumping on bumpy roads, stop announcements, and more.

Once I get to Sheridan, I walk down from the second deck, say thank you to the driver, and tap off with my Presto card.

After I get off the bus, I walk to the J Wing with the same people from the bus.

When I was on the bus, I noticed that the announcements used different voices. Unfortunately, it sounds like the new ones are AI, but they didn't fully replace the old voices. The old voices say the stop we're at, and then the new voices remind riders to take their stuff and thank them for choosing GO. It makes for a really inconsistent announcement. Also, for some reason all the busses have their volume super loud. These announcements hurt my head when I don't have headphones on.

Once I'm at school, I listen to the professor's lecture. Sometimes, the professor will have an activity ready for the class to do, which I recorded here.

In Room AA1A, there's quite a bit of background noise from the vents running along the room's ceiling.

When given in-class time for the Activity, my friends and I went around the school recording various sounds. First, we started with the water fountain.

Then, we recorded a toilet flushing.

Next, we recorded the sink.

We also recorded the elevator in the B Wing. I found this one interesting since I almost never use the elevators on campus.

Finally, we recorded the sounds in the cafeteria.

After returning home, I recorded the sounds of me getting ready and various sounds around my room. I started with my hairdryer, which I use every morning.

I wear my keys on my beltloop, so I recorded them clanking around every time I took a step.

While I recorded my keys, I noticed my pants would shuffle around too, so I recorded my pants in isolation.

I always bring my pocket notebook and erasable pen with me to campus to write down the week's tasks as they come up so I can refer to them later. I like fidgeting with my pen, but I try to avoid it so I don't bother the people around me. This audio is me fidgeting with it in my room.

This is one of the thirteen rings I wear. It's a fidget ring gifted to me by my boyfriend. This is the sound it makes when I spin the middle chain.

With my thirteen rings, I wear three bracelets. With all the jewelry on my hands, they jingle when I move around. The recording captures that jingle.

At home or at school, sometimes I'll put my hair up with this Qazaq hairpin. It jingles when I walk or shake my head.

When working at home, I use my everyday mechanical keyboard, which sounds like this.

With my keyboard, I also use my mouse, which sounds like this.

When calling with my boyfriend, he always mentions that he can tell when I'm doing a typing test or doing work, since there's a “rhythm” to doing a typing test. This is mee typing on my favorite type testing site, monkeytype.com.

Then I recorded myself playing Minecraft, since that definitely sounds different from doing work or doing a typing test.

When turning on my PC to work or play games, the fans turn on and create a low, continuous humming sound. Please turn up your volume for this one if you can't hear anything. Unfortunately, the microphone just barely picked up the sound.

With all these drawers holding my desk, I put a lot of things in them that I need on a frequent basis. For example, my Xbox controller, my phone stand, scissors, notebooks, etc.

Activity 2

For Activity 2, I mostly followed Tutorials 1 and 2. Please be aware that all the code used for this activity was generated with AI, specifically Claude AI. When using this slider from the Tutorial 1 files, I instinctively wanted the background color to change because the higher pitch feels like it's telling me “danger!” It reminded me of emergency sirens or a boiling tea kettle.

Here, I wanted to play into the “tea kettle” feeling by making the slider vertical, like a thermometer.

While trying to change the shape of the slider's circle, Claude generated a slider that blended into the background, which left behind a seemingly sliderless circle. It still controlled the pitch. I was surprised by the unease I felt while sliding it since I didn't know where it ended anymore. It reminded me of playing games with invisible borders and suddenly hitting a wall while walking.

I was at a loss for ideas because I was only thinking about if it would be possible to code, so I decided to let out my ideas on paper first. Here I just wanted to make a classic volume slider.

When first prompting Claude, it generated this isosceles triangle. It made me oddly confused to see a volume triangle as an isoceles triangle rather than a right triangle. It really made me confront how often right triangles are used in these scenarios.

After getting a proper right triangle, I realized it generated a bottom-to-top filling triangle... This was SUPER weird to see. I honestly forgot this was even an option! It was acting really finicky with the cursor though, because I tried filling it bottom to top, but it'd stop filling the moment the cursor went slightly out of the triangle.

Here I finally got a normal volume triangle!

My next idea was to make a slider similar to what you'd see on an audio engineer's table.

First, I got the AI to code me a vertical slider with a rectangular guide.

Then, I prompted the AI to code a thin dark grey line centred along the slider.

As per my final prompt, the AI coded me a blue line that trails the rectangular guide.

For my next idea, I wanted to adapt the isosceles triangle slider into something more normal. Inspired by a mixture of the old and current Apple volume indicators, this is what I came up with!

Using my previous file of the isosceles slider, I asked the AI to generate a volume icon. The whole thing got pretty washed out the moment the colors were on though.

To keep it prominent against the background, I thickened the stroke from 2 to 4, which made it much better.

This was another idea I had, which was more fun than functional. In the end, I decided not to do it since it didn't make any sense for a user and felt more like a throw-away thought to stimulate creativity.

I wanted to code a slide whistle slider because playing with the sliders for so long reminded me of this instrument! Unfortunately, I did not have enough time and I couldn't make it translate properly: when you play it, you're supposed to pull on the hook at the end to change pitches, but I'd only be able to put the slider on the body of it, which wouldn't make much sense.

After Tutorial 1, I moved on to Tutorial 2. When I first looked at the code, I thought it was a 3D model that we were manipulating, so I was pretty amazed when I realized it was just two circles. I think what really sold the effect was when the two circles would stop overlapping, it looked like the viewer was looking at the circles/cylinders from the side. Here, I changed the circles to rectangles to see if that would enhance any of that 3D feeling. I also tried to show that “view from the side” effect at the end of the GIF.

To make the rectangles stop overlapping more often, I moved the green rectangle closer to the middle of the screen. Definitely feels like the 3D feeling was enhanced.

After figuring out the 3D stuff, I messed around with using MouseX and MouseY for the rectangle co-ordinates and dimensions. In the end, I got a pretty cool lavalamp-looking effect!

Here I wanted to try out 3 shapes, but realized that it was becoming pure visual effects rather than visual effects in response to audial effects, so I cut down in my next design.

I then wanted to try out a circle and a rectangle, which I thought would kill any sense of 3D to it, but I feel like it looks like the circle is jumping forward and backward through the rectangle. I'm not sure if I've just been looking at this for too long though.

I wanted to reground myself in functionality, so I thought about my experience using freehand volume and playback controls from this tutorial. Honestly, I wasn't much of a fan, because I couldn't tell what direction/circle controlled what since they both were in effect all the time with no isolation. I did like the freehand/freeform look though, so I wanted to put my spin on the original template.

This design was generate with AI. It wasn't what I wanted, but something about it was interesting? I couldn't tell if I was controlling the same circle the whole time, or if the circles were just switching that fast. This was definitely not what I wanted, but part of the process nonetheless.

Here's the final product. This was also generated with AI, though I gave it some tweaks. Without any edits, these circles were completely free, not confined to any slider; and the line was super thin like the last design. I hated that the circles were completely free, because then they looked more like a cursor highlight than a volume slider. To fix this, I just fixed the Y co-ordinates on both circles. Then, I increased the line width to create more definition. I wanted to change its color, but the code the AI gave me was kinda weird and by this point, I was out of free prompts. I also wasn't incredibly concerned with the colors since I just wanted to see what could be done with the concepts and code. Something else I wanted to fix was also have the width of the line count as part of the “border.” It felt like the moment my cursor was over the middle of the screen, that side's circle was active, but the whole point was to reduce the overwhelming nature of the template's design...

I didn't have time nor the patience to code this last design, but with the Olympics just recently passed, I had countries and anthems on my mind, so I was thinking that while viewers of the Olympics could check out how to pronounce athlete's names on the Olympics app, they could also explore national anthems at whatever pace they wanted to, since anthems are long, slow, and boring.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

PLACEHOLDER TEXT, put a description here or you will lose grades

Click here to see it working on my server

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit

Powered by w3.css