const sin = [

0,1,1,2,2,3,3,4,4,5,5,6,6,6,7,7,7,8,8,8,8,9,9,9,9,9,9,9,

9,9,9,9,9,9,9,9,9,9,9,8,8,8,8,7,7,7,6,6,5,5,5,4,4,3,3,2,2,

1,1,0,0,-1,-1,-2,-2,-3,-3,-4,-4,-4,-5,-5,-6,-6,-7,-7,-7,-8,

-8,-8,-9,-9,-9,-9,-10,-10,-10,-10,-10,-10,-10,-10,-10,-10,

-10,-10,-10,-10,-10,-10,-10,-10,-9,-9,-9,-9,-8,-8,-8,-7,-7,

-6,-6,-6,-5,-5,-4,-4,-3,-3,-2,-2,-1,-1,0];

const c = document.body.appendChild(

  document.createElement('canvas')

).getContext('2d');

const size = 200;

c.canvas.width = c.canvas.height = size;

let x = 0;

let tick = 0;

let xOff = 30;

let lines = 14;

let pad = 10;

let stagger = 8;

const loop = () => {

  tick++;

  c.fillStyle = 'red';

  c.fillRect(0, 0, size, size);

  c.fillStyle = 'white';

  for (let i = 0; i < size; i++) {

    for (let j = 1; j < lines; j++) { 

      x = xOff + sin[(i + j * stagger + tick) % 125];

      c.fillRect(x + j * pad, i, 1, 1);

    }

  }

  requestAnimationFrame(loop);

};

loop()

N = 8 // try changing this

b = document.body

b.innerHTML += 'Drag any slider<br>'

for (i = N; i--;) 

  b.innerHTML += `<input id=${i} value=0 type=range style=width:200px;display:block>`

onchange = oninput = e => {

  t = e.target

  for (i = N; i--;) 

    t.id != i && (

      self[i].value = 100 * Math.sin(t.value / 60 * i))

}

const _100 = 100;

const count = i => {

  document.body.innerHTML += 

    _100.toString(i) + ` :: ... ${i}<br>`

  i++ < 36 && count(i)

}

count(2)

// multiply math random by another math random:

const value = Math.random() * Math.random() * 10;

// This makes it less likely that `value` will be 10

// the more times you multiply, the less likely you will be to reach

// the maximum potential value

const value = Math.random() * Math.random() * Math.random() * 10;

function rand(n = 1, f = 1) {

  let value = 1;

  for (let i = 0; i < n; i++) {

    value *= Math.random();

  }

  // fixing the value so that it fits

  // nicely as a key in the hash table

  // hash = {

  //   0.2: 5,

  //   0.9: 8,

  //   etc...

  // }

  return value.toFixed(f);

}

function histo(n = 1, f = 2, off, iter = 1500, size = 70) {

  const vals = {};

  const canvas = document.createElement('canvas');

  const c = canvas.getContext('2d');

  canvas.width = canvas.height = size;

  canvas.style.margin = '.5em';

  document.body.appendChild(canvas);

  for (let i = 0; i < iter; i++) {

    const randNum = off ? off - rand(n, f) : rand(n, f);

    if (vals[randNum] == null) {

      vals[randNum] = 1;

    } else {

      vals[randNum]++;

    }

  }

  c.fillStyle = '#ccc';

  c.fillRect(0, 0, size, size);

  c.strokeRect(0, 0, size, size);

  for (let i in vals) {

    const x = parseFloat(i) * size;

    c.beginPath();

    c.moveTo(x, size);

    c.lineTo(x, size - vals[i]);

    c.stroke();

  }

}

histo();

histo(2);

histo(3, 2, 1);

histo(5, 2, 1);

histo(6, 2, 0, 500);

const aOrB = /\b(a|b)\b/g;

const fn = '(b > .5) ? (max(a, 2. * (b - .5))) : (min(a, 2. * b))'

const r = fn.replace(aOrB, '$1.r');

const g = fn.replace(aOrB, '$1.g');

const b = fn.replace(aOrB, '$1.b');

console.log(r);

console.log(g);

console.log(b);