p5((s) => {
let w = 23.4*30; // width
let h = 33.1*30; // heights
let cw = 2; // cell width
let ch = 2; // cell height
s.setup = function () {
s.createCanvas(w, h);
s.frameRate(1);
};
s.draw = function () {
s.background(0)
for (let x = 0-cw; x < w; x += cw) {
for (let y = 0-ch; y < h; y += ch) {
s.translate(x, y)
s.translate(cw / 2, ch / 2)
s.stroke(s.random(0,255),0,0)
s.strokeWeight(cw/4)
s.line(cw, ch/2, cw, ch)
s.stroke(0,s.random(0,255),0)
s.line(cw*25/20, ch/2, cw*25/20, ch)
s.stroke(0,0,s.random(0,255))
s.line(cw*15/20, ch/2, cw*15/20, ch)
s.resetMatrix() // reset translate/transform/scale for next interation
}
}
};
s.keyPressed = function ({key}) {
if (key === 's') {
s.pixelDensity(10)
// s.pixelDensity(10) sets how many actual pixels are rendered per pixel unit
// we temporarily increase this to scale up our image for export
s.draw()
s.saveCanvas('image', 'png')
s.pixelDensity(s.displayDensity()) // reset pixel density
}
};
})
image1 = FileAttachment("image(1).png").image()
image4 = FileAttachment("image(4).png").image()
image8 = FileAttachment("image(8).png").image()
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.
