Slanted Light

This project uses a Javascript library called p5js. It provides wrapper functions for working with a web canvas. There are two basic functions:

function setup() {
    // ...initialize variables, state, objects
    for (var i=0; i<beamCount; i++) {
        beams[i] = new Beam();
    }
}

function draw() {
    // ...draw the actual shapes on the canvas and update state every frame
    for (var j=0; j<beamCount; j++) {

        if (beams[j].isExpired()) {
            beams[j] = new Beam();
        }
        beams[j].update();

        //draw the actual beam, rect takes x, y, width, height
        let b = beams[j];
        rect(b.position, 0, b.size, canvasHeight);
    }
}

Beams have a lifecycle. They’re initialized, drawn, and then hidden. When a Beam’s lifecycle ends, I create a new Beam to replace the old one.

Each beam is an object that looks like this:

class Beam {
    size: number;
    age: number;
    maxAge: number;
    speed: number;
    direction: number;
    position: number;
    opacity: number;
    color: string;
    //...
    update() {
        //update the beam every frame
    }
}

I was trying to make the scene look like beams of colored light, and I was going for a sort of “prismatic” effect. Critically speaking, it might be too random, but overall I’m pretty happy with it. There’s also a subtle noise effect with the help of an embedded SVG:

<!-- Generated this awesome noise texture at https://noice.vercel.app/ -->
<svg id="noice">
    <filter id="noise-filter">
        <feTurbulence
            type="fractalNoise"
            baseFrequency="1.76"
            numOctaves="1"
            stitchTiles="stitch"
        >
        </feTurbulence>
        <feColorMatrix type="saturate" values="0"></feColorMatrix>
        <feComponentTransfer>
            <feFuncR type="linear" slope="0.97"></feFuncR>
            <feFuncG type="linear" slope="0.97"></feFuncG>
            <feFuncB type="linear" slope="0.97"></feFuncB>
            <feFuncA type="linear" slope="1"></feFuncA>
        </feComponentTransfer>
        <feComponentTransfer>
            <feFuncR type="linear" slope="0.9" intercept="0.05"/>
            <feFuncG type="linear" slope="0.9" intercept="0.05"/>
            <feFuncB type="linear" slope="0.9" intercept="0.05"/>
        </feComponentTransfer>
    </filter>
    <rect width="100%" height="100%" filter="url(#noise-filter)"></rect>
</svg>

I had a lot of fun with this one, it’s always nice to have success with a new library. I’ll be reaching for p5 again in the future.