const canvasSketch = require('canvas-sketch'); | |
const { lerp } = require('canvas-sketch-util/math') | |
const random = require('canvas-sketch-util/random') | |
const palettes = require('nice-color-palettes') | |
const settings = { | |
dimensions: [2048, 2048], | |
// units: 'cm', | |
// pixelsPerInch: 300 | |
}; | |
const characters = ['▅', '▃', '►', '▔', '▂', ' ▬', '●'] | |
const sketch = () => { | |
const palette = random.pick(palettes) | |
const createGrid = () => { | |
const points = [] | |
const count = 200 | |
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) | |
const radius = random.noise2D(u, v, 1, 1) * .5 + .5 | |
points.push({ | |
fill: random.pick(palette), | |
radius: Math.abs(radius) * .02, | |
position: [u, v], | |
rotation: random.noise2D(u, v), | |
character: random.pick(characters) | |
}) | |
} | |
} | |
return points | |
} | |
const points = createGrid().filter(() => random.value() > .5) | |
const margin = 300 | |
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(data => { | |
const { | |
radius, | |
position, | |
fill, | |
rotation, | |
character | |
} = data | |
const [u, v] = position | |
const x = lerp(margin, width - margin, u) | |
const y = lerp(margin, height - margin, v) | |
// context.fillStyle = 'white' | |
// context.beginPath() | |
// context.arc(x, y, radius * width, 0, 2 * Math.PI, false) | |
// context.fillStyle = fill | |
// context.fill() | |
context.save() | |
context.fillStyle = fill | |
context.font = `${radius * width}px "Segoe UI"` | |
context.translate(x, y) | |
context.rotate(rotation) | |
context.fillText(character, 0, 0) | |
context.restore() | |
}) | |
}; | |
}; | |
canvasSketch(sketch, settings); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment