Home│Interaction: Resize

Assignment 3: Interaction (Resize) Documentation

March 26, 2024


The interaction that was assigned to me was resize. In class, we had looked at some examples of websites that had some interaction embedded into them. One of the websites that inspired me and related to my interaction most was "Endless Summer" by Richard Mille. This site uses browser resize to lower and heighten a sun in the sky while also changing colour to the sky for added sunset effect.
After seeing the websites, I was eager to start experimenting with coding my webpage. My first idea was that I attempted to replicate "Endless Summer" by Richard Mille where I have a component in the website move up and down when the web browser is resized. I wanted to make a "submarine" that moves vertically in the browser as it is resized. I attempted to create this concept using only HTML and CSS, but I turned this idea down quickly since I realized that it was a boring concept for me and too simple; I want something more exciting!

Idea 1: "Underwater Submarine"

This is where I was having a very challenging time finding what to do. I decided that it was best to take a break from the project as I was having a "coder's block" for a few weeks. The week when we learned about p5.js was the week I started to pickup the project again and start anew with my experimentation. I'm actually a beginner to JQuery and Vanilla Javascript, so I was not fully comfortable with using them yet for this project, hence why I wanted to use p5.js since I had experience coding with this flavour of Javascript. Also, with the time alotted, I knew from experience that p5.js can help me do something pretty cool and exciting with minimal and uncomplicated logic.
Moving on with what to do next with p5.js, I still had a difficult time making my mind on what to make. I started messing around with the drawing with p5.js code we learned in class and I started to experiment with what happened if I used "windowWidth" and "windowHeight" for the x and y axis of a circle. When I tried the code, nothing showed up and thats when I realized I had to offset the x and y axis of the circle so that it would appear on the screen. I used the windowWidth-100 and windowHeight-100 expression respectively in the x and y syntax of the circle and once I run the code it returned something very impressive on the screen; I could draw using the window resize!

Playing around with p5.js to create a drawing experience with the browser resize feature.

Though it was pretty cool, I was having a difficult time with the math since whenever the drawing was done, it could not fill the whole screen, only half of the screen. I tinkered with the numbers over and over again but the issue still persist.
Here's when I briefly gave up on this idea and tried to make a sketch where a ball would bounce around in the window and when it is resized, it will adjust automatically to the window size. I used a tutorial by Mr. Erdreich on YouTube to help me figure out the logic of a bouncing ball. Once I learned how to do it, I inputed the windowWidth and windowHeight code to where the ball detect collision. This code did work perfectly but I didn't like that it was still too simple for the viewer. So then I was stuck again on what to do. I kept on experimenting over and over again thinking that I'll find something I like. I wanted to try making a ballpit simulation with adding more balls (I looked at the tutorial "Basic Collision" by 2sman on p5.js to learn collision) but I was having a difficult time with figuring out how to make the balls collide with each other so I scrapped the idea of the ballpit due to time constraints. I went back to the drawing with resize idea and continued working on it to add cooler effects. I started to put in the windowHeight and windowWidth code into the size of the circle and offset it so its not as big as the screen so it is still viewable. Then, I changed the circle to an ellipse so I can change its height and width. The result was unique! As you resize the window, the shape of the ellipse change in height or width depending of the size of the window.

Changing the ball dimensions with the resize feature

I was proud with what I came up with but I still wanted to make something even more amazing! I looked at the reference page of p5.js and looked at what else I can do. I stumbled upon this triangle page on the p5.js reference and that's when I remembered that I can use 3D rotate to animate the circle to make it look better.

Using the rotate Y animation with the resize interaction.

It was very cool to see the screen creating something automatically while using the resize feature. Each time I reset the page was like creating an abstract piece of art as I get a different result everytime I play around with the window resize. I tried to change the aesthetic of the drawing and played around with the animation as you can see in these images below.

I decided that I want the final aesthetic to be a dark background with colourful outlines. This reminds me a lot of a topographic map which I think is pretty cool! I followed a p5.js sketch called "timer_backgroundColorChange" by Iberdugo on the p5.js editor to help figure out how to change the colour of the outline of the circle every 7.5 seconds.

Here's the video of the final aesthetic.

Resources