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;
  
  const iv = 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>