Давным-давно, когда компьютеры были уже не такими большими, но тактовые частоты всё ещё измерялись единицами мегагерц, мой пытливый ум случайно
изобрёл некий весьма любопытный эффект. Взгляните на картинку и представьте, что вся эта совокупность точек вертится самым невероятным образом.
Конечно, для современных видеокарт такая задача является примитивной, однако в те времена на 3.5 мегагерцовом «Cпектруме» о подобных мощностях можно было лишь помечтать. Так что забудьте о графических процессорах, матрицах вращения и нереально ресурсоёмких вычислениях и попробуйте хотя бы примерно прикинуть, каким образом можно реализовать вот такую красивость.
Любопытно? Тогда добро пожаловать под кат!
Для тех, кто любит скрупулёзно вникать в суть вопроса, я приготовил более чем детальное описание (со слайдами и исходниками на js + html5 canvas). В данной же статье я передам исключительно базовую суть алгоритма, вся прелесть которого заключается в его простоте.
Для облегчения понимания предлагаю привязаться к чему-то конкретному, например к окружности, состоящей из 100 точек:
Координаты каждой точки занесены в массивы X[100] и Y[100]:
Представим, что у нас есть функция drawPoints(), которая будет отрисовывать на экране точки из этих самых массивов (в рамках данной статьи я не буду приводить её реализацию, дабы не отвлекаться от темы).
Для достижения полнейшего дзена не хватает лишь одного: вопроса «А что будет, если… ?». Вот я и решил тогда поэкспериментировать: что будет, если на каждом шаге отрисовки двигать значения в одном из массиве по принципу X[i+1] = X[i] (и, соответственно, X[0] = X[_last]). Функцию, которая будет осуществлять такой сдвиг обзовём shiftX(). И, конечно же, устроимвечный кайф бесконечный цикл:
В результате мы и получим ту самую иллюзию вращения. Так, к примеру, через 5 кадров картинка будет уже вот такой:
Вот, собственно, и всё. Дальше уже дело техники:можно нужно создать больше «колец», поизвращаться с формулами расчёта точек и с их количеством, ну и всё такое прочее.
Долгое время я держал этот алгоритм в себе и дул щёки от осознания того, что придумал его сам. Теперь же решил поделиться им с вами и буду очень рад, если для кого-то эта тема окажется полезной. Ну а если кто-нибудь поделится ещё и собственными формулами красивых графиков, я вообще буду безмерно благодарен.
Спасибо за внимание!
P.S: Спустя некоторое время я узнал о существовании циклических массивов, что позволило избавиться от ненужного постоянного перемещения данных.
P.P.S: Практически не имеет значения, какую координату «двигать» – X или Y, проверено на собственном опыте.
P.P.P.S: Характерной особенностью данного эффекта является то, что направление вращения невозможно определить из-за отсутствия глубины. Особо просветлённые умеют «вращать» графики в том направлении, в каком им заблагорассудится.
изобрёл некий весьма любопытный эффект. Взгляните на картинку и представьте, что вся эта совокупность точек вертится самым невероятным образом.
Конечно, для современных видеокарт такая задача является примитивной, однако в те времена на 3.5 мегагерцовом «Cпектруме» о подобных мощностях можно было лишь помечтать. Так что забудьте о графических процессорах, матрицах вращения и нереально ресурсоёмких вычислениях и попробуйте хотя бы примерно прикинуть, каким образом можно реализовать вот такую красивость.
Любопытно? Тогда добро пожаловать под кат!
Интро
Для тех, кто любит скрупулёзно вникать в суть вопроса, я приготовил более чем детальное описание (со слайдами и исходниками на js + html5 canvas). В данной же статье я передам исключительно базовую суть алгоритма, вся прелесть которого заключается в его простоте.
Он сказал «поехали» и запил водой
Для облегчения понимания предлагаю привязаться к чему-то конкретному, например к окружности, состоящей из 100 точек:
Координаты каждой точки занесены в массивы X[100] и Y[100]:
X[i] = Xo + R*cos(α);
Y[i] = Yo + R*sin(α);Представим, что у нас есть функция drawPoints(), которая будет отрисовывать на экране точки из этих самых массивов (в рамках данной статьи я не буду приводить её реализацию, дабы не отвлекаться от темы).
Всё гениальное – просто
Для достижения полнейшего дзена не хватает лишь одного: вопроса «А что будет, если… ?». Вот я и решил тогда поэкспериментировать: что будет, если на каждом шаге отрисовки двигать значения в одном из массиве по принципу X[i+1] = X[i] (и, соответственно, X[0] = X[_last]). Функцию, которая будет осуществлять такой сдвиг обзовём shiftX(). И, конечно же, устроим
while (true)
{
shiftX();
drawPoints();
}В результате мы и получим ту самую иллюзию вращения. Так, к примеру, через 5 кадров картинка будет уже вот такой:
Вот, собственно, и всё. Дальше уже дело техники:
Эпилог
Долгое время я держал этот алгоритм в себе и дул щёки от осознания того, что придумал его сам. Теперь же решил поделиться им с вами и буду очень рад, если для кого-то эта тема окажется полезной. Ну а если кто-нибудь поделится ещё и собственными формулами красивых графиков, я вообще буду безмерно благодарен.
Спасибо за внимание!
P.S: Спустя некоторое время я узнал о существовании циклических массивов, что позволило избавиться от ненужного постоянного перемещения данных.
P.P.S: Практически не имеет значения, какую координату «двигать» – X или Y, проверено на собственном опыте.
P.P.P.S: Характерной особенностью данного эффекта является то, что направление вращения невозможно определить из-за отсутствия глубины. Особо просветлённые умеют «вращать» графики в том направлении, в каком им заблагорассудится.
