Skip to content

Instantly share code, notes, and snippets.

@roboshoes

roboshoes/post-processing-canvas-sketch.ts

Created July 8, 2018 02:05
Show Gist options
  • Save roboshoes/ff601935154b95444cb96e82c062ee83 to your computer and use it in GitHub Desktop.
Save roboshoes/ff601935154b95444cb96e82c062ee83 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. roboshoes created this gist Jul 8, 2018.
    31 changes: 31 additions & 0 deletions post-processing-canvas-sketch.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    import { draw, options, stop, start, bootstrap } from "canvas-recorder/gl";
    import { ImageShader } from "image-shader";

    // @ts-ignore
    import fragment from "./fragmant.glsl";

    const SIZE = 1024;

    const canvas = document.createElement( "canvas" );
    canvas.width = SIZE;
    canvas.height = SIZE;

    const context = canvas.getContext( "2d" );
    const shader = new ImageShader( canvas, fragment );

    options( {
    size: [ SIZE, SIZE ],
    canvas: shader.domElement,
    record: false,
    clear: false,
    color: "black",
    } );


    draw( ( _, time: number ) => {

    // use context vairable here to draw
    shader.update();
    } );

    bootstrap();