Published
Edited
Jun 4, 2020
md`# Scenes`
scenes = [
sceneCircle,
sceneCircumfeernce,
sceneCircumfeernces,
// splineWaves,
colorBlend,
splineRandom,
]
// splineWaves = (svg) => {
// let N = 16
// let points = [...Array(N).keys()].map((d, i) => {
// let angle = d * Math.PI * 2 / N
// let mr
// if (i % 2) {
// mr = 1 - timeCurve / 2
// angle += Math.PI * 2 * timeCurve / N
// }
// else {
// mr = 1 + timeCurve / 2
// angle -= Math.PI * 2 * timeCurve / N
// }
// let r = p.r * mr
// let x = p.w / 2 + r * Math.sin(angle)
// let y = p.h / 2 + r * Math.cos(angle)
// return [x, y]
// })
// return svg.append('path')
// .attr('d', pointsToSplinePath(points, true))
// // .attr('stroke', 'black')
// // .attr('fill', 'none')
// // .attr('stroke-width', 10)
// }
colorBlend = (svg) => {
return svg.selectAll('circle')
.data( ['#a00', '#a0a', '#0aa'])
.join('circle')
.attr('r', p.r + 10 * timeCurve)
.attr('cx', d => p.w / 2 + 50 * timeCurve * (Math.random() * 2 - 1))
.attr('cy', d => p.h / 2 + 50 * timeCurve * (Math.random() * 2 - 1))
.attr('fill', d => d)
.attr('style', 'mix-blend-mode: multiply;')
// .attr('stroke-width', 10)
}
p = {
return {
w: 512,
h: 512,
r: 100,
}
}
// timeWhole = Math.floor(timeCurve)
// timeDecimal = timeCurve % 1
import {pointsToSplinePath} from "@illus0r/snippets"
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.
