[课后作业]基于P5.JS的作品临摹和扩展

[课后作业]基于P5.JS的作品临摹和扩展

我选取的例子：

这个例子可以看做黑白两色的方块轮流变大并盖住另一个颜色的方块，但是从编程的角度来看，把这个图看做黑色方块先变大再变小更简单。而且方块是从上到下依次变化，可以使用正余弦函数来解决这个问题。

临摹作品：

代码：

function setup() 
{  
createCanvas(500, 500);
} 

function draw() 
{  
background(255,255,255);  
var x = millis()/500;   //获取时间变量
var i = 20*sin(x);  
var a = 20*sin(x+1);  
var b = 20*sin(x+1.5);  
var c = 20*sin(x+2);  
var d = 20*sin(x+2.5);  //以上变量用来控制方块变化的顺序
quad(0-i,0-i,100+i,0-i,100+i,100+i,0-i,100+i);  
quad(200-a,0-a,300+a,0-a,300+a,100+a,200-a,100+a);  
quad(0-a,200-a,100+a,200-a,100+a,300+a,0-a,300+a);  
quad(100-a,100-a,200+a,100-a,200+a,200+a,100-a,200+a);  
quad(200-b,200-b,300+b,200-b,300+b,300+b,200-b,300+b);  
quad(400-b,0-b,500+b,0-b,500+b,100+b,400-b,100+b);  
quad(0-b,400-b,100+b,400-b,100+b,500+b,0-b,500+b);  
quad(300-b,100-b,400+b,100-b,400+b,200+b,300-b,200+b);  
quad(100-b,300-b,200+b,300-b,200+b,400+b,100-b,400+b);  
quad(400-c,200-c,500+c,200-c,500+c,300+c,400-c,300+c);  
quad(200-c,400-c,300+c,400-c,300+c,500+c,200-c,500+c);  
quad(300-c,300-c,400+c,300-c,400+c,400+c,300-c,400+c);  
quad(400-d,400-d,500+d,400-d,500+d,500+d,400-d,500+d);  
fill(0);
}

拓展

将用来控制方块变换顺序的变量添加到fill()里面，从而使方块在变化的同时颜色也在一直变化。

效果图：

代码：

function setup() 
{  
createCanvas(500, 500);
} 
function draw() 
{  
background(255,255,255);  
var x = millis()/500;  //获取时间变量
var i = 20*sin(x);  
var a = 20*sin(x+1);  
var b = 20*sin(x+1.5);  
var c = 20*sin(x+2);  
var d = 20*sin(x+2.5);  //以上变量用来控制方块变化的顺序
quad(0-i,0-i,100+i,0-i,100+i,100+i,0-i,100+i);  
quad(200-a,0-a,300+a,0-a,300+a,100+a,200-a,100+a);  
quad(0-a,200-a,100+a,200-a,100+a,300+a,0-a,300+a);  
quad(100-a,100-a,200+a,100-a,200+a,200+a,100-a,200+a);  
quad(200-b,200-b,300+b,200-b,300+b,300+b,200-b,300+b);  
quad(400-b,0-b,500+b,0-b,500+b,100+b,400-b,100+b);  
quad(0-b,400-b,100+b,400-b,100+b,500+b,0-b,500+b);  
quad(300-b,100-b,400+b,100-b,400+b,200+b,300-b,200+b);  
quad(100-b,300-b,200+b,300-b,200+b,400+b,100-b,400+b);  
quad(400-c,200-c,500+c,200-c,500+c,300+c,400-c,300+c);  
quad(200-c,400-c,300+c,400-c,300+c,500+c,200-c,500+c);  
quad(300-c,300-c,400+c,300-c,400+c,400+c,300-c,400+c);  
quad(400-d,400-d,500+d,400-d,500+d,500+d,400-d,500+d);
fill(10*abs(a),10*abs(b),10*abs(d));	//填充的颜色会一直变化
}