☰

SECAM lines

Illusion of SECAM specific clutter for any websites you visit

  1. // ==UserScript==
  2. // @name        SECAM lines
  3. // @description Illusion of SECAM specific clutter for any websites you visit
  4. // @namespace   com.bodqhrohro.secamlines
  5. // @include     *
  6. // @version     0.0.1
  7. // @grant       none
  8. // ==/UserScript==
  9.  
  10. var SECAM_store = {}
  11.  
  12. var SECAM_randomHeight = () => (Math.random() * window.innerHeight) |0;
  13.  
  14. var SECAM_randomColor = () => {
  15.   // get hue
  16.   var colorType = Math.random();
  17.   var color = [ 0, 0, 0, 0 ];
  18.   if (colorType < 0.6) {
  19.     color[0] = 255;
  20.   } else if (colorType < 0.95) {
  21.     color[2] = 255;
  22.   } else {
  23.     color[0] = color[1] = color[2] = 232;
  24.   }
  25.  
  26.   // get brightness
  27.   var brightness = 0.5 + Math.random() / 2
  28.   color[0] *= brightness;
  29.   color[1] *= brightness;
  30.   color[2] *= brightness;
  31.  
  32.   // get transparency
  33.   color[3] = 0.2 + Math.random() * 0.8
  34.  
  35.   return 'rgba(' + color.join(',') + ')';
  36. }
  37.  
  38. var SECAM_generator = () => {
  39.   var ctx = SECAM_store.ctx;
  40.  
  41.   ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
  42.  
  43.   SECAM_store.startHeights.forEach((startHeight) => {
  44.     const linesDensity = 100;
  45.     const maxLineLength = 30;
  46.     for (var i = 0; i < linesDensity; i++) {
  47.       ctx.fillStyle = SECAM_randomColor();
  48.       ctx.fillRect(Math.random() * window.innerWidth, startHeight + Math.random() * SECAM_store.barThickness, Math.random() * maxLineLength, 2);
  49.     }
  50.   })
  51.  
  52.   window.requestAnimationFrame(SECAM_generator);
  53. }
  54.  
  55. window.addEventListener('load', () => {
  56.   var overlay = document.createElement('canvas');
  57.   document.body.appendChild(overlay);
  58.   overlay.style.position = 'fixed';
  59.   overlay.style.top = '0px';
  60.   overlay.style.left = '0px';
  61.   overlay.style.width = '100vw';
  62.   overlay.style.height = '100vh';
  63.   overlay.style.pointerEvents = 'none';
  64.   overlay.width = window.innerWidth;
  65.   overlay.height = window.innerHeight;
  66.   overlay.style.zIndex = 100500;
  67.   
  68.   SECAM_store.ctx = overlay.getContext('2d');
  69.  
  70.   // generate places for two garbled bars, regardless of resolution changes for now
  71.   SECAM_store.barThickness = 30;
  72.   var firstBarHeight = SECAM_randomHeight();
  73.   SECAM_store.startHeights = [ firstBarHeight ];
  74.   if (SECAM_store.barThickness * 2 < window.innerHeight) {
  75.     var secondBarHeight;
  76.     do {
  77.       secondBarHeight = SECAM_randomHeight();
  78.     } while (Math.abs(secondBarHeight - firstBarHeight) >= SECAM_randomHeight.barThickness);
  79.     SECAM_store.startHeights.push(secondBarHeight);
  80.   }
  81.   window.requestAnimationFrame(SECAM_generator);
  82. })