奇怪的生物

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";

const {
    PI,
    cos,
    sin,
    tan,
    abs,
    sqrt,
    pow,
    min,
    max,
    ceil,
    floor,
    round,
    random,
    atan2
} = Math;
const HALF_PI = 0.5 * PI;
const QUART_PI = 0.25 * PI;
const TAU = 2 * PI;
const TO_RAD = PI / 180;
const G = 6.67 * pow(10, -11);
const EPSILON = 2.220446049250313e-16;
const rand = n => n * random();
const randIn = (_min, _max) => rand(_max - _min) + _min;
const randRange = n => n - rand(2 * n);
const fadeIn = (t, m) => t / m;
const fadeOut = (t, m) => (m - t) / m;
const fadeInOut = (t, m) => {
    let hm = 0.5 * m;
    return abs((t + hm) % m - hm) / hm;
};
const dist = (x1, y1, x2, y2) => sqrt(pow(x2 - x1, 2) + pow(y2 - y1, 2));
const angle = (x1, y1, x2, y2) => atan2(y2 - y1, x2 - x1);
const lerp = (a, b, amt) => (1 - amt) * a + amt * b;
const vh = p => p * window.innerHeight * 0.01;
const vw = p => p * window.innerWidth * 0.01;
const vmin = p => min(vh(p), vw(p));
const vmax = p => max(vh(p), vw(p));
const clamp = (n, _min, _max) => min(max(n, _min), _max);
const norm = (n, _min, _max) => (n - _min) / (_max - _min);

Array.prototype.lerp = function(t = [], a = 0) {
    this.forEach((n, i) => (this[i] = lerp(n, t[i], a)));
};

Float32Array.prototype.get = function(i = 0, n = 0) {
    const t = i + n;

let r = [];

for (; i < t; i++) {
        r.push(this[i]);
    }

return r;
};

class PropsArray {
    constructor(count = 0, props = []) {
        this.count = count;
        this.props = props;
        this.values = new Float32Array(count * props.length);
    }
    get length() {
        return this.values.length;
    }
    set(a = [], i = 0) {
        this.values.set(a, i);
    }
    setMap(o = {}, i = 0) {
        this.set(Object.values(o), i);
    }
    get(i = 0) {
        return this.values.get(i, this.props.length);
    }
    getMap(i = 0) {
        return this.get(i).reduce(
            (r, v, i) => ({
                ...r,
                ...{
                    [this.props[i]]: v
                }
            }), {}
        );
    }
    forEach(cb) {
        let i = 0;

for (; i < this.length; i += this.props.length) {
            cb(this.get.call(this, i), i, this);
        }
    }
    map(cb) {
        let i = 0;

for (; i < this.length; i += this.props.length) {
            this.set(cb(this.get.call(this, i), i, this), i);
        }
    }
}

"use strict";

const backgroundColor = "rgba(0,0,10,0.5)";
const baseHue = rand(360);
const rangeHue = 180;
const tentacleCount = 30;
const segmentCountMin = 10;
const segmentCountMax = 20;
const segmentLengthMin = 20;
const segmentLengthMax = 40;
const colonyRadius = 200;

let canvas;
let ctx;
let center;
let mouse;
let tick;
let simplex;
let tentacle;
let tentacles;

class Tentacle {
    constructor(x, y, segmentNum, baseLength, baseDirection) {
        this.base = [x, y];
        this.position = [x, y];
        this.target = [x, y];
        this.segmentNum = segmentNum;
        this.baseLength = baseLength;
        this.baseDirection = baseDirection;
        this.segmentProps = ["x1", "y1", "x2", "y2", "l", "d", "h"];
        this.segments = new PropsArray(segmentNum, this.segmentProps);
        this.follow = false;

let i = this.segments.length - this.segmentProps.length;
        let x1, y1, x2, y2, l, d, h;

l = this.baseLength;
        d = this.baseDirection;

for (; i >= 0; i -= this.segmentProps.length) {
            x1 = x2 || this.position[0];
            y1 = y2 || this.position[1];
            x2 = x1 - l * cos(d);
            y2 = y1 - l * sin(d);
            d += 0.309;
            l *= 0.98;
            h = baseHue + fadeIn(i, this.segments.length) * rangeHue;
            this.segments.set([x1, y1, x2, y2, l, d, h], i);
        }
    }
    setCtx(ctx) {
        this.ctx = ctx;
    }
    setTarget(target) {
        this.target = target;
    }
    updateBase() {
        let t = simplex.noise3D(this.base[0] * 0.005, this.base[1] * 0.005, tick * 0.005) * TAU;

this.base.lerp([
                this.base[0] + 20 * cos(t),
                this.base[1] + 20 * sin(t)
            ],
            0.025);
    }
    async update() {
        let target = this.position;
        let i = this.segments.length - this.segmentProps.length;
        let promises = [];

this.position.lerp(this.target, 0.015);
        !this.follow && this.updateBase();

for (; i >= 0; i -= this.segmentProps.length) {
            promises.push(
                new Promise(resolve => {
                    let [x1, y1, x2, y2, l, d, h] = this.segments.get(i);
                    let t, n, tn;

x1 = target[0];
                    y1 = target[1];
                    t = angle(x1, y1, x2, y2);
                    n = simplex.noise3D(
                        x1 * 0.005,
                        y1 * 0.005,
                        (i + tick) * 0.005);

tn = t + n * PI * 0.0125;
                    x2 = x1 + l * cos(tn);
                    y2 = y1 + l * sin(tn);
                    d = t;

target = [x2, y2];

this.segments.set([x1, y1, x2, y2, l, d], i);
                    this.drawSegment(x1, y1, x2, y2, h, n, i);

resolve();
                }));

}

await Promise.all(promises);
    }
    drawSegment(x1, y1, x2, y2, h, n, i) {
        const fn = fadeInOut(1 + n, 2);
        const fa = fadeInOut(i, this.segments.length);
        const a = 0.25 * (fn + fa);

this.ctx.beginPath();
        this.ctx.strokeStyle = `hsla(${h}, 50%, 50%, ${a})`;
        this.ctx.moveTo(x2, y2);
        this.ctx.lineTo(x1, y1);
        this.ctx.stroke();
        this.ctx.beginPath();

this.ctx.closePath();
        this.ctx.strokeStyle = `hsla(${h}, 50%, 50%, ${a + 0.5})`;
        this.ctx.arc(x1, y1, fn * 3, 0, TAU);
        this.ctx.stroke();
        this.ctx.closePath();
    }
}

