palette = ['#492b7c', '#301551', '#ed8a0a', '#f6d912', '#fff29c']
w = min(windowWidth, windowHeight)
createCanvas(windowWidth, windowHeight);
ctx = canvas.getContext("2d");
function windowResized(){
w = min(windowWidth, windowHeight)
resizeCanvas(windowWidth, windowHeight);
background(random(palette));
translate(windowWidth/2, windowHeight/2)
function drawClipLayer(size) {
let indx = int(random(palette.length))
stroke(palette[(indx+1)%palette.length])
verts = makeShape(0, 0, size);
roundedPoly(ctx, verts[0], 9999);
ctx.shadowColor = 'black';
roundedPoly(ctx, verts[0], 9999);
roundedPoly(ctx, verts[1], 9999);
drawPattern(0, 0, size * 2);
function makeShape(posX, posY, R) {
for (a = 0; a < TAU; a += TAU / 9) {
rad = random(1 / 2, 1) * R;
x1 = posX + rad * cos(a);
y1 = posY + rad * sin(a);
vertices1.push({ x: x1, y: y1 });
x2 = posX + (rad - 20) * cos(a);
y2 = posY + (rad - 20) * sin(a);
vertices2.push({ x: x2, y: y2 });
return [vertices1, vertices2];
function drawPattern(posX, posY, size) {
for (let l = 0; l < 1; l += 0.05) {
y = map(l, 0, 1, 0, size);
line(-size / 2, y - size / 2, size / 2, y - size / 2);
function roundedPoly(ctx, points, radiusAll) {
for (i = 0; i < len; i++) {
p3 = points[(i + 1) % len];
A = createVector(p1.x, p1.y);
B = createVector(p2.x, p2.y);
C = createVector(p3.x, p3.y);
(BA = A.sub(B)), (BC = C.sub(B));
(BAnorm = BA.copy().normalize()), (BCnorm = BC.copy().normalize());
sinA = -BAnorm.dot(BCnorm.copy().rotate(PI / 2));
sinA90 = BAnorm.dot(BCnorm);
(radDirection = 1), (drawDirection = false);
: ((angle += PI), (radDirection = -1), (drawDirection = true));
angle > 0 ? ((radDirection = -1), (drawDirection = true)) : 0;
p2.radius ? (radius = p2.radius) : (radius = radiusAll);
lenOut = abs((cos(halfAngle) * radius) / sin(halfAngle));
if (lenOut > min(BA.mag() / 2, BC.mag() / 2)) {
lenOut = min(BA.mag() / 2, BC.mag() / 2);
cRadius = abs((lenOut * sin(halfAngle)) / cos(halfAngle));
BC.normalize().x * lenOut -
BC.normalize().y * cRadius * radDirection;
BC.normalize().y * lenOut +
BC.normalize().x * cRadius * radDirection;
BA.heading() + (PI / 2) * radDirection,
BC.heading() - (PI / 2) * radDirection,