Screen-savers: Remember Those?

Growing up, I remember playing with those  that would come across the computer screens at school. There was one where you could watch those colorful bubbles float all over the screen, there was the fish bowl one, the one where you could play a game of Pac-man with your arrow keys, and more. Sometimes they were more entertaining than what was actually on the main screen. I also remember being in computer class, and our computer teacher was teaching us how to change the background image and the screensaver. From then on, a bunch of kids in my class would spend forever just exploring the different screen-savers. They were such a distraction, and sometimes I would get in trouble for not paying attention to class because I was too busy staring at the screen-savers around the room!

I present to you, my screensaver:



The Fullscreen Version

In order to make my screensaver, I played around with p5.js. At first, I started out with watching the videos on YouTube created by Dan Shiffman on his YouTube channel, The Coding Train. He was very helpful in helping me understand how to code and how to use p5.js! I not only found his videos extremely helpful, but also the Reference and Examples pages on the p5.js website. I looked through just about every example to try and help me get ideas as to what I wanted to do. I found the Pointillism example so interesting. I loved watching all of the points appear randomly on the screen. I was waiting for the image to appear, and my friends and I decided that we think it was a picture of a duck.

I began to work with different examples. I also really liked the Bouncy Bubbles example. This one reminded me most of the old computer screensaver that you could and can still use on a PC. I decided that I most wanted to follow the Pointillism example. I began to work with it in my own editor, but when I tried to run it, I would just get a screen that said “Loading…” at the top left. I was very frustrated because I understood that I needed a local server. I tried to follow instructions on how to get a local server and use it for this. I got extremely frustrated and I slowly started to realize that I might have to ditch my idea. However, after posting in Slack asking for help, Dr. Whalen shared a video with the rest of the class and me. With only adding two lines to my code, it worked like a charm! No more “Loading…” screen!

I could finally move along! I had selected the image that I wanted to load into my code. I had also found this image from Pexels, which is a website where you can find free stock photos. I was trying to decide between two images, one of a landscape and another that was just a large cloud of colorful smoke. I loved the colorful smoke one the best, so I ran with it!

Here is the original image:

I began to work with the code and change different elements such as the background color, the size of the points that will make up the image, the speed this will happen, where on the screen this will occur, and more!

I hit the “Play” button, and my dream screensaver came to life! I was so happy!

I love how this screensaver turned out, and am very excited to see it in all its glory on the Media Wall in the HCC.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.