1095.js.map (10703B)
1 {"version":3,"file":"bundles/9cacd6575f4c8ee1aedb/1095.js","mappings":"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","sources":["webpack://element-web/./src/effects/hearts/index.ts"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\nCopyright 2021-2023 The Matrix.org Foundation C.I.C.\nCopyright 2022 Arseny Uskov\n\nSPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n */\nimport type ICanvasEffect from \"../ICanvasEffect\";\nimport { arrayFastClone } from \"../../utils/arrays\";\n\nexport type HeartOptions = {\n /**\n * The maximum number of hearts to render at a given time\n */\n maxCount: number;\n /**\n * The amount of gravity to apply to the hearts\n */\n gravity: number;\n /**\n * The maximum amount of drift (horizontal sway) to apply to the hearts. Each heart varies.\n */\n maxDrift: number;\n /**\n * The maximum amount of tilt to apply to the heart. Each heart varies.\n */\n maxRot: number;\n};\n\ntype Heart = {\n x: number;\n y: number;\n xCol: number;\n scale: number;\n maximumDrift: number;\n maximumRot: number;\n gravity: number;\n color: string;\n};\n\nexport const DefaultOptions: HeartOptions = {\n maxCount: 120,\n gravity: 3.2,\n maxDrift: 5,\n maxRot: 5,\n};\n\nconst KEY_FRAME_INTERVAL = 15; // 15ms, roughly\n\nexport default class Hearts implements ICanvasEffect {\n private readonly options: HeartOptions;\n\n public constructor(options: { [key: string]: any }) {\n this.options = { ...DefaultOptions, ...options };\n }\n\n private context: CanvasRenderingContext2D | null = null;\n private particles: Array<Heart> = [];\n private lastAnimationTime = 0;\n\n private colours = [\n \"rgba(194,210,224,1)\",\n \"rgba(235,214,219,1)\",\n \"rgba(255,211,45,1)\",\n \"rgba(255,190,174,1)\",\n \"rgba(255,173,226,1)\",\n \"rgba(242,114,171,1)\",\n \"rgba(228,55,116,1)\",\n \"rgba(255,86,130,1)\",\n \"rgba(244,36,57,1)\",\n \"rgba(247,126,157,1)\",\n \"rgba(243,142,140,1)\",\n \"rgba(252,116,183,1)\",\n ];\n\n public isRunning = false;\n\n public start = async (canvas: HTMLCanvasElement, timeout = 3000): Promise<void> => {\n if (!canvas) {\n return;\n }\n this.context = canvas.getContext(\"2d\");\n this.particles = [];\n const count = this.options.maxCount;\n while (this.particles.length < count) {\n this.particles.push(this.resetParticle({} as Heart, canvas.width, canvas.height));\n }\n this.isRunning = true;\n requestAnimationFrame(this.renderLoop);\n if (timeout) {\n window.setTimeout(this.stop, timeout);\n }\n };\n\n public stop = async (): Promise<void> => {\n this.isRunning = false;\n };\n\n private resetParticle = (particle: Heart, width: number, height: number): Heart => {\n particle.color = this.colours[(Math.random() * this.colours.length) | 0];\n particle.x = Math.random() * width;\n particle.y = Math.random() * height + height;\n particle.xCol = particle.x;\n particle.scale = Math.random() * 0.07 + 0.04;\n particle.maximumDrift = Math.random() * this.options.maxDrift + 3.5;\n particle.maximumRot = Math.random() * this.options.maxRot + 3.5;\n particle.gravity = this.options.gravity + Math.random() * 4.8;\n return particle;\n };\n\n private renderLoop = (): void => {\n if (!this.context || !this.context.canvas) {\n return;\n }\n if (this.particles.length === 0) {\n this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);\n } else {\n const timeDelta = Date.now() - this.lastAnimationTime;\n if (timeDelta >= KEY_FRAME_INTERVAL || !this.lastAnimationTime) {\n // Clear the screen first\n this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);\n\n this.lastAnimationTime = Date.now();\n this.animateAndRenderHearts();\n }\n requestAnimationFrame(this.renderLoop);\n }\n };\n\n private animateAndRenderHearts(): void {\n if (!this.context || !this.context.canvas) {\n return;\n }\n for (const particle of arrayFastClone(this.particles)) {\n particle.y -= particle.gravity;\n\n // We treat the drift as a sine function to have a more fluid-like movement instead\n // of a pong-like movement off walls of the X column. This means that for\n // $x=A\\sin(\\frac{2\\pi}{P}y)$ we use the `maximumDrift` as the amplitude (A) and a\n // large multiplier to create a very long waveform through P.\n const peakDistance = 75 * particle.maximumDrift;\n const PI2 = Math.PI * 2;\n particle.x = 6 * particle.maximumDrift * Math.sin(0.7 * (PI2 / peakDistance) * particle.y);\n particle.x += particle.xCol; // bring the particle to the right place\n\n const posScale = 1 / particle.scale;\n const x = particle.x * posScale;\n const y = particle.y * posScale;\n\n this.context.save();\n this.context.scale(particle.scale, particle.scale);\n this.context.beginPath();\n\n // Rotate the heart about its centre.\n // The tilt of the heart is modelled similarly to its horizontal drift,\n // using a sine function.\n this.context.translate(248 + x, 215 + y);\n this.context.rotate((1 / 10) * particle.maximumRot * Math.sin((PI2 / peakDistance) * particle.y * 0.8));\n this.context.translate(-248 - x, -215 - y);\n\n // Use bezier curves to draw a heart using pre-calculated coordinates.\n this.context.moveTo(140 + x, 20 + y);\n this.context.bezierCurveTo(73 + x, 20 + y, 20 + x, 74 + y, 20 + x, 140 + y);\n this.context.bezierCurveTo(20 + x, 275 + y, 156 + x, 310 + y, 248 + x, 443 + y);\n this.context.bezierCurveTo(336 + x, 311 + y, 477 + x, 270 + y, 477 + x, 140 + y);\n this.context.bezierCurveTo(477 + x, 74 + y, 423 + x, 20 + y, 357 + x, 20 + y);\n this.context.bezierCurveTo(309 + x, 20 + y, 267 + x, 48 + y, 248 + x, 89 + y);\n this.context.bezierCurveTo(229 + x, 48 + y, 188 + x, 20 + y, 140 + x, 20 + y);\n this.context.closePath();\n\n this.context.fillStyle = particle.color;\n this.context.fill();\n\n this.context.restore();\n\n // Remove any dead hearts after a 100px wide margin.\n if (particle.y < -100) {\n const idx = this.particles.indexOf(particle);\n this.particles.splice(idx, 1);\n }\n }\n }\n}\n"],"names":["DefaultOptions","maxCount","gravity","maxDrift","maxRot","Hearts","constructor","options","_defineProperty","async","canvas","timeout","this","context","getContext","particles","count","length","push","resetParticle","width","height","isRunning","requestAnimationFrame","renderLoop","window","setTimeout","stop","particle","color","colours","Math","random","x","y","xCol","scale","maximumDrift","maximumRot","clearRect","Date","now","lastAnimationTime","animateAndRenderHearts","_objectSpread","arrayFastClone","peakDistance","PI2","PI","sin","posScale","save","beginPath","translate","rotate","moveTo","bezierCurveTo","closePath","fillStyle","fill","restore","idx","indexOf","splice"],"sourceRoot":""}