例子效果
思路
首先看到,示例动图由五个静止的长方形和四个旋转的正方形组成。
其次观察到这幅动图很有层次感,每个正方体压在前一个长方形,并被后面的长方形压住,所以在绘制图形是要注意层次。
最后就是正方形的旋转方式,是绕着中心旋转。
使用的方法
frameRate();frameRate
fill();fill
rect();rect
translate();translate
rotate();rotate
resetMatrix();resetMatrix
millis();millis
sin();sin
实验代码
function setup() {
createCanvas(500, 400);
frameRate(30);
}
function draw() {
background(220);
//11111111111
noStroke();
fill('#682708');
rect(0,0,100,400);
var x1=0
x1+=PI/180