sketch

sketch.js

const canvasSketch = require('canvas-sketch');
const { lerp } = require('canvas-sketch-util/math');

const settings = {
  dimensions: [ 2048, 2048 ]
};

let count = 10;
const createGrid = () => {
  const points = [];
  for (let x = 0; x < count; x++) {
    for (let y = 0; y < count; y++) {
      const u = x / (count - 1);
      const v = y / (count - 1);
      points.push([ u, v ]);
    }
  }
  return points;
};

const snowFlake = (context, x, y, margin, width, angle, symmetry) => {
	let size = (width - 2*margin)/ count/2;
	context.save();
	context.translate(x,y);
	for (let i = 0; i < symmetry; i++) {
		drawBranch(context,size,0, angle);
		context.rotate(2*Math.PI/symmetry);
	}
	context.restore();
	// context.beginPath();
	// context.arc(x, y, 40, 0, Math.PI * 2);
	// context.fillStyle = 'black';
	// context.fill();


}


const drawBranch = (context,size,level, angle) => {
	if(level>3) return;
	context.beginPath();
	context.moveTo(0,0);
	context.lineTo(size,0);
	context.closePath();
	context.stroke();

	for (var i = 0; i < 3; i++) {
		context.save();
		  
			context.translate(size * i / (3), 0);
			context.scale(0.5, 0.5);

			context.save();
				context.rotate(angle);
				drawBranch(context,size,level + 1,angle*2);
			context.restore();


			context.save();
				context.rotate(-angle);
				drawBranch(context,size,level + 1,angle*2);
			context.restore();

		context.restore();
	}
}

const points = createGrid();

const sketch = () => {
  return ({ context, width, height }) => {
  	const margin = 0.1*width;

    context.fillStyle = 'black';
    context.strokeStyle = 'white';

    context.fillRect(0, 0, width, height);

    points.forEach(([ u, v ],i) => {
      const x =  lerp(margin, width - margin, u);
      const y =  lerp(margin, height - margin, v);


      // draw here, x,y
      snowFlake(context, x, y, margin, width, Math.PI * Math.random(), Math.floor(3 + 5*Math.random()))

    });

  };
};

canvasSketch(sketch, settings);