Published
Edited
Aug 2, 2020
1 star
Insert cell
md`# Vector addition`
Insert cell
{
const dom = html`<div style="height: 400px"></div>`
const space = new pts.CanvasSpace(dom).setup({ bgcolor: '#fff', retina: true })
const form = space.getForm()
// Main
space.add((time) => {
const start = new pts.Pt([space.size.x * 0.25, space.size.y * 0.75])
const dist = pts.Num.mapToRange(pts.Num.cycle(time % 1000 / 1000), 0, 1, space.size.x * 0.15, space.size.x * 0.35)
const a = start.$add([dist, 0])
form.strokeOnly('#ddd', 2).line([
start,
a
])
const b = new pts.Pt([50, -space.size.y * 0.5])
form.strokeOnly('#0fa', 2).line([
a,
b.$add(a),
])
form.strokeOnly('#08f', 2).line([
start,
b.$add(a)
])
form.font(12, 700).fill('#333')
form.text(start.$add([dist * 0.5, 20]), 'A')
form.text(pts.Geom.centroid([a, b.$add(a)]).add(20, 5), 'B')
form.text(pts.Geom.centroid([start, b.$add(a)]).add(0, -20), 'A + B')
})
space.play()
return dom
}
Insert cell
5
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

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