canvas = {
var t=0
const context = DOM.context2d(width, height);
const particles = new Array(n);
for (let i = 0; i < n; ++i) {
let r = brightness* (1-(i+0)%3)
let g = brightness* (1-(i+1)%3)
let b = brightness* (1-(i+2)%3)
particles[i] = {
x: 0,
y: 0,
vx: 0,
vy: 0,
rgb: [r,g,b].join()
};
}
context.globalCompositeOperation = "lighten";
var centerX=width/2
var centerY=height/2
while (true) {
context.save();
context.clearRect(0, 0, width, height);
context.beginPath();
context.fillRect(0, 0, width, height);
for (let i = 0; i < n; ++i) {
const p = particles[i];
let r= radius
p.x = centerX + (r) * Math.sin(2*Math.PI*t*(i+1)/n)
p.y = centerY - (r) * Math.cos(2*Math.PI*t*(i+1)/n)
let alpha = .9
if(true) {
var gradient = context.createRadialGradient(p.x, p.y, 1, p.x, p.y, radius);
gradient.addColorStop(1, `rgba(0,0,0, ${alpha})`);
gradient.addColorStop(0, `rgba(${p.rgb},${alpha})`);
context.fillStyle = gradient
context.beginPath();
context.arc(p.x, p.y, radius, 0, 2 * Math.PI);
context.fill();
}
}
if(false)
for (let i = n; i < n; ++i) {
const p = particles[i];
let r= centerX*(2*n-i)/n
p.x = centerX + r * Math.sin(-t*(i-n+1)/n)
p.y = centerY + r * Math.cos(-t*(i-n+1)/n)
var gradient = context.createRadialGradient(p.x, p.y, 1, p.x, p.y, radius);
let alpha= (i-n)/n
gradient.addColorStop(1, `rgba(0,0,0, ${alpha})`);
gradient.addColorStop(0, `rgba(${p.rgb},${alpha})`);
context.fillStyle = gradient
context.beginPath();
context.arc(p.x, p.y, radius, 0, 2 * Math.PI);
context.fill();
}
if( true ) {
for (let i = 0; i < n; ++i) {
for (let j = i ; j < n; ++j) {
const pi = particles[i];
const pj = particles[j];
let alpha= 1
context.strokeStyle = `rgba(255,255,255,${alpha})`
context.lineWidth = 5
context.beginPath();
context.moveTo(pi.x, pi.y);
context.lineTo(pj.x, pj.y);
context.stroke();
}
}
}
t+= speed / 100
context.restore();
yield context.canvas;
}
}