dog = illo => {
let randWalk = function(theta, scale) {
let config = { steps: 2000, theta: theta }
let vertices = [{ x: 0, y: 0 }]
for(var i=0;i<config.steps;i++){
var last = vertices[vertices.length-1]
var xo = last.x
var yo = last.y
var r=Math.floor(Math.random()*(360/config["theta"]))
var theta = Math.PI * ((r * config["theta"] % 360)/180)
xo+=Math.cos(theta)*scale
yo+=Math.sin(theta)*scale
if(xo > -50 && xo < 50 && yo < 150 && yo > 0) {
vertices.push({x: xo, y: yo})
}
}
console.log(vertices)
return vertices
}
const body = new Zdog.Shape({
addTo: illo,
stroke: 3,
path: randWalk(90,5),
translate: { y: -100 },
color: '#ccc',
})
const leftEye = new Zdog.Shape({
addTo: body,
translate: { x: -50, z: 10 },
path: randWalk(45,.5),
stroke: 2,
color: 'black',
})
const rightEye = leftEye.copy({
translate: { x: 50, z: 10 },
path: randWalk(45,.5),
})
const mouth = new Zdog.Shape({
addTo: body,
color: 'white',
stroke: 5,
path: randWalk(2,1),
translate: { x: 10, y: 80, z: 10 },
})
return (frame, dogs) => {
body.rotate = { z: Zdog.TAU/32 * Math.sin(frame / 10) }
}
}
Zdog = require('zdog@1/dist/zdog.dist.min.js')
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.
