Анимационный график зависимости от первого аргумента
при изменении второго аргумента
Виктор Кон, 10-08-2018, kohnvict@yandex.ru
Введение
Во время научной работы, а также в научных публикациях зависимость какой-то величины от другой величины показывается на графике с размеченными осями функции и аргумента. Гораздо сложнее дело обстоит, когда у функции есть два аргумента. В этом случае точность показа не гарантируется и используются разные приемы изображения трехмерного объекта на плоскости. Один из них -- показ аксонометрической проекции трехмерной поверхности, заданной функцией z(x,y). Такая форма дает общее представление, но не может дать конкретную информацию в виде точных чисел, так как все искажено. Второй способ -- показ цветных карт на плоскости (x,y) в которых значения функции показываются цветом. В этом случае точность аргументов присутствует, но функция описывается довольно приближенно, потому что градация цветов на компьютере не столь высокого качества, как требуется.
Во время презентации доклада или в интернете можно использовать третий путь, в котором осью второго аргумента является время. В этом способе разные графики зависимости от первого аргумента при фиксированном значении второго аргумента рассматриваются как кадры кино и показываются последовательно с некоторой задержкой. При этом хорошо можно заметить динамику изменения кривых. В любой момент процесс можно остановить и получить точные данные о каком-либо сечении трехмерного объекта.
Программы такого типа можно написать на любом языке программирования, но для работы в браузере (то есть для показа в интернете) наиболее подходящим является язык javascript на стороне клиента. Такие программы могут работать как онлайн, так и оффлайн, то есть при отсутствии интернета. Я написал как раз такую программу и в данной статье подробно описано как она работает и как самому сделать программу для собственных данных. Посмотреть работу программы в интернете можно по этому адресу [01].
Как программа работает
Программа написана в три файла. Первые два файла являются ее входными данными, а третий файл является общим и содержит весь стандартный код, который не меняется при переходе к новому варианту. Внешний вид программы тоже фиксирован. Это ряд кнопок и график. Кнопка H (последняя), как всегда в моих программах дает краткое описание (подсказку) того, как программа работает. Ниже я напишу то же самое более развернуто.
Программа показывает матрицу чисел, числа представляют собой значения функции. Значения аргументов не записываются. Предполагается, что аргументы изменяются с постоянным шагом по обеим осям и их значения можно представить тремя числами: первым значением, последним значением и числом значений. Эта информация записывается в основной (главный) файл программы, который имеет расширение htm и описывает сам сайт. В примере этот файл имеет название animfig.htm. Матрица чисел записывается в другой файл с названием array.js. Числа записываются в квадратных скобках, через запятую, сначала первая кривая, потом вторая и так далее.
Программа сразу показывает первую кривую и 7 кнопок. Над графиком может быть заголовок и номер кривой. Кнопка F (forward) двигает номер кривой вперед на 1. Кнопка B (back) двигает номер кривой назад на 1. Кнопка U (up) двигает номер кривой вперед на 10. Кнопка D двигает номер кривой назад на 10. Если номер кривой выходит за максимальное значение, то он возвращается в начало на номер 1. В обратном направлении то же самое, то есть нулевой номер заменяется максимальным. Это ручной режим работы, в котором каждую кривую можно внимательно рассмотреть.
Кнопка E (execute) запускает анимацию. В этом режиме кривые сменяют друг друга через определенную паузу. Движение только вперед, то есть с увеличением номера. Анимация сама не заканчивается, после последнего номера идет первый и так далее. Остановить анимацию в любом месте можно по кнопке S (stop). После этого можно снова работать в ручном режиме или запустить анимацию заново из другого места. Кнопка H показывает текст подсказки. Первоначально его не видно, после клика по кнопке он появляется. Следующий клик убирает подсказку и так далее.
Клавиши клавиатуры с теми же буквами выполняют ту же самую работу. Кнопки с экрана не убираются так как они графику не мешают. Всегда можно задвинуть их за край экрана, если экран имеет малую высоту. Вот и все. Программма не очень сложная, но может быть полезной в некоторых случаях.
Как самому сделать такую презентацию
Теперь я расскажу как самим сделать такую программу по образцу уже сделанной программы [01]. Программа состоит из трех файлов. Код главного файла браузер на ноутбуке показывает при нажатии клавиш [Ctrl]+[U]. У себя на компьютере нужно открыть текстовый редактор, лучше всего Notepad2, но еще лучше -- мой редактор vkNotepad [02]. Он также встроен в более общую универсальную программу vkUtility [03]. Достаточно ее скачать и тогда много чего можно будет делать. В моем редакторе можно открыть любой файл, выбрать в меню [File]->[Save As] и спасти файл с новым именем. Затем очистить его содержимое ([Ctrl]+[A] и затем [Ctrl]+[X]). Затем надо скопировать текст окна браузера, показывающего код главного файла (в браузере [Ctrl]+[A] и затем [Ctrl]+[C], а в редакторе [Ctrl]+[V]).
После этого если спасти файл, то вы имеете свой главный файл программы. Но перед тем, как спасти текст файла, его надо отредактировать. Во первых, имя файла должно быть вашим и уникальным. Во-вторых, нужно переписать текст внутри скобок
Следующий этап. В коде главного файла программы в браузере файл array.js дан ссылкой. Кликаем ссылку и видим код (текст) этого файла. Он совсем простой. Это набор чисел и небольшой текст по первого числа и после последнего числа. Вам необходимо заменить числа на ваши числа. Лучше всего значения функции записывать целыми числами в интервале от 0 до 999. Для этого ваши реальные числа можно преобразовать по формуле fn = (f -- fmi)/co, где fmi -- минимальное значение функции f, а co -- коэффициент. Эти два значения всегда можно подобрать так, чтобы новые значения функции вписывались в указанный интервал. Программа рисует реальные значения, которые она вычисляет по формуле f = co*fn + fmi, беря из файла целые значения fn.
Такой прием позволяет сократить размер файла, в котором записаны числа. Если честно, то современные программы об этом не думают и используют огромные файлы. Но это глупость и разгильдяйство. Очень нехитрый прием позволит вам лучше видеть ваши данные и компактнее их записывать. Но это не обязательно. Если есть охота, записывайте любые числа и ставьте co=1, fmi=0. Ошибки не будет.
В коде главного файла animfig.htm, после того как вы его переименуете, нужно поменять значения параметров. Параметры имеют такой смысл: pau -- это время паузы анимации в секундах, co и fmi я уже описал, bw, bh, bt -- это ширина, высота и размер текста кнопок, их менять не обязательно, все уже оптимизировано, но в будущем возможно они будут масштабировать, пока они заданы в пикселах. Далее taw, tah, tt -- ширина, высота и размер текста для окна подсказки по кнопке H. Их тоже менять не обязательно. Далее n1 -- число точек первого аргумента, n2 -- число точек второго аргумента, x1 значение аргумента в первой точке, x2 -- значение аргумента в последней точке, x3 -- значение, которое выставляется против первой длинной риски, x4 -- шаг до следующей длинной риски, n3 -- число коротких рисок между длинными. Далее y1, y2, y3, y4, n4 имеют тот же смысл, но только для оси функции. Эти значения должны быть согласованы с реальными значениями функции с учетом параметров co и fmi.
Вот и все. Как видим, никакого особенного знания интернет технологий такие действия, не требуют. Не беда, что вы не понимаете, что написано в других частях кода. Интернет -- это полностью открытая система и все, что в нем находится, доступно каждому. Сделать информацию недоступной невозможно, максимум, что можно сделать -- это сделать ее трудной для понимания. Так работают почти все автоматические генераторы кода. Они создают код огромных размеров, в котором сложно понять что нужно, а что нет. Но я как раз сделал так, что части, которые нужно редактировать, выделены и вполне понятны.
Если у кого есть вопросы, то пишите мне в почту, адрес указан в заголовке.
Ссылки на интернет
[01] 
образец программы анимационного графика
[02] vkNotepad -- программа редактирования текстов
[03] vkUtility -- универсальная программа, которая делает все.