pointOfLine = {
const lines = [];
const gap = height / config.count;
let odd = false;
for (let y = gap / 2; y <= height; y += gap) {
const line = [];
odd = !odd;
for (let x = gap / 2; x <= width - 50; x += gap) {
const boundary = {
left: x + (odd ? gap / 2 : 0) - gap / 2,
top: y - gap / 2,
right: x + (odd ? gap / 2 : 0) + gap / 2,
bottom: y + gap / 2
};
const point1 = {
x: x + (odd ? gap / 2 : 0),
y: y,
boundary,
velocityX: Math.random() * 0.8 - 0.4,
velocityY: Math.random() * 0.8 - 0.4
};
const point2 = {
boundary,
x: x + (odd ? gap / 2 : 0) + (Math.random() * 0.8 - 0.4) * gap,
y: y + (Math.random() * 0.8 - 0.4) * gap,
velocityX: Math.random() * 0.8 - 0.4,
velocityY: Math.random() * 0.8 - 0.4
};
const point = point2;
line.push(point);
}
lines.push(line);
}
return lines;
}
triangleOfLine = {
const lines = [];
let odd = true;
for (let y = 0; y < pointOfLine.length - 1; y++) {
odd = !odd;
const dotLine = [];
for (let i = 0; i < pointOfLine[y].length; i++) {
const p1 = odd ? pointOfLine[y][i] : pointOfLine[y + 1][i];
const p2 = odd ? pointOfLine[y + 1][i] : pointOfLine[y][i];
p1.color = randomRgba();
p2.color = randomRgba();
dotLine.push(p1, p2);
}
lines.push(dotLine);
}
return lines;
}
updatePosition = () => {
for (let i = 0; i < pointOfLine.length; i++) {
for (let j = 0; j < pointOfLine[i].length; j++) {
const point = pointOfLine[i][j];
if (point.x + point.velocityX > point.boundary.right || point.x + point.velocityX < point.boundary.left) {
point.velocityX = -point.velocityX;
}
if (point.y + point.velocityY > point.boundary.bottom || point.y + point.velocityY < point.boundary.top) {
point.velocityY = -point.velocityY;
}
point.x += point.velocityX;
point.y += point.velocityY;
if (!config.drawBoundary) {
continue;
}
context.save();
context.beginPath();
context.strokeStyle = 'rgba(255,0,0,0.6)';
context.moveTo(point.boundary.left, point.boundary.top);
context.lineTo(point.boundary.left, point.boundary.bottom);
context.lineTo(point.boundary.right, point.boundary.bottom);
context.lineTo(point.boundary.right, point.boundary.top);
context.lineTo(point.boundary.left, point.boundary.top);
context.stroke();
context.closePath();
context.restore();
}
}
}
drawScene = () => {
triangleOfLine.map(dotLine => {
for (let i = 0; i < dotLine.length - 2; i++) {
drawTriangle(dotLine[i], dotLine[i + 1], dotLine[i + 2]);
}
});
}
drawTriangle = (p1, p2, p3, color) => {
context.save();
context.fillStyle = color || p3.color;
// context.strokeStyle = color || p3.color;
// context.strokeStyle = 'rgba(0,0,0,0.2)'
context.beginPath();
context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
context.lineTo(p3.x, p3.y);
context.lineTo(p1.x, p1.y);
context.closePath();
context.stroke();
config.fill && context.fill();
context.restore();
}
clearScreen = () => {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
}
{
while (true) {
clearScreen();
updatePosition();
drawScene();
yield null;
}
}
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.
