之前是玩过一段时间 processing 的，它就像一个 java 的一个库，很强大的一个库，可以做动画，处理图片，玩 3D 建模 and so on，当然我只是学了一点皮毛，是在学习 python，java 之前。

那今天看到一个新鲜的玩意：P5.js

像写 processing 一样写 javascript 动画

官网：http://p5js.org/

照着这做：

Get started ：http://p5js.org/get-started/

先创建一个 html 文件，接着在此文件中引入 P5.js 库：

1
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.20/p5.js"></script>

然后，创建一个 sketch.js 文件，这样写：

1
2
3
4
5
6
7
function setup() {
}
function draw() {
  ellipse(50, 50, 80, 80);
}

在 html 文件中引用这个 js 文件：

1
<script type="text/javascript" src="sketch.js"></script>

好了，用浏览器打开 html 文件就可以看到用 P5.js 在页面上画了个圆。
具体语法，要看一下这：https://github.com/processing/p5.js/wiki/Processing-transition
额，这个例子太简单了，也不会动啊！！！
好，自己写一个吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var x = 15;
var y = 15;
var r = 30;
var speedX = 2.8;
var speedY = 5;
function setup() {
    createCanvas(400, 300);
}
function draw() {
    background(200);
    fill(30, 144, 255);
    noStroke();
    move(width, height);
    ellipse(x, y, r, r);
}
function move(width, height) {
    x += speedX;
    y += speedY;
    if (x > width - 15) {
        speedX *= -1;
        x = width - 15;
    };
    if (y > height - 15) {
        speedY *= -1;
        y = height - 15;
    };
    if (x < 15) {
        speedX *= -1;
        x = 15;
    };
    if (y < 15) {
        speedY *= -1;
        y = 15;
    };
}