|
|
|
@ -1,28 +1,36 @@
|
|
|
|
|
const canvasSketch = require('canvas-sketch');
|
|
|
|
|
const { lerp } = require('canvas-sketch-util/math');
|
|
|
|
|
const random = require('canvas-sketch-util/random');
|
|
|
|
|
const random = require('canvas-sketch-util/random');
|
|
|
|
|
const palettes = require('nice-color-palettes');
|
|
|
|
|
|
|
|
|
|
const seed = random.getRandomSeed();
|
|
|
|
|
random.setSeed(seed);
|
|
|
|
|
|
|
|
|
|
const settings = {
|
|
|
|
|
dimensions: [ 2048, 2048],
|
|
|
|
|
dimensions: [3840, 2160],
|
|
|
|
|
file: `sketch-${seed}`,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
random.setSeed(random.getRandomSeed());
|
|
|
|
|
|
|
|
|
|
const sketch = () => {
|
|
|
|
|
|
|
|
|
|
const colorCount = random.rangeFloor(1, 6);
|
|
|
|
|
const palette = random.shuffle(random.pick(palettes)).slice(0, colorCount);
|
|
|
|
|
const colorCount = random.rangeFloor(1, 5);
|
|
|
|
|
const fullPalette = random.shuffle(random.pick(palettes));
|
|
|
|
|
fullPalette.forEach(color => {
|
|
|
|
|
console.log(`${color} %cxxx■■■`, `color: ${color}`);
|
|
|
|
|
});
|
|
|
|
|
const palette = fullPalette.slice(0, colorCount);
|
|
|
|
|
const bgColor = random.pick(fullPalette.slice(colorCount));
|
|
|
|
|
console.log(bgColor);
|
|
|
|
|
|
|
|
|
|
const grid = () => {
|
|
|
|
|
const points = [];
|
|
|
|
|
const size = 40;
|
|
|
|
|
for (let x = 0; x < size; x += 1) {
|
|
|
|
|
for (let y = 0; y < size; y += 1) {
|
|
|
|
|
const u = x / (size - 1);
|
|
|
|
|
const v = y / (size - 1);
|
|
|
|
|
const radius = (random.noise2D(u, v) * 0.5 + 0.5) * .04;
|
|
|
|
|
const rotation = random.noise2D(u * 10, v * 10)
|
|
|
|
|
const columns = 90;
|
|
|
|
|
const rows = 50;
|
|
|
|
|
for (let x = 0; x < columns; x += 1) {
|
|
|
|
|
for (let y = 0; y < rows; y += 1) {
|
|
|
|
|
const u = x / (columns - 1);
|
|
|
|
|
const v = y / (rows - 1);
|
|
|
|
|
const radius = (random.noise2D(u, v) * 0.5 + 0.5) * 0.04;
|
|
|
|
|
const rotation = random.noise2D(u * 5, v * 5);
|
|
|
|
|
points.push({
|
|
|
|
|
position: [u, v],
|
|
|
|
|
radius,
|
|
|
|
@ -35,40 +43,46 @@ const sketch = () => {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// random.setSeed(512);
|
|
|
|
|
const points = grid().filter(() => random.value() > 0.5);
|
|
|
|
|
const margin = 200;
|
|
|
|
|
const points = grid(); //.filter(() => random.value() > 0.5);
|
|
|
|
|
const margin = 150;
|
|
|
|
|
|
|
|
|
|
//☁ ▅▒░☼‿☼░▒▅ ☁
|
|
|
|
|
const symbol = '=>';
|
|
|
|
|
|
|
|
|
|
return ({ context, width, height }) => {
|
|
|
|
|
context.fillStyle = 'white';
|
|
|
|
|
context.fillStyle = bgColor;
|
|
|
|
|
context.fillRect(0, 0, width, height);
|
|
|
|
|
|
|
|
|
|
points.forEach(data => {
|
|
|
|
|
const { position, radius, rotation, color } = data;
|
|
|
|
|
const [u, v] = position;
|
|
|
|
|
const x = lerp(margin, width - margin, u);
|
|
|
|
|
const y = lerp(margin, width - margin, v);
|
|
|
|
|
const y = lerp(margin, height - margin, v);
|
|
|
|
|
|
|
|
|
|
//context.beginPath();
|
|
|
|
|
//context.arc(x, y, radius * width, 0, Math.PI * 2, false);
|
|
|
|
|
//context.arc(x, y, 10, 0, Math.PI * 2, false);
|
|
|
|
|
//context.fillStyle = color;
|
|
|
|
|
//context.fill();
|
|
|
|
|
context.save();
|
|
|
|
|
context.fillStyle = color;
|
|
|
|
|
context.font = `${radius * width}px "Menlo"`;
|
|
|
|
|
context.font = `${radius * width * 0.5}px "Menlo"`;
|
|
|
|
|
context.translate(x, y);
|
|
|
|
|
context.rotate(rotation);
|
|
|
|
|
context.fillText('+--+', 0, 0);
|
|
|
|
|
context.fillText(symbol, 0, 0);
|
|
|
|
|
context.restore();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
context.fillStyle = 'rgba(0,0,0,0.4)';
|
|
|
|
|
context.font = `50px "Menlo"`;
|
|
|
|
|
context.textAlign ="end"
|
|
|
|
|
context.fillText(`${random.getSeed()}`, width - 20, height - 20);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
context.fillStyle = 'rgba(0,0,0,0.6)';
|
|
|
|
|
context.font = `30px "Menlo"`;
|
|
|
|
|
context.textAlign = 'end';
|
|
|
|
|
const label = `${symbol} ${random.getSeed()}`;
|
|
|
|
|
context.fillText(label, width - 20, height - 20);
|
|
|
|
|
|
|
|
|
|
palette.forEach((color, idx) => {
|
|
|
|
|
const colorDot = `■${' '.repeat(label.length + idx + 1)}`;
|
|
|
|
|
context.fillStyle = color;
|
|
|
|
|
context.fillText(colorDot, width - 20, height - 20);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|