Skip to content

Instantly share code, notes, and snippets.

@jagtalon

jagtalon/noise.js

Created Nov 25, 2020
Embed
What would you like to do?
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