Чудеса тригонометрии с использованием canvas

Давно хотел начать изучение HTML5 canvas, и наконец решительно за него взялся. Первое что я решил попробовать это отображение различных фигур с помощью стандартных линий в «псевдо 3D». Когда-то давно я подсмотрел очень интересный способ в плагине к winamp'у и решил реализовать его самостоятельно. В 2002 году я это сделал на C++, ну а теперь пришло время для переноса этого чуда на HTML и JavaScript.

Я решил сразу использовать оболочку jCanvasScript для более простого использования функций связанных с Canvas, и explorercanvas для поддержки результата в IE8.

Сюрпризы начались практически с самого начала. Я хотел, чтобы холст был растянут на весь экран (точнее на все окно браузера), но т.к. размеры canvas задаются только в пикселях пришлось хитрить уже начиная со вставки тега canvas. Строго говоря размеры в процентах задать можно, но тогда изображение внутри будет растянуто. Вот что пришлось сделать примерно так:

$(window).load(function(){
	$("<canvas></canvas>").attr({
		'width': $('body').width(),
		'height': $('body').height(),
		'id': idCanvas
	}).appendTo("body");
});

Начал я со спирали, которая вращается в разных плоскостях. Т.к. я это делал ранее на C++, то я взял «заготовки» и перевел их логику на JavaScript. Для того чтобы отобразить график какой-либо функции необходимо ввести функцию которая вычисляет координаты X и Y каждой точки. Чтобы отобразить вращение нужна функция которая с каждым кадром меняет переменные от которых зависят углы наклона в плоскостях.

Код инициализации:

var settings = {
	n : 500, // num of points
	tx: 0, ty: 0, tz: 0,
	x1: 0, y1: 0, z1: 0,
	dtx: 1, dty: 1, dtz: 1,
	dx: 2, dy: 2, dz: 2,
	clCol: 9, dir: 1
}

Код, выполняемый от кадра к кадру:

tx += 0.01*dtx;
ty += 0.01*dty;
tz += 0.01*dtz;

Код, выполняемый в каждом кадре:

x1 = cos(tx+dx*i*PI)*i;
y1 = sin(ty-dy*i*PI)*i;
z1 = sin(tz-dz*i*PI)*i;
x = x1/(2+z1/2);
y = y1/(2+z1/2);

Переменная i изменяется от 0 до n. Переменные x и y изменятся от 0 до 1 — это удобно для перевода в координаты экрана в зависимости от его ширины и высоты.

Написав один HTML-файл со спиралью, я решил поэкспериментировать с другими фигурами, а т.к. плодить по одному файлу под каждую фигуру не удобно я создал HTML-файл со встроенным редактором кусков кода (Инициализации, Кадра, Точки и перемешивание переменных) Последнее иногда позволяет изобразить такие причудливые фигуры, которые сам не догадался сделать. Куски кода вставляются с помощью eval и с расширенной областью видимости, что позволяет использовать тригонометрические функции без написания названия объекта Math.

Ну а когда был создан редактор конечно возникла потребность сохранять и загружать сделанное. Посмотреть в действии можно тут. Думаю это будет полезно для изучения поведения тригонометрических функций.

Для подсветки кода использован CodeMirror

Автор: Pavelblog