原帖地址:Day 1 – Connecting Points, Part 1 via Vormplus
第一天,我们先从简单的点和线开始,熟悉一下如何通过写程序来计算点线的位置,并使用循环嵌套来绘制多个点线。下图就是我们要绘制的图。在一个圆周上均匀分布多个点,并把他们用线段连起来。同时,这个程序应该具有可拓展性。通过简单地改变参数,就可以画任意多个点。

计算图形

首先,如何计算直角坐标系中点的x,y坐标。如果我们的圆心在中心点的话。每个点(x,y)和圆心连线与x轴正方向的夹角是angle,那么,x=cos(angle)*radius, y=sin(angle)*radius。而夹角angle取决于有多少个点。假设我们要画12个点:

int numPoints = 12;
float radius = 150;
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 );
}

在Processing中cos()和sin()函数的参数是弧度。所以我们这里用Processing系统定义的常数TWO_PI来表示360度。在上面的循环里,我们从x轴,也就是角度0度开始,取到各个点的夹角angle*i。然后计算出(x,y)的坐标,存放在一个PVector的数组中。这步计算是放在setup()函数中的。一个Processing的程序通常有两个必要的函数:setup()和draw()。 setup()在程序启动的时候被运行一次,所以通常用来设置绘制中需要的变量。而draw()函数被不停的被运行来绘制图形,就好像电视屏幕不断地在刷新一样。

绘制图形

现在我们有了所有点的坐标,下面就是要在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 );
          }
     }
}

这里有一点是,当i和j一样的时候,他们就是同一个点,所以不必要画线。

结果

改变程序中numPoints的值,就能画出不同的形状。

下载Processing代码:

Sketch for Processing Month, Day 1

不知道这个例子是简单还是复杂了?大家觉得怎么样呢?请给我们留言。谢谢!

© 2011, 视物 | 致知. All rights reserved.

Related Posts:

  1. 这个例子很简单,解释的也很清楚,不知道这个是不是最基础的?是否可以举一反三呢?话说Processing刚出现的时候我也学习过,不过当我看到需要自己编程的时候,望着那些陌生的代码,我肝颤了,放弃鸟。。。

  2. 突然想到了一个主意,楼主是否可以将一些原来网站介绍过的或者成品的信息可视化图作为实例进行讲解,如果做成介绍的例子那样,一步一步来,这当中也就包含了很多基础的学习,同时我们也能看到自己的成果,先是依葫芦画瓢,然后自我进行总结,举一反三,这个是我想到的:)

    • 严重同意啊!!!在我翻译了两篇别人的教程之后,也觉得没啥用处。。。不过既然都翻译了,还是发一下吧。哈哈。

      我们其实认真的考虑了这个问题,怎么才能对大家真正有用。最后决定做两方面的工作。首先是自己动手写和我们真正相关的processing可视化。由于我们是做数据可视化的,所以打算从最基本的图表开始。比如,怎么用processing画折线图,饼图,柱状图,怎么让他们可以互动,等等。这个需要时间,可能比较慢,但是应该比翻译些不相关的有意义。

      另一方面是对好的processing案例的源代码进行分析讨论。这个,我们还没找到有意思的案例,希望大家踊跃推荐。有什么程序你不太看明白的,大家一起讨论一下吧。我们都是程序猿,分析代码应该木有问题,哈哈。

      谢谢大家关注视物致知

  3. 基本能看懂噢,只在学校考过C语言3级的童鞋飘过。
    要自己写就抓瞎了
    慢慢来慢慢拿~

  4. @spike 关于processing一些案例的话,我觉得可以参考processing的官方论坛里的exhibition板块(https://forum.processing.org/exhibition),有很多很赞的demo的。在processing的wiki页面(http://wiki.processing.org/w/Main_Page),也有一些不错的Code Snippets。

  5. for (int i = 0; i < numPoints; i++)

    这个是不是应该是for (int i = 0; i < numPoints; i++) ????

    我真的是初学。。。JAVA都还没看过,所以不知道错在哪里。

  6. 楼主大人!!!我是学信息设计的,现在在学习processing的数据可视化,这是我QQ号361660484希望能和你联系,http://weibo.com/u/1865607894这是我的微薄。谢谢啦!!