Предисловие
Данный пост — краткий пересказ этого видео на английском.
Если нет времени читать — живой пример тут. В поле factor можно подставлять любые неотрицательные значения. Мои любимые — 51, 99, 106, 134, 150.


Математика никогда не перестает удивлять своей красотой. Данный пост о том, как превратить такую простую операцию, как умножение в нечто удивительное.Теперь ответьте на вопрос — что общего между этим картинками?






Все они созданы при помощи лишь одной операции — умножения (на самом деле, еще взятия остатка). Как же так, ведь они выглядят такими сложными и различными?

Алгоритм же довольно прост — нарисуем по кругу N точек на одинаковом расстоянии друг от друга. Чем больше точек, тем богаче и ярче будет конечный результат. В примерах N = 200. Все их обозначим числами от 0 до N-1. Дальше выберем любое неотрицательное число (сейчас для простоты возьмем натуральное). Пускай это будет 2. Теперь для каждой точки сделаем так — возьмем число, которым мы ее обозначили и умножим на 2. Получится новое число от 0 до 2(N-1). Это число будет обозначать другую точку, с которой мы соединим линией данную. Точка 0 будет соединена сама с собой, точка 1 с точкой 2, точка 2 с 4, 3 с 6 и т.д. Так мы дойдем до точки с номером 100. Умножив 100 на 2 получим 200 — а точки с таким номером-то у нас и нет. Самое логичное, что можно сделать — взять получившееся число по модулю N, т.е. в нашем случае 200, и получить 0. Значит 100 точку соединяем с 0.

В итоге у нас получится такая фигура, еще называемая кардиоидой из-за ее схожести с изображением сердца.



Теперь можно выбирать любые числа от 0 до N (после N фигуры начинают повторяться) и смотреть на результат. Что же делать, если мы выбрали дробное число? Ответ тоже прост — после умножения округлить результат вниз. Вследствие этого при выборе чисел 2.1 и 2.2 фигуры почти не будут отличаться, однако при дальнейшем увеличении (2.3, 2.4, 2.5… 2.9) все больше будут походить на фигуру, полученную при выборе числа 3. Благодаря этому создается эффект анимации, который вы можете понаблюдать в интерактивном примере, выставив factor на 2 (число, на которое мы умножаем) и speed на 0.02 (величина, которая прибавляется к factor каждый кадр).

При выборе factor = 3


Делитесь вашими интересными factor'ами. Спасибо!

Комментарии (20)


  1. SCINER
    03.01.2016 16:28
    +8

    12 лет назад еще сделал это в динамике на VisualBasic6:
    www.dropbox.com/s/rd3ya7dzejp4f76/Sinus.exe?dl=0

    P.S. Тогда я думал, что это мое личное изобретение)


    1. missingdays
      03.01.2016 17:27

      Впечатляет!


    1. Self_Perfection
      04.01.2016 01:27
      +3

      Пффф, я в 2004 году на Delphi это закодил в виде скринсейвера под шиндошс. Но придумал не сам, увидел алгоритм в статье в Журнале Hard'n'Soft от декабря 2002 года. Там весьма развёрнутая статья с десятком алгоритмов рисования подобных изображений. До сих пор номер на полке лежит.

      А потом на волне интереса к Kolibri OS портировал «паутинку» под Kolibri ОС на ассемблере:
      http://board.kolibrios.org/viewtopic.php?p=24018#p24018

      Даже в trunk включили:
      http://websvn.kolibrios.org/filedetails.php?repname=Kolibri+OS&path=%2Fprograms%2Fdemos%2Fweb%2Ftrunk%2Fweb.asm


  1. mayorovp
    03.01.2016 17:12

    А в комплексных числах операция взятия остатка не требуется…


  1. QtRoS
    03.01.2016 17:45
    +1

    Момент с 248 до 250 на 0.005 впечатляет.


    1. QtRoS
      03.01.2016 17:59

      Но он меркнет по сравнению с тем, как с 268 начинают «расти» лепестки. Или даже 301.


    1. missingdays
      03.01.2016 18:00
      +1

      Да, красиво. Кстати, с 48 до 50 то же самое получится :)


  1. Raskaev
    03.01.2016 19:21

    А можно 3D?


    1. xGromMx
      03.01.2016 19:42

      Надо понять закон для Z координаты тогда


  1. Whiteha
    03.01.2016 19:45
    +1

    На глаз оно циклично с не очень большим периодом


    1. missingdays
      03.01.2016 20:08
      +1

      С периодом в число точек, если быть точным.


  1. urticazoku
    03.01.2016 19:48

    Какие-то такие ассоциации:

    factor 730


    1. kekekeks
      03.01.2016 21:11
      +1

  1. kekekeks
    03.01.2016 21:10

    удалено


  1. click0
    03.01.2016 22:10

    Я подобное в Excentro на Маке делал.


  1. Beholder
    03.01.2016 23:26

    Почему Math.floor, а не Math.round?


  1. EuroElessar
    04.01.2016 08:59

    XZZXCFVCDXSZASXDCFVCDVFBFGCXMK,MJNBGHNM,./.,MHBNM,?>,M./ЮБ


  1. gnusy
    04.01.2016 10:08

    270681


  1. yizraor
    04.01.2016 13:43

    автор пишет: «В итоге у нас получится такая фигура, еще называемая кардиоидой из-за ее схожести с изображением сердца.»

    стесняюсь спросить — а есть ли математическое доказательство тому, что получилась именно кардиоида (в приближении), а не какая-то другая (похожая) фигура?

    известный пример схожести линий:
    «цепная линия» (образованная провисающими проводами) похожа на параболу, но не является ею — формула там совсем другая


    1. p53
      05.01.2016 03:29
      +3

      а есть ли математическое доказательство тому, что получилась именно кардиоида (в приближении), а не какая-то другая (похожая) фигура?

      Это вполне может сойти за пример по математике для первокурсника технического вуза.

      Вместо номера точки будем пользоваться её полярной координатой \varphi. Тогда точка \varphi соединяется прямой с точкой 2\varphi. Уравнение такой прямой в декартовых координатах:
      U(x,y,\varphi)=(x-\cos\varphi)(\sin 2\varphi-\sin\varphi)-(y-\sin\varphi)(\cos 2\varphi-\cos\varphi)=0.
      Мы хотим найти огибающую семейства прямых U(x,y,\varphi)=0. Не трудно показать (или прочитать в википедии), что для этого должно выполняться U=\partial U/\partial\varphi=0. Решив эту линейную систему уравнений, получим параметрическое уравнение огибающей: x=\frac13(2\cos\varphi+\cos2\varphi), y=\frac13(2\sin\varphi+\sin2\varphi). Что и требовалось доказать.