Category: 02-LivingWallpaper

 

I made the wallpaper to be my mental state during this pandemic. I spend most days on a  wonky sleep scheduale trying to make 5:00 AM EST lectures. When I’m not, I’m staring at my computer doing work: writing code, talking to classmates online, working psets, rewatching lectures. I’ve become the virtual and I’ve been doing this in the darkness of my own room, bloodshot eyes.

 

Here are some pics from my process:

I settled on the exponential out easing function, which was pushing all the high values from the perlin noise to 1 and causes the eyelids to “droop” and look like they are fighting sleep.

 

I initially designed and planned something totally different to what I end up making as the living wallpaper. My initial plan heavily leans on 3D parametric equation, as the main object of the wallpaper is the 3D curve, a conical spiral. I think I spent almost half of the total time I spend on project to figure out how to create a 3D curve in p5.js. Although I ended up barely making a use of the new functions in my final moving wallpaper, this project was a great opportunity for me learned a lot about creating 3D space/objects using translate(), rotateX/Y/Z(), and sin/cos functions in p5.js. Regarding the initial plan, I could only get my curve to a helix, which definitely didn’t satisfied me; However, in the future, I’d like to figure out the code and bring my initial plan to life.

Initial design:

In exchange, I’ve decided to go with the alternative that describes my current lifestyle. Due to the time difference between school and home, my class schedule begins late evening and continues overnight to the following morning. I wanted to create a motion where day and night flips, yet things continue to function without a rest. Since I’m currently in a bustling city that never goes to sleep, I decided to have a car as my main object that continues to run. It’d pass the trees and the buildings at the different time of the day: The trees overnight to depict nature around the school campus, and the buildings throughout the day to describe the busy city where I live.

Here’s the sketch I made:

To give an impression that the car is moving constantly, I made the trees and buildings behind the car to move past the car, while the car itself would have a small motion of moving up and down as if it’s driving past those trees and buildings.

I used Double-Exponential Sigmoid easing function to give speed to the trees and the buildings passing by, and BoundInOut easing function to create the body of the car moving up and down as it drives. All the trees and the buildings are drawn in the position with respect to the first tree using translate().

link2code

Organized Chaos

It was tough to execute my initial vision due to my limited capabilities. I was really inspired by Zach Lieberman’s black and white art pieces, so I wanted to create a similar environment. I’m still amazed Lieberman can achieve such organic shapes, but I eventually had to compromise and tried creating a dynamic environment with 3D shapes. I used a ton of different easing functions, but my favorite has to be the bounceOut function. I like the use of movement, but visually, I wish I had added more. I tried for a while to delay the rotation of some of the other cubes, but I couldn’t figure it out. I wanted it to look like a moving creature made of geometric shapes, but it was too difficult to individually program the movement of every square. I think I learned so much about what not to do during this project and I think that’s just as helpful as discovering something new.

Sketches

A lot of my initial concept relied on having cubes instead of squares, so when I changed my design to 2D, I experimented with the squares and tried to make things visually interesting.

 

Graphic design meets Code

I’ve always liked making clever graphic design pieces out of simple shapes. The living wallpaper project was a good opportunity to dive deeper into visual illusions by adding in motion to the mix. (I tried a variety of different ease functions in the process of my project – I chose the cubicBezierThrough2Points function for the rotating circles, to give the satisfying pause when the circles join in the middle. I also used the cubicIn function to make the endpoints of the lines rotate with ease along the circumference of the circle.)

Overall, I’m happy with the visual illusion I was able to achieve with this project. I’m especially happy with the gestalt circle that form with every loop – revisiting trigonometry was painful but worth it in the end.

While the motion and precision of this piece is good, I wish that I had developed a more sophisticated layout for this piece. I followed the circle packing tutorial from Coding Train to apply to this project, but I ended up abandoning it due to technical constraints. I hope to revisit the algorithm again in the future and understand the actual problem I was tackling, and hopefully make my projects more tasteful.

Process

I was initially quite lost when starting this project. I sketched out different ideas but had little idea as to how to make each piece feel interesting.

To get myself out of the rut, I reviewed the example code carefully and learned more about looping animations to feel more equipped in starting the project. In doing so, I was able to develop a more concrete idea and methods of execution, like the sketches below:

I went through a lot of iterations to test out different visual forms. Below are some interesting results that came out of the bag.

 

 

 

 

