Open as new workspace
Alternating colors experiment 3 by Ryan

Alternating colors experiment 3

View source Pathogen · 119 lines
define ViewBox(0, 0, 2420, 1480);
define default PathLayer('base') ${
  fill: #fff;
  stroke: none;
}
let { width, height } = viewbox;
rect(0, 0, width, height);

let backgroundClipPB = @{ 
  rect(0, 0, width, height);
};
let backgroundClip = ClipPath('background-clip');
backgroundClip.append(backgroundClipPB);

let background = PathLayer('background') ${
  fill: oklch(0.7412 0.0000 89.9 / 0.20);
  fill-rule: evenodd;
  stroke: none;
  clip-path: backgroundClip.id;
};
let bgPB = @{
  circle(200, 200, 100);
};
for (offsetIndex in 1..48) {
  let offset = bgPB.variableOffset() {|vo, pb|
    for (time in 1..200) {
      vo.stop(calc(time / 200), calc(32 * offsetIndex + randomRange(-12, 12)), CurveContinuity.G2);
    }
  };
  background.apply {
    offset.drawTo(-200, calc(height / 2));
    z
  }
}

let mainPLFillColor = oklch(0.9792 0.1035 107.6 / 0.075).hueShift(0.7pi);
let shadowColor = oklch(0.6573 0.2590 356.8 / 0.28).hueShift(-0.40pi).saturate(120%);
let baseMainStyles = ${
  fill: mainPLFillColor;
  stroke: mainPLFillColor.darken(84%).alpha(64%);
  stroke-width: 0.3;
  filter: drop-shadow(0px 0px 8px shadowColor);
};
let mainPathLayer = PathLayer('main-path-layer') << baseMainStyles;

let fontFamily = 'Akronim';
@font fontFamily;
let glyphFontColor = oklch(0.6291 0.2562 26.8);
let glyphStyles = ${
  fill: glyphFontColor.alpha(28%);
  font-family: fontFamily;
  font-size: 32;
  font-weight: 400;
  stroke: glyphFontColor.alpha(72%);
  stroke-width: 2;
};

let layerCounter = 1;
let glyphs = PathBlock.fromGlyph(`Unlikely & ? @ Persuasion`, glyphStyles);
for ([glyph, gIndex] in glyphs) {
  // Capture generated contours so that they can later be added to a higher
  //   z-index layer
  let contourSet = [];
  let conScale = randomRange(0.95, 4);

  let baseGlyphColor = mainPLFillColor.hueShift(calc(gIndex * 0.01pi));
  let baseGlyphShadowColor = shadowColor.hueShift(calc(gIndex * 0.0125pi));
  // if (calc(gIndex % 2) == 0) {
  //   baseGlyphColor = baseGlyphColor.hueShift(0.33pi);
  //   baseGlyphShadowColor = baseGlyphShadowColor.hueShift(0.95pi).lighten(20%);
  // }
  
  let contours = glyph.contours.map() {|con|
    return con.fillet(1.6).scale(conScale, conScale).rotateAtVertexIndex(0, randomRange(-0.25pi, 0.25pi));
  };
  
  for ([contour, cIndex] in contours) {
    let leftOffset = calc(260 + gIndex * 80);
    let topOffset = calc(260 + cIndex * 128);
    contourSet.push({
      contour,
      leftOffset,
    });

    for (offsetBase in 1..42) {
      let offsetBase = calc(offsetBase * 1.95 + 1);
      let halo = contour.variableOffset() {|vo, cpb|
        let timeMax = 17;
        for (time in 1..timeMax) {
          let offset = randomRange(calc(offsetBase - 2.8), calc(offsetBase + 2.8));
          vo.stop(calc(time / timeMax), offset, CurveContinuity.G2);
        }
      };
      let pl = PathLayer(`pl-${layerCounter}`) << baseMainStyles << ${
        fill: baseGlyphColor.hueShift(calc(offsetBase * 0.075pi));
        stroke: baseGlyphColor.darken(randomRange(0.56, 0.72)).alpha(52%);
        stroke-width: randomRange(0.075, 1.125);
        filter: drop-shadow(0px 8px 12px baseGlyphShadowColor);
      };
      layerCounter = layerCounter + 1;
      pl.apply {
        halo.drawTo(leftOffset, topOffset);
        z
      }
    }
  }


  let glyphLayer = PathLayer(`gl-${gIndex}`) << glyphStyles << ${
    filter: `blur(${randomRange(1.8, 4.2)}px)`;
  };
  glyphLayer.apply {
    for (contourRef in contourSet) {
      let { contour, leftOffset } = contourRef;
      contour.drawTo(leftOffset, 360);
    }
  }
}