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/.

Package Sidebar

Install

npm i canvas-pack

Weekly Downloads

1

Version

1.1.1

License

ISC

Unpacked Size

10 kB

Total Files

12

Last publish

Collaborators

  • paulkre