Processing 高级变化控制

 时间:2026-02-14 18:05:20

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 高级变化控制

  • Processing 中使用函数来定义图形
  • Animate如何让图形元件只播放一次
  • Axure中插入图片
  • PR怎么实现盒形划像的视频过渡效果
  • Adobe XD如何打开最近文件#校园分享#
  • 热门搜索
    一年级小学生手抄报 安全法制手抄报 感恩父母手抄报大图 数学园地手抄报 我爱汉字手抄报图片 手抄报装饰图案 安全与健康手抄报内容 四年级手抄报图片大全 理想的手抄报 读书手抄报的资料