html彩色条 html5 canvas彩色流动线条动画特效

特效描述：html5 canvas 彩色流动线条 动画特效。html5彩色线条动画,流动线条特效

代码结构

1. 引入JS

2. HTML代码

'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var ui = {};

var count = 150;

var particles = [];

var mouseVisible = false;

var mouse = undefined;

var voronoi = undefined;

var canvas = undefined;

function setup() {

canvas = createCanvas(windowWidth, windowHeight);

canvas.elt.onmouseenter = mouseEnter.bind(null, true);

canvas.elt.onmouseleave = mouseEnter.bind(null, false);

ui.particles = createCheckbox('Particles', true);

ui.trail = createCheckbox('Trails', true);

ui.mouse = createCheckbox('Mouse', false);

ui.voronoi = createCheckbox('Voronoi', false);

ui.addParticle = createButton('Add 10 Particles');

ui.addParticle.mousePressed(function () {

for (var i = 0; i < 10; i++) {

addParticle();

}

});

var optionsContainer = document.getElementById('options');

Object.values(ui).forEach(function (n) {

return optionsContainer.appendChild(n.elt);

});

fillBackground();

colorMode(HSB);

for (var i = 0; i < count; i++) {

addParticle();

}

setupVoronoi();

}

function addParticle() {

var particle = new Particle();

particle.pos.set(random(width), random(height));

particles.push(particle);

return particle;

}

function setupVoronoi() {

voronoi = d3.voronoi().extent([[0, 0], [width, height]]);

}

function fillBackground() {

background(0);

}

function draw() {

if (ui.trail.checked()) {

fill(0, 0.05);

noStroke();

rect(0, 0, width, height);

} else {

fillBackground();

}

if (ui.mouse.checked() && mouseVisible) {

mouse = createVector(mouseX, mouseY);

}

if (ui.voronoi.checked()) {

drawVoronoi();

}

handleParticles();

}

function mouseEnter(visibility) {

mouseVisible = visibility;

}

function windowResized() {

resizeCanvas(windowWidth, windowHeight);

setupVoronoi();

}

function drawVoronoi() {

noFill();

stroke(255, 0.2);

var points = particles.map(function (n) {

return n.point();

});

var v = voronoi(points);

beginShape(LINES);

v.edges.forEach(function (n) {

vertex.apply(undefined, n[0]);

vertex.apply(undefined, n[1]);

});

endShape();

}

function handleParticles() {

noStroke();

var z = frameCount / 400;

particles.forEach(function (n, i) {

var heading = n.vel.heading();

if (ui.particles.checked()) {

var hu = map(heading, -PI, PI, 0, 360);

fill(hu, 100, 100);

n.show();

}

var noiseInfluence = noise(n.pos.x / 100, n.pos.y / 100, z);

var force = map(noiseInfluence, 0.3, 0.7, 0, TAU);

var f = p5.Vector.fromAngle(force).setMag(0.03);

n.applyForce(f);

if (ui.mouse.checked()) {

applyMouseInfluence(n);

}

n.update();

n.edges();

});

}

function applyMouseInfluence(particle) {

if (mouseVisible) {

var force = p5.Vector.sub(mouse, particle.pos);

var f = force.setMag(0.035);

particle.applyForce(f);

}

}

var Particle = function () {

function Particle() {

_classCallCheck(this, Particle);

this.pos = createVector(0, 0);

this.acc = createVector(0, 0);

this.vel = createVector(0, 0);

}

Particle.prototype.applyForce = function applyForce() {

var _acc;

(_acc = this.acc).add.apply(_acc, arguments);

};

Particle.prototype.update = function update() {

this.vel.add(this.acc);

this.acc.mult(0);

this.pos.add(this.vel);

this.vel.mult(0.99);

};

Particle.prototype.edges = function edges() {

if (this.pos.x < 0) {

this.pos.x += width;

} else if (this.pos.x > width) {

this.pos.x -= width;

}

if (this.pos.y < 0) {

this.pos.y += height;

} else if (this.pos.y > height) {

this.pos.y -= height;

}

};

Particle.prototype.point = function point() {

var _this = this;

return ['x', 'y'].map(function (n) {

return _this.pos[n];

});

};

Particle.prototype.vertex = function (_vertex) {

function vertex() {

return _vertex.apply(this, arguments);

}

vertex.toString = function () {

return _vertex.toString();

};

return vertex;

}(function () {

vertex.apply(undefined, this.point());

});

Particle.prototype.show = function show() {

// point(...this.point());

ellipse.apply(undefined, this.point().concat([4]));

};

return Particle;

}();