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