P5的动态绘画

尝试利用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()函数，对圆形的轨迹（按坐标起点）进行旋转，这样小球就在屏幕中做散乱位移（其实是有规则地），这一步为接下来的操作做准备。<