粒子特效代码(龙卷风)

<!DOCTYPE html>

<html>

<head>

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

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>

</body>

</html>

粒子特效代码(龙卷风)相关推荐

js光斑粒子js特效代码
下载地址 js光斑粒子特效代码 dd:
HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码
特效描述:html5 3D立体粒子波浪动画.3D 粒子动画特效代码结构 1. 引入JS 2. HTML代码 /// Scene const sceneSettings = { width: () ...
HTML粒子旋涡特效代码
快手抖音特别火的粒子旋涡特效代码来了
h5酷炫粒子java代码_html5粒子效果文字特效
特效描述:html5 粒子效果文字特效.html5粒子效果文字特效代码结构 1. HTML代码 BLUR = false; PULSATION = true; PULSATION_PERIOD = ...
手把手教你系列 - Particle粒子特效（完整代码部分）
本着瞎折腾的学习态度,在闲暇之余就是要搞点奇奇怪怪的事情.文中如有哪不对的地方,还请大家指出. 本文项目github地址:https://github.com/SmallStoneSK/particl ...
【IOS-COCOS2D游戏开发之十】添加粒子系统特效并解决粒子特效与LAYER之间的坐标问题；...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/472.html ...
Shader相关Mask裁切UI粒子特效或者3D模型
转载自:http://www.xuanyusong.com/archives/3518 原理就是把Mask的裁切区域传给粒子特效Shader,当超出这个区域那么直接让它完全透明即可.粒子特效的源生sh ...
Silverlight 解谜游戏之四粒子特效
前几篇一直在Blend中工作没体现出开发者的作用,本篇将为订书器(Stapler)添加自定义粒子效果,当订书器被点击时产生更好的视觉效果.其中将使用到nerdplusart 的Silverlight ...
Android OpenGL ES 3.0 粒子特效
1.粒子特效粒子特效:Particles Effect,粒子特效本质上是通过一次或者多次渲染绘制出大量位置.形状或者颜色不同的物体(粒子),形成大量粒子运动的视觉效果.所以,粒子特效天然适合用Ope ...
Unity_粒子特效
简单的将Particle System 的参数在Inspector上进行修改就能实现,火焰,爆炸,等这种于一中心点进行线性播放的粒子特效,效果图和参数图如下: 爆炸: 火焰(因为没有太匹配的火焰材质这 ...

粒子特效代码(龙卷风)

粒子特效代码(龙卷风)相关推荐

最新文章

热门文章

粒子特效 代码(龙卷风)

粒子特效 代码(龙卷风)相关推荐

最新文章

热门文章

粒子特效代码(龙卷风)

粒子特效代码(龙卷风)相关推荐