Generating Simple Mid-Century Line Design in P5js
I made a simple P5js sketch which generates minimal designs composed of overlapping colored lines.
With a frame rate of zero, it could be used to generate static sidebar designs.
Code below.
function setup() {
canvasHeight = 300;
canvasWidth = 150;
margin = 20;
color_a = color(random(5, 255));
createCanvas(canvasWidth, canvasHeight);
frameRate(30);
numberOfLines = 5;
}
function draw() {
frameRate(.25);
clear();
strokeWeight(10);
set_palette();
set_lines();
for (n = numberOfLines; n > 1; n -= 1) {
stroke(colors[Math.floor(n - 1)]);
line(
random(margin, canvasWidth - margin),
random(margin, 50),
random(margin, canvasWidth - margin),
random(canvasHeight - margin, canvasHeight - 50),
);
}
}
function set_palette() {
lerps = []
color_a = color(random(5, 255), random(5, 255), random(5, 255));
color_b = color(random(5, 255), random(5, 255), random(5, 255));
let steps = 1 / (numberOfLines - 2);
for (let n = numberOfLines; n > 0; n -= 1) {
let lerp = lerpColor(color_a, color_b, steps * n);
lerps.push(lerp);
};
colors = lerps.reverse();
colors.unshift(color_a);
colors.push(color_b);
}
function set_lines() {
numberOfLines = random(3, 5);
}