在HTML5 Canvas 2D上绘制云雾中的电流动画特效

可以用来构造电子云图动画。

canvas, particle

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

ctrl = {
    numParticles: 35,
    maxRadius: 80,
    hue: 220,
    hueRange: 15,
    fade: 0.36,
    halo: true,
    zappy: true,
    zapComplexity: 1
}

var gui = new dat.GUI();
gui.add(ctrl, 'numParticles', 1, 150).step(1);
gui.add(ctrl, 'maxRadius', 30, 150).step(1);
gui.add(ctrl, 'hue', 0, 359).step(1);
gui.add(ctrl, 'hueRange', 0, 180).step(1);
gui.add(ctrl, 'fade', 0, 0.4).step(0.001);
gui.add(ctrl, 'zapComplexity', 0, 4).step(1);
gui.add(ctrl, 'halo');
// gui.add(ctrl, 'zappy');

// create a canvas element
var canvas = document.createElement("canvas")

// attach element to DOM
document.body.appendChild(canvas)

// background color [r, g, b] 
var bg = [10, 10, 30]

var wh = window.innerHeight
    // get the canvas context (this is the part we draw to)
var ctx = canvas.getContext("2d")

function setup() {
    // setup the canvas size to match the window
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight

wh = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight

// set the 0,0 point to the middle of the canvas, this is not necessary but it can be handy
    ctx.translate(canvas.width / 2, canvas.height / 2)

fill(bg, 1)
}

