尝试利用P5.JS绘制一幅“动态”绘画
作业流程:
1.首先,我们需要绘制一幅会动的“图”,本着这一思想,写下了第一段代码。
var x=0;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(255);
x+=2;
fill(0,255,255);
ellipse(x%width,height/2,20,20);
}
它的功能十分简单,就是一个在屏幕中央不断右移的圆形,而 x%width 的写法让这个球在到达屏幕最右端后回到最左端,继续这个循环。
效果如下:
2.现在,我们利用for循环画出10排10列圆形,i和k两个循环数使圆形的位置改变并让其颜色渐变。
var x=0;
var y=0;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(255);
//width和height是关键词,分别是Canvas的宽和高
x+=2;
y+=2;
for(var i=0;i<10;i++){
for(var k=0;k<10;k++){
fill(255,255-i*20,255-k*20);
ellipse((x+i*30)%width,(y+k*30)%height,20,20);
}
}
fill(255,245,0);
}
从这一步,因为圆形数量的增多,画面开始丰富起来,同时有了一些变化元素,例如:颜色渐变与位置平移。
效果如下:
3.接着,我们运用rotate()函数,对圆形的轨迹(按坐标起点)进行旋转,这样小球就在屏幕中做散乱位移(其实是有规则地),这一步为接下来的操作做准备。<