{
// const width = 400;
const height = width;
const colors = ["#FF9919", "#E85146", "#CC291F", "#103E54", "#39ACBF"]
const context = DOM.context2d(width, height);
const N_PTS = 2000
const alpha = 1.32843048;
const pts2 = [
new Particle(0.5, 0.0, colors[0]),
new Particle(0.6, 0.2, colors[1])
]
for (let i = 0 ; i < 100 ; i++) {
pts2.push(new Particle(Math.random()*2 - 1, Math.random()*2 - 1, colors[Math.floor(Math.random()*colors.length)]))
}
function next([x, y]) {
const nx = x * Math.cos(alpha) - (y - x*x)*Math.sin(alpha)
const ny = x * Math.sin(alpha) + (y - x*x)*Math.cos(alpha)
return [nx, ny]
}
context.translate(width/2, height/2)
let i = 0;
var stop = false;
var frameCount = 0;
var fpsInterval, startTime, now, then, elapsed;
function render() {
//clear
context.fillStyle = "rgb(255, 255, 255,.1)"
context.fillRect(-width/2, -height/2, width, height)
for (let i = 0 ; i < pts2.length ; i++) {
const npt = next([pts2[i].x, pts2[i].y])
pts2[i].update(npt[0], npt[1])
pts2[i].draw(context, width, height)
}
}
function startAnimating(fps) {
fpsInterval = 1000 / fps;
then = Date.now();
startTime = then;
animate();
}
startAnimating(30)
function animate() {
requestAnimationFrame(animate);
now = Date.now();
elapsed = now - then;
if (elapsed > fpsInterval) {
then = now - (elapsed % fpsInterval);
render()
i++;
}
}
return context.canvas
}
class Particle {
constructor(x, y, color="black") {
this.x = x;
this.y = y;
this.prevX = x;
this.prevY = y;
this.color = color
}
update(newX, newY) {
this.prevX = this.x;
this.prevY = this.y;
this.x = newX;
this.y = newY;
}
draw(context, width, height) {
context.beginPath()
context.moveTo(this.prevX*width/2, this.prevY*width/2)
context.lineTo(this.x*width/2, this.y*width/2)
context.strokeStyle = this.color
context.lineWidth = 3;
context.stroke()
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
