Generative design Notebook 6.2: shapes / Irene de la Torre

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

Workspace

Published

Edited

Apr 13, 2020

Fork of Generative design Notebook 6.1: shapes

P5.js

Genuary2024, Vera Molnár Droste effect, Genuary2024 Genuary2022, Architecture Genuary2022, Destroy a square.Genuary2022, Fidenza challenge Genuary2022, space Genuary2022, Dithering (Floyd-Steinberg)Genuary2022, Draw 10,000 of something Almost a Sierpinski Koch Curve UCB's logo built with 8,000 dots Canvas, P5.js and circle packing (collision and cluster force) on a map Generative design Notebook 1: colours and squares Generative design Notebook 4: obtaining colour palettes from images Generative design Notebook 6.1: shapes

Generative design Notebook 6.2: shapes

Generative design Notebook 7: alignment in a grid Generalization of the Sierpinski triangle - Fractals Generative design Notebook 5: colour palettes from rules Generalization of the Sierpinski triangle - Fractals v2 BBC Coronavirus tribute: 1 Global Flower BBC Coronavirus tribute: all countries (weekly)BBC Coronavirus tribute: all countries (daily)BBC Coronavirus Tribute: 1 Country, 1 Flower BBC 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 30 Canvas, P5 and circle packing in a map

Also listed in…

Generative Design book exercises

p5(sketch => {

const randomColour = object.colour;

sketch.setup = function() {

sketch.createCanvas(width, height);

sketch.colorMode(sketch.HSB, 360, 100, 100, 100);

sketch.noFill();

sketch.rect(0, 0, width, height);

};

sketch.draw = function() {

const t = new Date().getSeconds() / 2;

// loop every two seconds

if (t%4 == 0) {

// sketch.noLoop();

sketch.background(255, 5);

// number of vertex dependant on seconds

const circleResolution = randomIntFromInterval(2, 60); // if 0 seconds --> 2 points

const radius = randomIntFromInterval(0.5, width / 2); // if 0 seconds --> 2 points

const angle = sketch.TWO_PI / circleResolution;

sketch.strokeWeight(randomIntFromInterval(0.5, 2));

const randomThisColour = randomIntFromInterval(randomColour - 20, randomColour + 20);

const randomSaturation = randomIntFromInterval(80, 100);

const randomBrightness = randomIntFromInterval(60, 80);

const colour = sketch.color(randomThisColour, randomSaturation, randomBrightness);

sketch.stroke(colour);

// 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);

}

})

// from https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript

function randomIntFromInterval(min, max) {

return Math.floor(Math.random() * (max - min + 1) + min);

}

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.

Learn more