2020 | P5
Number Two is a generative art piece made with p5.js using Perlin Noise method for the shape and movement. See and fork the sketch at p5.js editor here.
var inc = 0.002;
var start = 0;
function setup() {
if(displayWidth < 700) {
createCanvas(displayWidth * 0.9, displayWidth * 0.9);
} else {
createCanvas(700, 700);
}}
function draw() {
var fillColor1 = color(125, 21, 29, 200);
var fillColor2 = color(237, 184, 100, 255);
background(fillColor2);
// Black Lines
var mesh = height;
var y;
for (var hori = 0; hori < mesh; hori = hori + 10) {
stroke(50);
noFill();
beginShape();
var xoff = start;
var horioff = noise(xoff * hori * 0.005);
for (var x = 0; x < width; x++) {
y = noise(xoff) * height * horioff;
vertex(x, y);
xoff += inc;
}
endShape();
horioff += (mesh / 10);
}
// Black Filled
fill(50);
beginShape();
var xoffBF = start + 200;
var horioffBF = noise(xoffBF * 2 * 0.005);
for (var xBF = 0; xBF < width; xBF++) {
noStroke();
yBF = noise(xoffBF) * height * horioffBF + height/3;
vertex(xBF, yBF);
xoffBF += inc;
}
vertex(width, yBF);
vertex(width, height);
vertex(0, height);
endShape();
// Red Floating
fill(fillColor1);
noStroke();
beginShape();
var yoffRF = start + noise(0, 0.01);
for (var yRF = 0; yRF < height; yRF++) {
var xRF = noise(yoffRF) * width * 1.5;
vertex(xRF, yRF);
yoffRF += inc * 0.5;
}
endShape(CLOSE);
// Yellow Floating
translate(width / 2, 0);
rotate(45);
fill(fillColor2);
beginShape();
var yoffYF = start + noise(0.04, 0.05);
for (var yYF = 0; yYF < height; yYF++) {
var xYF = noise(yoffYF) * width * 1.3;
vertex(xYF, yYF);
yoffYF -= inc * 0.3;
}
endShape(CLOSE);
start += inc;
}