P5.JS Screensaver
Screensaver
Our screensaver assignment was one I was most interested in, but struggled profusely with. This was the first assignment we created using p5.js, which is a coding language that I had absolutely no experience with prior to this class. I had never even heard of it before, so suddenly jumping into OpenProcessing to use p5.js kind of threw me for a loop. I played around with the p5.js editor a lot, looking at different tutorials, and browsing projects created by other people before trying to do something on my own.
I became really interested in a project by Roni Kaufman which featured a circle with sin waves. Dr. Whalen had told us it was okay to fork other people’s projects and expand upon them, so that’s pretty much what I did. I used Kaufman’s sketch as a scaffold to create my own screensaver. Kaufman’s original sketch was cool, but a little boring and bland. She had a limited number of colors, totaling at about eight, so there wasn’t that many iterations when looking at it for a long time. I heavily expanded upon this by typing over two hundred HEX codes into the project. So all those HEX codes you see when first looking at the code? Yeah, I typed all of those by hand. I had a HEX code sheet I created years ago for colorizing photographs, which is what I pulled from for all of those.
While I used Kaufman’s code as the basis for this project, I actually added more variables and numbers to offset the settings. For example, the original project more really slow and has very skinny lines. I sped them up and increased the waves widths, meaning they are more randomized and generate bigger sin waves. Another thing I included was a rotation variable. Kaufman’s sketch sets in place and is a bit boring, so I livened it up by including variables for rotation and speed, so I can control the rate of rotation and how fast it will go.
Circular Harmonics / code
//By Lyndsey Clark
//Inspired by Roni Kaufman's Harmony (Circle)
// https://openprocessing.org/sketch/1253474
var rot = 0; //Create rotation variable wavy for lines
var speed = 0.002; //Create speed variable wavy for lines
//Create the set up for the coloful waves
let l = 400;
let seeed;
let colors = ["#000000","#800000","#008000","#808000","#000080","#800080","#008080","#c0c0c0",
"#808080","#ff0000","#00ff00","#ffff00","#0000ff","#ff00ff","#00ffff","#ffffff",
"#000000","#00005f","#000087","#0000af","#0000d7","#0000ff","#005f00","#005f5f",
"#005f87","#005faf","#005fd7","#005fff","#008700","#00875f","#008787","#0087af",
"#0087d7","#0087ff","#00af00","#00af5f","#00af87","#00afaf","#00afd7","#00afff",
"#00d700","#00d75f","#00d787","#00d7af","#00d7d7","#00d7ff","#00ff00","#00ff5f",
"#00ff87","#00ffaf","#00ffd7","#00ffff","#5f0000","#5f005f","#5f0087","#5f00af",
"#5f00d7","#5f00ff","#5f5f00","#5f5f5f","#5f5f87","#5f5faf","#5f5fd7","#5f5fff",
"#5f8700","#5f875f","#5f8787","#5f87af","#5f87d7","#5f87ff","#5faf00","#5faf5f",
"#5faf87","#5fafaf","#5fafd7","#5fafff","#5fd700","#5fd75f","#5fd787","#5fd7af",
"#5fd7d7","#5fd7ff","#5fff00","#5fff5f","#5fff87","#5fffaf","#5fffd7","#5fffff",
"#870000","#87005f","#870087","#8700af","#8700d7","#8700ff","#875f00","#875f5f",
"#875f87","#875faf","#875fd7","#875fff","#878700","#87875f","#878787","#8787af",
"#8787d7","#8787ff","#87af00","#87af5f","#87af87","#87afaf","#87afd7","#87afff",
"#87d700","#87d75f","#87d787","#87d7af","#87d7d7","#87d7ff","#87ff00","#87ff5f",
"#87ff87","#87ffaf","#87ffd7","#87ffff","#af0000","#af005f","#af0087","#af00af",
"#af00d7","#af00ff","#af5f00","#af5f5f","#af5f87","#af5faf","#af5fd7","#af5fff",
"#af8700","#af875f","#af8787","#af87af","#af87d7","#af87ff","#afaf00","#afaf5f",
"#afaf87","#afafaf","#afafd7","#afafff","#afd700","#afd75f","#afd787","#afd7af",
"#afd7d7","#afd7ff","#afff00","#afff5f","#afff87","#afffaf","#afffd7","#afffff",
"#d70000","#d7005f","#d70087","#d700af","#d700d7","#d700ff","#d75f00","#d75f5f",
"#d75f87","#d75faf","#d75fd7","#d75fff","#d78700","#d7875f","#d78787","#d787af",
"#d787d7","#d787ff","#d7af00","#d7af5f","#d7af87","#d7afaf","#d7afd7","#d7afff",
"#d7d700","#d7d75f","#d7d787","#d7d7af","#d7d7d7","#d7d7ff","#d7ff00","#d7ff5f",
"#d7ff87","#d7ffaf","#d7ffd7","#d7ffff","#ff0000","#ff005f","#ff0087","#ff00af",
"#ff00d7","#ff00ff","#ff5f00","#ff5f5f","#ff5f87","#ff5faf","#ff5fd7","#ff5fff",
"#ff8700","#ff875f","#ff8787","#ff87af","#ff87d7","#ff87ff","#ffaf00","#ffaf5f",
"#ffaf87","#ffafaf","#ffafd7","#ffafff","#ffd700","#ffd75f","#ffd787","#ffd7af",
"#ffd7d7","#ffd7ff","#ffff00","#ffff5f","#ffff87","#ffffaf","#ffffd7","#ffffff",
"#080808","#121212","#1c1c1c","#262626","#303030","#3a3a3a","#444444","#4e4e4e",
"#585858","#606060","#666666","#767676","#808080","#8a8a8a","#949494","#9e9e9e",
"#a8a8a8","#b2b2b2","#bcbcbc","#c6c6c6","#d0d0d0","#dadada","#e4e4e4","#eeeeee"];
const N_FRAMES = 250;
//Create canvas and set iterations
function setup() {
createCanvas(windowWidth, windowHeight);
noFill();
strokeCap(SQUARE);
seeed = random(1000);
}
//Draw colorful lines
function draw() {
clear();
background(0);
randomSeed(seeed);
blendMode(ADD)
translate(width/2, height/2);
rotate(rot+=speed);
let z = (frameCount%N_FRAMES)/N_FRAMES;
for (let i = 0; i < 6; i++) {
stroke(random(colors));
strokeWeight(random(2, 8));
let n = floor(random(1, 6))*random([-1, 1]);
let h = random(5, l/6);
h *= -sq(2*z-1)+1;
let sp = random([-3, -3, -2, -2, -1, -1, -1, 1, 1, 1, 2, 2, 3, 3]);
makeWave(n, h, sp);
}
function makeWave(n, h, sp) {
let t = TWO_PI*(frameCount%N_FRAMES)/N_FRAMES;
beginShape();
for (let x = -l/2; x < l/2; x++) {
let z = map(x, -l/2, l/2, 0, 1);
let alpha = -sq(2*z-1)+1;
let off = sin(n*TWO_PI*(x+l/2)/l+sp*t)*h*alpha;
curveVertex(x, off);
}
endShape();
}
//Draw circle
stroke(255);
strokeWeight(5);
//fill('black')
circle(0, 0, l);
if (frameCount % N_FRAMES === 0) {
seeed = random(1000*frameCount);
}
}
For the Portfolio assignment, I really wanted to do something with this screensaver. At first I wasn’t sure what, but then I started messing about with the code and created the final result on accident. When first creating this project, I wanted to discover a way to make the background a slightly different color while keeping the color the same inside the circle. I quickly ditched the idea once I discovered how to make the sin waves rotate, but now I was back to that idea. However, blendMode keeps the entire sketch together and messing about with the color setting ultimately ends in disaster. Since that wouldn’t work, I decided to expand upon what I already had. This meant messing about with the width and size of the circle, the width and size of the sin waves, and the rotation speed. Basically, I changed the background color by making the circle width huge, giving the screensaver a tunnel-like appearance. You can still see the black background in the fullsize sketch, which I think makes the perspective even better. I also tried messing with the blendmode settings, but blendMode(ADD) creates this really cool effect that makes the colored sin waves blend into the white circle, making the waves appears like they are springing up from nowhere.
Circular Harmonics V2 / code
//By Lyndsey Clark
//Inspired by Roni Kaufman's Harmony (Circle)
// https://openprocessing.org/sketch/1253474
var rot = 0; //Create rotation variable wavy for lines
var speed = 0.005; //Create speed variable wavy for lines
//Create the set up for the coloful waves
let l = 400;
let seeed;
let colors = ["#000000","#800000","#008000","#808000","#000080","#800080","#008080","#c0c0c0",
"#808080","#ff0000","#00ff00","#ffff00","#0000ff","#ff00ff","#00ffff","#ffffff",
"#000000","#00005f","#000087","#0000af","#0000d7","#0000ff","#005f00","#005f5f",
"#005f87","#005faf","#005fd7","#005fff","#008700","#00875f","#008787","#0087af",
"#0087d7","#0087ff","#00af00","#00af5f","#00af87","#00afaf","#00afd7","#00afff",
"#00d700","#00d75f","#00d787","#00d7af","#00d7d7","#00d7ff","#00ff00","#00ff5f",
"#00ff87","#00ffaf","#00ffd7","#00ffff","#5f0000","#5f005f","#5f0087","#5f00af",
"#5f00d7","#5f00ff","#5f5f00","#5f5f5f","#5f5f87","#5f5faf","#5f5fd7","#5f5fff",
"#5f8700","#5f875f","#5f8787","#5f87af","#5f87d7","#5f87ff","#5faf00","#5faf5f",
"#5faf87","#5fafaf","#5fafd7","#5fafff","#5fd700","#5fd75f","#5fd787","#5fd7af",
"#5fd7d7","#5fd7ff","#5fff00","#5fff5f","#5fff87","#5fffaf","#5fffd7","#5fffff",
"#870000","#87005f","#870087","#8700af","#8700d7","#8700ff","#875f00","#875f5f",
"#875f87","#875faf","#875fd7","#875fff","#878700","#87875f","#878787","#8787af",
"#8787d7","#8787ff","#87af00","#87af5f","#87af87","#87afaf","#87afd7","#87afff",
"#87d700","#87d75f","#87d787","#87d7af","#87d7d7","#87d7ff","#87ff00","#87ff5f",
"#87ff87","#87ffaf","#87ffd7","#87ffff","#af0000","#af005f","#af0087","#af00af",
"#af00d7","#af00ff","#af5f00","#af5f5f","#af5f87","#af5faf","#af5fd7","#af5fff",
"#af8700","#af875f","#af8787","#af87af","#af87d7","#af87ff","#afaf00","#afaf5f",
"#afaf87","#afafaf","#afafd7","#afafff","#afd700","#afd75f","#afd787","#afd7af",
"#afd7d7","#afd7ff","#afff00","#afff5f","#afff87","#afffaf","#afffd7","#afffff",
"#d70000","#d7005f","#d70087","#d700af","#d700d7","#d700ff","#d75f00","#d75f5f",
"#d75f87","#d75faf","#d75fd7","#d75fff","#d78700","#d7875f","#d78787","#d787af",
"#d787d7","#d787ff","#d7af00","#d7af5f","#d7af87","#d7afaf","#d7afd7","#d7afff",
"#d7d700","#d7d75f","#d7d787","#d7d7af","#d7d7d7","#d7d7ff","#d7ff00","#d7ff5f",
"#d7ff87","#d7ffaf","#d7ffd7","#d7ffff","#ff0000","#ff005f","#ff0087","#ff00af",
"#ff00d7","#ff00ff","#ff5f00","#ff5f5f","#ff5f87","#ff5faf","#ff5fd7","#ff5fff",
"#ff8700","#ff875f","#ff8787","#ff87af","#ff87d7","#ff87ff","#ffaf00","#ffaf5f",
"#ffaf87","#ffafaf","#ffafd7","#ffafff","#ffd700","#ffd75f","#ffd787","#ffd7af",
"#ffd7d7","#ffd7ff","#ffff00","#ffff5f","#ffff87","#ffffaf","#ffffd7","#ffffff",
"#080808","#121212","#1c1c1c","#262626","#303030","#3a3a3a","#444444","#4e4e4e",
"#585858","#606060","#666666","#767676","#808080","#8a8a8a","#949494","#9e9e9e",
"#a8a8a8","#b2b2b2","#bcbcbc","#c6c6c6","#d0d0d0","#dadada","#e4e4e4","#eeeeee"];
const N_FRAMES = 250;
//Create canvas and set iterations
function setup() {
createCanvas(windowWidth, windowHeight);
noFill();
strokeCap(SQUARE);
seeed = random(1000);
}
//Draw colorful lines
function draw() {
clear();
background(0);
randomSeed(seeed);
blendMode(ADD)
translate(width/2, height/2);
rotate(rot+=speed);
let z = (frameCount%N_FRAMES)/N_FRAMES;
for (let i = 0; i < 6; i++) {
stroke(random(colors));
strokeWeight(random(5, 75));
let n = floor(random(1, 6))*random([-1, 1]);
let h = random(5, l/6);
h *= -sq(2*z-1)+1;
let sp = random([-3, -3, -2, -2, -1, -1, -1, 1, 1, 1, 2, 2, 3, 3]);
makeWave(n, h, sp);
}
function makeWave(n, h, sp) {
let t = TWO_PI*(frameCount%N_FRAMES)/N_FRAMES;
beginShape();
for (let x = -l/2; x < l/2; x++) {
let z = map(x, -l/2, l/2, 0, 1);
let alpha = -sq(2*z-1)+1;
let off = sin(n*TWO_PI*(x+l/2)/l+sp*t)*h*alpha;
curveVertex(x, off);
}
endShape();
}
//Draw circle
stroke(255);
strokeWeight(600);
//fill('black')
circle(0, 0, l);
if (frameCount % N_FRAMES === 0) {
seeed = random(1000*frameCount);
}
}
Project Reflection
Out of all of the projects I updated for the Portfolio, I think this is the one that I like just as much as the original. While I did fork this project, I spent quite a bit of time ensuring it was different from the original version. I probably put way too much effort into this one screensaver, but I think this was the most fun I had on a project in this class. The sheer joy I felt when I figured out how to make the sin waves rotate was something I have never felt before. This was because I figured it out on my own, without help, and without a guide. I also really like my updated screensaver. There’s something about the how distorted it is that makes me extremely happy. It feels as if your eye is drawn to the waves, but there are layers and layers of them to decipher before they disappear and a new set takes their place. Overall, I’m very happy with this. I believe it to be my best work out of everything I did in this assignment.
