1.封装图案

首先封装好图案（在这里我们封装的是熊猫头像，当然你可以换成别的形状）

封装函数：

pushMatrix();

...

popMatrix();

2、图案的整体缩放

我们观察到每个熊猫头是不一样大小的，所以我们封装的图案大小也需要跟着鼠标移动而变化，也就是效果图上的时间远的比较小，那么我们只需要将图案按一定的比例缩小就好，在下面这个函数中percentage就是比例，封装的size*percentage=显示的大小

scale(percentage);

3、容器（数组）

因为我们是一个拖尾的效果，也就是显示的熊猫数量肯定有限，所以我们通过一个数组来记录鼠标运动过的坐标从而来控制显示的熊猫数量

processing中创建数组的方法：

int x[] = new int[num];//x[]就是数组名

4、获取最新坐标点及过去的坐标点

至于怎么持续获取鼠标坐标点，我在这篇文章里面有提到，有需要的建议看一下，那么在这里我们需要解决一个问题就是我们有了存放坐标点的容器那要怎么样存储坐标点呢？或者说怎么定义这个容器的存放逻辑呢？其实也很简单，无非简单的就两种：1、将最新的坐标放在0号位置历史的按降序往后放也就是越靠0越是近期的；2、将最新的坐标放在49号位置历史的按升序往前放也就是越靠49越是近期的。那么在这里我选择第一种，因为我感觉这种更易于实现和理解。

...
...
for (int i = x.length-1; i > 0; i--) {
x[i] = x[i-1];
y[i] = y[i-1];
}x[0] = mouseX;
y[0] = mouseY;
...
...

在这段代码中我们就实现了将前面的坐标往后递的过程，x.length是获取数组的长度，并且我认为我这里有一个非常巧妙的地方也就是for循环的条件，当然也有一些瑕疵

5、拖尾效果实现

这是比较难想到的一个点，先看代码：

for (int i = x.length-1; i > 0; i--) {
if(i<=x.length*0.2){panda(x[i],y[i],1.0);}
else if(i<=x.length*0.4){panda(x[i],y[i],0.8);}
else if(i<=x.length*0.6){panda(x[i],y[i],0.6);}
else if(i<=x.length*0.8){panda(x[i],y[i],0.4);}
else if(i<=x.length*1.0){panda(x[i],y[i],0.2);}
}

分享一下我的思路哈：因为数组里面0-49的坐标点越往后越过去得久，而要实现拖尾也就是要后面的头像小而前面的大，那么在这里我们就可以以一个梯度的方式逐步变小（暂时只想到这种）后面的头像，那要怎么样知道哪些是后面的那些是要变小的呢？在这里我想到了这个数组的时间关系和它元素的序号是有联系得，也就是序号越小，图像越要大，那么问题就非常好解决了，更多的请慢慢品味代码，而要想那个拖尾更细腻一些，也非常好解决，只需要把梯度降低就好也就是加else if语句

6、最后实现代码汇总如下：

int num = 50;
int x[] = new int[num];
int y[] = new int[num];void setup() {
size(800, 800);
smooth();
}void draw() {
background(255);
for (int i = x.length-1; i > 0; i--) {
x[i] = x[i-1];
y[i] = y[i-1];
}x[0] = mouseX;
y[0] = mouseY;
for (int i = x.length-1; i > 0; i--) {
if(i<=x.length*0.2){panda(x[i],y[i],1.0);}
else if(i<=x.length*0.4){panda(x[i],y[i],0.8);}
else if(i<=x.length*0.6){panda(x[i],y[i],0.6);}
else if(i<=x.length*0.8){panda(x[i],y[i],0.4);}
else if(i<=x.length*1.0){panda(x[i],y[i],0.2);}
}}
void panda(float x,float y,float percentage){
pushMatrix();
translate(x,y);
scale(percentage);
//ears
fill(0);
strokeWeight(1);
stroke(255);
ellipse(-35,-25,35,35);
ellipse(35,-25,35,35);
//head
fill(255);
strokeWeight(1);
stroke(0);
ellipse(0,0,100,90);
//eye
fill(0);
ellipse(-25,5,30,35);
ellipse(25,5,30,35);
fill(255);
ellipse(-25,0,6,6);
ellipse(25,0,6,6);
fill(0);
ellipse(0,25,7,5);
noFill();
stroke(0);
strokeWeight(1);
bezier(-2.5,35,-2.5,37,2.5,37,2.5,35);
popMatrix();}

7、特别鸣谢

熊猫头像的代码源自于广铁职院刘博士，感谢他一直以来的支持！

processing制作熊猫头像跟随鼠标拖尾相关推荐

python-tkinter（7）实现各种个样的撩妹鼠标拖尾
python-tkinter(7) 实现各种个样的撩妹鼠标拖尾系统的拖尾已经无法满足我们了,女朋友叫你把鼠标拖尾换成她的照片,让你时时刻刻都可以看见她,这个要求你答不答应. 当然,这个要求还是可以满 ...
html头像转动,基于jquery实现人物头像跟随鼠标转动
一款非常乖巧的人物头像跟随鼠标转动效果,在浏览器屏幕内,人物脸庞始终面向鼠标转动.其实现原理即同一张图片上作出人物上下左右不同面向的效果,利用JS调用背景图片的位置,以此实现人物"转脸&qu ...
Ue4制作鼠标拖尾效果
开启UE中的Niagara UI Renderer插件(所有兼容这个插件的UE版本中都有自带,如果没有可以去下载,免费的) 2.根据图提示,新建一个UI例子特效,用来作为拖尾 3.新建一个UMG,创建 ...
使用css和js实现鼠标拖尾特效
一实现步骤解析: 1.这原本是一个鼠标后面跟随一串英文字母的效果, 2.后来我就想,运用随机数字母的颜色做成彩色的, 3.并且每一个字母的色彩是随机分配而不是我自己手动填写的. 二 css: 1.为 ...
[Unity学习笔记：FPS游戏制作（3）]子弹拖尾，碰撞与枪口火焰效果
往期博客[Unity学习笔记:FPS游戏制作(2)] 发射子弹----(2021.6.20学习笔记) 文章目录一,实现思路二,粒子效果的实现 (1)子弹拖尾特效的实现 (2)枪口火焰特效的实现 ( ...
html鼠标拖尾效果,JS实现鼠标移动拖尾
本文实例为大家分享了JS实现鼠标移动拖尾的具体代码,供大家参考,具体内容如下 JS 代码 function getMousePos(event) { var e = event || window.e ...
QT制作软件---窗口跟随鼠标进行移动
书接上文,在QT制作软件-去除系统自带的Dialog边框这篇博客中,我们提到了,如果移除系统自带的Dialog窗口会出现当前创建的窗口,无法拖动的情况.即如下图所示: 图1 解决方法:(原理) 要拖动 ...
html鼠标拖尾效果,javascript canvas拖尾效果
{$title} var lujinglist = []; //制作路径 for (var x = 10; x <= 300; x++) { var dian = [x, 50]; lujing ...
纯js实现鼠标拖尾效果（好玩又简单，一学就会）
js特效-鼠标滑动的拖尾效果 <script>//鼠标移动事件(document范围内移动)document.onmousemove=function(event){//1.创建divva ...

processing制作熊猫头像跟随鼠标拖尾