首页 > 教程 > processing学习笔记之简单好玩的图形(转载虎牙老师的)
2017
08-14

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

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

processing学习笔记之简单好玩的图形(转载虎牙老师的) - 第1张  | Processing编程艺术 processing学习笔记之简单好玩的图形(转载虎牙老师的) - 第2张  | Processing编程艺术

哒哒哒嗒!是不是比上次课的要酷炫许多呢,这个不规则的形状是可以不断变化的哦~具体怎么实现,咱们一步步来!
思路:这个图形看作是一个个点连接而成的,而且这些点形成的图形颜色是变化的,坐标也是不断根据鼠标位置来变化的,只是变化的没那么快,会缓慢的跟进鼠标。要实现这个思路我们分以下几个步骤走:
第一步,声明全局变量,咱们用数组来完成,需要声明的全局变量有:
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学习笔记中可以看到



最后编辑:
作者:xiaoxiongmao
什么都不会的小熊猫

processing学习笔记之简单好玩的图形(转载虎牙老师的)》有 4 条评论

yyyuuu的回复 取消回复

你的email不会被公开。