В пятницу, 7 августа, состоялось открытие художественного проекта WebWeb, в котором я принимал участие. Не спрашивайте меня, что это все означает, я и сам не понимаю; это такое высокое искусство. Для меня самым интересным разделом был Death: если подвигать курсором влево-вправо, то можно увидеть, как по лошади ползет тень, описывая ее контуры.
В этом посте я расскажу, как сделать еще один плагин к jQuery как создавалась техническая часть этой страницы.
Макет от дизайнера
Дизайнер прислал мне макет, в котором он нарисовал 33 состояния тени.
В принципе, его устраивало, чтобы тень менялась дискретно, то есть можно было просто показывать 33 картинки в зависимости от позиции курсора и не париться. Но меня этот вариант не нравится, так как в нем явно не хватало секса. Поэтому было решено сделать плавное перемещение тени.
Смотрим внимательно на саму тень. По сути, это две пересеченные линии, одна из них — перекладина — простая, как пять копеек, а вторую можно представить как обычную кривую, отрисованную контуром (stroke). Решение этой задачи будет выглядеть следующим образом: создаем кривые, которые описывают каждое состояние тени…
…а затем будем рассчитывать между координатами точек новую линию, в зависимости от позиции курсора.
Важно помнить, что набор точек должен быть одним и тем же (то есть в одной линии не может быть больше или меньше точек, чем в другой). Я делал так: отрисовал первую тень, продублировал путь (path) и передвинул точки в другое положение. И так еще 31 раз.
Хранение кривых внутри JavaScript
Линии отрисовали, теперь нужно придумать, как будем их хранить и использовать в JS. У нас возможны два типа линий: обычная, прямая линия и кривая Безье. Сам контур тени представляет собой массив таких линий. Для удобства и краткости записи создаются две прокси-функции, которые просто будут возвращать объект с координатами:
/**
* Точка
*/
function p(x, y) {
return {x: x, y: y};
}
/**
* Кривая Безье
*/
function bz(cp1x, cp1y, cp2x, cp2y, x, y) {
return {
cp1x: cp1x,
cp1y: cp1y,
cp2x: cp2x,
cp2y: cp2y,
x: x,
y: y
};
}
// пример использования
var line = [p(381, 289), p(427.33, 254), bz(427, 254, 427, 244, 433, 237)];
Отлично, с форматом разобрались. Но есть один нюанс: помимо координат контура нужно хранить и угол наклона линии, чтобы можно было рассчитывать новую, динамическую линию между двумя заданными. Поэтому создаем еще одну прокси-функцию, которая будет создавать объект линии по заданным координатам.
var shadow = {
min: Number.POSITIVE_INFINITY,
max: Number.NEGATIVE_INFINITY,
lines: {},
degs: []
};
/**
* Добавляет линию, описывающую тень
* @param Массив точек
*/
function addLine() {
// преобразуем объект аргументов в настоящий массив
var points = Array.prototype.slice.call(arguments, 0);
/** Первая точка линии */
var first = points[0],
/** Последняя точка линии */
last = points[points.length - 1];
// считаем угол наклона линии
var deg = -Math.atan2(last.y - first.y, last.x - first.x) / Math.PI * 180;
shadow.degs.push(deg);
shadow.lines[deg] = points;
if (deg < shadow.min)
shadow.min = deg;
if (deg > shadow.max)
shadow.max = deg;
}
Как видите, я использую массив углов линий shadow.degs и хэш самих линий shadow.lines, где ключом является угол наклона. Все это нужно для того, чтобы быстро находить две соседние линии. Дополнительно я считаю минимальный и максимальный угол чтобы знать, в каких пределах производить расчеты.
Экспорт данных из фотошопа
На первый взгяд, это самая рутинная и скучная часть работы: все 33 контура тени теперь нужно перенести из фотошопа в JS, причем в том формате, который мы выбрали. Решение «в лоб» — наводить курсор на каждую точку кривой, запомнить координаты и записать их в JS. Потратил час только на то, чтобы таким образом записать 3–4 линии (и те с ошибками). Так дело не пойдет, нужно как-то автоматизировать этот процесс.
Я помню, что в адобовском иллюстраторе есть опция экспорта кривых в SVG, а у фотошопа есть функция экспорта кривых в иллюстратор (File → Export → Paths to Illustrator). Что ж, это уже что-то. Так как иллюстратора у меня нет, экспортированный файл высылаю дизайнеру и прошу его пересохранить в SVG.
Но все равно SVG не самый удобный формат для моей задачи. Во-первых, у его Path Data есть два типа данных — абсолютные и относительные координаты. Например, запись l10,20 означает смещение на 10 пикселей по горизонтали и 20 пикселей по вертикали относительно предыдущей точки, а запись L10,20 уже означает смещение в координату x=10, y=20. Во-вторых, в SVG присутствует короткая запись однотипных инструкций: например, L10,20 L30,40 L0,60 можно записать как L10,20,30,40,0,60 и иллюстратор любит этим пользоваться. В общем, парсинг из SVG далеко не тривиальная задача.
Оказывается, формат .ai вполне себе текстовый. Более того, координаты кривых там записываются в двольно простом формате и это именно то, что мне нужно.
... %Adobe_Photoshop_Path_Begin:<< /defaultFill false >> *u %AI3_Note:<< /operation /xor /defaultFill false >> 1 XR 551.5000 248.5000 m 596.0000 283.5000 L 601.0000 285.5000 595.5000 299.5000 607.0000 303.0000 C 616.0000 309.0000 626.0000 317.5000 634.0000 323.5000 c 642.0000 329.5000 662.5000 339.0000 670.0000 345.5000 c 677.5000 352.0000 690.5000 376.5000 699.0000 384.5000 C 711.0000 398.5000 719.0000 379.5000 y 854.5000 487.0000 l N *U %Adobe_Photoshop_Path_End ...
Пишем простенький парсер, которые преобразует набор координат в наш формат (кому интересно, вот он) и уже через полчаса у меня появился набор всех контуров.
Вспомнить школу
Настало время приступить к программированию самой логики. Алгоритм работы будет следующим: во время движения мышки рассчитываем угол наклона линии, соединяющей курсор и начальную точку (в нашем случае это столб), добавляем к этому углу 180˚ и получаем угол наклона тени. Затем находим два статических контура, между которыми находится полученный угол, строим новый контур и отрисовываем его. Все просто, не так ли? 🙂
Прежде, чем начать, нам нужно вспомнить школьный курс математики и геометрии. У большинства моих преподавателей было типичное совковое мировоззрение: задавая вопрос «зачем мне все это нужно?» я получал ответ вроде «это нужно для поступления в ВУЗ», а о способе применения этих знаний в жизни тактично умалчивали. Если б я знал, что буду заниматься программированием анимации и графики, я бы совсем иначе относился к учебе. Так что если вы еще учитесь — наматывайте на ус и не повторяйте моих ошибок 🙂
Первое, с чем нужно освоится, это координатное пространство. В компьютерной графике оно не такое, как преподают в школе, из-за этого я до сих пор с непривычки не могу вести нормальные расчеты на бумаге:
Как видите, одна и та же линия и ее угол наклона рассчитывается по-разному в декартовой и компьютерной системе координат.
При движении мышки мы знаем ее X и Y координаты, соответственно, можем рассчитать и угол наклона линии, соединяющей курсор и начальную точку, через арктангенс. Затем просто переводим этот угол в другую систему координат с помощью поворота (не претендую на изящность решения, так как всю геометрию и алгебру забыл):
// считаем угол наклона линии от курсора до начальной точки var cursor_deg = Math.atan2(y, x) + Math.PI / 4 * 3; // считаем угол линии контура тени var line_deg = 315 - cursor_deg / Math.PI * 180;
Следует помнить, что все вычисления с углами через Math.xxx функции должны вестись в радианах, а не углах.
Итак, нужный угол мы получили, теперь осталось на основе него построить контур тени. Как указано выше, алгоритм следующий: находим два статических контура, между которыми располагается искомый контур, и считаем новый. Расчет ведется следующим образом: берется отрезок, соединяющий две одинаковые точки, и его длина умножается на некий коэффициент. Этот коэффициент рассчитывается исходя из близости искомого контура к одному из статических. Например, если искомый контур находится ровно посередине, то коэффициент будет 0.5, если ближе к первому, то, например 0.2 и так делее. На практике все довольно просто:
/**
* Высчитывает параметры контура для указанного угла
* @param {Number} deg
* @return {Array}
*/
function calculateLine(deg) {
// угол должен быть не меньше минимального и не больше максимального
deg = Math.min(shadow.max, Math.max(shadow.min, deg));
var result = [], d1, d2, coeff;
for (var i = 1; i < shadow.degs.length; i++) {
d1 = shadow.degs[i - 1];
d2 = shadow.degs[i];
if (deg >= d1 && deg <= d2) {
// нашли нужный диапазон, считаем коэффициент
coeff = 1 - (deg - d1) / (d2 - d1);
break;
}
}
if (coeff !== null) {
var l1 = shadow.lines[d1],
l2 = shadow.lines[d2];
// считаем координаты нового контура
for (var j = 0; j < l1.length; j++) {
var p1 = l1[j],
p2 = l2[j],
point = {};
for (var p in p1) if (p1.hasOwnProperty(p)) {
point[p] = p2[p] + (p1[p] - p2[p]) * coeff;
}
result.push(point);
}
}
return result;
}
Начинаем рисовать
Основные элементы логики описаны, осталось собрать их вместе. Для рисования я буду использовать Canvas, для IE, соответственно, VML с помощью прослойки excanvas. Пишем промежуточный класс CanvasAdapter, который будет рисовать графику по выбранному ранее формату записи контуров, пишем вспомогательные функции, отслеживающие перемещение курсора и изменения размера экрана (чтобы не тратить лишний раз ресурсы на расчет координат начальной точки контуров) и проверяем:
Вполне неплохо. Обращаем внимание на то, что контур тени — так как это обычная кривая — неестественно смотрится на ягодицах лошади:
Нужно отрезать выступающий кусок контура. Для решения этой задачи на потребуется создать конструкцию из трех слоев. Первый слой — рисуем прямую линию от начала и до конца тени, как будто лошади вообще нет и у нас голый пол. Второй слой — сама лошадь в PNG, она будет скрывать ту часть прямой тени, которая находится под лошадью. И, наконец, третий слой — полноценный контур тени, на который наложена маска. То есть получается два canvas-элемента, между которыми располагается картинка.
Помним, что у нас есть замечательный конвертер, который может из ai-формата сделать наш внутренний формат, поэтому в фотошопе быстренько рисуем маску и экспортируем ее в JS. Особая точность маске не нужна, у меня она получилась вот такой:
Собираем все вместе, смотрим:
Осталось совсем немного: отрезать верхушку тени, чтобы она смотрелась естественно. Можно воспользоваться методом canvas.clearRect(), однако в IE, из-за ограниченной поддержки excanvas, это не сработает. Поэтому размещаем сверху <div> с белым фоном, который будет скрывать ненужную часть. Просто и эффективно.
Рисуем перекладину
Последняя часть марлезонского балета — нарисовать перекладину. Она представляет из себя обычный прямоугольник, который должен правильно искажаться в зависимости от рассчитанного угла наклона тени. Решаем задачу следующим образом: находим пересечение текущего контура тени (достаточно прямой линии, кривые Безье не нужны) и горизонтальной линии перекладины, искажаем текущее координатное пространство матричным преобразованием и рисуем прямоугольник:
var intersection = lineIntersection(0, line_y, 1000, line_y, last_point.x, last_point.y, first_point.x, first_point.y); canvas.transform(1, 0, (line_deg - 90) / 50, 1, intersection.x - 125, intersection.y); canvas.fillRect(0, 0, 250, 10);
Вот и все. Делаем окончательный тюнинг, чтобы все работало гладко и смотрим на окончательный результат. Осталось добавить, что excanvas не поддерживает и маски, поэтому тень в IE смотрится не очень красиво, но для проекта это не критично. Интересующиеся могут исследовать исходный код страницы, чтобы увидеть все детали и жуткий баг Оперы, связанный с использованием масок в canvas.