playing with space, shape, colour & composition
{
const W = width; // Width and height of the canvas
const H = 600;
const ctx = DOM.context2d(W, H); // Create a 2D drawing context
let t = 0; // Time variable for animation
// Draw dynamic pattern
function drawDynamicPattern(shapes) {
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, W, H); // Clear the canvas
shapes.forEach(({ baseRadius, oscillationAmplitude, speed, direction, color, edges }) => {
ctx.beginPath();
ctx.lineWidth = 1;
for (let i = 0; i <= 360; i++) {
const angle = Math.PI * 2 * i / 360;
const oscillation = Math.sin(t * speed) * oscillationAmplitude + Math.sin(t * direction) * 20;
const radius = baseRadius + oscillation * Math.sin(angle * edges);
const x = W / 2 + Math.sin(angle) * radius;
const y = H / 2 + Math.cos(angle) * radius;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.strokeStyle = `rgb(${color})`;
ctx.stroke();
});
t += 0.02; // Increment the time variable for the animation
}
// Reactive animation loop that listens to the slider
return Generators.observe(notify => {
const render = () => {
const shapes = generateShapes(numberOfShapes, variance, edges); // Pass variance value
drawDynamicPattern(shapes);
notify(ctx.canvas);
};
render();
const interval = setInterval(render, 50); // Update every 50 milliseconds
return () => clearInterval(interval); // Cleanup on reevaluation
});
}
function generateShapes(numberOfShapes, variance, edgesFactor) {
const shapes = [];
const baseRadiusStart = 50; // Starting radius for the smallest shape
const maxRadius = 250; // Maximum radius for the largest shape
for (let i = 0; i < numberOfShapes; i++) {
const uniqueFactor = Math.random(); // Generate a unique factor to vary each shape's properties
shapes.push({
baseRadius: baseRadiusStart + (i / (numberOfShapes - 1)) * (maxRadius - baseRadiusStart),
oscillationAmplitude: 10 + uniqueFactor * 20 * variance, // Apply variance and uniqueFactor for amplitude
speed: 0.02 + uniqueFactor * 0.05 * variance, // Apply variance and uniqueFactor for speed
direction: uniqueFactor > 0.5 ? 1 : -1, // Randomize direction more distinctly
color: `255, ${Math.floor(100 + uniqueFactor * 155)}, 0`, // Vary color using uniqueFactor
edges: Math.floor(5 + edgesFactor * uniqueFactor * variance + Math.random() * 5) // Control edges for complexity
});
}
return shapes;
}
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.
