playing with space, shape, colour & composition
sketch = p => {
const h = 600
const edge = 2
let mouse
p.setup = () => {
p.createCanvas(width, h)
}
p.draw = () => {
p.background(13,15,5)
const pos = p.createVector(width / 2, h / 2)
// keep it moving/creating vector until mouse interaction
if (p.mouseX <= edge || p.mouseX >= width - edge || p.mouseY <= edge || p.mouseY >= h - edge ) {
mouse = p.createVector(p.random(1, width), p.random(1, h))
} else {
mouse = p.createVector(p.mouseX, p.mouseY)
}
const v = p5.Vector.sub(mouse, pos)
v.setMag(h/3) // same as v.normalize().mult(50)
p.translate(width / 2, h / 2)
p.stroke(61, 189, 93)
p.strokeWeight(8)
p.line(0, 0, v.x, v.y)
p.noStroke()
p.fill(13,15,5)
p.ellipse(0, 0, 4)
}
}
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.
