Processing 案例 | 三角函数之美

引言

伽利略说过，“数学是上帝描写自然的语言”，爱因斯坦也说过，“纯数学让我们发现这些概念和联系这些概念之间的规律，这些概念和规律给了我们理解自然现象的钥匙“。

数学一词在西方源于古希腊语，意思是通过学习获得知识的意思，因此早期的数学涵盖的范围比我们今天讲的数学要广得多，和人类的生活以更接近一些。但是和任何事物一样，数学也在不断的演化，这个发展过程使得数学变得高深起来，渐渐大家头脑里想到的数学只剩下数字、符号、公式和定理了。

就这样数学看上去和生活、和美似乎渐行渐远了，但其实不然。

感谢Jacob Joaquin大佬用P5.js写了SineWaves（如下图），用代码很好的展现了数学之美中的三角函数之美。这也很契合我的一个想法，“代码和文字、音乐、图片、画作都一样，都可以用来表现这个世界的智慧，这个世界的美”。

接下来首先我会为大家介绍一下三角函、随机数几种常见的分布、HSB颜色模式，然后讲解如何用Processing实现SinWaves，之后会介绍我在SinWaves的基础之上实现的SinWavesPlus（如下图）。在最后的拓展部分，我会大概介绍一下三角函数在生活中的应用：用余弦定理进行新闻分类。
  

希望大家能够喜欢！当然心急的同学可以先看看以上两个作品的在线展示和代码：

• Jacob Joaquin的SinWaves
• 我的SinWavesPlus
• 我的github
    

分析

分析SinWaves发现，可以将作品看成由一系列的格子构成，而每一个格子里面有一个图案。其中，每一个图案处处相似，却又都不尽相同。

相似是因为这些图案都是用正弦函数来绘制的，不同是因为函数设定的参数不同，而这些参数都是随机产生的。
  

Processing代码

接下来我们就一起看看如何用Processing来实现两个作品。
  

SineWaves

首先我们来讲解SineWaves。原作者的代码是用P5.js以面向过程的思想写的，而我是用Processing以面向对象的思想写的。并且在保持效果基本不变的情况下，对原代码的某些部分进行了简化，使得代码更加地易懂。
  

确定大概流程

我们要做的其实非常简单。第一步，建立一个栅格系统用来确定每一个波动图案的位置。第二步，设置每一个波动图案的属性：振幅、周期、颜色等。最后，绘制每一个波动图案。

首先创建一个SineWaves.pde，在下面输入如下代码：

GridSystem gs;
void setup(){
   
  size(500, 500);
  //三个参数分别是格子的行数、列数以及边框的宽度。
  gs = new GridSystem(10, 10, 50); 
}

void draw(){
   
  background(16);
  gs.run();
}
class GridSystem{
   }
class Grid{
   }

  

创建栅格系统

我们希望栅格系统如下图，其中黑色部分是border，每一个蓝色的格子是我们每一个波动图形的画布。

那接下来我们就根据上面这个蓝图来定义GridSystem这个类。

class GridSystem{
   
  ArrayList<Grid> grids;
  float gridSize, border;
  
  GridSystem(float row, float col, float _border){
   
    border = _border;
    
    //根据容器的宽度和边框宽度计算每一个格子的大小。
    gridSize = (width - border * 2) / col;
    
    //对每一个格子进行初始化。
    grids = new ArrayList<Grid>();
    for(int i = 0 ; i < row; i++){
   
      for(int j =