1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > P5.js之数组使用——绘制水墨画笔 实现跟随鼠标移动的效果

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

时间:2021-09-02 15:29:55

相关推荐

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);}}

效果展示

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。