Code «j» • Code Snippet

HTML

SCSS

Script

var canvas = document.getElementById('canvas'),
	w = +canvas.width,
	h = +canvas.height,
	ctx = canvas.getContext('2d'),
	trunks = [],
	leaves = [],
	odd = false,
	gapX = w / 40,
	gapY = h / 40,
	centerX = w / 2,
	centerY = h / 3,
	radius = Math.min(centerX, centerY) * .8;

function inCircle(point) {
	return (point.x - centerX) * (point.x - centerX) + (point.y - centerY) * (point.y - centerY) <= radius * radius;
}

function draw() {
	ctx.fillStyle = '#0cf';
	ctx.fillRect(0, 0, w, h);
	
	trunks = [];
	leaves = [];

// trunk
	for (var y = centerY; y <= h - gapY; y += gapY) {
		odd = !odd;
		var line = [];
		for (var x = w / 2 - gapX * 2; x <= w / 2 + gapX * 2; x += gapX) {
			line.push({
				x: x + (Math.random() * .8 - .4) * gapX  + (odd ? gapX / 2 : 0),
				y: y + (Math.random() * .8 - .4) * gapY,
			})
		}
		trunks.push(line);
	}

// leaves

for (var y = gapY / 2; y <= h; y += gapY) {
		odd = !odd;
		var line = [];
		for (var x = gapX / 4; x <= w; x += gapX) {
			var dot = { x: x + (odd ? gapX / 2 : 0), y: y };
			line.push({
				x: x + (Math.random() * .8 - .4) * gapX  + (odd ? gapX / 2 : 0),
				y: y + (Math.random() * .8 - .4) * gapY,
			});
		}
		leaves.push(line)
	}

// draw
	var dotLine;
	odd = true;

// trunks
	for (var y = 0; y < trunks.length - 1; y++) {
		odd = !odd;
		var dotLine = [];
		for (var i = 0; i < trunks[y].length; i++) {
			dotLine.push(odd ? trunks[y][i] : trunks[y + 1][i]);
			dotLine.push(odd ? trunks[y + 1][i] : trunks[y][i]);
		}
		for (var i = 0; i < dotLine.length - 2; i++) {
			drawTriangle(dotLine[i], dotLine[i + 1], dotLine[i + 2], 'brown')
		}
	}

// leaves
	for (var y = 0; y < leaves.length - 1; y++) {
		odd = !odd;
		var dotLine = [];
		for (var i = 0; i < leaves[y].length; i++) {
			dotLine.push(odd ? leaves[y][i] : leaves[y + 1][i]);
			dotLine.push(odd ? leaves[y + 1][i] : leaves[y][i]);
		}
		for (var i = 0; i < dotLine.length - 2; i++) {
			if ( inCircle(dotLine[i]) && inCircle(dotLine[i+1]) && inCircle(dotLine[i+2])) {
				drawTriangle(dotLine[i], dotLine[i + 1], dotLine[i + 2], 'green')
			}
		}
	}
}

draw();
setInterval(draw, 100);