DUzun's Web
Programare, proiecte personale, divertisment

/**

 * Playing with the roots of one.

 * 

 * Web: https://codepen.io/duzun/full/PeMrNX/

 * Ported from Pascal: https://dcms.duzun.me/filebrowser.html?file=programming/pascal/graph/Armonie.pas

 */

​

/*jshint

  esversion: 6,

  browser: true

*/

//    cx,cy,ex,ey,r,o,s,ls,i: word;

//    i2, cl, k, inter: real;

​

function id(i) {

  return document.getElementById(i);

}

function log() {

  id('out').innerText += [].join.call(arguments, ', ') + '\n';

}

​

function showColor(color) {

  let c = id('color');

  c.style.backgroundColor = color;

  c.style.color = '#' + (~parseInt(color.slice(1), 16)&0xFFFFFF).toString(16).padStart(6, '0');

  c.innerText = color;

}

​

function showOrder(o) {

  let c = id('order');

  c.innerText = o;

}

​

var c = id("canvas");

var ctx = c.getContext("2d");

​

let ex = c.width / 2;

let ey = c.height / 2;

let r = (ex+ey) / 3;

​

function setCanvasSize() {

  let e = document.documentElement || document.body;

  let h = e.offsetHeight;

  let w = e.offsetWidth;

  r = Math.min(h-70, w);

  c.width = r;

  c.height = r;

  ex = r >>> 1;

  ey = r >>> 1;

  r = (ex+ey) / 3;

}

​

let inter = 0.005;  

let i2 = inter;

let k = 0;

let o = 1;

let ts = Date.now();

let s = (ts / 1e3) % 60;

let ls = s+15;

​

function repeat() {

  ts = Date.now();

  s = (ts / 1e3) % 60;

  let k1 = k;

  let n = 0;

  let color;

  do {   

    ++n;

    let cx = ex-r*Math.cos(2*Math.PI*k/o+k)/2;

    let cy = ey-r*Math.sin(2*Math.PI*k/o+k)/2;

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

      color = '#' + (((k+(i+1)*0xffff/o)+0x701000)&0xFFFFFF).toString(16).padStart(6, '0');

      ctx.beginPath();

      ctx.strokeStyle = color;

      ctx.moveTo(cx, cy);

      ctx.lineTo(cx+r*Math.cos(2*Math.PI*i/o+k), cy+r*Math.sin(2*Math.PI*i/o+k));

      // ctx.arc(ex,ey,r*3/2,0,2*Math.PI);

      ctx.stroke();

    }

    k += i2;

    if ( (ls+60-s) % 60 < 1 ) {

      ++o; 

      showOrder(o);

      i2 = inter*o;

      ls = (s+13) % 60;

      break;

    }

  } while( k - k1 < 1 );

  showColor(color);

​

  // setTimeout(repeat, 1000);

  requestAnimationFrame(repeat);

}

​

document.body.addEventListener('keydown', function(evt) {

  // log(evt.type, evt.which, evt.code, evt.charCode);

  switch(evt.code || evt.key) {

    case 'ArrowUp':   o++; break;

    case 'ArrowDown': o--; break;

  }

  if (o==0) o=1;

  i2 = inter * o;

  showOrder(o);

});

​

window.addEventListener('resize', setCanvasSize);

​

showOrder(o);

setCanvasSize();

​

repeat();

​

​