playing with space, shape, colour & composition
p5(s => {
s.setup = () => {
s.createCanvas(width, height, s.WEBGL)
s.noStroke()
}
s.draw = () => {
s.background(50)
s.fill('#f59994')
s.push()
s.translate(width * -0.2, 0)
s.rotate(s.frameCount / 200.0)
polygon(s, 0, 0, 82, 3)
s.pop()
s.fill('#abf5ed')
s.push()
s.translate(0, 0)
s.rotate(s.frameCount / 200.0)
polygon(s, 0, 0, 80, (s.frameCount * 0.01))
s.pop()
s.fill('#ffe600')
s.push()
s.translate(width * 0.2, 0)
s.rotate(s.frameCount / -100.0)
polygon(s, 0, 0, 80, 4)
s.pop()
}
})
height = 400
function polygon(p5, x, y, radius, npoints) {
let angle = p5.TWO_PI / npoints;
p5.beginShape();
for (let a = 0; a < p5.TWO_PI; a += angle) {
let sx = x + p5.cos(a) * radius;
let sy = y + p5.sin(a) * radius;
p5.vertex(sx, sy);
}
p5.endShape(p5.CLOSE);
}
import { p5 } from '@makio135/p5'
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.
