Что нужно изучить, чтобы сделать подобное на JS?

Question

[Олег Петров]

Впечатлила парочка вещей:
https://codepen.io/shubniggurath/pen/OBXeMJ
https://codepen.io/shubniggurath/pen/ZmErQQ

1. Насколько просто это сделать?
2. Какие библиотеки необходимо изучить, если не знаешь Javascript, чтобы делать такие вещи?
3. Как я понимаю подобные вещи можно строить например по данным из своей БД и это будет доступно на обычной странице браузера с ноутбука и телефона?(Например космос с телефона у меня не прогрузился, а вот рисующийся график вполне ок)

Answer 1

[profesor08]

Для первого тебе надо знать что такое синус и уметь рисовать что-то на canvas.
Для второго тебе надо знать glsl шейдеры. Если их знаешь, с остальным проблем не будет.

Comments

[Олег Петров]

Как я понял, если график, будет по моим данным из БД, то синус знать не обязательно, он будет рисовать просто точки из готовых данных?

Answer 2

[Анатолий Медведев]

1. Ну там нет ничего очень сложного если знаешь математику и Javascript и API которые дает ему браузер
2. Нужно знать Javascript - без этого никак
3. Да

Comments

[Олег Петров]

А вот такой график и дашбоард с переключалкой наверху?
1. https://codepen.io/smeilz/pen/JmxRpP
2. https://codepen.io/smeilz/pen/JmxboG

[Анатолий Медведев]

Олег Петров, в целом все тоже самое, разве что математики хватит и уровня 7 класса.

Answer 3

[Alams Stoyne]

Для построения графиков есть готовые решения.

Но для подобный вещей нужно изучить:
Математику, Геометрию и JavaScript (для подобного рисования используется элемент canvas)

Comments

[Олег Петров]

Я правильно понимаю, что если у меня есть база, онлайн заполняемая данными, то данное рисование можно запустить онлайн по моим данным и без перезагрузки странички?

[Alams Stoyne]

15 JavaScript-библиотек для построения диаграмм и ...

[Олег Петров]

Alams Stoyne, Да я видел это, из всего с анимацией понравился только Chartlist.js Остальное некрасивое/без анимации/стандартное/уже не существует

Answer 4

[Александр]

Ну первое это обычный Canvas Drawing, второе это WebGL.
Для того чтобы первый пример освоить тут еще мозги нужны, а во втором обычная копипаста - ничего сложного.
Вообше Canvas уже лет десять как такое умеет - я на первом Flotr делал калькулятор(лет 7 назад), который строил графики по введенной функции. Можно что угодно сделать, если мозгов хватает чтобы понять что как работает.

Comments

[Олег Петров]

Но к сожалению на айфоне у меня второе не запустилось, так что от второго решил отказаться.

[Олег Петров]

Вопрос много ли это расходует трафика, и что будет если у людей медленный инет?

[Евгений Ромашкан]

Олег Петров, Столько трафика, сколько весит ваш JS скрипт

[Олег Петров]

Евгений Ромашкан, Спасибо понял, но все же я решил избегать всяких 3d, так не на каждом телефоне это включится, а значит не имеет пока смысла.

[Евгений Ромашкан]

Олег Петров, Практически все современные браузеры кроме opera mini поддерживают webGL https://caniuse.com/#search=webgl