Nomadic People Migration

    canvas-pack

    1.1.1 • Public • Published

    canvas-pack

    A creative-coding environment for JavaScript. Allows you to use npm packages in your creative-coding sketches. Will automatically reload the page as soon as you make changes to your code.

    Usage

    1. Install canvas pack in your project (npm install --save canvas-pack).

    2. Create index.js in root directory:

      import createRegl from "regl";
       
      const canvas = document.getElementById("canvas");
       
      const regl = createRegl(canvas);
       
      const drawTriangle = regl({
        frag: `
         precision mediump float;
         uniform vec4 color;
         void main() {
            gl_FragColor = color;
         }`,
       
        vert: `
         precision mediump float;
         attribute vec2 position;
         void main() {
            gl_Position = vec4(position, 0, 1);
         }`,
       
        attributes: {
          position: regl.buffer([
            [-0.9, -0.9],
            [0.9, -0.9],
            [0.9, 0.9],
          ]),
        },
       
        uniforms: {
          color: regl.prop("color"),
        },
       
        count: 3,
      });
       
      regl.frame(({ time, tick }) => {
        regl.clear({
          color: [0, 0, 0, 0],
          depth: 1,
        });
       
        drawTriangle({
          color: [
            Math.cos(time * 0.1),
            Math.sin(time * 0.08),
            Math.cos(time * 0.3),
            1,
          ],
        });
      });
    3. Add start script to package.json:

      {
        // ...
        "scripts": {
          "start": "canvas-pack"
        }
        // ...
      }
    4. Run npm start.

    5. Open browser and navigate to http://localhost:3000/.

    Install

    npm i canvas-pack

    DownloadsWeekly Downloads

    1

    Version

    1.1.1

    License

    ISC

    Unpacked Size

    10 kB

    Total Files

    12

    Last publish

    Collaborators

    • paulkre