Published
Edited
May 20, 2022
1 fork
1 star
md`# Jitter grid`
canvas = {
const canvas = DOM.canvas(width, height);
const ctx = canvas.getContext('2d');
const anchor = [width / 2, 0];
const row = Math.floor((width - pad) / (pad + radius));
const col = Math.floor((height - pad) / (pad + radius));
let grid = [];
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
let x = pad + (j * (radius + pad)) + getRandom(-pad / 4, pad / 4);
let y = pad + (i * (radius + pad)) + getRandom(-pad / 4 , pad / 4);
// let x = pad + (j * (radius + pad));
// let y = pad + (i * (radius + pad));
grid.push([x, y]);
}
}
const TONES = ['#EC4023', '#F7EFD4', '#BFCDD8', '#68717F'];
let colorrange = ['#66617C','#939BB9','#C5E4F5','#DBFAF4','#F2FEF5'];
let heightrange = d3.range(0, height, height / colorrange.length)
let colors = d3.scaleLinear()
.domain(heightrange)
.range(colorrange);
let voronoi = d3.voronoi()
.extent([[0, 0], [width, height]]);
let voronoiPaths = voronoi(grid).polygons();
for (let i = 0; i < voronoiPaths.length; i++) {
let path = voronoiPaths[i];
ctx.beginPath();
for (let j = 0; j< path.length; j++){
let point = path[j];
ctx.lineTo(point[0], point[1])
ctx.lineWidth = '2';
ctx.strokeStyle = '#fff';
ctx.stroke();
const random_index = Math.floor(Math.random() * TONES.length);
// const [red, g, b] = TONES[random_index];
// fill(r, g, b);
ctx.fillStyle = TONES[random_index];
ctx.fill();
}
ctx.closePath();
}
for (let i = 0; i < grid.length; i++) {
let coordinate = grid[i];
ctx.beginPath();
ctx.arc(coordinate[0], coordinate[1], radius, 0, 2 * Math.PI);
ctx.fillStyle = '#fff';
ctx.fill();
}
// console.log(voronoi(grid).polygons());
return canvas
}
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
radius = 5
pad = 50
n = 4
width = 954
height = 1391
d3 = require("d3@5")
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.
