Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const canvasSketch = require('canvas-sketch');
const { lerp } = require('canvas-sketch-util/math')
const settings = {
dimensions: [2048, 2048],
// units: 'cm',
// pixelsPerInch: 300
};
const sketch = () => {
const createGrid = () => {
const points = []
const count = 4
for (let x = 0; x < count; x++) {
for (let y = 0; y < count; y++) {
const u = count <= 1 ? 0.5 : x / (count - 1)
const v = count <= 1 ? 0.5 : y / (count - 1)
points.push([u, v])
}
}
return points
}
const points = createGrid()
const margin = 300
const getRandomInt = (min, max) => {
min = Math.ceil(min)
max = Math.floor(max)
return Math.floor(Math.random() * (max - min) + min)
}
return ({ context, width, height }) => {
// Set the canvas to white because otherwise we'll get a
// transparent background.
context.fillStyle = 'white'
context.fillRect(0, 0, width, height)
points.forEach(([u,v]) => {
const x = lerp(margin, width - margin, u)
const y = lerp(margin, height - margin, v)
context.fillStyle = 'white'
context.beginPath()
context.arc(x, y, 100, 0, 2 * Math.PI, getRandomInt(0, 2))
context.fill()
context.lineWidth = 50
context.strokeStyle = 'black'
context.stroke();
})
};
};
canvasSketch(sketch, settings);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.