若干年前我关注一个公众号“算法艺术实验室AALab”,当时关注的原因大概就是因为它推送的东西都特别好看，大多都是一些计算机艺术视觉效果。（PS：这绝对不是广告植入）就慢慢跟着推送的project自己实战。为啥会分享这个工具，是因为之前在刷微博看到威斯康星大学麦迪逊分校的高松博士@高松-giser在展示一个可视化项目的时候用到了它，画了一张带有地理标签的Twitter数据时间分布图。

咳咳，到正题了。这次要分享的是一种图形设计语言，当然还会有一些学习资源以及实例（我也是边自学边分享，说错了可要轻轻拍砖）。

Prcessing

标题就是这次的主角(为了表明自己是老司机可以简称P5)。Processing是一种具有革命前瞻性的新兴计算机语言，它的概念是在电子艺术的环境下介绍程序语言，并将电子艺术的概念介绍给程序设计师。（默默满足了想做技术宅的艺术家的虚荣心，反正就是酷炫！）它是 Java 语言的延伸，并支持许多现有的 Java 语言架构，不过在语法 (syntax) 上简易许多，并具有许多贴心及人性化的设计。Processing 可以在 Windows、MAC OS X、MAC OS 9 、Linux 等操作系统上使用。目前最新版本为Processing 3。以 Processing 完成的作品可在个人本机端作用，或以Java Applets 的模式外输至网络上发布。

Processing的下载地址

（建议下载最新版）https://processing.org/

学习网站

1.这是一个processing的成果和code的共享网站，算是一个社区吧，有很多方案在里面。
https://www.openprcessing.org/

2.Daniel Shiffman 的英文教程，内容详细易懂。
https://hello.processing.org/editor/

3.其实强烈推荐大家主要看官网和一些书籍，最有帮助。另外会java的童鞋会更容易上手哦～

4.（ios小福利）苹果系统的小伙伴可以在应用商店里搜到processing的ios版，直接coding，直接run。有木有6的飞起～

小实例

主要过程是鼠标点击面板，依次出现三个词语“I AM D_Double_H”。

简单操作

我这里说两个例子（这次主要介绍静态图），大家可以跟着玩玩～

先介绍几个知识点：

画布   size（x,y）
点      point(x,y);
直线 line(x1,y1,x2,y2);
三角形     triangle(x1,y1,x2,y2,x3,y3);
四边形 quad(x1,y1,x2,y2,x3,y3,x4,y4);
矩形   rect(x,y,width,height);
椭圆 ellipse(x,y,width,height);
填充     fill(1,2,3)
描边    stroke(1,2,3)
描边厚度   strokeWright（x）

图形绘制

先从简单的画点画线开始，下面这个图就是我们将要完成的工作。在一个圆的周围均匀分布多个点，并把它们都用线连起来。

1、算各点的x、y坐标。

假设圆心在坐标中心点的话。每个点的（x,y）和圆心连线与x轴正方向的夹角是angle，那么,x=cos(angle)*radius, y=sin(angle)*radius。而夹角angle取决于有多少个点。假设我们要画10个点,半径是100：

int numPoints = 12;
float radius = 100;
float angle = TWO_PI / numPoints;
for (int i = 0; i < numPoints; i++) {
     float x = cos( angle * i ) * radius;
     float y = sin( angle * i ) * radius;
     points<i> = new PVector( x, y );
}

在上面的循环里，我们从x轴，也就是角度0度开始，取到各个点的夹角angle*i。然后计算出(x,y)的坐标，存放在一个PVector的数组中。这步计算是放在setup()函数中的。

一个Processing的程序通常有两个必要的函数：setup()和draw()。 setup()在程序启动的时候被运行一次，所以通常用来设置绘制中需要的变量。而draw()函数被不停的被运行来绘制图形，就好像电视屏幕不断地在刷新一样。

2、绘制图形

现在我们有了所有点的坐标，下面就是要在draw()函数中把这些点之间的连线画出来。Processing的画线函数是line(x1,y1,x2,y2)。前两个参数是一个点的坐标，后两个参数是另一个点的坐标。因为我们要画所有点两两之间的线条，所以我们需要两个嵌套在一起的循环：

for (int i = 0; i < numPoints; i++) {
     for (int j = 0; j < numPoints; j++) {
          if ( j != i ) {
               line( points<i>.x, points<i>.y, points[j].x, points[j].y );
          }
     }
}

3、改变程序中的numPoints的值就可以绘制不同的形状。

数据可视化图

以高松博士@高松-giser的project为启发介绍一个做柱状图的。

柱状图是由一系列的长方形组成的，所以柱状图的画法要抓住两个点：一个是坐标系大小（就是你的画布大小），画布的大小要保证最终各柱形能够很好的显示。；另一个是长方形的画法（前面知识点已经给出了）。当然也可以对画布的背景颜色、柱体的背景颜色进行改变，这里不详细介绍。
只需要加写循环，加数字就好了。

void setup()
{
     size(200,200);
     int[] numbers = { 22,56,67,20,34,33,45,56,67,78,23};
     for(int i=0;i<numbers.length;i++){
         rect(i*10, 200, 10, -numbers[i]);
     }
}

code中的10代表每列的宽度。

这个就分享到这里了，可以当成分享、也可以当成教程、也可以当成学习笔记。也就是提供一种可视化的方法给到大家～欧了

Dangh's Blog

【P5自学笔记】之入门篇（1）