Квадрат Мавревича
В школе терпеть не мог математику, особенно тригонометрию. И вот те на - вырос и понял что неплохо было бы перечитать учебник за 7-8-9 (какой то там) класс. А все почему потому что в течении 4 часов не мог развернуть несчастный 4-х угольник на 30 градусов. В оригинале конечно был квадрат, но то что я из него делал можно с натяжкой назвать даже 4-х угольником. Я его даже пару раз в бантик завязал.
А началось все с того что я увидел имитацию Counter Strike нарисованную при помощи векторной графике и javascript в canvas. Я решил написать нечто подобное. Но с чего начать? Я решил нарисовать кубик который можно вращать во все стороны. До кубика дело не дошло. Проблемы возникли еще с первой стороной. Блядская математика. В общем как я уже говорил, я пытался повернуть квадрат хоть как-нибудь, хоть куда-нибудь целых 4 часа. Более того не сумел найти ни одно учебника по 2D графике в котором бы внятно описывалось как создавать псевдо-трехмерные объекты, с формулами. Ближе к часу ночи вспомнил про книгу "Как самому создать трехмерную игру", вспомнил громким матом. Выругался и полез искать учебник по математике для школы, нашел mathematics.ru, стало немного проще, но все равно квадратик развернулся только в два ночи, когда я синусы, косинусы, плюсы и минусы расставлял почти не думая, пытаясь забрутфорсить формулу.
Вот такая хоботня у меня получилась: красным цветом исходный квадрат, черным - повернутый.
Рисуется это вот таким мегаламерским кодом засунутым в онлоад, ничего я скоро исправлюсь.
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 идет на хуй.
Вывод из этой басни такой: надо было учить математику в школе, а потом появляются посты такие как этот и прошлый.
Свежие комментарии