Canvas Interference Circles

HTML5 canvases have a fun global setting called globalCompositeOperation - it’s determines how pixels on the canvas are rendered when they’re overwritten by a new operation. In effect they’re the same sort of thing as Photoshop’s layer modes.

In this script white concentric circles are draw on top of each other when the canvas is set to ‘difference’ so a white + white = black, giving a stripe effect. Two of these circle effects are then rotated around each other giving rise to a cool psychadelic demo.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

width = canvas.width;
height = canvas.height;

midx = width / 2;
midy = height / 2;

w = 30;
circles = 10;

theta = 0;

ctx.globalCompositeOperation = 'difference';
ctx.fillStyle = 'white';

var render = function(dt){

    requestAnimationFrame( render );

    ctx.clearRect(0,0,width,height);

    for (var x =0; x < circles; x++) {

        var offsetx = Math.sin(theta) * 200;
        var offsety = Math.cos(theta) * 200;

        ctx.beginPath();
        ctx.arc(midx-offsetx,midy-offsety,((x+1)*w),0,2*Math.PI);
        ctx.fill();

    }

    for (var x =0; x < circles; x++) {

        var offsetx = Math.sin(theta) * 200;
        var offsety = Math.cos(theta) * 100;

        ctx.beginPath();
        ctx.arc(midx+offsetx,midy+offsety,((x+1)*w),0,2*Math.PI);
        ctx.fill();

    }

    theta += 0.025;

}

render();