Make life happier, and more playing with sketch

master
JD Cantrell 5 years ago
parent 5adac90a3e
commit 2d9de2e6a4

1335
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -12,7 +12,12 @@
"dependencies": {
"canvas-sketch": "^0.2.1",
"canvas-sketch-util": "^1.6.2",
"nice-color-palettes": "^2.0.0",
"nice-color-palettes": "^2.0.0"
},
"devDependencies": {
"eslint": "^5.3.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.16.0",
"prettier": "^1.16.4"
}
}

@ -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);
});
};
};

Loading…
Cancel
Save