123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- export function bgStart(){
- // modified version of random-normal
- function normalPool(o){var r=0;do{var a=Math.round(normal({mean:o.mean,dev:o.dev}));if(a<o.pool.length&&a>=0)return o.pool[a];r++}while(r<100)}function randomNormal(o){if(o=Object.assign({mean:0,dev:1,pool:[]},o),Array.isArray(o.pool)&&o.pool.length>0)return normalPool(o);var r,a,n,e,l=o.mean,t=o.dev;do{r=(a=2*Math.random()-1)*a+(n=2*Math.random()-1)*n}while(r>=1);return e=a*Math.sqrt(-2*Math.log(r)/r),t*e+l}
-
- const NUM_PARTICLES = 100;
- const PARTICLE_SIZE = 0.5; // View heights
- const SPEED = 10000; // Milliseconds
-
- let particles = [];
-
- function rand(low, high) {
- return Math.random() * (high - low) + low;
- }
-
- function createParticle(canvas) {
- const colour = {
- r: 255,
- g: randomNormal({ mean: 125, dev: 20 }),
- b: 50,
- a: rand(0, 1),
- };
- return {
- x: -2,
- y: -2,
- diameter: Math.max(0, randomNormal({ mean: PARTICLE_SIZE, dev: PARTICLE_SIZE / 2 })),
- duration: randomNormal({ mean: SPEED, dev: SPEED * 0.1 }),
- amplitude: randomNormal({ mean: 16, dev: 2 }),
- offsetY: randomNormal({ mean: 0, dev: 10 }),
- arc: Math.PI * 2,
- startTime: performance.now() - rand(0, SPEED),
- colour: `rgba(${colour.r}, ${colour.g}, ${colour.b}, ${colour.a})`,
- }
- }
-
- function moveParticle(particle, canvas, time) {
- const progress = ((time - particle.startTime) % particle.duration) / particle.duration;
- return {
- ...particle,
- x: progress,
- y: ((Math.sin(progress * particle.arc) * particle.amplitude) + particle.offsetY),
- };
- }
-
- function drawParticle(particle, canvas, ctx) {
- canvas = document.getElementById('canvas');
- const vh = canvas.height / 100;
-
- ctx.fillStyle = particle.colour;
- ctx.beginPath();
- ctx.ellipse(
- particle.x * canvas.width,
- particle.y * vh + (canvas.height / 2),
- particle.diameter * vh,
- particle.diameter * vh,
- 0,
- 0,
- 2 * Math.PI
- );
- ctx.fill();
- }
-
- function draw(time, canvas, ctx) {
- // Move particles
- particles.forEach((particle, index) => {
- particles[index] = moveParticle(particle, canvas, time);
- })
-
- // Clear the canvas
- ctx.clearRect(0, 0, canvas.width, canvas.height);
-
- // Draw the particles
- particles.forEach((particle) => {
- drawParticle(particle, canvas, ctx);
- })
-
- // Schedule next frame
- requestAnimationFrame((time) => draw(time, canvas, ctx));
- }
-
- function initializeCanvas() {
- let canvas = document.getElementById('canvas');
- canvas.width = canvas.offsetWidth * window.devicePixelRatio;
- canvas.height = canvas.offsetHeight * window.devicePixelRatio;
- canvas.style.background = 'linear-gradient(to bottom, rgb(10, 10, 50) 0%,rgb(60, 10, 60) 100%)'
- canvas.style.verticalAlign = 'middle'
- canvas.overflow = 'hidden'
- let ctx = canvas.getContext("2d");
-
- window.addEventListener('onresize', () => {
- canvas.width = canvas.offsetWidth * window.devicePixelRatio;
- canvas.height = canvas.offsetHeight * window.devicePixelRatio;
- canvas.style.background = 'linear-gradient(to bottom, rgb(10, 10, 50) 0%,rgb(60, 10, 60) 100%)'
- canvas.style.verticalAlign = 'middle'
- canvas.overflow = 'hidden'
- ctx = canvas.getContext("2d");
- })
-
- return [canvas, ctx];
- }
-
- function startAnimation() {
- const [canvas, ctx] = initializeCanvas();
-
- // Create a bunch of particles
- for (let i = 0; i < NUM_PARTICLES; i++) {
- particles.push(createParticle(canvas));
- }
-
- requestAnimationFrame((time) => draw(time, canvas, ctx));
- };
-
- // Start animation when document is loaded
- (function () {
- if (document.readystate !== 'loading') {
- startAnimation();
- } else {
- document.addEventListener('DOMContentLoaded', () => {
- startAnimation();
- })
- }
- }());
- }
|