canvas圆圈动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

'use strict';
console.clear();
var PHI = 1.6180339887;
// config
var bg = '#1E1E1E', col = 125, dZ = 1, dR = 5;
// globals/deferred inits
var cone, cam, r, r_max, z, z_spacing;
var setup = function () {
    createCanvas(window.innerWidth, window.innerHeight, WEBGL);
    smooth();
    stroke(255, 255, 255, 50);
    r = r_max = sqrt(Math.pow(width, 2) + Math.pow(height, 2));
    z = z_spacing = floor(r_max * 0.0275);
    cone = new GoldenCone(r, dR, dZ, z_spacing, 0, col);
    var camDist = r_max * 1 / 2;
    cam = createCamera();
    cam.setPosition(-camDist, camDist, camDist * 2);
    setCamera(cam);
};
var draw = function () {
    background(bg);
    cam.lookAt(0, 0, 0);
    orbitControl();
    cone.update();
    cone.display();
};
var GoldenCone = /** @class */ (function () {
    function GoldenCone(r, dR, dZ, sp, s, c) {
        this.a = [];
        this.r = r;
        this.dR = dR;
        this.dZ = dZ;
        this.z = sp;
        this.sp = sp;
        this.s = s;
        this.c = c;
    }
    GoldenCone.prototype.cycleColor = function () {
        var h = map(noise(this.c * 0.003, frameCount * 0.009), 0, 1, 0, 360);
        this.c = h;
    };
    GoldenCone.prototype.update = function () {
        this.cycleColor();
        var i = 0, r = this.r;
        this.a = [];
        this.a.push([this.r, this.z]);
        while (r > 1) {
            i++;
            var a = (PI * Math.pow(r, 2)) / PHI, z_1 = this.z + i * this.sp;
            r = sqrt(a / PI);
            this.a.push([r, z_1]);
        }
        this.z -= this.dZ;
        if (this.z <= 0) {
            this.a.splice(0, 1);
            this.z = this.sp;
        }
        this.r = this.a[0][0] += this.dR;
    };
    GoldenCone.prototype.display = function () {
        colorMode(HSB);
        for (var i = 0; i < this.a.length; i++) {
            var p = 1 - (this.a[i][0] / r_max) * 1.85;
            fill(this.c, 100, 50, p);
            push();
            translate(0, 0, this.a[i][1]);
            ellipse(0, 0, this.a[i][0], this.a[i][0], 48);
            pop();
        }
    };
    return GoldenCone;
}());

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