trail.js 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. 'use strict';
  2. var canvas, context, particles, SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, RADIUS = 60, RADIUS_SCALE = 1, RADIUS_SCALE_MIN = 1, RADIUS_SCALE_MAX = 1.5, QUANTITY = 25, mouseX = 0.5 * SCREEN_WIDTH, mouseY = 0.5 * SCREEN_HEIGHT, mouseIsDown = !1;
  3. function init() {
  4. (canvas = document.getElementById('world')) && canvas.getContext && (context = canvas.getContext('2d'), document.addEventListener('mousemove', documentMouseMoveHandler, !1), document.addEventListener('mousedown', documentMouseDownHandler, !1), document.addEventListener('mouseup', documentMouseUpHandler, !1), document.addEventListener('touchstart', documentTouchStartHandler, !1), document.addEventListener('touchmove', documentTouchMoveHandler, !1), window.addEventListener('resize', windowResizeHandler, !1), createParticles(), windowResizeHandler(), setInterval(loop, 1000 / 60));
  5. }
  6. function createParticles() {
  7. particles = [];
  8. for (var e = 0; e < QUANTITY; e++) {
  9. var t = {
  10. position: {
  11. x: mouseX,
  12. y: mouseY
  13. },
  14. shift: {
  15. x: mouseX,
  16. y: mouseY
  17. },
  18. size: 1,
  19. angle: 0,
  20. speed: 0.01 + 0.04 * Math.random(),
  21. targetSize: 1,
  22. fillColor: '#' + (4210752 * Math.random() + 11184810 | 0).toString(16),
  23. orbit: 0.5 * RADIUS + 0.5 * RADIUS * Math.random()
  24. };
  25. particles.push(t);
  26. }
  27. }
  28. function documentMouseMoveHandler(e) {
  29. mouseX = e.clientX, mouseY = e.clientY;
  30. }
  31. function documentMouseDownHandler(e) {
  32. mouseIsDown = !0;
  33. }
  34. function documentMouseUpHandler(e) {
  35. mouseIsDown = !1;
  36. }
  37. function documentTouchStartHandler(e) {
  38. 1 == e.touches.length && (e.preventDefault(), mouseX = e.touches[0].pageX - 0.5 * (window.innerWidth - SCREEN_WIDTH), mouseY = e.touches[0].pageY - 0.5 * (window.innerHeight - SCREEN_HEIGHT));
  39. }
  40. function documentTouchMoveHandler(e) {
  41. 1 == e.touches.length && (e.preventDefault(), mouseX = e.touches[0].pageX - 0.5 * (window.innerWidth - SCREEN_WIDTH), mouseY = e.touches[0].pageY - 0.5 * (window.innerHeight - SCREEN_HEIGHT));
  42. }
  43. function windowResizeHandler() {
  44. SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, canvas.width = SCREEN_WIDTH, canvas.height = SCREEN_HEIGHT;
  45. }
  46. function loop() {
  47. for (context.shadowBlur = 3, mouseIsDown ? RADIUS_SCALE += 0.02 * (RADIUS_SCALE_MAX - RADIUS_SCALE) : RADIUS_SCALE -= 0.02 * (RADIUS_SCALE - RADIUS_SCALE_MIN), RADIUS_SCALE = Math.min(RADIUS_SCALE, RADIUS_SCALE_MAX), i = 0, len = particles.length; i < len; i++) {
  48. var e = particles[i];
  49. e.angle += e.speed, e.shift.x += (mouseX - e.shift.x) * e.speed, e.shift.y += (mouseY - e.shift.y) * e.speed, e.position.x = e.shift.x + Math.cos(i + e.angle) * (e.orbit * RADIUS_SCALE), e.position.y = e.shift.y + Math.sin(i + e.angle) * (e.orbit * RADIUS_SCALE), e.position.x = Math.max(Math.min(e.position.x, SCREEN_WIDTH), 0), e.position.y = Math.max(Math.min(e.position.y, SCREEN_HEIGHT), 0), e.size += 0.05 * (e.targetSize - e.size), Math.round(e.size) == Math.round(e.targetSize) && (e.targetSize = 1 + 7 * Math.random()), context.beginPath(), context.fillStyle = e.fillColor, context.moveTo(e.position.x, e.position.y), context.arc(e.position.x, e.position.y, e.size, 0, 2 * Math.PI, !0), context.fill();
  50. }
  51. }
  52. init();