processing学习笔记之简单好玩的图形（转载虎牙老师的）

为了照顾许多0基础的童鞋们，菜鸟养成记系列不会涉及太深的内容，上次课程讲了简单好玩儿的图形，这次课依旧讲解的是又简单好玩儿的图形，只是这次图形会稍微复杂那么一点点点点，但是会酷炫很多~闲言少叙，进入正题，先上个最终效果图，看看这次咱们要完成一个什么样的效果：

哒哒哒嗒！是不是比上次课的要酷炫许多呢，这个不规则的形状是可以不断变化的哦~具体怎么实现，咱们一步步来！
思路：这个图形看作是一个个点连接而成的，而且这些点形成的图形颜色是变化的，坐标也是不断根据鼠标位置来变化的，只是变化的没那么快，会缓慢的跟进鼠标。要实现这个思路我们分以下几个步骤走：
第一步，声明全局变量，咱们用数组来完成，需要声明的全局变量有：
float [] x;    //图形中所有点的x坐标，放入一个数组
float [] y;   //图形中所有点的y坐标，放入一个数组
float startRadius;   //圆形半径
float centerX;   //中心坐标点x
float centerY;    //中心坐标点y
float stepSize;    //每个坐标移动的步长
int number;      //设置一个常数，用来变化角度用
声明全局变量就结束了，接下来进入第二步，在setup中对变量进行赋值和初始化：
void setup() {
size(600, 600);
background(255);
x = new float [100];  //讲数组长度设置为100，意味着数组内可以存放100个x坐标数据
y = new float [100];
startRadius = 50;
stepSize = 2;
centerX = width/2;
centerY = height/2;
number = 10;
float angle = radians(360/number);   //角度变量是从360/number里面取一个随机数，在程序运行开始就已经赋值好给angle变量
for (int i=0; i<number; i++) {         //这一步很重要！！根据求圆形上任意一点位置的坐标公式，运用for循环来遍历x,y坐标数组，将数组内
x = cos(angle*i)*startRadius;   //每一个坐标变量都赋值。
y = sin(angle*i)*startRadius;
}
}
第三步，赋值和初始化工作结束后，下面就让图形呈现出来，并动起来~！（动次打次，动次打次，苍茫的天涯是。。。咳咳，言归正传）
void draw() {
if (mouseX != 0 || mouseY !=0) {       //只要鼠标不在原点，将(mouseX-centerX)*0.01赋值给centerX，centerY同理。这一步就是为了让图形
centerX += (mouseX-centerX)*0.01;  //跟着鼠标，但是又不会太快！
centerY += (mouseY-centerY)*0.01;
}
for (int i = 0; i<number; i++) {
x += random(-stepSize, stepSize);   //遍历所有数组坐标，并在这些坐标数据上加入一个随机值，这个值来源于前面定义并设置的步长。
y += random(-stepSize, stepSize);
}
beginShape();            //开始画图啦！！！！
for (int i = 0; i<number; i++) { stroke(random(255),random(255),0,random(255));   //颜色和通道都给的是随机，让其颜色不断变化
curveVertex(x+centerX,y+centerY);  //在curveVertex函数里面填入图形的x,y坐标，加上centerX和centerY是为了让其保持形状的同时跟着鼠标走
}
endShape(CLOSE);  //画图结束啦！！！！！！
}
大功告成！！！

原文来自虎牙老师，在我们的微信公众号processing学习笔记中可以看到

最后编辑：2017-08-14

作者：xiaoxiongmao

什么都不会的小熊猫

站内专栏