// averageImage = {
// const ctx = DOM.context2d(width, height);
// const imageData = ctx.getImageData(0, 0, width, height);
// const data = imageData.data;
// data.forEach((_, index) => data[index] = 255);
// const shuffle = d3.shuffle(d3.range(imageCanvi.length));
// let layers = [];
// let imageIndex = 0;
// while (layers.length < overlapAmount) {
// layers.push(getLayer(imageIndex, performance.now() - Math.random() * speed));
// imageIndex = (imageIndex + 1) % imageCanvi.length;
// }
// while (true) {
// const now = performance.now();
// layers = layers.filter(l => l.isAlive(now));
// while (layers.length < overlapAmount) {
// layers.push(getLayer(imageIndex));
// imageIndex = (imageIndex + 1) % imageCanvi.length;
// }
// const imgs = layers.map(l => l.getImageData(now));
// const weights = layers.map(l => l.getWeight(now));
// const weightSum = weights.reduce((r, w) => r + w, 0);
// for (let index = 0; index < data.length; index++) {
// if (index % 4 !== 3) {
// let sum = 0;
// for (let j = 0; j < imgs.length; j++) {
// sum += imgs[j].data[index] * weights[j];
// }
// data[index] = sum / weightSum;
// }
// }
// ctx.putImageData(imageData, 0, 0);
// yield ctx.canvas;
// }
// }
// getLayer = {
// const randLifespan = d3.randomNormal(speed, speed / 10);
// const randRotation = d3.randomNormal(0, Math.PI / 64);
// const randScale = d3.randomNormal(1.1, 0.05);
// const cHelper = DOM.context2d(width, height);
// return (imageIndex, start) => {
// start = start || performance.now();
// const lifespan = randLifespan();
// const c = DOM.context2d(width, height);
// c.drawImage(imageCanvi[imageIndex], 0, 0);
// const rotation = d3.interpolateNumber(randRotation(), randRotation());
// const scale = d3.interpolateNumber(randScale(), randScale());
// return {
// getWeight: (now) => {
// const elapsed = now - start;
// if (elapsed < 0 || elapsed > lifespan)
// return 0;
// const t = elapsed / lifespan;
// if (t < fadeRatio)
// return t / fadeRatio;
// if (t > 1 - fadeRatio)
// return (1 - t) / fadeRatio;
// return 1;
// },
// getImageData: (now) => {
// const t = (now - start) / lifespan;
// cHelper.translate(width / 2, height / 2)
// cHelper.rotate(rotation(t))
// cHelper.scale(scale(t), scale(t))
// cHelper.translate(-width / 2, -height / 2)
// cHelper.drawImage(c.canvas, 0, 0);
// cHelper.setTransform(1, 0, 0, 1, 0, 0);
// return cHelper.getImageData(0, 0, width, height);
// },
// isAlive: (now) => now - start < lifespan,
// };
// }
// }
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.