function setup() {
    tick = 0;
    simplex = new SimplexNoise();
    mouse = [0, 0];
    createCanvas();
    resize();
    tentacles = [];

let i, t;

for (i = 0; i < tentacleCount; i++) {
        t = i / tentacleCount * TAU;
        tentacle = new Tentacle(
            center[0] + colonyRadius * cos(rand(TAU)),
            center[1] + colonyRadius * sin(rand(TAU)),
            round(randIn(segmentCountMin, segmentCountMax)),
            round(randIn(segmentLengthMin, segmentLengthMax)),
            t);

tentacle.setCtx(ctx.a);
        tentacles.push(tentacle);
    }

loop();
}

function createCanvas() {
    canvas = {
        a: document.createElement("canvas"),
        b: document.createElement("canvas")
    };

canvas.b.style = `
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	`;
    document.body.appendChild(canvas.b);
    ctx = {
        a: canvas.a.getContext("2d"),
        b: canvas.b.getContext("2d")
    };

center = [0.5 * canvas.a.width, 0.5 * canvas.a.height];
}

function resize() {
    const {
        innerWidth,
        innerHeight
    } = window;

canvas.a.width = innerWidth;
    canvas.a.height = innerHeight;

ctx.a.drawImage(canvas.b, 0, 0);

canvas.b.width = innerWidth;
    canvas.b.height = innerHeight;

ctx.b.drawImage(canvas.a, 0, 0);

center[0] = 0.5 * canvas.a.width;
    center[1] = 0.5 * canvas.a.height;
}

function renderBackground() {
    ctx.a.clearRect(0, 0, canvas.b.width, canvas.b.height);
    ctx.b.fillStyle = backgroundColor;
    ctx.b.fillRect(0, 0, canvas.a.width, canvas.a.height);
}

function renderGlow() {
    ctx.b.save();
    ctx.b.filter = "blur(8px) brightness(200%)";
    ctx.b.globalCompositeOperation = "lighter";
    ctx.b.drawImage(canvas.a, 0, 0);
    ctx.b.restore();

ctx.b.save();
    ctx.b.filter = "blur(4px) brightness(200%)";
    ctx.b.globalCompositeOperation = "lighter";
    ctx.b.drawImage(canvas.a, 0, 0);
    ctx.b.restore();
}

function renderToScreen() {
    ctx.b.save();
    ctx.b.globalCompositeOperation = "lighter";
    ctx.b.drawImage(canvas.a, 0, 0);
    ctx.b.restore();
}

async function loop() {
    tick++;

renderBackground();

await Promise.all(tentacles.map(tentacle => tentacle.update()));

renderGlow();
    renderToScreen();

window.requestAnimationFrame(loop);
}

window.addEventListener("load", setup);
window.addEventListener("resize", resize);
window.addEventListener("mousemove", e => {
    tentacles.forEach((tentacle, i) => {
        const t = i / tentacles.length * TAU;
        tentacle.setTarget([e.clientX + colonyRadius * cos(t + tick * 0.05), e.clientY + colonyRadius * sin(t + tick * 0.05)]);
        tentacle.follow = true;
    });
});
window.addEventListener("mouseout", () => {
    tentacles.forEach(tentacle => {
        tentacle.base = [
            center[0] + colonyRadius * cos(rand(TAU)),
            center[1] + colonyRadius * sin(rand(TAU))
        ];

tentacle.setTarget(tentacle.base);
        tentacle.follow = false;
    });
});

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