Квадрат Мавревича

В школе терпеть не мог математику, особенно тригонометрию. И вот те на — вырос и понял что неплохо было бы перечитать учебник за 7-8-9 (какой то там) класс. А все почему потому что в течении 4 часов не мог развернуть несчастный 4-х угольник на 30 градусов. В оригинале конечно был квадрат, но то что я из него делал можно с натяжкой назвать даже 4-х угольником. Я его даже пару раз в бантик завязал.

А началось все с того что я увидел имитацию Counter Strike нарисованную при помощи векторной графике и javascript в canvas. Я решил написать нечто подобное. Но с чего начать? Я решил нарисовать кубик который можно вращать во все стороны. До кубика дело не дошло. Проблемы возникли еще с первой стороной. Блядская математика. В общем как я уже говорил, я пытался повернуть квадрат хоть как-нибудь, хоть куда-нибудь целых 4 часа. Более того не сумел найти ни одно учебника по 2D графике в котором бы внятно описывалось как создавать псевдо-трехмерные объекты, с формулами. Ближе к часу ночи вспомнил про книгу «Как самому создать трехмерную игру», вспомнил громким матом. Выругался и полез искать учебник по математике для школы, нашел mathematics.ru, стало немного проще, но все равно квадратик развернулся только в два ночи, когда я синусы, косинусы, плюсы и минусы расставлял почти не думая, пытаясь забрутфорсить формулу.

Вот такая хоботня у меня получилась: красным цветом исходный квадрат, черным — повернутый.

Рисуется это вот таким мегаламерским кодом засунутым в онлоад, ничего я скоро исправлюсь.


jQuery(function () {

	var plot = document.getElementById("sqrt").getContext("2d"),
		theta = 30 * Math.PI / 180,
		delta = [Math.cos(theta), Math.sin(theta)],
		radius = 100 * Math.sqrt(2);

	plot.fillRect(0, 100, 400, 1);
	plot.fillRect(0, 200, 400, 1);
	plot.fillRect(0, 300, 400, 1);

	plot.fillRect(100, 0, 1, 400);
	plot.fillRect(200, 0, 1, 400);
	plot.fillRect(300, 0, 1, 400);

	plot.beginPath();
	plot.fillStyle = "red";
	plot.moveTo(100, 100);
	plot.lineTo(100, 300);
	plot.lineTo(300, 300);
	plot.lineTo(300, 100);
	plot.closePath();
	plot.fill();

	plot.beginPath();
	plot.fillStyle = "black";
	plot.moveTo(200 - radius * delta[1], 200 - radius * delta[0]);
	plot.lineTo(200 + radius * delta[0], 200 - radius * delta[1]);
	plot.lineTo(200 + radius * delta[1], 200 + radius * delta[0]);
	plot.lineTo(200 - radius * delta[0], 200 + radius * delta[1]);
	plot.closePath();
	plot.fill();

});

Спонсор картинки в IE 6 и 7 — Google co своим скриптом explorercanvas, IE 8 идет на хуй.

Вывод из этой басни такой: надо было учить математику в школе, а потом появляются посты такие как этот и прошлый.

3 Комментарии “Квадрат Мавревича

  1. ыы, камрад, не стыдно быть дураком, стыдно им оставаться. ты молодец, продолжай, глядя на тебя и я может у сына учебник возьму… а то ужо одичал, в 9 классе на экзамене учителю на выбор предлагал любой из 5 известных мне вариантов доказательств теоремы Пифагора (гусары, молчать!), а сейчас — даже за большие деньги никак :(

Комментарии закрыты