Award-winning creative focused on data-driven art and visualizations, trying to push the boundaries of the web one visual story at a time ✨
Published unlisted
Edited
Feb 26, 2020
2 stars
{
const width = 300
const height = 300
const {canvas, ctx} = createCanvas(width, height)
ctx.globalCompositeOperation = 'screen'
const minRadius = 40
const maxRadius = 50
const numCircles = 9
const colorInterpolate = d3.interpolateCubehelix('#FFE78B', '#DD867E') // yellow, pink
const circles = _.times(numCircles, i => {
return {
cx: p5.prototype.randomGaussian(width / 2, 2),
cy: p5.prototype.randomGaussian(height / 2, 2),
radius: p5.prototype.randomGaussian(maxRadius, maxRadius / 4),
color: _.chain(colorInterpolate(p5.prototype.randomGaussian(0.25, 0.15)).split(/[rgb\(\)\,]/g)).filter().map(d => +(d.trim())).value() // hacky way to just get an array of rgb
}
})
let xoff = 0
const radius = 10
const t = d3.timer(elapsed => {
ctx.clearRect(0, 0, width, height)
xoff += 0.02
_.each(circles, (d, i) => {
const noise = 5 * p5.prototype.noise(i * 100 + xoff)
const t = 0.5 * i * elapsed / (numCircles * 100) + i * 1000
let x = 0.75 * noise * radius * Math.cos(t) * Math.sin(t)
let y = noise * radius * Math.sin(t)
if (i % 2) {
x *= Math.cos(t)
} else {
x *= Math.sin(t)
}
return Object.assign(d, {
x: d.cx + x + noise,
y: d.cy + y + noise,
})
})
drawCircles(ctx, circles)
if (elapsed > 60000) t.stop()
})
return canvas
}
d3 = require('d3')
_ = require('lodash')
p5 = require('p5')
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.
