TURN YOUR SOUND ON
(click on embedded sketch to turn it on)
https://editor.p5js.org/bobbybobbb/full/V2hgFFToc
I was looking through the old computer arts magazines for inspiration and really liked some images, so I wanted to incorporate them into my project. These 2 specifically were of interest:
Imagine you’re watching a space broadcast on your old TV that glitches out quite often. My concept was to have a bunch of random lines make up a TV frame surrounding my canvas and have these lines animate and be random. I also wanted random stars to twinkle in the night sky and every now and then have static appear on the screen. As for the sound, I downloaded some NASA radio chatter to fit in with the space theme as if you’re watching an actual broadcast about space. Then the static comes in as if your TV is glitching out every now and then, kind of like an old-timey vibe.
I created separate functions for all the elements in the animation like the TV frame, stars, and static. I had the hardest time with the stars because drawing lines in a circle around a center pivot point is not as easy as it seems. I learned about rotate() and transformations (which you had to use with rotate):
push(); // translate so that it rotates at pivot point: middle of the line translate(startX+12.5,startY+12.5); // rotate evenly around a circle rotate(j*360/7); translate(-startX-12.5,-startY-12.5); line(startX,startY,startX+25,startY+25); pop();
It took me so long to figure out how rotating the lines to form stars works, and at one point, my program crashed and I lost all my work after figuring it out and finishing the TV frame and stars (I was under the impression that p5.js autosaves, but it didn’t), and had to redo a good chunk of the project. There was a lot of math involved for all my elements and lots of randomness; I wanted random line thicknesses for the TV frame and stars, random number of lines and stars, and random shades of gray for the static.
I also used audio files I uploaded to the sketch:
staticNoise = loadSound('staticNoise.mp3');
nasaChatter = loadSound('nasaRadioChatter.mp3');
These two sounds toggle on and off with each other depending on what comes on the screen.
For the future, I’d like to sync up the audio and screen a bit more; it feels like the audio is lagging behind what’s being shown on the screen. At the same time, it kind of adds to the old-timey effect.