数组实践

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

效果展示

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

用P5 JS绘制二维动画场景——静态篇
绘画根据wiki百科的定义,绘画是在技术层面上,是一个以表面作为支撑面,再在其之上加上颜色的行为,那些表面可以是纸张.油画布.木材.玻璃.漆器或混凝土等,加颜色的工具可以是画笔.也可以是刀.海绵或是 ...
用P5 JS绘制动态绚丽烟花——动态篇
上一节我们探究了绘制静态图像手绘与码绘的差异,但是万事万物,变化万千,有很多东西仅仅用静态是无法描述的. 正如恩格斯所言:"整个自然界,从最小的东西到最大的东西,从沙粒到太阳,从原生生物到人 ...
鼠标跟随flash代码_Animate/Flash如何实现画笔跟随鼠标（AS3）
接下来会讲如何制作一个能切换画笔颜色,并用橡皮擦除的完整的小程序.这里先讲如何让画笔跟随鼠标移动. 如何制作鼠标跟随效果(AS3)-百度经验jingyan.baidu.com 适用软件:Animat ...
p5.js之“列阵绘图画板”实现大面积规律性绘制
第一次的作品简单体会码绘与手绘的不同之处,浅显的进行比较:第二次的作业增加了动态效果和交互性,让人更能直观地感受到码绘的魅力. 此次作业,主要是在传统水彩和钢笔绘画方式上,做出些改变. 总体设计方案 ...
P5.JS绘制动态图形
P5.JS绘制动态图形一.平台第一次使用p5.js进行码绘,此次直接使用P5.JS官网的在线编辑器进行编写,完成后点击file->download即可保存到本地. 在正式绘制之前,我经过小小 ...
html p5 绘制图片,p5.js入门教程和基本形状绘制_淋雪_前端开发者
一.什么是p5. 最近接触了一门数字媒体艺术类的课程,名为Interactivity,教的是p5. 主讲老师就是开发者之一--还是挺激动的. p5.开发的Javascript库,可以看作是Proces ...
p5.js创意编程——Q版人像绘制
目录主要函数介绍贝塞尔曲线 Shape frameRate 完整代码实现效果主要函数介绍贝塞尔曲线如图,是p5.js官方reference上关于贝塞尔曲线的说明,一次可以画出一条贝塞尔曲线 ...
p5js怎么导入html,如何链接P5.js设置和绘制与HTML画布？
我确信这是一件非常简单的事情,但我被困在这里. 情况如下: 我有一个带有div和canvas元素的HTML页面(不确定我是否需要这个) 我还有两个使用p5.js的javascript文件,其中包含设置 ...
雪梨小白的“码绘”起步——p5.js实现心形动态图形的绘制
作为一个快乐的程序媛,尤其还是一个快乐的树莓程序媛,当然应该什么都会!所以这学期学院开了很多偏艺术类的课程让我们学习,然后就开始了互动媒体这门课的学习.这一次的作业要利用p5绘制动态图形,我自己还真的 ...

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

数组实践

实现思路：

完整代码展示

效果展示

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

最新文章

热门文章