canvas实现聚烯烃动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现聚烯烃动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; background-color: #ffe; margin:0; padding:0; border-width:0; overflow:hidden; } canvas { position: absolute; top: 0; left: 0; } div { position: absolute; top: 0; left: 0; width : 100vw; height: 100vh; transition: background-color 1.5s linear; } </style> </head> <body > <script > "use strict"; /* Author : Claude Chauvet (https://codepen.io/Dillo) /* very much inspired by mandala vı https://codepen.io/smlsvnssn/pen/VQwyJN by smlsvnssn (@smlsvnssn) */ window.addEventListener("load", function () { const mrandom = Math.random; const mfloor = Math.floor; const mround = Math.round; const mceil = Math.ceil; const mabs = Math.abs; const mmin = Math.min; const mmax = Math.max; const mPI = Math.PI; const mPIS2 = Math.PI / 2; const m2PI = Math.PI * 2; const msin = Math.sin; const mcos = Math.cos; const matan2 = Math.atan2; const mhypot = Math.hypot; const msqrt = Math.sqrt; let maxx, maxy; let repeat, nbPoly, polyodous; let tx, ty; // tables of cosines / sines let withBlur; /* ============================================================================ This hash function is based upon Johannes Baagoe's carefully designed and efficient hash function for use with JavaScript. It has a proven "avalanche" effect such that every bit of the input affects every bit of the output 50% of the time, which is good. See: http://baagoe.com/en/RandomMusings/hash/avalanche.xhtml ============================================================================ */ /* This function returns a hash function depending on a seed. if no seed is provided (or a falsy value), Math.random() is used. The returned function always returns the same number in the range [0..1[ for the same value of the argument. This argument may be a String or a Number or anything else which can be 'toStringed' Two returned functions obtained with two equal seeds are equivalent. */ function hashFunction(seed) { let n0 = 0xefc8249d; let n = n0; mash(seed || Math.random()); // pre-compute n for seed n0 = n; // function mash(data) { data = data.toString() + 'U'; n = n0; for (let i = 0; i < data.length; i++) { n += data.charCodeAt(i); var h = 0.02519603282416938 * n; n = h >>> 0; h -= n; h *= n; n = h >>> 0; h -= n; n += h * 0x100000000; // 2^32 } // for return (n >>> 0) * 2.3283064365386963e-10; // 2^-32 } // mash return mash; } // hashFunction(seed) // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function alea(min, max) { // random number [min..max[ . If no max is provided, [0..min[ if (typeof max == 'undefined') return min * mrandom(); return min + (max - min) * mrandom(); } // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function intAlea(min, max) { // random integer number [min..max[ . If no max is provided, [0..min[ if (typeof max == 'undefined') { max = min;min = 0; } return mfloor(min + (max - min) * mrandom()); } // intAlea // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function Noise1D(period, min = 0, max = 1, hash) { /* returns a 1D noise function. the (mandatory) hash function must return a value between 0 and 1. The hash function will be called with an integer number for a parameter. the returned function takes one parameter, and will always return the same value if called with the same parameter period should be > 1. The bigger period is, the smoother the output noise is suggestion : the hash parameter could be a function returned from a call to hashFunction above */ let currx, y0, y1; // cached valued, to reduce number of calls to 'hash' let phase = hash(0); // to shift the phase of different generators between each other; return function (x) { let xx = x / period + phase; let intx = mfloor(xx); if (intx - 1 === currx) {// next integer interval ++currx; y0 = y1; y1 = min + (max - min) * hash(currx + 1); } else if (intx !== currx) {// unrelated interval currx = intx; y0 = min + (max - min) * hash(currx); y1 = min + (max - min) * hash(currx + 1); } let frac = xx - currx; let z = (3 - 2 * frac) * frac * frac; return z * y1 + (1 - z) * y0; }; } // Noise1D //--------------------------------------------------------------------- class Polyodous { constructor(radius, repeat) { this.r1 = radius; this.genr2 = Noise1D(intAlea(4000, 6000), 0.316, 0.95, hashFunction()); // will be squares => 0.1 to 0.9 this.repeat = repeat; this.style = [0, 0, 1, 1, 2, 3][intAlea(6)]; // 0: lines, 1: Bézier quadratic, 2: Bézier cubic, 3: other Bézier quadratic this.ang0 = intAlea(2); // for a random half-period shift this.color = `hsl(${intAlea(360)}, ${[50, 75, 100, 100][intAlea(4)]}%, ${intAlea(40, 60)}%)`; this.x = []; this.y = []; for (let k = 0; k <= repeat; ++k) { this.x[k] = this.r1 * tx[2 * k + this.ang0] + maxx / 2; this.y[k] = this.r1 * ty[2 * k + this.ang0] + maxy / 2; } if (this.style == 2) { this.xc1 = []; this.yc1 = []; this.xc2 = []; this.yc2 = []; let l = this.r1 * m2PI / repeat / 3; // length of bezier controls at tips for (let k = 0; k <= repeat + 1; ++k) { this.xc1[k] = this.x[k] + l * ty[2 * k + this.ang0]; this.yc1[k] = this.y[k] - l * tx[2 * k + this.ang0]; this.xc2[k] = this.x[k] - l * ty[2 * k + this.ang0]; this.yc2[k] = this.y[k] + l * tx[2 * k + this.ang0]; } } } // constru.........完整代码请登录后点击上方下载按钮下载查看
网友评论0