For this project, I wanted to focus upon the idea of making the best of a bad situation given the current state of the world as well as the serenity of impending dread. So, I decided to create something I dislike, wasps, in a pleasing manner and portray the image in way that could make the viewer anxious. Creating this project was definitely a challenge as I had to decide which I features I wanted to move and how I wanted each feature to move using new topics such as easing functions and rotating and translating the canvas. However, I enjoyed this project as I got to focus upon working with a art deco and experimenting with a subject of my choice. I think my color choice and composition turned out nicely and like the way circles rotate like there’s a gust of wind blowing through them. However, I think I should have made each wasp’s wings be at a different stage of opening and perhaps pause a little bit longer on the closed position to put more emphasis on when fluttering motion of the wings. I used the doubleExponentialSigmoid function in order to place emphasis on the open and closed positions of the rings as they turned. Upon reflection, I think I could have incorporated that function into how the wings flap.

         

Sketches – I initially wanted to make a more ornate art nouveau design with curving lines, but I had to settle for a simpler art deco style instead.

Code, Best Viewing Experience, Video Download

 

i’m still here – iiiiiii her iiiiiii i i ii

In these times, I miss being in the studio the most and seeing people work near me while we struggle silently or maybe excitedly together. Lately, instead of playing through my Spotify playlists, I’ve been drawn to listening to Youtube Live Music playlists as they normally have animated visuals to go along with the music and they make me feel as though someone/something is existing beside me. Since I have this intense feeling of stillness in my home that sometimes buffers my productivity for school, I decided to make something that emulates the same feeling as those live playlists that help me feel a little more comfortable in the space that I currently work in.

This assignment most definitely taught me many different things to consider whether it was the code itself or the process of exporting files and documenting this type of work. I used the Double-Exponential Sigmoid easing function to have the sun be able to pause and have its moment in the window frame and then continue on its merry way. The text above the window frame is something very personal to me and my best friend who I have known since I was 4 yrs old. It transcribes to “I am still here”; it’s something we know want to say to each other often but find it cringy and uncomfortable typing in a normal manner. The more “i”s there are, the more emphasis and eagerness in the message.

Visually, I am not all that satisfied with how it turned out. In fact, it irks me because I’m not sure what else to do with it. Although the curtains look complicated enough as they are right now, I wish I utilized a different technique to try and add dimension to them.

Despite my unsatisfactory, I’m glad to have fulfilled what I planned in my sketch below.

Zoom Background for Lovely Friendships

I miss building lovely friendships with lovely people in classes as I did last year. Accordingly, I wanted to make a background that invited friendship over zoom classes. I’ve been watching a little bit of Blue’s Clues recently and really enjoy its graphics.

I wanted to recreate the playful and goofy and welcoming aspects seen in children’s shows like this (excuse my poor documentation), using the circular in out easing function from p5.func as well as a simple linear function for the curly frame.

I would have liked to include elements that were customizable by the user, perhaps a list of current friends that cycles on the screen or a phone number where they may be reached to build these friendships. I experimented with this a bit early on, but it was going poorly :~(. Here’s a screenshot from that stage, showing the name of my best friend and partner ;~).

The curls were hard to get right using curveTightness() alone, as I had originally planned. You can see above one of the many experiments I had in making these curves before settling on manually creating a loop with curveVertex() and repeating it across the screen. The sideways motion I ended up with was easier to create with this method as well. Once I had that figured out, the main difficulty I had was not knowing how much space someone is going to take up in the frame and having to arrange visual elements accordingly. More technically, my heart shapes (lifted from previous projects) seem to be anchored at their left side and scale oddly because of that. Some of my technical notes are evident below ;~) (Excuse the unrelated notes + drawings)

If you would like to build lovely friendships by using this as your Zoom background, please be my guest :~) Zoom only accepts videos as backgrounds so you’ll have to download below.

Download video here <3

xoxoxo

~sweetcorn

link to project!

link to the GIF in case the one above breaks!

I had a lot of pain making this, in part because I had issues in trying to figure out what it was that I wanted to make. I went through a lot ideas surrounding type and marimonda masks but I eventually decided in doing something more representational as I approached the prompt. I have been thinking a lot about the internet as a sort of panopticon and the whole bunch of privacy concerns that zoom brings in. So it seemed fitting to do something related to this as the background I’d be wearing on Zoom. In terms of technical elements, I used mainly gradients, blends and and simple trigonometric motion while making my objects loop. In terms of motion specifically, I used Lissajous figures in terms of tracking the movement of the eye and I used the Double-Exponential Sigmoid for the camera movement of the poles! I really liked making the eye specifically, especially since I was able to make it seem like the eye got bigger and smaller by resizing different parts of it. Overall, I really wish I had figured out a better way to shift the mountains (like a motion parallax effect) on the background while maintaining noise and randomness. As it is, the mountains are not moving and are made very simply with noise. My colors are a bit different on my monitor than in other displays so I wish I had taken that into consideration while picking colors.