A Pen By
zz85

` ````
<script src="http://jsrun.it/lib/three.js-r60/js"></script>
```

` ````
// forked from zz85's "Chasing Beziers Lights 2" jsdo.it/zz85/zvtF
// forked from zz85's "Chasing Beziers" https://jsdo.it/zz85/o3X1
// forked from zz85's "Bezier Doodle" https://jsdo.it/zz85/k2K0
var canvas = document.createElement('canvas');
canvas.width = innerWidth;
canvas.height = innerHeight;
document.body.appendChild( canvas );
var ctx = canvas.getContext('2d');
var i, j;
var t, v;
var brushes = 5;
var curve;
v = new THREE.Vector2();
var points, midpoints, strokes;
var midpoint;
var POINTS = 200;
var chains = [];
function Chain() {
this.points = [];
this.midpoints = [];
this.strokes = [];
this.curve = new THREE.QuadraticBezierCurve();
this.widths = [];
}
function init() {
chains = [];
for (j = brushes; j--; ) {
chains.push( new Chain() );
}
}
function addWayPoint(x, y, randomRadius) {
var p = new THREE.Vector2(x, y);
// add new points to chains
for (j = brushes; j--; ) {
chain = chains[j];
p = p.clone();
p.x += (Math.random() - 0.5) * randomRadius;
p.y += (Math.random() - 0.5) * randomRadius;
chain.points.push(p);
chain.widths.push(randomRadius / 10);
points = chain.points;
midpoint = new THREE.Vector2();
var l = points.length;
if (l==1) {
midpoint.addVectors(points[l-1], points[l - 1])
} else {
midpoint.addVectors(points[l-2], points[l - 1])
}
midpoint.multiplyScalar(0.5);
chain.midpoints.push(midpoint);
}
}
function restart() {
init();
for (i=0; i<POINTS; i++) {
// (Math.random() * 1.8 - 0.4)
randomRadius = 20 + Math.random() * 60;
addWayPoint( (Math.random() ) * innerWidth , (Math.random() ) * innerHeight, randomRadius );
}
t = 0;
}
document.body.onclick = restart;
var moved = false;
var lastx, lasty;
document.body.onmousemove = function(e) {
lastx = e.offsetX;
lasty = e.offsetY;
moved = true;
}
var t = 0, c = 0;
restart();
function draw() {
requestAnimationFrame(draw);
var inc = 0.08;
if (t >= POINTS - 1) {
randomRadius = 20 + Math.random() * 60;
if (moved) {
addWayPoint( lastx, lasty, randomRadius );
} else {
addWayPoint( (Math.random() ) * innerWidth , (Math.random() ) * innerHeight, randomRadius );
}
for (j = brushes; j--; ) {
chain = chains[j];
chain.points.shift();
chain.midpoints.shift();
}
t -= 1;
moved = false;
// restart();
// return;
}
j = Math.floor(t)
k = t % 1
for (b=brushes; b--;) {
chain = chains[b];
curve = chain.curve;
midpoints = chain.midpoints;
points = chain.points;
strokes = chain.strokes;
curve.v0 = midpoints[j];
curve.v1 = points[j];
curve.v2 = midpoints[j+1];
strokes.push({
from: curve.getPoint(k % 1),
to: curve.getPoint(k + inc % 1),
width: chain.widths[j] * (k%1) + chain.widths[j+1] * (1-(k%1)),
h: (c * 2) % 360,
a: 1
});
while (strokes.length > 200) {
strokes.shift();
}
}
c++;
t += inc;
ctx.clearRect(0, 0, innerWidth, innerHeight)
ctx.fillStyle = '#000'
ctx.fillRect(0, 0, innerWidth, innerHeight)
ctx.globalCompositeOperation = 'lighter'
for (b=brushes; b--;) {
strokes = chains[b].strokes;
var s, w;
for (i=strokes.length;i--;) {
s = strokes[i];
w = s.width;
// w = 4;
// w = 4 + Math.sin(t) * 2;
ctx.strokeStyle = 'hsla(' + ~~(s.h) + ', 50%, 20%, ' + (s.a * 0.7) + ')';
ctx.lineWidth = w * 4;
ctx.beginPath();
// if (i==strokes.length-1)
ctx.moveTo(s.from.x, s.from.y);
ctx.lineTo(s.to.x, s.to.y);
ctx.stroke();
ctx.strokeStyle = 'hsla(' + ~~(s.h) + ', 50%, 50%, ' + s.a + ' )';
s.a -= 0.01;
ctx.lineWidth = w;
ctx.beginPath();
// if (i==strokes.length-1)
ctx.moveTo(s.from.x, s.from.y);
ctx.lineTo(s.to.x, s.to.y);
// .toString(16)
ctx.stroke();
}
}
}
// setInterval(draw, 30);
draw();
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers