const SCREEN_WIDTH = 600;
const SCREEN_HEIGHT = 600;
const PIXEL_SIZE = 10;
const FRAME = 60

game.width = SCREEN_WIDTH;
game.height = SCREEN_HEIGHT;

const ctx = game.getContext("2d");

function drawBackground() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
}

function drawPixel({x, y}) {
  ctx.fillStyle = "blue";
  ctx.fillRect(x * SCREEN_WIDTH, y * SCREEN_HEIGHT, PIXEL_SIZE, PIXEL_SIZE);
}

function normazlie({x, y}) {
  return {
    x: ((x + 1) / 2),
    y: (1 - ((y + 1) / 2)),
  }
}

function threeDtotwoD({x, y, z}) {
  return {
    x: x/z,
    y: y/z
  }
}

function drawLine({x, y}, {x2, y2}) {
  console.log("Hello", x,y, x2,y2);
  ctx.beginPath();
  ctx.moveTo(x * SCREEN_WIDTH, y * SCREEN_HEIGHT);
  ctx.lineTo(x2 * SCREEN_WIDTH, y2* SCREEN_HEIGHT);
  ctx.lineWidth = 3;
  ctx.strokeStyle = "red";
  ctx.stroke();
}

const test = 0;
const points = [
  {x: -0.25,  y:  0.25,  z: 0.5 + test},
  {x: -0.25,  y: -0.25,  z: 0.5 + test},
  {x:  0.25,  y: -0.25,  z: 0.5 + test},
  {x:  0.25,  y:  0.25,  z: 0.5 + test},

  {x: -0.25,  y:  0.25,  z:  -0.5 + test},
  {x: -0.25,  y: -0.25,  z:  -0.5 + test},
  {x:  0.25,  y: -0.25,  z:  -0.5 + test},
  {x:  0.25,  y:  0.25,  z:  -0.5 + test},
]
const vortexs = [
  [0, 1, 2, 3],
  [4, 5, 6, 7],
  [0, 4],
  [1, 5],
  [2, 6],
  [3, 7],
]

function rotate_xz({x,y,z}, angle) {
  return {
    x: x * Math.cos(angle) - z*Math.sin(angle),
    y: y,
    z: x * Math.sin(angle) + z*Math.cos(angle),
  }
}

function move_z(point, dz) {
  return {...point, z: point.z + dz}
}

let dz = 0;
let dt = 1/FRAME;
let angle = 0;

function drawAnimation() {
  drawBackground();
  dz += 1 * dt;
  // angle += 2*Math.PI*dt;
  angle = 0;
  for (var vortex of vortexs)
  {
    for (let i = 0; i < vortex.length; i++)
    {
      const newPoint = normazlie(
          threeDtotwoD(
            move_z(rotate_xz(points[vortex[(i+1)%vortex.length]], angle), dz)
          )
        );

      drawLine(
        normazlie(
          threeDtotwoD(
            move_z(rotate_xz(points[vortex[i]], angle), dz)
          )
        ),
        {x2: newPoint.x, y2: newPoint.y}
      );
    }
  }
  setTimeout(() => drawAnimation(), 1000/60)
}

drawAnimation()