跳到主要内容

JavaScript(React)三角函数可视化

【编程德鲁伊】系列是我的横向编程练习笔记，每期围绕一个主题（数学物理电子图形声音...），用几种程序语言分别实现。战法牧贼同时修，能抗能打能奶能开溜。

编程德鲁伊 - 数学篇 - 三角函数可视化 JavaScript (React) 实现

sine-visualization-reactjs

上一节用MaxMSP做了三角函数（正弦和单位圆）的可视化，长这样：

trig-max-visualization.gif

【编程德鲁伊 - 数学篇】MaxMSP三角函数可视化


这次用JavaScript来实现。


在浏览器里用JavaScript绘制函数曲线图形的方式有很多:

  • 在Canvas或WebGL里直接画
  • d3js
  • p5js
  • pixijs
  • SVG + CSS
  • 还有hin多

当选择强迫症发作时，偶然看到了一个用React + SVG来实现的例子：

React + SVG example

使用SVG用标记或声明的方式来描述正弦函数：

svg

再充分利用React State的更新机制，把沿x轴的参数degree进行绑定和更新：

reactstate

这样当degree变化时，正弦函数也就随着扭动起来了，清晰，漂亮！


我过去的项目很少用到SVG，有的话也只是当位图来用。正好借此机会学习学习，感谢这个例子的作者～

而React，则是我近些年在前端项目里最常用的库了。 但新版本（React 16+）中新出的Hooks等功能也一直还没仔细看，再次正好借此机会学习学习，并用React Hooks重构了上述例子中的React State相关部分。

Hooks官方文档很棒，直接跟着读然后跟着做，重构上文Sinus组件如下:

reacthooks

Hooks用起来简单而强大，但是要留意下性能问题，因为useEffect()在第一次渲染及每次update后，都会执行。 关于这个话题，官方提供了一些tips。

最终效果:

sine-visualization-reactjs 稍微改了改颜色，跟原例子区分一下便于观看。


Talk is cheap. Show me the code!

本例及【编程德鲁伊】系列大部分代码都开源在这里： https://github.com/avantcontra/coding-druid

公众号/B站/小红书/抖音/知乎：实验编程

实验编程社群资源、公开课： https://ghc.h5.xeknow.com/s/hzkMX

实验编程情报中心（会员）： https://ghc.h5.xeknow.com/s/2BCFuJ

Cheers🍻

Contra

最后由 Contra 于 更新