April 5, 2022

Shaded Stripes

I don’t want to take the credit for somebody else’s efforts. This demo is a Remake of a piece of Processing code initially done by @lisasekaida. It’s amazing how big of an effect those rectangle bars do with such few code. The weave like structure that comes from the (z-)order as well as the gradients or shades of grey even so each single bar has just one color and no gradient at all. I had to recreate this piece with Svelte.

shaded-stripes.svelte

<script>
  import SvgContaiiner from '$lib/shared/svg-container.svelte';

  let a = 0;

  setInterval(() => {
    a = a > 1200 ? 0 : a + 1;
  }, 1000 / 60);

  let nums = [...Array(26).keys()];
  let y = 64;

  const col = (c) => `rgb(${c},${c},${c})`;
  const size = (a, i) => (200 - y + a > i * 20 ? 200 - y + a - i * 20 : 0);
</script>

<SvgContaiiner width="640" height="640">
  <rect x={0} y={0} width={640} height={640} style="fill:{col(a / 3)};stroke:none;" />
  {#each nums as i}
    <rect
      x={0}
      y={y + i * 20}
      width={size(a, i)}
      height={10}
      style="fill:{col((y + i * 20) / 2)};stroke-width:1;stroke:rgb(0,0,0)"
    />
    <rect
      x={y + i * 20}
      y={0}
      width={10}
      height={size(a, i)}
      style="fill:{col((y + i * 20) / 2)};stroke-width:1;stroke:rgb(0,0,0)"
    />
  {/each}
</SvgContaiiner>