import './lib/style';
import './main.scss';

import { sine, cosine } from './lib/wave';

const canvas = document.getElementById('js-canvas');
const ctx = canvas.getContext('2d');

const { PI: π } = Math;
const ππ = π * 2;

let fts = -1, pts = -1, dts;
let w, h, hw, hh;

let fx, fy, r = 100, p = 128;

function onResize(/*event*/) {
    const {
        innerHeight: height,
        innerWidth: width,
    } = window;

    canvas.height = h = height;
    canvas.width = w = width;
    hh = h / 2;
    hw = w / 2;

    fx = cosine(hw - r, hw + r, p);
    fy = sine(hh - r, hh + r, p);
}

window.addEventListener('resize', onResize);
onResize();

function toDeg(rad) {
    return rad * 180 / π;
}

function tick(ts) {
    // window.requestAnimationFrame(tick);

    if (fts === -1) { fts = ts; }
    ts -= fts;

    if (pts === -1) { pts = ts; }
    dts = ts - pts;

    // do work with ts or dts here
    ctx.clearRect(0, 0, w, h);
    for (let i = 0; i < p; ++i) {
        ctx.save();

        let x = fx(i);
        let y = fy(i);
        let a = Math.atan2(y - hh, x - hw);
        let h = (ππ * r) / p;

        ctx.translate(x, y);
        ctx.rotate(a);

        ctx.fillStyle = `hsl(${toDeg(a) + 90},100%,50%)`;
        ctx.fillRect(0, -h / 2, 25, h);

        ctx.restore();
    }

    pts = ts;
};

window.requestAnimationFrame(tick);

@@ -268,39 +268,8 @@
 h;%0A%0A
-let fx, fy, r = 100, p = 128;%0A%0A
 func
@@ -477,79 +477,8 @@
 / 2;
-%0A%0A    fx = cosine(hw - r, hw + r, p);%0A    fy = sine(hh - r, hh + r, p);
 %0A%7D%0A%0A
@@ -609,19 +609,16 @@
 s) %7B%0A   
- //
  window.
@@ -727,24 +727,24 @@
 pts = ts; %7D%0A
+
     dts = ts
@@ -756,432 +756,8 @@
 s;%0A%0A
-    // do work with ts or dts here%0A    ctx.clearRect(0, 0, w, h);%0A    for (let i = 0; i %3C p; ++i) %7B%0A        ctx.save();%0A%0A        let x = fx(i);%0A        let y = fy(i);%0A        let a = Math.atan2(y - hh, x - hw);%0A        let h = (%CF%80%CF%80 * r) / p;%0A%0A        ctx.translate(x, y);%0A        ctx.rotate(a);%0A%0A        ctx.fillStyle = %60hsl($%7BtoDeg(a) + 90%7D,100%25,50%25)%60;%0A        ctx.fillRect(0, -h / 2, 25, h);%0A%0A        ctx.restore();%0A    %7D%0A%0A
     

reset to blank canvas