// fill entire canvas with a preset color
function fill(rgb, amt) {
    ctx.beginPath(); // start path
    ctx.rect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height) // set rectangle to be the same size as the window
    ctx.fillStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${amt})` // use the rgb array/color for fill, and amt for opacity
    ctx.fill() // do the drawing
}

function drawCircle(x, y, r, color) {
    ctx.beginPath()
    ctx.arc(x, y, r, 0, 2 * Math.PI)
    ctx.fillStyle = color || 'white'
    ctx.fill()
    ctx.closePath()
}

function Particle() {
    // initialize loopers with random trange and offset
    this.loop1 = new Looper(1200 + 200 * Math.random(), 9000 * Math.random())
    this.loop2 = new Looper(880 + 950 * Math.random(), 9000 * Math.random())
    this.loop3 = new Looper(550 + 920 * Math.random(), 9000 * Math.random())
    this.history = []
    this.history_max = 1
    this.c = ``
    this.hsv = {}
    this.offset = Math.random() // some color offset for the color
    this.signals = 0 // count connection - update every frame
    this.sstrength = 0 // running average using signals

this.destroy = function() {
        this.loop1 = null
        this.loop2 = null
        this.loop3 = null
        this.history = null
        this.history_max = null
        this.c = null
        this.hsv = null
        this.offset = null
        delete this
    }

this.draw = function() {

this.sstrength = this.signals * 0.02 + this.sstrength * 0.91;

this.loop1.update() // update looper
        this.loop2.update() // update looper
        this.loop3.update() // update looper

// set x,y, radius, and color params
        var x = this.loop1.sin * (canvas.width / 4) + this.loop2.sin * (canvas.width / 3) * this.loop3.cos * this.loop2.sin
        var y = this.loop1.cos * (canvas.height / 4) + this.loop2.cos * (canvas.height / 3) * this.loop3.cos * this.loop2.sin
            // var r = 0.2 + 3 * this.loop1.sinNorm * this.loop2.sinNorm // set the radius
        this.hsv = {
            // this is where we set the color...
            h: ctrl.hue + ctrl.hueRange * (this.loop3.cosNorm + this.offset) * this.loop2.sinNorm,
            // the saturation depends on the loop
            s: 80 + 7 * this.loop1.sinNorm,
            // ..and so does the value - we want to keep that close to 50%
            v: 70 + 5 * this.loop3.sin
        }
        this.c = `hsla(${this.hsv.h}, ${this.hsv.s}%, ${this.hsv.v}%, ${1})`

if (ctrl.halo) {
            var grd = ctx.createRadialGradient(Math.round(x), Math.round(y), 0, Math.round(x), Math.round(y), ctrl.maxRadius);
            grd.addColorStop(0.0, `hsla(${this.hsv.h}, ${this.hsv.s}%, ${this.hsv.v}%, ${0.1 * this.sstrength})`);
            // grd.addColorStop(0.2, `hsla(${this.hsv.h}, ${this.hsv.s}%, ${this.hsv.v}%, ${0.03 * this.sstrength})`);
            grd.addColorStop(0.9, `hsla(${this.hsv.h}, ${this.hsv.s}%, ${this.hsv.v}%, ${0})`);
            drawCircle(x, y, ctrl.maxRadius, grd); // draw the circle  
        }

this.history = [
            [x, y]
        ]
        this.signals = 0;
    }

this.addSignal = function() {
        this.signals++;
    }
}

// initialize a set of particle
var particles = []

function draw() {
    // fill context with background color 
    fill(bg, ctrl.fade)

//add particles
    while (particles.length < ctrl.numParticles) {
        particles.push(new Particle())
    }
    // drop old particles
    while (particles.length >= ctrl.numParticles) {
        particles.pop().destroy()
    }

var x0
    var y0
    var x1
    var y1
    var d
    var r = ctrl.maxRadius * ctrl.maxRadius
    var s

// update all the particles
    for (var i = 0; i < particles.length; i++) {
        particles[i].draw() // do it once

for (var j = 0; j < i; j++) {
            if (particles[j] && particles[j].history && particles[j].history.length > 0) {

x0 = particles[i].history[0][0]
                y0 = particles[i].history[0][1]
                x1 = particles[j].history[0][0]
                y1 = particles[j].history[0][1]
                d = (x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0)
                if (d < r && d > 50) {

particles[i].addSignal();
                    particles[j].addSignal();

s = 1 - Math.sin(d / r * d / r * Math.PI / 2)

if (!ctrl.zappy) {
                        // straight line
                        ctx.beginPath();
                        ctx.moveTo(x0, y0);
                        ctx.lineTo(x1, y1);
                        ctx.lineWidth = s * 1.6;
                        ctx.strokeStyle = particles[i].c
                        ctx.stroke()
                        ctx.closePath()
                    } else {
                        // zappy line
                        var iterations = [{
                            x: x0,
                            y: y0
                        }, {
                            x: x1,
                            y: y1
                        }]
                        var newiterations, ii, ij
                        for (ii = 0; ii < ctrl.zapComplexity; ii++) {
                            newiterations = [iterations[0]]
                            for (ij = 1; ij < iterations.length; ij++) {
                                newiterations.push(getRandMidpoint(iterations[ij - 1], iterations[ij], ctrl.maxRadius / 3 / (ii * ii + 1) * (1 - s * 0.7)))
                                newiterations.push(iterations[ij])
                            }
                            iterations = newiterations.concat([])
                        }
                        ctx.beginPath();
                        ctx.moveTo(iterations[0].x, iterations[0].y);
                        ctx.lineWidth = s * 1.6;
                        ctx.strokeStyle = particles[i].c
                        for (ii = 1; ii < iterations.length; ii++) {
                            ctx.lineTo(iterations[ii].x, iterations[ii].y);
                        }
                        ctx.stroke()
                        ctx.closePath()
                    }
                }
            }
        }
    }

// this is a draw loop, this will execute frequently and is comparable to EnterFrame on other platform
    window.requestAnimationFrame(function() {
        draw()
    })
}

// start enterFrame loop
window.requestAnimationFrame(draw);

// force running setup
setup()

// re-setup canvas when the size of the window changes 
window.addEventListener("resize", setup)

// create a class to hold value and have built in incrementing functionality
function Looper(steps, start) {
    this.val = start || 0 // set value to start value if defined, or 1
    this.steps = steps || 100 // set steps to passed value or default to 100
    this.norm = this.val / this.range // initialize normalized value (between 0 and 1)
    this.sin = Math.sin(this.norm * Math.PI * 2) // get sine value from norm normalized to [0, 2PI]
    this.sinNorm = (this.sin + 1) / 2 // normalize sin to [0,1]
    this.cos = Math.cos(this.norm * Math.PI * 2) // get cosine value from norm normalized to [0, 2PI]
    this.cosNorm = (this.cos + 1) / 2 // normalize cos to [0,1]

this.update = function() {
        this.val = (this.val + 1) % this.steps // update value
        this.norm = this.val / this.steps // update normalize value (between 0 and 1)
        this.sin = Math.sin(this.norm * Math.PI * 2) // get sine value from norm normalized to [0, 2PI]
        this.sinNorm = (this.sin + 1) / 2 // normalize sine to [0,1]
        this.cos = Math.cos(this.norm * Math.PI * 2) // get cosine value from norm normalized to [0, 2PI]
        this.cosNorm = (this.cos + 1) / 2 // normalize cos to [0,1]
    }
}

function getRandMidpoint(pa, pb, range) {
    var a = Math.atan2(pb.y - pa.y, pb.x - pa.x) + Math.PI / 2
    var half = {
        y: (pb.y - pa.y) / 2 + pa.y,
        x: (pb.x - pa.x) / 2 + pa.x
    }
    var offset = Math.random() * range - range / 2
    var ho = {
        x: Math.cos(a) * offset + half.x,
        y: Math.sin(a) * offset + half.y
    }
    return ho
}

编译

CSS

HTML

可以用来构造电子云图动画。

canvas, particle

编辑器支持Emmet

快捷键

可以用来构造电子云图动画。

canvas, particle

HTML5 Canvas 模拟汤汁泼溅在玻璃上的弹性炸开动画特效

HTML5 Canvas 粒子化（电流）404页面动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：