canvas-nest.js
canvas-nest.js copied to clipboard
hustcc
CPU占用略大 & 抖动的问题
哦对，还有个方法是把点聚集收缩的部分逻辑去掉，nest.min.js里面对应着一段：
i.x-=0.01*B,i.y-=0.01*z
0.01应该是被我修改过了，把它改成0，去掉粘附加速就不抖动了233。
我貌似搞定了……刚好今天上午公司事少就自己想了想这个问题。 基本思路：记录一个加速度变量，加速度的方向和取值根据到鼠标点的距离计算，然后点位置重绘方法放到后面，重新计算位置时加上加速度就好了。
主要是这几处：
t.forEach(function(i){
for(v=0;v<w.length;v++){
x=w[v];
savex=null;
if(i!==x&&null!==x.x&&null!==x.y){
B=i.x-x.x,
z=i.y-x.y,
prex=i.x+i.xa-x.x,
prey=i.y+i.ya-x.y;
y=B*B+z*z;
if (x===f) {
if(y<x.max) {
i.xd=(Math.abs(prex) > Math.abs(B) ? -1 : 1)*y/x.max*2*i.xa,
i.yd=(Math.abs(prey) > Math.abs(z) ? -1 : 1)*y/x.max*2*i.ya;
} else {
i.xd=0;i.yd=0;
}
}
if(y<x.max){
A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke();
}
}
}
i.x+=i.xa+i.xd,
i.y+=i.ya+i.yd,
i.xa*=i.x>r||i.x<0?-1:1,
i.ya*=i.y>n||i.y<0?-1:1;
e.fillRect(i.x-0.5,i.y-0.5,1,1);
w.splice(w.indexOf(i),1)
}),
点的结构体里面添加xd,yd定义：
t.push({x:h,y:g,xa:q,ya:d,xd:0,yd:0,max:6000})
不过我的博客是拿min版本用的，非min版本的话应该位置差不多，找一下就好啦 ^_^)/
具体效果可以查看stefenson.github.io
人家才不会说这是顺便给自己blog打广告呢
抖动的问题我最近试着解决了一下，目前达到的效果是到达鼠标半径的点，停止运动，也就不再抖动。 但考虑到还有一种效果，就是到达鼠标半径的点，围绕鼠标做圆周运动，而不是内外的抖动，但也不停止运动，不知道最终要做成哪种效果？
我貌似搞定了……刚好今天上午公司事少就自己想了想这个问题。 基本思路：记录一个加速度变量，加速度的方向和取值根据到鼠标点的距离计算，然后点位置重绘方法放到后面，重新计算位置时加上加速度就好了。
主要是这几处：
t.forEach(function(i){ for(v=0;v<w.length;v++){ x=w[v]; savex=null; if(i!==x&&null!==x.x&&null!==x.y){ B=i.x-x.x, z=i.y-x.y, prex=i.x+i.xa-x.x, prey=i.y+i.ya-x.y; y=B*B+z*z; if (x===f) { if(y<x.max) { i.xd=(Math.abs(prex) > Math.abs(B) ? -1 : 1)*y/x.max*2*i.xa, i.yd=(Math.abs(prey) > Math.abs(z) ? -1 : 1)*y/x.max*2*i.ya; } else { i.xd=0;i.yd=0; } } if(y<x.max){ A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke(); } } } i.x+=i.xa+i.xd, i.y+=i.ya+i.yd, i.xa*=i.x>r||i.x<0?-1:1, i.ya*=i.y>n||i.y<0?-1:1; e.fillRect(i.x-0.5,i.y-0.5,1,1); w.splice(w.indexOf(i),1) }),点的结构体里面添加xd,yd定义：
t.push({x:h,y:g,xa:q,ya:d,xd:0,yd:0,max:6000})不过我的博客是拿min版本用的，非min版本的话应该位置差不多，找一下就好啦 ^_^)/
具体效果可以查看stefenson.github.io
人家才不会说这是顺便给自己blog打广告呢
请教一下，关于动画速度怎么能修改呢~谢谢大佬~
我貌似搞定了……刚好今天上午公司事少就自己想了想这个问题。 基本思路：记录一个加速度变量，加速度的方向和取值根据到鼠标点的距离计算，然后点位置重绘方法放到后面，重新计算位置时加上加速度就好了。 主要是这几处：
t.forEach(function(i){ for(v=0;v<w.length;v++){ x=w[v]; savex=null; if(i!==x&&null!==x.x&&null!==x.y){ B=i.x-x.x, z=i.y-x.y, prex=i.x+i.xa-x.x, prey=i.y+i.ya-x.y; y=B*B+z*z; if (x===f) { if(y<x.max) { i.xd=(Math.abs(prex) > Math.abs(B) ? -1 : 1)*y/x.max*2*i.xa, i.yd=(Math.abs(prey) > Math.abs(z) ? -1 : 1)*y/x.max*2*i.ya; } else { i.xd=0;i.yd=0; } } if(y<x.max){ A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke(); } } } i.x+=i.xa+i.xd, i.y+=i.ya+i.yd, i.xa*=i.x>r||i.x<0?-1:1, i.ya*=i.y>n||i.y<0?-1:1; e.fillRect(i.x-0.5,i.y-0.5,1,1); w.splice(w.indexOf(i),1) }),点的结构体里面添加xd,yd定义：
t.push({x:h,y:g,xa:q,ya:d,xd:0,yd:0,max:6000})不过我的博客是拿min版本用的，非min版本的话应该位置差不多，找一下就好啦 ^_^)/ 具体效果可以查看stefenson.github.io 人家才不会说这是顺便给自己blog打广告呢
请教一下，关于动画速度怎么能修改呢谢谢大佬
我上条回复就是这么做的，做完后感觉静止还不如抖动的效果好，就想着让点做圆周运动，但要计算圆周加速度方向，就一直懒得做，你有兴趣可以这么改改 动画速度应该是修改初始时的加速度
这个 js 在很多个人网站上如同挖矿脚本一样占用cpu/gpu，烧电脑浏览器，费电！ 可以用 ublock/adblock plus等禁止加载，如下写规则：
*/canvas-nest.min.js$script
*/canvas-nest.js$script
这个 js 在很多个人网站上如同挖矿脚本一样占用cpu/gpu，烧电脑浏览器，费电！ 可以用 ublock/adblock plus等禁止加载，如下写规则：
*/canvas-nest.min.js$script */canvas-nest.js$script
mac电脑只能这么干，否者容易炸了
近期写了个类似的替代性专案，从基本上舍弃了爆搜，改用chunks与draw buffer解决掉大部分的效能瓶颈。 目前还不是很完整，但核心代码写好了。 https://github.com/phantom0174/canvas-nice.js
