-
Notifications
You must be signed in to change notification settings - Fork 322
/
index.js
78 lines (62 loc) · 1.98 KB
/
index.js
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/*
INSTRUCTIONS:
This file must be copied into ./App in order to work
*/
var w = window.innerWidth;
var h = window.innerHeight;
var scale = window.devicePixelRatio;
var w2 = w/2;
var h2 = h/2;
var canvas = document.getElementById('canvas');
canvas.width = w * scale;
canvas.height = h * scale;
canvas.style.width = w;
canvas.style.height = h;
var ctx = canvas.getContext('2d');
ctx.scale(scale, scale);
var curves = [];
for( var i = 0; i < 200; i++ ) {
curves.push({
current: Math.random() * 1000,
inc: Math.random() * 0.005 + 0.002,
color: '#'+(Math.random()*0xFFFFFF<<0).toString(16) // Random color
});
}
var p = [0,0, 0,0, 0,0, 0,0];
var animate = function() {
// Clear the screen - note that .globalAlpha is still honored,
// so this will only "darken" the sceen a bit
ctx.globalCompositeOperation = 'source-over';
ctx.fillRect(0,0,w,h);
// Use the additive blend mode to draw the bezier curves
ctx.globalCompositeOperation = 'lighter';
// Calculate curve positions and draw
for( var i = 0; i < maxCurves; i++ ) {
var curve = curves[i];
curve.current += curve.inc;
for( var j = 0; j < p.length; j+=2 ) {
var a = Math.sin( curve.current * (j+3) * 373 * 0.0001 );
var b = Math.sin( curve.current * (j+5) * 927 * 0.0002 );
var c = Math.sin( curve.current * (j+5) * 573 * 0.0001 );
p[j] = (a * a * b + c * a + b) * w * c + w2;
p[j+1] = (a * b * b + c - a * b *c) * h2 + h2;
}
ctx.beginPath();
ctx.moveTo( p[0], p[1] );
ctx.bezierCurveTo( p[2], p[3], p[4], p[5], p[6], p[7] );
ctx.strokeStyle = curve.color;
ctx.stroke();
}
};
// The vertical touch position controls the number of curves;
// horizontal controls the line width
var maxCurves = 70;
document.addEventListener( 'touchmove', function( ev ) {
ctx.lineWidth = (ev.touches[0].pageX/w) * 20;
maxCurves = Math.floor((ev.touches[0].pageY/h) * curves.length);
}, false );
ctx.fillStyle = '#000000';
ctx.fillRect( 0, 0, w, h );
ctx.globalAlpha = 0.05;
ctx.lineWidth = 2;
setInterval( animate, 16 );