超炫粒子漩涡
发布日期：2021-05-07 02:45:59
浏览次数：16
分类：原创文章
本文共 6583 字，大约阅读时间需要 21 分钟。
2020.02.03DEll<!doctype html><html><head><meta charset="utf-8"><title>漩涡粒子</title> <style>html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#000;} #canvas{ position:absolute; width:100%; height:100%;}</style></head><body> <canvas id="canvas"></canvas> <script>function project3D(x,y,z,vars){ var p,d; x-=vars.camX; y-=vars.camY-8; z-=vars.camZ; p=Math.atan2(x,z); d=Math.sqrt(x*x+z*z); x=Math.sin(p-vars.yaw)*d; z=Math.cos(p-vars.yaw)*d; p=Math.atan2(y,z); d=Math.sqrt(y*y+z*z); y=Math.sin(p-vars.pitch)*d; z=Math.cos(p-vars.pitch)*d; var rx1=-1000; var ry1=1; var rx2=1000; var ry2=1; var rx3=0; var ry3=0; var rx4=x; var ry4=z; var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1); var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc; var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc; if(!z)z=0.000000001; if(ua>0&&ua<1&&ub>0&&ub<1){ return { x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale, y:vars.cy+y/z*vars.scale, d:(x*x+y*y+z*z) }; }else{ return { d:-1 }; }} function elevation(x,y,z){ var dist = Math.sqrt(x*x+y*y+z*z); if(dist && z/dist>=-1 && z/dist <=1) return Math.acos(z / dist); return 0.00000001;} function rgb(col){ col += 0.000001; var r = parseInt((0.5+Math.sin(col)*0.5)*16); var g = parseInt((0.5+Math.cos(col)*0.5)*16); var b = parseInt((0.5-Math.sin(col)*0.5)*16); return "#"+r.toString(16)+g.toString(16)+b.toString(16);} function interpolateColors(RGB1,RGB2,degree){ var w2=degree; var w1=1-w2; return [w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]];} function rgbArray(col){ col += 0.000001; var r = parseInt((0.5+Math.sin(col)*0.5)*256); var g = parseInt((0.5+Math.cos(col)*0.5)*256); var b = parseInt((0.5-Math.sin(col)*0.5)*256); return [r, g, b];} function colorString(arr){ var r = parseInt(arr[0]); var g = parseInt(arr[1]); var b = parseInt(arr[2]); return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2);} function process(vars){ if(vars.points.length<vars.initParticles) for(var i=0;i<5;++i) spawnParticle(vars); var p,d,t; p = Math.atan2(vars.camX, vars.camZ); d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ); d -= Math.sin(vars.frameNo / 80) / 25; t = Math.cos(vars.frameNo / 300) / 165; vars.camX = Math.sin(p + t) * d; vars.camZ = Math.cos(p + t) * d; vars.camY = -Math.sin(vars.frameNo / 220) * 15; vars.yaw = Math.PI + p + t; vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2; var t; for(var i=0;i<vars.points.length;++i){ x=vars.points[i].x; y=vars.points[i].y; z=vars.points[i].z; d=Math.sqrt(x*x+z*z)/1.0075; t=.1/(1+d*d/5); p=Math.atan2(x,z)+t; vars.points[i].x=Math.sin(p)*d; vars.points[i].z=Math.cos(p)*d; vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2); if(vars.points[i].y>vars.vortexHeight/2 || d<.25){ vars.points.splice(i,1); spawnParticle(vars); } }} function drawFloor(vars){ var x,y,z,d,point,a; for (var i = -25; i <= 25; i += 1) { for (var j = -25; j <= 25; j += 1) { x = i*2; z = j*2; y = vars.floor; d = Math.sqrt(x * x + z * z); point = project3D(x, y-d*d/85, z, vars); if (point.d != -1) { size = 1 + 15000 / (1 + point.d); a = 0.15 - Math.pow(d / 50, 4) * 0.15; if (a > 0) { vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2)); vars.ctx.globalAlpha = a; vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size); } } } } vars.ctx.fillStyle = "#82f"; for (var i = -25; i <= 25; i += 1) { for (var j = -25; j <= 25; j += 1) { x = i*2; z = j*2; y = -vars.floor; d = Math.sqrt(x * x + z * z); point = project3D(x, y+d*d/85, z, vars); if (point.d != -1) { size = 1 + 15000 / (1 + point.d); a = 0.15 - Math.pow(d / 50, 4) * 0.15; if (a > 0) { vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2)); vars.ctx.globalAlpha = a; vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size); } } } } } function sortFunction(a,b){ return b.dist-a.dist;} function draw(vars){ vars.ctx.globalAlpha=.15; vars.ctx.fillStyle="#000"; vars.ctx.fillRect(0, 0, canvas.width, canvas.height); drawFloor(vars); var point,x,y,z,a; for(var i=0;i<vars.points.length;++i){ x=vars.points[i].x; y=vars.points[i].y; z=vars.points[i].z; point=project3D(x,y,z,vars); if(point.d != -1){ vars.points[i].dist=point.d; size=1+vars.points[i].radius/(1+point.d); d=Math.abs(vars.points[i].y); a = .8 - Math.pow(d / (vars.vortexHeight/2), 1000) * .8; vars.ctx.globalAlpha=a>=0&&a<=1?a:0; vars.ctx.fillStyle=rgb(vars.points[i].color); if(point.x>-1&&point.x<vars.canvas.width&&point.y>-1&&point.y<vars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size); } } vars.points.sort(sortFunction);} function spawnParticle(vars){ var p,ls; pt={ }; p=Math.PI*2*Math.random(); ls=Math.sqrt(Math.random()*vars.distributionRadius); pt.x=Math.sin(p)*ls; pt.y=-vars.vortexHeight/2; pt.vy=vars.initV/20+Math.random()*vars.initV; pt.z=Math.cos(p)*ls; pt.radius=200+800*Math.random(); pt.color=pt.radius/1000+vars.frameNo/250; vars.points.push(pt); } function frame(vars) { if(vars === undefined){ var vars={ }; vars.canvas = document.querySelector("canvas"); vars.ctx = vars.canvas.getContext("2d"); vars.canvas.width = document.body.clientWidth; vars.canvas.height = document.body.clientHeight; window.addEventListener("resize", function(){ vars.canvas.width = document.body.clientWidth; vars.canvas.height = document.body.clientHeight; vars.cx=vars.canvas.width/2; vars.cy=vars.canvas.height/2; }, true); vars.frameNo=0; vars.camX = 0; vars.camY = 0; vars.camZ = -14; vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2; vars.yaw = 0; vars.cx=vars.canvas.width/2; vars.cy=vars.canvas.height/2; vars.bounding=10; vars.scale=500; vars.floor=26.5; vars.points=[]; vars.initParticles=700; vars.initV=.01; vars.distributionRadius=800; vars.vortexHeight=25; } vars.frameNo++; requestAnimationFrame(function() { frame(vars); }); process(vars); draw(vars);}frame();</script><div style="text-align:center;"><p>来源:<a href="http://www.mycodes.net/" target="_blank">漩涡粒子</a></p></div></body></html>————————————————版权声明：本文为CSDN博主「忘记时间的小白」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/wangjian530/article/details/80377848发表评论
最新留言
做的很好，不错不错
[***.243.131.199]2025年03月28日 00时28分23秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
杭电 2007 平方和与立方和（输入数据的大小顺序并不能默认）
2019-03-05
十大排序算法之三：插入排序(Python)
2019-03-05
利用Python实现循环队列
2019-03-05
利用递归实现二叉树的前中后序遍历(Python)
2019-03-05
冒泡排序又来啦(C/C++版本)
2019-03-05
python负数存储
2019-03-05
求二维数组中最大值的位置
2019-03-05
python中sort和sorted的区别
2019-03-05
maven安装
2019-03-05
合并两个有序数组
2019-03-05
聊聊我的五一小假期
2019-03-05
面向对象之异常处理：多路捕获
2019-03-05
Vue新建项目——页面初始化
2019-03-05
Node.js包使用系列（一）——修改NPM全局下载和缓存路径
2019-03-05
TDengine使用（一）——TDengine下载与安装
2019-03-05
6.14编一个程序，将两个字符串s1和s2比较，不要用strcmp函数。
2019-03-05
Java纯文本文件显示工具制作
2019-03-05
Unity2D Fixed Joint 2D详解
2019-03-05
三、案例：留言板 & url.parse()
2019-03-05
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 457369032 位访客