Canvas 彩虹圆点正弦波动

Canvas Rainbow Pastel Sine Wave

canvas，wave

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),
    opts = {

md: false,

distanceMultiplier: 0.1,
        waveMultiplier: -0.03,

repaintAlpha: 1,

dotDist: 30,

dotBaseSize: 7.5,
        dotWavedSize: 2.5,
        dotBaseWaveIncrementer: 0.04,
        dotAddedWaveIncrementer: 0.02,
        dotTickMultiplier: 0.3,

dotTemplateString: 'hsl(hue, 100%, 80%)',

cenX: w / 2,
        cenY: h / 2
    },
    tick = 0,
    dots = [],
    wave;

function loop() {

window.requestAnimationFrame(loop);

step();
    draw();
}

function step() {

++tick;

wave = Math.sin(tick * opts.waveMultiplier);

dots.map(function(dot) {
        return dot.step();
    });
}

function draw() {

ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);
    ctx.fillRect(0, 0, w, h);

dots.map(function(dot) {
        return dot.draw();
    });
}

function init() {

dots.length = 0;

for (var i = 0; i < w; i += opts.dotDist)
        for (var j = 0; j < h; j += opts.dotDist) dots.push(new Dot(i, j));
}

function Dot(x, y) {

this.x = x;
    this.y = y;

this.sizeIncrementer = Math.random() * Math.PI;
    this.waveIncrementer = Math.random() * opts.dotBaseWaveIncrementer + opts.dotAddedWaveIncrementer;

this.reassignCenter();
    this.step();
    this.draw();
}
Dot.prototype.reassignCenter = function() {

this.dx = opts.cenX - this.x;
    this.dy = opts.cenY - this.y;
    this.dist = Math.sqrt(this.dx * this.dx + this.dy * this.dy);
};
Dot.prototype.step = function() {

this.change = Math.sin(tick * opts.dotTickMultiplier + this.dist * opts.waveMultiplier) * opts.distanceMultiplier;

this.sizeIncrementer += this.waveIncrementer;
};
Dot.prototype.draw = function() {

ctx.fillStyle = opts.dotTemplateString.replace('hue', this.dist + tick);
    ctx.beginPath();
    ctx.arc(this.x + this.dx * this.change, this.y + this.dy * this.change, opts.dotBaseSize + Math.sin(this.sizeIncrementer) * opts.dotWavedSize, 0, Math.PI * 2);
    ctx.fill();
};

init();
loop();

window.addEventListener('resize', function() {

w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;

opts.cenX = w / 2;
    opts.cenY = h / 2;

init();
});

window.addEventListener('mousedown', function() {

opts.md = true;
});
window.addEventListener('mouseup', function() {

opts.md = false;
});

window.addEventListener('mousemove', function(e) {

if (!opts.md) return;

opts.cenX = e.clientX;
    opts.cenY = e.clientY;

dots.map(function(dot) {
        return dot.reassignCenter();
    });
});

编译

CSS

HTML

Canvas Rainbow Pastel Sine Wave

canvas，wave

编辑器支持Emmet

快捷键

Canvas Rainbow Pastel Sine Wave

canvas，wave

Canvas 正弦波生成器

Canvas 藤形闪电

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：