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
Published
Edited
Mar 29, 2020
3 forks
#genuary 2021 ~ 3 loopsGenerative design Notebook 7: alignment in a gridGenerative design Notebook 6.2: shapesGenerative design Notebook 5: colour palettes from rulesGenerative design Notebook 4: obtaining colour palettes from imagesGenerative design Notebook 3: colour wheelGenerative design Notebook 2: colours and rectanglesGenerative design Notebook 1: colours and squares
Generative design Notebook 6.1: shapes
Also listed in…
P5.js
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, height);
sketch.colorMode(sketch.HSB, 360, 100, 100, 50);
sketch.noFill();
sketch.rect(0, 0, width, height);
};
sketch.draw = function() {
// sketch.noLoop();
sketch.background(255, 2);
// number of vertex dependant on seconds
const thisSecond = new Date().getSeconds() / 2;
const circleResolution = sketch.map(thisSecond, 0, 30, 2, 60); // if 0 seconds --> 2 points
const radius = sketch.map(thisSecond, 0.5, 30, 0.5, height / 2) + Math.random(); // if 0 seconds --> 2 points
const angle = sketch.TWO_PI / circleResolution;
sketch.strokeWeight(thisSecond / 30);
// translate canvas to draw from the middle of it
sketch.translate(width / 2, height / 2);
sketch.beginShape();
for (var i = 0; i <= circleResolution; i++) {
const x = sketch.cos(180 - angle * i) * radius;
const y = sketch.sin(180 - angle * i) * radius;
// sketch.line(0, 0, x, y);
sketch.vertex(x, y);
}
sketch.endShape(sketch.CLOSE);
}
})
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.
