HTML5/Canvas 流动的变形圆形

Flowing transforming circle 可以用来构造彩色飘浮在空中的丝巾、头巾等。

html5, flow

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3893
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/**
 * inspired by:
 * Rectangle World
 * http://rectangleworld.com/blog/archives/462
 */

// http://stackoverflow.com/a/5624139/5930258
const hexToRgb = (hex) => {
    let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;

hex = hex.replace(shorthandRegex, (m, r, g, b) => {
        return r + r + g + g + b + b;
    });

let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

return result ? [
        parseInt(result[1], 16),
        parseInt(result[2], 16),
        parseInt(result[3], 16)
    ] : null;
}

const canvas = document.querySelector('.mycanvas');
const ctx = canvas.getContext('2d');

let winWidth;
let winHeight;

let midX;
let midY;

let tick;

let rafId;

class Circle {
    constructor(options) {
        this.assign(options);

return this;
    }

create() {
        this.points = [];
        this.radius = (this.grow) ? 0 : this.radius;

let angle = 0;
        let step = (Math.PI * 2) / this.segments;

for (let i = 0; i < this.segments; i++) {
            let x = this.x + (Math.cos(angle) * this.radius);
            let y = this.y + (Math.sin(angle) * this.radius);

this.points.push({
                x, y, angle
            });

angle += step;
        }

return this;
    }

update(x, y, endX) {
        this.x = x;
        this.y = y;

if (this.grow) {
            this.radius = Math.max(0, this.maxRadius * (x / endX));
        }
    }

updatePoint(p, tick, baseX, baseY) {
        p.x = Math.cos(p.angle);
        p.y = Math.sin(p.angle);

let smoothness = 1;
        let nx = p.x * smoothness;
        let ny = p.x * smoothness; // x intentionally
        let radius = this.radius + this.getNoise(tick + nx, tick + ny);

p.x *= radius;
        p.y *= radius;

p.x += baseX;
        p.y += baseY;
    }

getNoise(a, b) {
        const max = this.radius * 1.5;
        const n = noise.perlin2(a, b);

// map between -1, 1
        return (n + 1) * (max + max) / 2 - max;
    }

assign(options) {
        Object.assign(this, options);
        this.maxRadius = this.radius;

this.reset();
    }

reset() {
        this.create();
    }

// when setting a rgb value ([r, g, b]) directly in dat.ui, it sometimes returns a hex
    // so, input a hex by default and convert it manually to rgb
    set color1(c1) {
        let rgb = hexToRgb(c1).join(', ');

this._color1 = c1;
        this.rgb1 = `rgba(${rgb}, ${this.alpha})`;
    }

set color2(c2) {
        let rgb = hexToRgb(c2).join(', ');

this._color2 = c2;
        this.rgb2 = `rgba(${rgb}, ${this.alpha})`;
    }

get color1() {
        return this._color1;
    }

get color2() {
        return this._color2;
    }

get rgba1() {
        return this.rgb1;
    }

get rgba2() {
        return this.rgb2;
    }
}

const assignColors = () => {
    circle.color1 = options.color1;
    circle.color2 = options.color2;
    circle.alpha = options.alpha;
}

const setupStage = () => {
    winWidth = window.innerWidth;
    winHeight = window.innerHeight;

midX = winWidth >> 1;
    midY = winHeight >> 1;

tick = performance.now();

ctx.clearRect(0, 0, winWidth, winHeight);

ctx.canvas.width = winWidth;
    ctx.canvas.height = winHeight;
}

const redraw = () => {
    setupStage();

circle.assign(options);
}

const loop = () => {
    tick += options.randomness;

circle.update(circle.x + 1.5, midY + ((midY / 2) * noise.perlin2(tick * 0.75, tick)), winWidth);

let currX = circle.x;
    let currY = circle.y;

let grad = ctx.createLinearGradient(-circle.radius, currY, circle.radius, currY);
    grad.addColorStop(0, circle.rgba1);
    grad.addColorStop(1, circle.rgba2);

ctx.strokeStyle = grad;
    ctx.lineWidth = options.lineWidth;

ctx.save();
    ctx.translate(currX, currY);

circle.points.forEach((point, index) => {
        ctx.beginPath();

ctx.moveTo(point.x - currX, point.y - currY);

circle.updatePoint(point, tick, currX, currY);

ctx.lineTo(point.x - currX, point.y - currY);

ctx.stroke();
        ctx.closePath();
    });

ctx.restore();

rafId = requestAnimationFrame(loop);
}

window.addEventListener('resize', redraw);

setupStage();

let options = {
    segments: 1000,
    radius: 150,
    x: -100,
    y: midY,
    grow: false,
    radius: 130,
    color1: '#d2205e',
    color2: '#29cafc',
    alpha: 0.1,
    randomness: 0.005,
    lineWidth: 1.01
};

let circle = new Circle(options);

noise.seed(Math.random());
redraw();
loop();

let gui = new dat.GUI();
let folderColor = gui.addFolder('Appearance');
let folderSettings = gui.addFolder('Circle settings');

folderColor.addColor(options, 'color1').onChange(assignColors);
folderColor.addColor(options, 'color2').onChange(assignColors);
folderColor.add(options, 'alpha').step(0.001).min(0.01).max(1).onChange(assignColors);
folderColor.add(options, 'lineWidth').step(0.01).min(1.01).max(5);

folderSettings.add(options, 'segments', 100, 1500).step(1).onFinishChange(redraw);
folderSettings.add(options, 'grow').onFinishChange(redraw);

gui.add({
    redraw
}, 'redraw');
folderColor.open();
gui.close();

编译

CSS

HTML

Flowing transforming circle 可以用来构造彩色飘浮在空中的丝巾、头巾等。

html5, flow

编辑器支持Emmet

快捷键

Flowing transforming circle 可以用来构造彩色飘浮在空中的丝巾、头巾等。

html5, flow

HTML5 Canvas圆圈里面的三角形变换动画

HTML5/Canvas使用单纯形噪音算法实现的粒子乱流动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：