sketch实现鼠标跟随彩色泡泡粒子动画效果代码-html代码-BFW代码库

sketch实现鼠标跟随彩色泡泡粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：sketch实现鼠标跟随彩色泡泡粒子动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <style>


        body {
            background: #222;
        }



    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sketch.min.js"></script>


</head>
<body>



    <script language="JavaScript">
        // JavaScript Document
        // ----------------------------------------
        // Particle
        // ----------------------------------------

        function Particle(x, y, radius) {
            this.init(x, y, radius);
        }

        Particle.prototype = {

            init: function(x, y, radius) {

                this.alive = true; //开动画

                this.radius = radius || 10; //半径
                this.wander = 0.15;
                this.theta = random(TWO_PI);
                this.drag = 0.92; //拖拽
                this.color = '#fff';

                this.x = x || 0.0;
                this.y = y || 0.0;

                this.vx = 0.0;
                this.vy = 0.0;
            },

            move: function() {

                this.x += this.vx;
                this.y += this.vy;

                this.vx *= this.drag;
                this.vy *= this.drag;

                this.theta += random(-0.5, 0.5) * this.wander;
                this.vx += sin(this.theta) * 0.1;
                this.vy += cos(this.theta) * 0.1;

                this.radius *= 0.96;
                this.alive = this.radius > 0.5;
            },

            draw: function(ctx) {

                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        };

        // ----------------------------------------
        // Example
        // ----------------------------------------

        var MAX_PARTICLES = 35; //这里决定在火狐里面是否卡顿，数值越大越卡
        var COLOURS = ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900',
            '#FF4E50', '#F9D423'];

        var particles =.........完整代码请登录后点击上方下载按钮下载查看