bg3.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. export function bgStart(){
  2. // modified version of random-normal
  3. 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}
  4. const NUM_PARTICLES = 100;
  5. const PARTICLE_SIZE = 0.5; // View heights
  6. const SPEED = 10000; // Milliseconds
  7. let particles = [];
  8. function rand(low, high) {
  9. return Math.random() * (high - low) + low;
  10. }
  11. function createParticle(canvas) {
  12. const colour = {
  13. r: 255,
  14. g: randomNormal({ mean: 125, dev: 20 }),
  15. b: 50,
  16. a: rand(0, 1),
  17. };
  18. return {
  19. x: -2,
  20. y: -2,
  21. diameter: Math.max(0, randomNormal({ mean: PARTICLE_SIZE, dev: PARTICLE_SIZE / 2 })),
  22. duration: randomNormal({ mean: SPEED, dev: SPEED * 0.1 }),
  23. amplitude: randomNormal({ mean: 16, dev: 2 }),
  24. offsetY: randomNormal({ mean: 0, dev: 10 }),
  25. arc: Math.PI * 2,
  26. startTime: performance.now() - rand(0, SPEED),
  27. colour: `rgba(${colour.r}, ${colour.g}, ${colour.b}, ${colour.a})`,
  28. }
  29. }
  30. function moveParticle(particle, canvas, time) {
  31. const progress = ((time - particle.startTime) % particle.duration) / particle.duration;
  32. return {
  33. ...particle,
  34. x: progress,
  35. y: ((Math.sin(progress * particle.arc) * particle.amplitude) + particle.offsetY),
  36. };
  37. }
  38. function drawParticle(particle, canvas, ctx) {
  39. canvas = document.getElementById('canvas');
  40. const vh = canvas.height / 100;
  41. ctx.fillStyle = particle.colour;
  42. ctx.beginPath();
  43. ctx.ellipse(
  44. particle.x * canvas.width,
  45. particle.y * vh + (canvas.height / 2),
  46. particle.diameter * vh,
  47. particle.diameter * vh,
  48. 0,
  49. 0,
  50. 2 * Math.PI
  51. );
  52. ctx.fill();
  53. }
  54. function draw(time, canvas, ctx) {
  55. // Move particles
  56. particles.forEach((particle, index) => {
  57. particles[index] = moveParticle(particle, canvas, time);
  58. })
  59. // Clear the canvas
  60. ctx.clearRect(0, 0, canvas.width, canvas.height);
  61. // Draw the particles
  62. particles.forEach((particle) => {
  63. drawParticle(particle, canvas, ctx);
  64. })
  65. // Schedule next frame
  66. requestAnimationFrame((time) => draw(time, canvas, ctx));
  67. }
  68. function initializeCanvas() {
  69. let canvas = document.getElementById('canvas');
  70. canvas.width = canvas.offsetWidth * window.devicePixelRatio;
  71. canvas.height = canvas.offsetHeight * window.devicePixelRatio;
  72. canvas.style.background = 'linear-gradient(to bottom, rgb(10, 10, 50) 0%,rgb(60, 10, 60) 100%)'
  73. canvas.style.verticalAlign = 'middle'
  74. canvas.overflow = 'hidden'
  75. let ctx = canvas.getContext("2d");
  76. window.addEventListener('onresize', () => {
  77. canvas.width = canvas.offsetWidth * window.devicePixelRatio;
  78. canvas.height = canvas.offsetHeight * window.devicePixelRatio;
  79. canvas.style.background = 'linear-gradient(to bottom, rgb(10, 10, 50) 0%,rgb(60, 10, 60) 100%)'
  80. canvas.style.verticalAlign = 'middle'
  81. canvas.overflow = 'hidden'
  82. ctx = canvas.getContext("2d");
  83. })
  84. return [canvas, ctx];
  85. }
  86. function startAnimation() {
  87. const [canvas, ctx] = initializeCanvas();
  88. // Create a bunch of particles
  89. for (let i = 0; i < NUM_PARTICLES; i++) {
  90. particles.push(createParticle(canvas));
  91. }
  92. requestAnimationFrame((time) => draw(time, canvas, ctx));
  93. };
  94. // Start animation when document is loaded
  95. (function () {
  96. if (document.readystate !== 'loading') {
  97. startAnimation();
  98. } else {
  99. document.addEventListener('DOMContentLoaded', () => {
  100. startAnimation();
  101. })
  102. }
  103. }());
  104. }