You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.1 KiB
JavaScript
90 lines
2.1 KiB
JavaScript
let x1 = 30;
|
|
let y1 = 0;
|
|
let x4 = 480;
|
|
let y4 = 0;
|
|
let x2, y2, x3, y3;
|
|
|
|
let baseColor;
|
|
let highlightColor;
|
|
let shadowColor;
|
|
|
|
function setup() {
|
|
createCanvas(windowWidth, windowHeight);
|
|
angleMode(RADIANS);
|
|
noStroke();
|
|
|
|
baseColor = color(160, 82, 45, 80); // Translucent base color
|
|
highlightColor = color(255, 200, 100, 80); // Translucent highlight
|
|
shadowColor = color(100, 50, 20, 80); // Translucent shadow
|
|
}
|
|
|
|
function leaf(leafX, leafY, leafRotation, scaleFactor) {
|
|
push();
|
|
translate(leafX, leafY);
|
|
rotate(leafRotation);
|
|
scale(scaleFactor, 1);
|
|
|
|
x2 = 100 * sin(frameCount * 0.05) + 1;
|
|
y2 = 100 * cos(frameCount * 0.005) + 10;
|
|
x3 = 180 * sin(frameCount * 0.005) + 10;
|
|
y3 = 150 * cos(frameCount * 0.005) + 10;
|
|
|
|
// Use a blend mode to multiply the layers
|
|
blendMode(MULTIPLY);
|
|
|
|
// Draw multiple translucent layers for a blended effect
|
|
let numLayers = 5;
|
|
for (let i = 0; i < numLayers; i++) {
|
|
// Lerp between colors
|
|
let lerpedColor = lerpColor(highlightColor, shadowColor, i / numLayers);
|
|
fill(lerpedColor);
|
|
|
|
// Calculate a slight offset for each layer
|
|
let offset = i * 2; // Adjust the multiplier for the desired effect
|
|
|
|
beginShape();
|
|
curveVertex(x1, y1);
|
|
curveVertex(x1, y1);
|
|
curveVertex(x2 + offset, y2 + offset);
|
|
curveVertex(x3 + offset, y3 + offset);
|
|
curveVertex(x4, y4);
|
|
curveVertex(x4, y4);
|
|
endShape();
|
|
|
|
beginShape();
|
|
curveVertex(x1, y1);
|
|
curveVertex(x1, y1);
|
|
curveVertex(x2 + offset, -y2 - offset);
|
|
curveVertex(x3 + offset, -y3 - offset);
|
|
curveVertex(x4, y4);
|
|
curveVertex(x4, y4);
|
|
endShape();
|
|
}
|
|
|
|
// Reset blend mode to default for other drawings
|
|
blendMode(BLEND);
|
|
|
|
pop();
|
|
}
|
|
|
|
function draw() {
|
|
bg();
|
|
|
|
leaf(200, 200, PI/2 * sin(frameCount * 0.005), 1);
|
|
leaf(500, 400, PI/4 * cos(frameCount * 0.005), -1);
|
|
leaf(100, 700, PI/2 * sin(frameCount * 0.005, 1));
|
|
}
|
|
|
|
function bg() {
|
|
c1 = color(10, 0, 255)
|
|
c2 = color(0, 100, 255, 0);
|
|
|
|
for (let y = 0; y < height; y++) {
|
|
n = map(y, 0, height, 0, 1);
|
|
let newc = lerpColor(c1, c2, n);
|
|
stroke(newc);
|
|
line(0, y, width, y);
|
|
}
|
|
noStroke(); // Disable stroke after drawing the background
|
|
}
|