Created
November 14, 2020 17:28
-
-
Save jagtalon/b8cc20284ae5f8d2e232dc148adf69f3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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