html 曲线动画,HTML5曲线分形动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

document.addEventListener('DOMContentLoaded', function() {

/* i love DOM */

var canvas = document.createElement('canvas');

document.body.appendChild(canvas);

document.body.style.padding = '0px';

document.body.style.margin = '0px';

document.body.style.overflow = 'hidden';

/* i love full screen */

var w = canvas.width = window.innerWidth;

var h = canvas.height = window.innerHeight;

var ctx = canvas.getContext('2d');

/* i love bad short opts ^__^ like q or qwe */

var opts = {};

var gui = new dat.GUI();

function opt(name, value, min, max) {

opts[name] = value;

return gui.add(opts, name, min, max);

}

/*

if code.before > ugly -> just.dont.read(below) // below worse...

==== let's begin. ====

*/

opt('rect', true);

opt('s', 0.216, 0.01, 0.36).random = true;

opt('s2', 0.25, 0, 0.5).random = true;

opt('s3', 0.5, 0, 2).random = true;

opt('limit', 5, 1, 8).step(1);

opt('random', true);

opt('speed', 0.05, 0, 1);

function lerp2(a, b, p, s) {

var x = b[0] - a[0];

var y = b[1] - a[1];

return [

a[0] + x * p + -y * s,

a[1] + y * p + x * s,

];

}

function drawCurve(a, b, c) {

if (opts.rect) {

ctx.moveTo(a[0], a[1]);

ctx.quadraticCurveTo(b[0], b[1], c[0], c[1]);

} else {

ctx.moveTo(a[0], a[1]);

ctx.lineTo(b[0], b[1]);

ctx.lineTo(c[0], c[1]);

}

}

function drawIt(a, b, limit) {

if (--limit < 0)

return;

let s = opts.s;

let m = lerp2(a, b, 0.5, 0);

let c = lerp2(a, b, 0.5 - opts.s2, s);

let d = lerp2(a, b, 0.5 - opts.s2, -s);

let e = lerp2(a, b, 0.5 + opts.s2, s);

let f = lerp2(a, b, 0.5 + opts.s2, -s);

a = lerp2(c, d, 0.5, -opts.s3);

b = lerp2(e, f, 0.5, opts.s3);

ctx.beginPath();

drawCurve(c, a, d);

drawCurve(d, m, c);

drawCurve(e, b, f);

drawCurve(f, m, e);

drawCurve(c, m, e);

drawCurve(d, m, f);

ctx.stroke();

drawIt(c, d, limit);

drawIt(e, f, limit);

}

function loop() {

ctx.clearRect(0, 0, w, h);

drawIt([0, h / 2], [w, h / 2], opts.limit);

for (var i = 0; i < gui.__controllers.length && opts.random; ++i) {

var t = gui.__controllers[i];

if (!t.random)

continue;

t.setValue(opts[t.property] * (1 - opts.speed) + t.newValue * opts.speed);

}

requestAnimationFrame(loop);

}

function random() {

for (var i = 0; i < gui.__controllers.length; ++i) {

var t = gui.__controllers[i];

if (!t.random)

continue;

if (t.oldValue === undefined)

t.oldValue = opts[t.property];

t.newValue = (t.__max - t.__min) * Math.random() + t.__min;

}

}

setInterval(random, 1000);

random();

loop();

}, false);