Серия Coding Druid — это мои практические заметки по горизонтальному программированию, каждая часть которых посвящена определенной теме, например математике, физике, электронике, графике, звуку и т. д., и реализована на нескольких языках программирования. .

Coding Druid
Часть: Математика
Глава: Тригонометрические функции
Раздел: Javascript (React)

В предыдущем разделе я визуализировал тригонометрическую функцию (синус и единичный круг) с помощью MaxMSP:

Визуализация тригонометрических функций с помощью MaxMSP — «Coding Druid»

На этот раз я использую javascript для его реализации.

Существуют различные способы рисования графики в javascript в браузере:

  • Непосредственно в Canvas или WebGL
  • d3js
  • p5js
  • пикси
  • SVG + CSS
  • Все больше и больше

Случайно наткнулся на пример React + SVG, и он мне очень понравился.

Функция Sine описана в SVG следующим образом:

А также связывание и обновление значения параметра degree по оси X с использованием механизма обновления React State.

Я думаю, что это красивый и очаровательный способ.

Я редко использовал SVG в своих прошлых проектах. Тогда я узнаю это на этом примере и круто! Спасибо за его автора.

В то время как React уже много лет является моей наиболее часто используемой библиотекой во внешних проектах. Но я новичок в его последних функциях, таких как React Hooks.
Поэтому я изучаю и рефакторинг части примера React State с помощью React Hooks.

Официальный документ Hooks великолепен. Я просто следовал его правилам и реализовал такие функции:

Крючки просты и эффективны, но вам следует позаботиться о производительности. Потому что useEffect() будет запускаться как после первого рендеринга, так и после каждого обновления. Официальные советы здесь.

Окончательный эффект:

Разговоры дешевы. Покажи мне код!

Эта демонстрация и серия Coding Druid находятся в открытом доступе здесь:
https://github.com/avantcontra/coding-druid

Вы можете найти больше ресурсов на моем сайте floatbug.com.
Или вы можете купить мне кофе на моем Патреоне. Ваша поддержка — моя движущая сила!
https://www.patreon.com/avantcontra

Ура~

Контра

Fb/Tw/Ins/Github: @avantcontra
Веб-сайт: floatbug.com