Серия 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