Published
Edited
Apr 12, 2022
3 forks
// p5.js sketch
s = s => {
let fc = 0;
let isRot = true;
s.setup = () => {
s.createCanvas(settings.width, settings.height, s.WEBGL);
s.noFill();
s.stroke(200,130,255);
s.strokeWeight(1);
s.ortho(-(s.width) / 2, s.width / 2, -(s.height) / 2, s.height / 2, 1500, -1500);
};
s.draw = () => {
s.background(0);
s.rotateX(fc / 420);
s.rotateY(fc / 160);
s.rotateZ(fc / 250);
for (let tx = stageSet.tx; tx < stageSet.txlim; tx += stageSet.bsw) {
for (let ty = stageSet.ty; ty < stageSet.tylim; ty += stageSet.bsh) {
for (let tz = stageSet.tz; tz < stageSet.tzlim; tz += stageSet.bsd) {
s.push();
s.translate(tx, ty, tz);
s.box(stageSet.bsw, stageSet.bsh, stageSet.bsd);
s.pop();
}
}
}
if (isRot) {
fc++;
}
};
s.mouseClicked = () => {
isRot = !isRot;
}
}
// settings for p5.js sketch
settings = ({width: 500, height: 500, id: "p5-container"});
stageSet = ({tx: -200, txlim: 250, ty: -200, tylim: 250, tz: -200, tzlim: 250, bsw: 50, bsh: 50, bsd:50});
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.
