anyone good at javascript want to help convert a cool animation to QB64PE?

[madscijr]

I came across this animation code at codepen, it doesn't look like a lot of code, but I'm sufficiently rusty/inept at JavaScript that converting it to QB64PE is not happening. 
In any case check it out, it's pretty neat...

Code: (Select All)

// inversion by yuku
// JavaScript from
// https://codepen.io/yukulele/pen/qEEvrmO
// See also WebGL version (better perf!):
// https://codepen.io/yukulele/pen/oggVygw

"use strict";
window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 6000;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d", { alpha: false });
let w; //wiewport width
let h; //wiewport height
let zoomFactor = 0;
let zoom = 1;
let imageData = ctx.createImageData(100, 100);
document.body.appendChild(canvas);

const r = 250;
const r2 = r * r;
function draw() {
  const c = 20 * zoom;
  const now = performance.now() / 1000;
  for (let x = 0; x < w; x++) {
    const x0 = x - w / 2;
    const x2 = x0 * x0;
    for (let y = 0; y <= h / 2; y++) {
      const y0 = y - h / 2;
      const f = r2 / (x2 + y0 * y0);
      const x1 = x0 * f;
      const y1 = y0 * f;
      const cx = Math.cos(now + x1 / c / 10);
      const cy = Math.cos(y1 / c / 10);
      const hue = Math.floor((cx - cy) * 9) / 9;

      const rgb = hueToRGB(hue, 1, 0.5);

      imageData.data[(y * w + x) * 4 + 0] = rgb[0];
      imageData.data[(y * w + x) * 4 + 1] = rgb[1];
      imageData.data[(y * w + x) * 4 + 2] = rgb[2];

      imageData.data[((h - y) * w + x) * 4 + 0] = rgb[0];
      imageData.data[((h - y) * w + x) * 4 + 1] = rgb[1];
      imageData.data[((h - y) * w + x) * 4 + 2] = rgb[2];
      ctx.fillStyle = `hsl(${hue * 360}, 100%, 50%)`;
      ctx.fillRect(x, y, 1, 1);
    }
  }

  ctx.putImageData(imageData, 0, 0);
}

function resize() {
  w = canvas.width = Math.round((window.innerWidth * devicePixelRatio) / 3);
  h = canvas.height = Math.round((window.innerHeight * devicePixelRatio) / 3);
  imageData = ctx.createImageData(w, h);
  imageData.data.fill(255);
  draw();
}

async function loop() {
  draw();
  requestAnimationFrame(loop);
}

window.addEventListener("resize", resize);
resize();
loop();

/**
* @param   Number  h       The hue
* @return  Array           The RGB representation
*/
function hueToRGB(h) {
  const r = hue2rgb(h + 1 / 3);
  const g = hue2rgb(h);
  const b = hue2rgb(h - 1 / 3);

  return [r * 255, g * 255, b * 255];
}
function hue2rgb(t) {
  t = ((t % 1) + 1) % 1;
  if (t < 1 / 6) return 6 * t;
  if (t < 1 / 2) return 1;
  if (t < 2 / 3) return 4 - t * 6;
  return 0;
}

addEventListener("dblclick", () => {
  document.fullscreenElement
    ? document.exitFullscreen()
    : canvas.requestFullscreen();
});

document.addEventListener("wheel", (event) => {
  zoomFactor += event.deltaY;
  zoom = 1.0005 ** zoomFactor;
});