processing.js 学习（三）

最新推荐文章于 2025-05-15 09:00:00 发布

WalkingAlien

最新推荐文章于 2025-05-15 09:00:00 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：编程语言文章标签： processing 编程语言语言动画

本文链接：https://blog.youkuaiyun.com/WalkingAlien/article/details/53413918

编程语言专栏收录该内容

13 篇文章

订阅专栏

本文介绍了使用 ProcessingJS 制作动画的基础知识，包括如何创建简单的弹跳球动画，并展示了面向对象编程的应用，使读者能够轻松理解并进行扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://processingjs.org/articles/PomaxGuide.html

通过前边的学习，我们知道了可以写processing，可以写js，也可以混写。。。具体有什么区别呢，我们从实际问题角度出发考虑。

什么是Processing?

Processing语言是一门着重于数据可视化的编程语言。数据是一个宽泛的概念。从在屏幕上画线画圆，到交互动画，它可以用来做很多事。事实上，一个基本的P5程序只几行代码就能做个动画了。

像这样

1   void setup() { size(..., ...); }
2   void draw() {}

下面来个完整的动画
这里写图片描述

hello processing.html

<!DOCTYPE html>
<html>
    <head>
       <title>hello processing</title>
        <meta charset="utf-8">
        <style>
        </style>
    </head>
    <body>

       <script src="processing.js"></script>
       <canvas data-processing-sources="controling.pde"></canvas>

    </body>
</html>

controling.pde

float framerate = 24; //草图帧率

    int ball_x;           // 小球x坐标
   int ball_y;           // 小球y坐标
    int ball_radius = 20; // 小球半径

    void setup() {
      size(200,200);        // 区域
      frameRate(framerate); // 设置帧率
     ball_x = width/2;     // 设置小球x坐标
     ball_y = ball_radius; // 设置小球y坐标
     stroke(#003300);      // 边框颜色
     fill(#0000FF);        // 边框内颜色
   }

   void draw() {
     //计算小球的高度
     float bounce_height = height/2 * abs(sin(PI*frameCount/framerate));
     //左上角（0,0）
     float ball_height = height - (bounce_height+ball_radius);
     // 清空画图区
     background(#FFFFEE);
     // 设置新位置
     ball_y = (int) (ball_height);
     // 画球
     ellipse(ball_x,ball_y,ball_radius,ball_radius);
   }

processing.js
http://processingjs.org/download/ 下载

效果：
这里写图片描述

变量的类型：boolean
bype
char
color
int
long
float
double

更为复杂的：object
string
ArrayList
HashMap （存储{, }对）
XMLElement
基本函数：
size(int, int) 设置画图区域的尺寸
frameRate(int) 帧率
stroke(color)边框色
fill(color) 内部色
abs(number) 计算绝对值
sin(number) 计算三角函数值
background(color) 设置背景色
ellipse(int, int, int, int)画一个圆(位置x，位置y，半径r，半径r）

支持面向对象编程，栗子可以改写为面向对象形式：

 1   Bouncer bouncer;
 2 
 3   void setup() {
 4     size(200,200);
 5     frameRate(24);
 6     stroke(#003300);
 7     fill(#0000FF);
 8     bouncer = new Ball(width/2,20,20);
 9   }
10 
11   void draw() {
12     bouncer.computeNextStep(width, height, frameRate);
13     background(#FFFFEE);
14     bouncer.draw();
15   }
16 
17   interface Bouncer {
18     void computeNextStep(int width, int height, float framerate);
19     void draw();
20   }
21 
22   class Ball implements Bouncer
23   {
24     int x,y,radius;
25     int step = 0;
26 
27     Ball(int x, int y, int r) {
28       this.x = x;
29       this.y = y;
30       this.radius = r;
31     }
32 
33     void computeNextStep(int sketch_width, int sketch_height, float frame_rate) {
34       step++;
35       float sin_value = abs(sin(PI*step/(float)frame_rate));
36       float bounce_height = sketch_height/2 * sin_value;
37       float ball_height = sketch_height - (bounce_height + radius);
38       y = (int) (ball_height);
39     }
40 
41     void draw() {
42       ellipse(x,y,radius,radius);
43     }
44   }

效果不变。但是在这种方式下，我们就能很容易的更改一些东西，比如弹跳对象：球——>方块；
修改controling.pde

 Bouncer bouncer;

    void setup() {
      size(200,200);
      frameRate(24);
      stroke(#003300);
      fill(#0000FF);
      bouncer = new Box(width/2,20,20,20);
    }

   void draw() {
     bouncer.computeNextStep(width, height, frameRate);
     background(#FFFFEE);
     bouncer.draw();
   }

 interface Bouncer {
     void computeNextStep(int width, int height, float framerate);
     void draw();
   }

 class Box implements Bouncer
   {
     int x,y,w,h;
     int step = 0;

     Box(int x, int y, int w,int h) {
       this.x = x;
       this.y = y;
       this.w=w;
       this.h=h;
     }

     void computeNextStep(int sketch_width, int sketch_height, float frame_rate) {
       step++;
       float sin_value = abs(sin(PI/2.0 + (PI*step/(float)frame_rate)));
       float bounce_height = sketch_height/2 * sin_value;
       float ball_height = sketch_height - (bounce_height + h);
       y = (int) (ball_height);
     }

     void draw() {
       rect(x,y,w,h);
     }
   }