Data visualization designer. Now Digital Designer at the Financial Times. Before at UCB Biopharma, BBC News & the Senseable City Lab. I like making dots move on the screen
Public
Edited
Jun 18, 2023
3 stars
p5((sketch) => {
const buildings = createArchitecture(sketch);
const cam_pos = { x: w * 0.5, y: h * 0.5, z: -700 };
const center = { x: 0, y: 0, z: 100 };
//x component of direction 'up' from camera
const up = { x: 0, y: 0, z: 90 };
sketch.setup = function () {
sketch.createCanvas(w, h, sketch.WEBGL);
sketch.background(colors.bkg);
// sketch.ortho();
// sketch.noLoop();
sketch.camera(
cam_pos.x,
cam_pos.y,
cam_pos.z,
center.x,
center.y,
center.z,
up.x,
up.y,
up.z
);
sketch.normalMaterial();
sketch.frameRate(30);
};
sketch.draw = function () {
sketch.background(colors.bkg);
let locX = sketch.mouseX;
let locY = sketch.mouseY;
if (toggle === true) {
sketch.camera(
cam_pos.x + locX * 0.1,
cam_pos.y + locY * 0.1,
cam_pos.z + (locX + locY) * 0.1,
center.x,
center.y,
center.z,
up.x,
up.y,
up.z
);
} else {
sketch.noLoop();
}
sketch.ambientLight(255, 255, 255, 0.25);
sketch.pointLight(0, 90, 166, 1, locX, locY, h);
sketch.pointLight(185, 46, 43, 1, locY, locX, h);
// sketch.pointLight(242, 206, 24, 1, w, locX, locY);
// sketch.scale
sketch.noStroke();
sketch.fill(colors.bkg);
sketch.ambientMaterial(colors.bkg);
sketch.plane(w, h);
sketch.translate(-w / 2, -h / 2);
buildings.forEach((d) => {
sketch.ambientMaterial(colors.bkg);
sketch.stroke(colors.bkg);
// sketch.strokeWeight(10);
sketch.push();
sketch.translate(d.x, d.y, 0);
sketch.rect(0, 0, grid);
sketch.pop();
// sketch.strokeWeight(1);
// sketch.stroke(colors.bkg);
// sketch.noStroke();
sketch.ambientMaterial(d.color);
sketch.push();
sketch.translate(d.x, d.y, -d.size_z / 2);
sketch.box(d.size_w + 1, d.size_h + 1, d.size_z + 1);
sketch.pop();
});
};
})
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.
