p5((s) => {
let w = 23.4 * 30; // width
let h = 33.1 * 30; // height
// we'll need a high resolution (like 300 dpi) for printing
// since this is quite resource intensive (and to large to fit on your screen) we only use 30 dpi for now
// and scale the image 10x on export using the s.displayDensity command
let cw = 20; // cell width
let ch = 20; // cell height
let noiseScaleSpace = 0.0003
let noiseScaleTime = 0.0009
s.setup = function () {
s.createCanvas(w, h);
};
s.draw = function () {
s.clear()
s.background(15,60,60)
s.strokeWeight(5)
s.strokeCap(s.SQUARE)
s.stroke(30,120,120)
for (let x = 0; x < w; x += cw) {
for (let y = 0; y < h; y += ch) {
s.translate(x, y)
s.rotate(s.noise(x * noiseScaleSpace, y * noiseScaleSpace, s.frameCount * noiseScaleTime) * 180)
s.line(5, ch / 2, cw - 5, ch / 2)
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
}
}
})
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.
