sketch实现跟随鼠标的彩色泡泡效果代码

代码语言:html

所属分类:其他

代码描述:sketch实现跟随鼠标的彩色泡泡效果代码

代码标签: sketch 跟随 鼠标 彩色 泡泡

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
</head>

<body style="background:#000;overflow:hidden;">
    <div id="container"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sketch.min.js"></script>
    <script type="text/javascript">
        function Particle(b, c, a) {
            this.init(b, c, a)
        }
        Particle.prototype = {
            init: function(b, c, a) {
                this.alive = true;
                this.radius = a || 10;
                this.wander = 0.15;
                this.theta = random(TWO_PI);
                this.drag = 0.92;
                this.color = "#fff";
                this.x = b || 0;
                this.y = c || 0;
                this.vx = 0;
                this.vy = 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(a) {
                a.beginPath();
                a.arc(this.x, this.y, this.radius, 0, TWO_PI);
                a.fillStyle = this.color;
                a.fill()
            }
        };
        var MAX_PARTICLES = 280;
        var COLOURS = ["#69D2E7", "#A7DBD8", "#E0E4CC", "#F38630", "#FA6900", "#FF4E50", "#F9D423"];
        var particles = [];
        var.........完整代码请登录后点击上方下载按钮下载查看

网友评论0