Graphite shader for WebGL

Copy embed gives one block to paste into any page or site builder, no setup. For your own code: add graphite.js, ittybitty-shader.js, runtime.js, texture.js next to this page. Highlighted values follow the controls.

<!-- Quickest: one element. Size it with CSS; it fills its box. -->
<script type="module" src="./ittybitty-shader.js"></script>
<ittybitty-shader effect="graphite" style="width: 100%; aspect-ratio: 16 / 10;"></ittybitty-shader>

<!-- Or with JavaScript, for full control: -->
<canvas id="graphite" aria-hidden="true" style="width: 100%; aspect-ratio: 16 / 10; display: block"></canvas>

<script type="module">
  import { graphite } from './graphite.js';

  const canvas = document.getElementById('graphite');
  const effect = graphite(canvas, {
    showPaper: true,
    showOutlines: true,
    showShading: true,
    image: '/examples/still-life.webp',
    pressure: 0.9,
    strokes: 0.5,
    spacing: 3.5,
    follow: 0.6,
    angle: 55,
    tooth: 0.5,
    shake: 0.3,
    variance: 0.5,
    lead: '#2b2d33',
    paper: '#f4f1ea',
    // Performance
    dpr: 2,
    adaptive: true,
  });

  // Later: effect.set(…), effect.pause(), effect.resume(), effect.destroy()
</script>

Graphite

Code

Details