鼠标跟踪器

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";
var colorMap = [
    '#1abc9c',
    '#3498db',
    '#9b59b6'
];
var Mover = (function () {
    function Mover(position, velocity, acceleration) {
        if (position === void 0) { position = createVector(0, 0); }
        if (velocity === void 0) { velocity = createVector(0, 0); }
        if (acceleration === void 0) { acceleration = createVector(0, 0); }
        this.position = position;
        this.velocity = velocity;
        this.acceleration = acceleration;
        this.color = color(random(colorMap));
        this.maxSpeed = 6;
    }
    Mover.prototype.update = function () {
        var mouse = createVector(mouseX, mouseY);
        this.acceleration = p5.Vector.sub(mouse, this.position);
        this.acceleration.setMag(0.2);
        this.velocity.add(this.acceleration);
        this.velocity.limit(this.maxSpeed);
        this.position.add(this.velocity);
        var vd = p5.Vector.sub(mouse, this.position);
        this.rotation = atan2(vd.y, vd.x);
    };
    Mover.prototype.draw = function () {
        push();
        translate(this.position.x, this.position.y);
        rotate(this.rotation);
        noStroke();
        rect(-20, -5, 20, 5);
        fill(this.color);
        rect(0, -5, 5, 5);
        pop();
    };
    return Mover;
}());
var movers = [];
function setup() {
    var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
    createCanvas(innerWidth, innerHeight);
    for (var i = 0; i < 20; i += 1) {
        movers.push(new Mover(new p5.Vector(random(0, width), random(0, height))));
    }
}
function draw() {
    background(33);
    movers.forEach(function (mover) {
        mover.update();
        mover.draw();
    });
}
function windowResized() {
    var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
    resizeCanvas(innerWidth, innerHeight);
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg