Published
Edited
Jan 3, 2021
1 fork
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
p5(sketch => {

sketch.setup = function() {
sketch.createCanvas(canvas_width, canvas_height);
sketch.colorMode(sketch.HSB, 360, 100, 100, 100);
// sketch.noFill();
sketch.noStroke();
sketch.rect(0, 0, canvas_width, canvas_height);
sketch.noLoop();
};

sketch.draw = function() {
const background_colour = sketch.color(360);
sketch.background(background_colour);
sketch.blendMode(sketch.MULTIPLY);
for (var xy = 0; xy < grid[0].length; xy++) {
const background_grid = grid[0][xy];
const colour = sketch.color(background_grid.colour);
sketch.noFill();
sketch.stroke(colour);
sketch.rect(background_grid.x, background_grid.y, background_grid.r * 2, background_grid.r * 2);
}
for (var g = 0; g < grid[1].length; g++) {
const colour = sketch.color(grid[1][g].colour);
if (grid[1][g].stroke === true) {
sketch.stroke(colour);
sketch.noFill();
} else {
sketch.noStroke();
sketch.fill(colour);
}
sketch.ellipse(grid[1][g].x, grid[1][g].y, grid[1][g].r * 2);
}

}
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mutable grid = createGrid();
Insert cell
function createGrid() {
const thisGrid = [];
const thisXY = [];
// go through all the columns
for (var ptX = 0; ptX < grid_x; ptX++) {
// go through all the rows
for (var ptY = 0; ptY < grid_y; ptY++) {
thisXY.push({
r: grid_size / 2,
x: ptX * grid_size,
y: ptY * grid_size,
colour: [0, 0, 95]
})
// draw a random number of ellipses
const nRandom = randomIntFromInterval(1, 5);
// go through the random number
for (var n = 0; n < nRandom; n++) {
const d = (grid_size - 5) / nRandom;
const x0 = ptX * grid_size + (grid_size - d) + d / 2;
const x1 = ptX * grid_size + (grid_size - (grid_size - d)) - d / 2;
const x = randomIntFromInterval(x0, x1);
const y0 = ptY * grid_size + (grid_size - d) + d / 2;
const y1 = ptY * grid_size + (grid_size - (grid_size - d)) - d / 2;
const y = randomIntFromInterval(y0, y1);
const s = randomIntFromInterval(0, 1);
const c = randomIntFromInterval(0, n_colours - 1);
const colour = [palette[c].h, palette[c].s, palette[c].b];
thisGrid.push({
r: d / 2,
x: x,
y: y,
stroke: stroke[s],
colour: colour
})
}
}
}
return [thisXY, thisGrid];
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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