超炫的canvas动画系列6【粒子旋涡】

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

                }

            }

        }

    }

更多资料免费分享加群      120342833      验证回答      ZZ

    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>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,332评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,508评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,812评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,607评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,728评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,919评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,071评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,802评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,256评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,389评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,032评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2赞 350

推荐阅读更多精彩内容

  • [kinect]地面信息提取算法
    created by Dejavu(不断更新中) 简介 地面信息的提取对于车形的智能机器人来说十分重要，之前一直采...
    ericdejavu阅读 1,079评论 0赞 1
  • Swift
    SwiftDay011.MySwiftimport UIKitprintln("Hello Swift!")var...
    smile丽语阅读 3,829评论 0赞 6
  • LeetCode/LintCode ReviewPage 题解-总结
    背景 一年多以前我在知乎上答了有关LeetCode的问题, 分享了一些自己做题目的经验。 张土汪：刷leetcod...
    土汪阅读 12,740评论 0赞 33
  • 未来你好
    2016.7.16 感觉青春就是一张白纸，但这张纸总不能像你理想中的那样纯白无暇，它总会因为遇见一些人渣与蠢事被溅...
    wirepuller阅读 111评论 0赞 0
  • 千万别读太多书
    近期看的几篇文章，都是在分享作者过去的阅读经验，其中不乏可供我们借鉴的地方。 但是有的书读了之后，我们会更加迷惑不...
    古月适之不适阅读 349评论 0赞 0