bg.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. export function bgStart () {
  2. // Little Canvas things
  3. var canvas = document.querySelector('#canvas')
  4. var ctx = canvas.getContext('2d')
  5. // Set Canvas to be window size
  6. canvas.width = window.innerWidth
  7. canvas.height = window.innerHeight
  8. // Configuration, Play with these
  9. var config = {
  10. particleNumber: 800,
  11. maxParticleSize: 10,
  12. maxSpeed: 40,
  13. colorVariation: 50
  14. }
  15. // Colors
  16. var colorPalette = {
  17. bg: { r: 12, g: 9, b: 29 },
  18. matter: [
  19. { r: 36, g: 18, b: 42 }, // darkPRPL
  20. { r: 78, g: 36, b: 42 }, // rockDust
  21. { r: 252, g: 178, b: 96 }, // solorFlare
  22. { r: 253, g: 238, b: 152 } // totesASun
  23. ]
  24. }
  25. // Some Variables hanging out
  26. var particles = []
  27. var centerX = canvas.width / 2
  28. var centerY = canvas.height / 2
  29. var drawBg
  30. // Draws the background for the canvas, because space
  31. var drawBg = function (ctx, color) {
  32. ctx.fillStyle = 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')'
  33. ctx.fillRect(0, 0, canvas.width, canvas.height)
  34. }
  35. // Particle Constructor
  36. var Particle = function (x, y) {
  37. // X Coordinate
  38. this.x = x || Math.round(Math.random() * canvas.width)
  39. // Y Coordinate
  40. this.y = y || Math.round(Math.random() * canvas.height)
  41. // Radius of the space dust
  42. this.r = Math.ceil(Math.random() * config.maxParticleSize)
  43. // Color of the rock, given some randomness
  44. this.c = colorVariation(colorPalette.matter[Math.floor(Math.random() * colorPalette.matter.length)], true)
  45. // Speed of which the rock travels
  46. this.s = Math.pow(Math.ceil(Math.random() * config.maxSpeed), 0.7)
  47. // Direction the Rock flies
  48. this.d = Math.round(Math.random() * 360)
  49. }
  50. // Provides some nice color variation
  51. // Accepts an rgba object
  52. // returns a modified rgba object or a rgba string if true is passed in for argument 2
  53. var colorVariation = function (color, returnString) {
  54. var r, g, b, a, variation
  55. r = Math.round(((Math.random() * config.colorVariation) - (config.colorVariation / 2)) + color.r)
  56. g = Math.round(((Math.random() * config.colorVariation) - (config.colorVariation / 2)) + color.g)
  57. b = Math.round(((Math.random() * config.colorVariation) - (config.colorVariation / 2)) + color.b)
  58. a = Math.random() + 0.5
  59. if (returnString) {
  60. return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'
  61. } else {
  62. return { r, g, b, a }
  63. }
  64. }
  65. // Used to find the rocks next point in space, accounting for speed and direction
  66. var updateParticleModel = function (p) {
  67. var a = 180 - (p.d + 90) // find the 3rd angle
  68. p.d > 0 && p.d < 180 ? p.x += p.s * Math.sin(p.d) / Math.sin(p.s) : p.x -= p.s * Math.sin(p.d) / Math.sin(p.s)
  69. p.d > 90 && p.d < 270 ? p.y += p.s * Math.sin(a) / Math.sin(p.s) : p.y -= p.s * Math.sin(a) / Math.sin(p.s)
  70. return p
  71. }
  72. // Just the function that physically draws the particles
  73. // Physically? sure why not, physically.
  74. var drawParticle = function (x, y, r, c) {
  75. ctx.beginPath()
  76. ctx.fillStyle = c
  77. ctx.arc(x, y, r, 0, 2 * Math.PI, false)
  78. ctx.fill()
  79. ctx.closePath()
  80. }
  81. // Remove particles that aren't on the canvas
  82. var cleanUpArray = function () {
  83. particles = particles.filter((p) => {
  84. return (p.x > -100 && p.y > -100)
  85. })
  86. }
  87. var initParticles = function (numParticles, x, y) {
  88. for (let i = 0; i < numParticles; i++) {
  89. particles.push(new Particle(x, y))
  90. }
  91. particles.forEach((p) => {
  92. drawParticle(p.x, p.y, p.r, p.c)
  93. })
  94. }
  95. // That thing
  96. window.requestAnimFrame = (function () {
  97. return window.requestAnimationFrame ||
  98. window.webkitRequestAnimationFrame ||
  99. window.mozRequestAnimationFrame ||
  100. function (callback) {
  101. window.setTimeout(callback, 1000 / 60)
  102. }
  103. })()
  104. // Our Frame function
  105. var frame = function () {
  106. // Draw background first
  107. drawBg(ctx, colorPalette.bg)
  108. // Update Particle models to new position
  109. particles.map((p) => {
  110. return updateParticleModel(p)
  111. })
  112. // Draw em'
  113. particles.forEach((p) => {
  114. drawParticle(p.x, p.y, p.r, p.c)
  115. })
  116. // Play the same song? Ok!
  117. window.requestAnimFrame(frame)
  118. }
  119. // Click listener
  120. document.body.addEventListener('click', function (event) {
  121. var x = event.clientX
  122. var y = event.clientY
  123. cleanUpArray()
  124. initParticles(config.particleNumber, x, y)
  125. })
  126. // First Frame
  127. frame()
  128. // First particle explosion
  129. initParticles(config.particleNumber)
  130. }