Published
Edited
Aug 2, 2020
Insert cell
md`# Scaling vector with tempo`
Insert cell
{
const dom = html`<div style="height: 400px"></div>`
const space = new pts.CanvasSpace(dom).setup({ bgcolor: '#fafafa' })
const form = space.getForm()
const tempo = new pts.Tempo(60)
tempo.every(1).progress((count) => {
const mul = count % 4 + 1;
const vec = new pts.Pt([10, 10]).multiply(mul).add(space.center)
form.strokeOnly('#ddd').line([space.center, vec])
form.fillOnly('#333').font(14, 900).text(vec.$add(10, 5), `${mul}V`)
// Origin
form.fillOnly('#08f').point(space.center, 4, 'circle')
})
space.add(tempo)
space.play()
return dom
}
Insert cell
pts = require('pts')
Insert cell

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.
Learn more