P5.js之数组使用——绘制水墨画笔，实现跟随鼠标移动的效果

数组实践

首先需要说明，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);

  }
  
}

效果展示