Skip to content

Instantly share code, notes, and snippets.

@bytezen

bytezen/blur.js

Created November 19, 2018 22:04
Show Gist options
  • Save bytezen/b5f34f5cc337baf45ea4f259c399a463 to your computer and use it in GitHub Desktop.
Save bytezen/b5f34f5cc337baf45ea4f259c399a463 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bytezen created this gist Nov 19, 2018.
    31 changes: 31 additions & 0 deletions blur.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    var layer, layer2;

    function setup() {
    createCanvas(400, 400);
    // background(200);

    //Layers = Graphics
    // the circle on the top
    layer = createGraphics(100,100);
    layer.background(255,0);
    layer.fill(255,0,0,100);
    layer.noStroke();
    layer.ellipse(50,50,60,60);
    // // pg.filter(BLUR,5);

    //This is the blurred version of the same circle that is on the bottom
    layer2 = createGraphics(100,100);
    layer2.background(255,0);
    layer2.fill('red');
    layer2.noStroke();
    layer2.ellipse(50,50,80,80);
    layer2.filter(BLUR,10)
    }

    function draw() {
    background(0);
    blendMode(HARD_LIGHT);
    image(layer2,150,150,100,100);
    image(layer,150,150,100,100);

    }