Published
Edited
Jul 15, 2020
6 stars
{
const width = 500
const radius = 150
const n_lines = 6
const noise_xy_freq = 3
const radius_offset_scale = 25
const noise_z_freq = 1/200
const d = 2 //controlls size of noisy portion
const colors = ['rgba(240,240,0,.5)','rgba(240,0,240,.5)','rgba(0,240,240,.5)']
const lineWidth = 2
const n_segments = 1000
const noise = new SimplexNoise()
const ctx = DOM.context2d(width,width)
ctx.globalCompositeOperation = 'darken'
ctx.lineWidth = lineWidth
let t = 0
while (true){
t += 1
ctx.clearRect(0,0,width,width)
for (let j = 0; j < n_lines; j++){
ctx.beginPath()
ctx.strokeStyle = colors[j % colors.length]
for (let i = 0; i <= n_segments; i++){
let angle = i/n_segments * 2 * Math.PI
let x = Math.cos(angle)
let y = Math.sin(angle)
let k = angle - Math.PI
let noise_scale = Math.pow(Math.E, -(k * k) * d)
const noise_x_sample = x * noise_xy_freq
const noise_y_sample = y * noise_xy_freq
const noise_z_sample = t * noise_z_freq + (j * 100)//ensure different noise pattern for each line
const noise_value = noise.noise3D(noise_x_sample,noise_y_sample, noise_z_sample)
const radius_offset = noise_value * radius_offset_scale * noise_scale
x = width/2 + (radius + radius_offset) * x
y = width/2 + (radius + radius_offset) * y
if (i == 0){
ctx.beginPath()
ctx.moveTo(x, y)
}
ctx.lineTo(x,y)
}
ctx.closePath()
ctx.stroke()
}
yield ctx.canvas
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.