用代码打造超酷炫的粒子特效龙卷风，免费提供完整代码。
2024-06-03 00:43:34
是不是很炫酷？别着急嘛，下面就是代码。
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
<title>炫酷多彩龙卷风风暴粒子canvas特效动画</title>
<meta name="keywords" content="炫酷,多彩,龙卷风,风暴粒子,canvas特效,特效动画" />
<meta name="description" content="炫酷多彩龙卷风风暴粒子canvas特效动画代码下载。js代码(www.jsdaima.com)" />
<style>
html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background: #000; }
#canvas { position: absolute; width: 100%; height: 100%; }
</style>
<style type="text/css">
:root .fdad
{ display: none !important; }
</style>
</head>
<body>
<canvas id="canvas" width="1449" height="404"></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=1000;vars.initV=.01;vars.distributionRadius=800;vars.vortexHeight=25}vars.frameNo++;requestAnimationFrame(function(){frame(vars)});process(vars);draw(vars)}frame();
</script></body></html>大家复制拿去用吧！本期就分享到这里。
用代码打造超酷炫的粒子特效龙卷风，免费提供完整代码。相关推荐
- PS教程！教你打造超酷炫的德罗斯特效应
编者按:从前有座山,山上有座庙,庙里有个-这类可以无限循环的东西在视觉里叫德罗斯特效应,非常有意思的效果,而且简单易学,今天折葵同学这篇教程不仅有给新手的超简单3步搞定法,而且有效果更酷炫的代码进阶版 ...
- python动态心形代码_Python实现酷炫的动态交互式数据可视化，附代码！
(关注公众号AI新视野,发送'资料'二字,免费获取50G人工智能视频教程!) 本文介绍如何创建交互式图表和小组件,使用python做数据可视化.涉及的python库有:Plotly, Bokeh, n ...
- HTML5七夕情人节表白网页_飘落蒲公英动画超酷炫的HTML5页面_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册
HTML5七夕情人节表白网页❤飘落蒲公英动画超酷炫的HTML5页面❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 ...
- java实现3D动态效果_js实现3D粒子酷炫动态旋转特效
js实现3D粒子酷炫动态旋转特效(效果比较酷炫,中途不仅有形态的变换,还有颜色的变化,希望大家能够喜欢) 代码实现过程中的静态截图 New Document html,body{ margin:0px ...
- VB打造超酷个性化菜单（一）
VB打造超酷个性化菜单(一) 众所周知,MS Office 2003推出已经有一段时间了,但我们依然不会忘记Office XP刚刚推出时其令人耳目一新的菜单给我们留下的深刻印象.突起的悬浮式图标,不同 ...
- android 漩涡动画,html5 canvas酷炫的粒子漩涡动画特效
特效描述:html5 canvas 粒子漩涡 动画特效.html5粒子漩涡动画,酷炫的粒子动画特效 代码结构 1. HTML代码 function project3D(x,y,z,vars){ var ...
- HTML5七夕情人节表白网页制作【飘落蒲公英动画超酷炫的HTML5页面】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- python 酷炫效果_六种酷炫Python运行进度条效果的实现代码
六种酷炫Python运行进度条效果的实现代码,进度条,代码,六种,效果,酷炫 六种酷炫Python运行进度条效果的实现代码 易采站长站,站长之家为您整理了六种酷炫Python运行进度条效果的实现代码的 ...
- pr cpu100%_6款超酷炫又小众的PR插件 据说都用过就是大神！
PR作为目前最主流的视频编辑软件 拥有大量的配套插件模板等等 我们也推送过PR大量常用的插件 如转场.调色.特效等等 但PR还许多超酷炫又小众的插件 本期菌菌就为大家精选了6款插件 帮助小伙伴更好的进 ...
最新文章
- 计算机自动启动无法开机,为何插上电源 电脑会自动开机 但是又开不起来
- i12单双耳切换_多种形态，切换惬意，雷柏i100蓝牙TWS耳机，支持单耳/双耳使用...
- Channel Allocation HDU1373
- Everything is Serverless，从开源框架对比说起
- 打通 C++ 和 C# 关于 COM 组件互相调用的任督二脉
- openstack部署过程中问题记录
- 【C语言开源项目】盘点 GitHub 上不错的 4 个C语言项目
- keil教程——串口调试
- 关于饿了么ui框架的使用之select的应用
- X-VECTORS: ROBUST DNN EMBEDDINGS FOR SPEAKER RECOGNITION论文翻译
- 基于ACF多通道特征的人脸检测——从原理到实现
- python怎么安装whl文件
- 层次分析法（AHP）基础概念整理+步骤总结
- 自我总结前端vue笔记
- 物联网卡系统php,物联网卡开发文案
- linux编程用到什么编程语言,学好编程第一步，你得学会用什么工具来提高编写效率...
- 0096 克鲁斯卡尔算法，迪杰斯特拉算法
- httpposterror_HttpPost方式调用接口的3种方式
- 关于densenet的改进：condensenet、VoVNet
- 焦点资讯|教育部在高中、中小学全面普及编程教育