wtc-math实现鲜花绽放动画效果代码
代码语言:html
所属分类:动画
代码描述:wtc-math实现鲜花绽放动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; } canvas { height: 100vh; width: 100vw; } </style> </head> <body> <script type="module"> import { Vec2, Vec3, Vec4 } from 'https://cdn.skypack.dev/wtc-math'; import { floatRandomBetween, clamp, lerp, hash21, precisionRound, fract, xmur3 } from 'https://cdn.skypack.dev/@liamegan1/le-utils@0.0.1'; console.clear(); const c = document.createElement('canvas'); c.width = window.innerWidth * 2; c.height = window.innerHeight * 2; const ctx = c.getContext('2d'); document.body.appendChild(c); const dimensions = new Vec2(c.width, c.height); let lastFlower; function newFlower() {var _lastFlower; if ((_lastFlower = lastFlower) !== null && _lastFlower !== void 0 && _lastFlower.playing) lastFlower.playing = false; ctx.fillStyle = '#222A33'; ctx.fillRect(0, 0, c.width, c.height); console.clear(); let pistilRadius = floatRandomBetween(30, 100); let petalSets = Math.floor(Math.random() * 2. + 1.); let petalsets = []; let petalColour; let petalColour2; const differentColours = Math.random() > .5; for (let i = 0; i < petalSets; i++) { if (i == 0 || differentColours) { petalColour = new Vec4(Math.random(), Math.random(), Math.random(), 1.); petalColour2 = petalColour.scaleNew(.5); } if (Math.random() < .5) petalColour2 = petalColour.scaleNew(.1); if (Math.random() < .5) petalColour2 = new Vec4(Math.random(), Math.random(), Math.random(), 1.); let petals = Math.floor(floatRandomBetween(5, 20)); let petalSize = floatRandomBetween(50, 200); let petalWidth = randomBetweenWithinRatio(.05, 1., petalSize, 100); let petalSoftness = floatRandomBetween(0, 1.5); let petalRoundness = floatRandomBetween(0, 1.5); let angle = floatRandomBetween(-Math.PI, Math.PI); let angle2 = angle + floatRandomBetween(0., 1.); if (Math.random() < .6) angle2 = angle; let stamen = Math.random() < .7; let stamenNum = Math.floor(floatRandomBetween(3., petals)); let stamenColour = new Vec4(Math.floor(Math.random() * 3. + .5, 1.), Math.floor(Math.random() * 3. + .5, 1.), Math.floor(Math.random() * 1.5, 1.), 1.); petalsets.push({ petalColour, petalColour2, petals, petalSize, petalWidth, petalSoftness, petalRoundness, angle, angle2, stamen, stamenNum, stamenColour }); } // console.log(JSON.stringify({ // petalsets, // pistilRadius // })); /* const obj = JSON.parse('{"petalsets":[{"petalColour":{"_x":0.477852237205874,"_y":0.4820507679496153,"_z":0.9334362669733784,"_w":0.01},"petalColour2":{"_x":0.6241541587391757,"_y":0.6101617046100201,"_z":0.8805453640242542,"_w":0.01},"petals":6,"petalSize":150,"petalWidth":0.6,"petalSoftness":0.5,"petalRoundness":0.2}],"pistilRadius":90.76264998849118}'); for (let i in obj.petalsets[0]) { if(obj.petalsets[0][i]._x) { obj.petalsets[0][i] = new Vec4(obj.petalsets[0][i]._x, obj.petalsets[0][i]._y, obj.petalsets[0][i]._z, obj.petalsets[0][i]._w); } } lastFlower = buildFlower(obj); */ const obj = { petalsets, pistilRadius }; if (Math.random() < .2) { obj.pistilColour = new Vec4(.4, .2, .1, 1); obj.pistilColour2 = new Vec4(-.5, -.5, -.5, 1); } lastFlower = buildFlower(obj); } window.addEventListener('resize', () => { c.width = window.innerWidth * 2; c.height = window.innerHeight * 2; dimensions.reset(c.width, c.height); newFlower(); }); function clampVec4(v) { return new Vec4(clamp(0., 1., v.x), clamp(0., 1., v.y), clamp(0., 1., v.z), clamp(0., 1., v.w)); } function vec4ToRGBA(v) { v = clampVec4(v); return `RGBA(${Math.floor(v.x * 255)}, ${Math.floor(v.y * 255)}, ${Math.floor(v.z * 255)}, ${v.w})`; } const buildFlower = function ({ pos = dimensions.scaleNew(.5), petalsets = [{ petals: 6, petalSize: 100, petalSize2: 0, petalColour: new Vec4(.8, .6, 1, 1), petalColour2: petalColour.scaleNew(.7), petalWidth: .9, petalWidth2: 0, petalSoftness: .5, petalRoundness: .2 }], pistilRadius = 60, pistilRadius2 = 0, pistilColour = new Vec4(1, .7, .4, 1), pistilColour2 = pistilColour.scaleNew(2.5), animationTime = 1000 } = {}) { let maxWidth = 0; const petalCanvases = []; petalsets.forEach(petal => { const c = document.createElement('canvas'); c.width = (pistilRadius + petal.petalSize) * 2 + 100; c.height = (pistilRadius + petal.petalSize) * 2 + 100; maxWidth = Math.max(c.width, maxWidth); const offset = c.width * .5; const ctx = c.getContext('2d'); petalCanvases.push({ c: c, ctx: ctx, offset: offset }); }); const pistilCanvas = document.createElement('canvas'); pistilCanvas.width = maxWidth; pistilCanvas.height = maxWidth; const pistilCOffset = pistilCanvas.width * .5; const pistilCTX = pistilCanvas.getContext('2d'); const reference = { playing: true }; let lastTime; function draw(delta) { if (!reference.playing) return; if (!lastTime) { lastTime = delta; } const t = delta - lastTime; const l = t / animationTime; const petalL = clamp(0., 1., l * 1.5 - .5); let _pistilRadius = lerp(0, pistilRadius, clamp(0, 1, l * 2.)); let _pistilColour = Vec4.lerp(petalsets[0].petalColour, pistilColour, petalL); const shadeL = clamp(0, 1, l - 1.); _pistilColour = Vec4.lerp(_pistilColour, pistilColour2, shadeL); _pistilRadius = lerp(_pistilRadius, pistilRadius2, shadeL); petalsets.forEach((petalset, pi) => { let { petals, petalSize, petalSize2 = 0, petalColour, petalColour2 = petalColour, petalWidth, petalWidth2 = 0, petalSoftness, petalRoundness, angle, a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0