Архив метки: html5

HTML5 & Math: Треугольник Серпинского на canvas

Проходя (даже можно сказать, пробиваясь с потерями через) книгу Д. Кнута «Искусство программирования» встретил треугольник Паскаля, а тут еще давно надо было разобраться с html5 canvas, поэтому возникло непреодолимое желание проиллюстрировать треугольник Паскаля на canvas.

Есть довольно интересный способ иллюстрации числовых последовательностей в этом треугольнике – треугольник Серпинского, его я и изобразил. Вкратце, цветом отмечаются четные числа в этом треугольника.

Код реализации ниже.

	<canvas id="pascalCanvas" width="1500" height="1500"></canvas>

	<script>

		function drawPixel(x, y, context) {
			context.fillRect(x, y, 1, 1);
		}

		canvas = document.getElementById("pascalCanvas");
		c = canvas.getContext("2d");

		//some gradient style
		var gradient = c.createLinearGradient(0, 0, 0, canvas.height);
		gradient.addColorStop(0, "#abc");
		gradient.addColorStop(1, "#000");
		c.fillStyle = gradient;
		//c.fillStyle = "#000";

		//Pascal's triangle
		var tr = new Array(canvas.height);
		for (i = 0; i < canvas.height; i++) {
			tr[i] = new Array(canvas.width);
			for (k = 0; k < canvas.width; k++) {
				if (k == 0)
					tr[i][k] = 1;
				else
					tr[i][k] = 0;
			}
		}

		for (i = 1; i < canvas.height; i++) {
			for (k = 1; k < canvas.width; k++) {
				tr[i][k] = (tr[i-1][k-1] + tr[i-1][k]) % 2;
			}
		}

		//draw
		for (i = 0; i < canvas.height; i++) {
			for (k = 0; k < canvas.width; k++) {
				if (tr[i][k] != 0)
				drawPixel(k, i , c);
			}
		}
	</script>

Получается такое:

треугольник Серпинского на html canvas

Треугольник Серпинского на html canvas

Посмотреть «в живую»

PS: Ну и раз недавно был день св. Валентина =):

Валентинка Серпинского с http://xkcd.ru/543/