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
Genuary2024, Vera MolnárDroste effect, Genuary2024Genuary2022, Destroy a square.Genuary2022, Fidenza challengeGenuary2022, spaceGenuary2022, Dithering (Floyd-Steinberg)Genuary2022, Draw 10,000 of somethingAlmost a SierpinskiKoch CurveUCB's logo built with 8,000 dotsCanvas, P5.js and circle packing (collision and cluster force) on a mapGenerative design Notebook 1: colours and squaresGenerative design Notebook 4: obtaining colour palettes from imagesGenerative design Notebook 6.1: shapesGenerative design Notebook 6.2: shapesGenerative design Notebook 7: alignment in a gridGeneralization of the Sierpinski triangle - FractalsGenerative design Notebook 5: colour palettes from rulesGeneralization of the Sierpinski triangle - Fractals v2BBC Coronavirus tribute: 1 Global FlowerBBC Coronavirus tribute: all countries (weekly)BBC Coronavirus tribute: all countries (daily)BBC Coronavirus Tribute: 1 Country, 1 FlowerBBC Coronavirus tribute: all countries (weekly & mobile)BBC Coronavirus Tribute - Grid of flowers#genuary 2021 ~ Monochrome gradients without lines#genuary 2021 ~ Increase the randomness along the Y-axis#genuary 2021 ~ One process grows, another process prunes#genuary 2021 ~ Draw a line...#genuary 2021 ~ Subdivision#genuary 2021 ~ Triangle subdivision#genuary 2021 ~ Do some golf!#genuary 2021 ~ Small areas of symmetry#genuary 2021 ~ Something Human#genuary 2021 ~ 3 loops#genuary 2021 ~ Rule 30#genuary 2021 ~ Rule 30Canvas, P5 and circle packing in a map
Genuary2022, Architecture
Also listed in…
Genuary 2022
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.
