绚丽的粒子漩涡

最新推荐文章于 2024-06-10 07:41:12 发布
最新推荐文章于 2024-06-10 07:41:12 发布
阅读量457 收藏 6
点赞数 5
分类专栏： WEB 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44532985/article/details/104816429
版权

在这里和大家分享一下抖音上看到的粒子漩涡的源码和制作过程。

  1. 首先在电脑上新建一个文件夹文件，名字可以随意取，我就以自己的为例，文件夹名字为test。
  2. 然后将下面的音频下载并放入test文件夹中。
  3. 其次在电脑上新建一个test.txt,然后将下面的全部代码复制粘贴到test.txt中。
  4. 接着将test.txt的后缀改为html, 整个文件变成 test.html,最后用浏览器打开就可以了。

音频下载
提取码：hpcc

test.txt里的代码：

  <!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>

	<embed src="fish.mp3" hidden="true" autostart="true" loop="true">
		<!-- 设置背景音乐 -->

		<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=2000;              /* 700;*/
					vars.initV=.01;
					vars.distributionRadius=2000;                /*  800;*/
					vars.vortexHeight=25;
				}
				vars.frameNo++;
				requestAnimationFrame(function() {
					frame(vars);
				});
				process(vars);
				draw(vars);
			}
			frame();
		</script>

	</body>
	</html>

结果如下（带音乐哦）：
在这里插入图片描述在这里插入图片描述
喜欢的朋友点个赞关注一下呗，有好的资源及时分享给大家。

qq_44532985
关注
专栏目录
Unity3D粒子漩涡特效制作教程
09-08
Unity3D粒子漩涡特效制作教程,有资源链接和资源，有做好的视图效果
html 粒子漩涡特效代码（实例）
热门推荐
weixin_43941291的博客
08-05 1万+
<!doctype html> <html> <head> <meta charset="utf-8"> <title>H5,200行代码实现粒子漩涡特效</title> <style> html, body { margin: 0px; width: 100%; height: 100%;
超炫粒子漩涡
懂得一千零一种,赋予你失败的方法！
02-04 318
2020.02.03 DEll <!doctype html> <html> <head> <meta charset="utf-8"> <title>漩涡粒子</title> <style> html,body{ margin:0px; width:100%; height:100%; overfl...
B站上看到的一段很牛逼的代码
qq_43776408的博客
12-25 7127
直接复制到文本文件里，改扩展名为html就可以了 <!doctype html> <html> <head> <meta charset="utf-8"> <title>首页</title> <style> html,body{ margin:0px; width:100%; height:100%; o...
HTML粒子旋涡特效代码
马子日的博客
12-12 1549
快手抖音特别火的粒子旋涡特效代码来了
超好看的光粒子漩涡特效
02-10
粒子漩涡代码特效超级好看
如何实现html做一个粒子漩涡
01-20
以上是创建粒子漩涡的基本步骤，实际项目中可能还需要考虑性能优化，如使用requestAnimationFrame控制动画，动态调整粒子数量，以及粒子大小、颜色变化等效果。这只是一个简单的示例，实际的粒子系统会更复杂，可能...
网页动画素材 3d炫酷旋转粒子漩涡（抖音资料）
07-11
网页动画素材 3d炫酷旋转粒子漩涡（抖音资料）网页动画素材 3d炫酷旋转粒子漩涡（抖音资料）网页动画素材 3d炫酷旋转粒子漩涡（抖音资料）网页动画素材 3d炫酷旋转粒子漩涡（抖音资料）网页动画素材 3d炫酷旋转粒子...
HTML5 Canvas粒子漩涡动画特效
06-24
在粒子漩涡动画中，Canvas就是我们展现特效的舞台。 粒子系统是模拟现实世界中物体行为的一种方式，常用于创建火焰、烟雾、雨滴等效果。在HTML5 Canvas中，粒子通常表现为小的图形元素，它们有自己的生命周期，包括...
HTML5 Canvas旋涡粒子动画特效特效代码
03-20
HTML5 Canvas旋涡粒子动画特效是一款黑色背景下游动的粒子旋涡动画特效。
HTML5 canvas粒子漩涡动画代码
05-01
HTML5 canvas粒子漩涡动画代码，有变色效果。
HTML5 Canvas粒子漩涡动画特效.zip
07-04
HTML5 Canvas粒子漩涡动画特效是一款超酷炫的粒子漩涡动画特效。
e语言-易语言3D粒子漩涡
08-23
易语言3D粒子漩涡源码
粒子特效 代码(龙卷风)
xiaozgm的博客
07-19 1382
粒子特效 代码(龙卷风)
【HTML旋转粒子】（效果 + 代码）
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
08-28 2675
Html旋转粒子特效分享
粒子漩涡前端代码
qq_43931441的博客
02-22 1214
<!doctype html> <html> <head> <meta charset="utf-8"> <title>粒子涡旋</title> <style> html,body{ margin:0px; width:100...
粒子风暴（html）
ww120624的博客
02-21 960
title>粒子漩涡特效
HTML做成一个粒子漩涡特效页面
最新发布
德乐懿的博客
06-10 2300
大家好，今天制作制作一个粒子漩涡特效的页面！ 先看具体效果： 要在一个单一的 index.html 页面中实现粒子漩涡特效，我们可以使用HTML、CSS和JavaScript（不需要外部库）。下面是一个简单的例子，展示了如何使用纯HTML和JavaScript来创建一个基本的粒子漩涡效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor
html5头像六边形,HTML5 Canvas 3D六边形迷宫图
weixin_35901475的博客
06-08 186
JavaScript语言：JaveScriptBabelCoffeeScript确定function project3D(x, y, z, vars) {var p, d;x -= vars.camX;y -= vars.camY;z -= vars.camZ;p = Math.atan2(x, z);d = Math.sqrt(x * x + z * z);x = Math.sin(p - va...
爱心粒子漩涡特效代码
10-18
这个特效的实现需要使用粒子系统，以下是一个简单的爱心粒子漩涡特效代码示例： ```csharp using UnityEngine; public class HeartParticle : MonoBehaviour { public ParticleSystem particleSystem; public ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值