canvas = {
const w = 35, h = 35
let index = 0
const canvas = DOM.canvas(width, 2 * h)
const context = canvas.getContext("2d")
const scale = 1
const cols = Math.floor(width / w)
const rows = Math.floor(height / h)
context.fillStyle = 'transparent'
context.fillRect(0, 0, width, height)
const delta = 16.6667
const idleAnimation = {
duration: 1000,
animate: (context, sprite, t) => {
idlyLookAround(sprite, t)
drawEyeball(context, sprite)
}
}
const blinkAnimation = {
duration: 800,
animate: (context, sprite, t) => {
updateBlink(sprite, t)
drawBlink(context, sprite)
}
}
const animations = [ idleAnimation, blinkAnimation ]
for (let animation of animations) {
const s = sprite(16)
for (let t = 0; t < animation.duration; t += delta) {
context.save();
const col = index % cols
const row = Math.floor(index / cols)
context.translate(col * w, row * h)
context.translate(w / 2, h / 2)
context.scale(scale, scale)
animation.animate(context, s, t)
context.restore()
t += delta
index++
}
}
yield canvas
}
function sprite(r) {
return {
radius: r,
pupil: r * 0.25,
iris: r * 0.5,
fillStyle: 'white',
outlineStyle: '#a3ce27',
bodyStyle: '#44891a',
opening: true,
closing: false,
openTime: 0,
idleTime: 0,
eyeSpeed: 0.1,
lookAt: [0, 0],
toLookAt: [0, 0],
phi: 0,
palpebra: {
width: r,
height: -r / 2
}
}
}
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.
