Published
Edited
Dec 22, 2020
5 stars
{
const ctx = DOM.context2d(500,500)
const n_arcs = 30
const thickness = 10
const padding = 2
const pallete = ["#a8dadc","#457b9d","#1d3557"]
function genArc(){
return {
speed: randRange(-5, 5),
segs: Math.floor(randRange(1, 5)),
fill: randRange(.1,1.1),
color: randPick(pallete),
radius: randInt(0, 15) * (thickness + padding),
}
}
ctx.lineWidth = thickness
const arcs = new Array(n_arcs).fill(0).map(genArc)
let offset = Math.PI
while (true){
offset += .001
ctx.clearRect(0,0, 500, 500)
for (let i = 0; i < n_arcs; i++){
let arc = arcs[i]
let fill = arc.fill * mapRange(Math.cos(offset * 5), -1, 1, .01, 1)
segmentedArc(ctx, 250,250, arc.radius, arc.segs, fill , offset * arc.speed)
ctx.strokeStyle = arc.color
ctx.stroke()
}
yield ctx.canvas
}
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
function segmentedArc(ctx, x, y, r, segs, fill, offset){
const seg_angle = (2 * Math.PI)/segs
for (let i = 0; i < segs; i++){
const start_angle = i * seg_angle + offset
const end_angle = start_angle + (fill * seg_angle)
ctx.beginPath()
ctx.arc(250,250, r, start_angle, end_angle)
}
}
function randRange(a,b){
return a + Math.random() * (b - a)
}
function randInt(a,b){
return Math.floor(randRange(a,b))
}
function randPick(arr){
const idx = Math.floor(Math.random() * arr.length)
return arr[idx]
}
function mapRange(x, from_a, from_b, to_a, to_b){
return ((x - from_a)/(from_b - from_a)) * (to_b - to_a) + to_a
}
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.
