Processing 高级变化控制

2025-10-23 05:57:33

1、正弦和余弦函数相信大家并不陌生,函数图像如图所示,我们可以将它添加到 Processing 程序中,来控制物体按照函数的规律移动

Processing 高级变化控制

2、利用函数值来改变物体的颜色

输入代码:

float angle = 0.0;

void draw() {

float sinval = sin(angle);

println(sinval);

float gray = map(sinval, -1, 1, 0, 255);

background(gray);

angle += 0.1;

}

这里实现了物体背景颜色,从白色到黑色的一个过度,是通过映射函数,将函数值映射到 0 - 255,然后将映射的数值赋给物体的背景色

Processing 高级变化控制

3、类似正弦和余弦的图像效果进行运动

输入代码:

float angle = 0.0;

float offset = 60;

float scalar = 40;

float speed = 0.05;

void setup() {

size(240, 120);

smooth();

}

void draw() {

background(0);

float y1 = offset + sin(angle) * scalar;

float y2 = offset + sin(angle + 0.4) * scalar;

float y3 = offset + sin(angle + 0.8) * scalar;

ellipse( 80, y1, 40, 40);

ellipse(120, y2, 40, 40);

ellipse(160, y3, 40, 40);

angle += speed;

}

通过计算函数值,将函数值给到物体的 Y 轴位置,实现移动

Processing 高级变化控制

4、利用余弦和正弦函数控制物体做圆周运动

输入代码:

float angle = 0.0;

float offset = 60;

float scalar = 30;

float speed = 0.05;

void setup() {

size(120, 120);

smooth();

}

void draw() {

float x = offset + cos(angle) * scalar;

float y = offset + sin(angle) * scalar;

ellipse( x, y, 40, 40);

angle += speed;

}

程序中将余弦和正弦的值分别赋值给物体的 x y 坐标,实现圆周运动

Processing 高级变化控制

5、利用正弦和余弦函数来绘制螺旋曲线

输入代码:

float angle = 0.0;

float offset = 60;

float scalar = 2;

float speed = 0.05;

void setup() {

size(120, 120);

fill(0);

smooth();

}

void draw() {

float x = offset + cos(angle) * scalar;

float y = offset + sin(angle) * scalar;

ellipse( x, y, 2, 2);

angle += speed;

scalar += speed;

}

例程中主要是修改了物体本身的尺寸,使线条变细,这样就可以制作出螺旋线的效果。

Processing 高级变化控制

6、translate( ) 函数的应用

输入代码:

void setup() {

size(120, 120);

}

void draw() {

pushMatrix();

translate(mouseX, mouseY);

rect(0, 0, 30, 30);

popMatrix();

translate(35, 10);

rect(0, 0, 15, 15);

}

代码的效果是在鼠标的位置创建一个正方形,并且这个创建的正方形会跟随鼠标的位置移动

Processing 高级变化控制

7、rotate() 坐标旋转函数的应用

输入代码:

float angle = 0.0;

void setup() {

size(120, 120);

smooth();

}

void draw() {

rotate(angle);

translate(mouseX, mouseY);

rect(-15, -15, 30, 30);

angle += 0.1;

}

代码的效果是在鼠标的位置会产生一个正方形,这个正方形会被循环绘制,并且每次绘制都会有角度的改变。

Processing 高级变化控制

8、scale( ) 函数的使用方法

输入代码:

float angle = 0.0;

void setup() {

size(120, 120);

smooth();

}

void draw() {

translate(mouseX, mouseY);

float scalar = sin(angle) + 2;

scale(scalar);

strokeWeight(1.0 / scalar);

rect(-15, -15, 30, 30);

angle += 0.1;

}

scale( ) 函数的作用是延伸坐标,程序中奖坐标的延伸值给到物体的宽度,程序效果是物体类似一个呼吸似的变化。

Processing 高级变化控制

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