数组实践
首先需要说明,p5和processing数组的使用有所不同
数组的声明和初始化为:
var pox =new Array(50);
var poy=new Array(50);
实现思路:
1.保存当前鼠标值为数组最后位置的值
2.原数组的值不断前移
3.相当于新的鼠标值将原来的值给挤出去了
//每次将新的鼠标值放置于数组的最后,前面的值不断挪出去for(var i=1;i<pox.length-1;i++){pox[i]=pox[i+1];poy[i]=poy[i+1];}//最后一个数组位置填充此时的鼠标的值pox[length-1]=mouseX;poy[length-1]=mouseY;
4.拓展:越早进入数组的值应该越亮,后进入的应该越浅
完整代码展示
var pox =new Array(50);//声明一个x数组存储50个鼠标坐标的x值var poy=new Array(50);//声明一个x数组存储50个鼠标坐标的y值function setup() {createCanvas(400, 400);//初始化for(var i=0;i<pox.length;i++){pox[i]=0;poy[i]=0;}}function draw() {background(220);//每次将新的鼠标值放置于数组的最后,前面的值不断挪出去for(var i=1;i<pox.length-1;i++){pox[i]=pox[i+1];poy[i]=poy[i+1];}//最后一个数组位置填充此时的鼠标的值pox[length-1]=mouseX;poy[length-1]=mouseY;//根据该50个值绘制图形for(var i=0;i<pox.length-1;i++){noStroke();//指定没有边框ecolor=255-i*5;constrain(ecolor,0,255);//限制范围fill(ecolor);ellipse(pox[i],poy[i],i,i);}}