indexqeqwe14 35.html

<html>
  <style>
    /*  */
    html {
    height: 100%;
    margin: 0;
    }
    /* make the canvas fill its container */
    #c {
      width: 100%;
      height: 100%;
      display: block;
    }
  </style>
  <div class="divcanvas">
    <canvas id="c"></canvas>
  </div>
</html>

<script id="fs">#version 300 es // specifies the newest version of WebGL
precision highp float; // sets floats to high precision

uniform vec4 iWorld[24];
uniform vec3 iLights[3];

uniform vec2 iResolution; // passed in from JavaScript, holds the resolution of the canvas it's displaying on
uniform vec2 iSong; 
uniform float iTime; // passed in from JavaScript, records how many milliseconds the code has been running for

// output for the fragment shader
out vec4 outColour; //(r,g,b), opacity

// randomizer function (found online)
float nrand(vec2 p)
{
  vec3 p3  = fract(vec3(p.xyx) * .1031);
    p3 += dot(p3, p3.yzx + 33.33);
    return fract((p3.x + p3.y) * p3.z);
}

// randomizer function that changes from frame to frame
// takes a seed to make individual draws different
float trand(vec2 n, float seed)
{
    return nrand(n * seed * iTime) * 2.0 - 1.0;
}

vec3 lessRandomInSphere(vec2 uv, float seed){
    // this is doing rejection sampling, which is simple but not super efficient
    vec3 p;
    do {
        p = vec3(nrand(uv * seed),
                 nrand(uv * 2.333 * seed),
                 nrand(uv * -1.134 * seed))  * 2.0 - 1.0;
    } while (dot(p, p) >= 1.0);
    return p;
}
vec3 randomInSphere(vec2 uv, float seed){
    // this is doing rejection sampling, which is simple but not super efficient
    vec3 p;
    do {
        p = vec3(trand(uv, seed),
                 trand(uv, 2.333*seed),
                 trand(uv, -1.134*seed));
        seed *= 1.312;
    } while (dot(p, p) >= 1.0);
    return p;
}
struct Ray { // variable structure for the ray
  vec3 origin; // origin is the 3d location it started at
  vec3 direction; // 3d vector of where it's directed
};

struct Hit { // variable structure to store information when the ray hits something
  vec3 p; // the 3d position of where the ray intersected with something
  vec3 normal; // surface normal where ray hit. directly away from the object. needed for calculating reflections
  float t; // how far along the rays path the intersect occured
  bool inside; // if the ray hit the outside or inside of an object
  int object; // array id of object hit
};

struct Material { // material structure for objects
  vec3 colour; // r,g,b colour of the material
  float shiny; // how reflective it is
};

struct Sphere { // sphere object
    vec3 centre; // 3d position of where the centre of the sphere is
    float radius; // radius of sphere
    Material mat; // the material of the sphere
};

struct Camera { // camera structure
   vec3 location; // 3d location of where the camera is
   float focalDistance; // how wide the fov of the camera is
};
    
Camera cam = Camera( 
    vec3(0.0, 1.0, 10.0), // location of camera
    -2.0 // needs to be negative or the camera will be facing the opposite way expected
);

const int matsLength = 8;//iMats.length();
Material Mats[matsLength] = Material[matsLength](
  Material( vec3(0.8, 0.0, 0.2), 0.2),
  Material( vec3(0.3, 0.3, 0.3), 0.8),
  Material( vec3(0.2, 0.2, 0.2), 0.7), //ground
  Material( vec3(0.9, 0.0, 0.0), -1.0), //s1
  Material( vec3(0.8, 0.3, 0.0), -1.0), //s2
  Material( vec3(0.0, 0.0, 0.9), -1.0), //s3
  Material( vec3(0.2, 0.2, 0.4), 0.3), // ship
  Material( vec3(0.2, 0.2, 0.4), 0.3) // ship
);

// calculates the ray from the camera position and the offset (for anti aliasing)
Ray GetRay (Camera camera, vec2 shift) { 
  vec3 pixelTargetUV = vec3(
    (gl_FragCoord.xy/iResolution.xy) * 2.0 - 1.0,
    camera.focalDistance
  ); // x,y direction from [-1,1]
  
  shift /= iResolution.xy;
  shift *= 2.0 - 1.0;
  pixelTargetUV.xy += shift;
  pixelTargetUV += camera.location;
  float aspectRatio = iResolution.x / iResolution.y;
  pixelTargetUV.x *= aspectRatio;
  vec3 rayDir = normalize(pixelTargetUV - camera.location);
  return Ray(camera.location, rayDir);
}
    
vec3 at (in Ray r, float t) { // location of ray at t value 
  return vec3(r.origin + r.direction * t);
}

//////////////////////////////////////////////////////////////////////////
const float AAthreshold = 1.3; // 0.3 is good
const float SamplesPerPixel = 16.0;
const float BounceLimit = 5.0;

const int WorldLength = iWorld.length();

Sphere World[WorldLength] = Sphere[WorldLength]( 
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 1.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 200.0, Material(vec3(0.2,0.2,0.2), 0.5)),
    Sphere( vec3(0.0,0.0,0.0), 0.5, Material(vec3(0.2,0.2,0.2), 0.5)), //sl
    Sphere( vec3(0.0,0.0,0.0), 0.5, Material(vec3(0.2,0.2,0.2), 0.5)), //sr
    Sphere( vec3(0.0,0.0,0.0), 0.8, Material(vec3(0.2,0.2,0.2), 0.5)), //sm
    Sphere( vec3(55.0,20.0,-100.0), 10.0, Material(vec3(0.5,0.0,0.7), 0.5)), // sun purple
    Sphere( vec3(45.0,20.0,-100.0), 10.0, Material(vec3(0.8,0.6,0.0), 0.5)), // sun yellow
    Sphere( vec3(35.0,20.0,-100.0), 10.0, Material(vec3(0.6, 0.0, 0.7), 0.5)), // sun orang
    Sphere( vec3(0.0, -500,0.0), 1000.0, Material(vec3(0.2,0.2,0.2), 0.7))  // ground
);

const int LightLength = iLights.length(); // how many lights in the scene
Sphere Lights[LightLength] = Sphere[LightLength]( 
    Sphere( vec3(0.0, -10.0, -1.0), 10.0, Material(vec3(0.0,0.0,1.0), 1.0)),
    Sphere( vec3(0.0, -10.0, -1.0), 10.0, Material(vec3(0.0,1.0,0.0), 1.0)),
    Sphere( vec3(0.0, -10.0, -1.0), 10.0, Material(vec3(1.0, 0.0,0.0), 1.0))
);
//////////////////////////////////////////////////////////////////////////
 
bool hitSphere (Sphere sphere, Ray r, inout Hit record, float t_min, float t_max) {
  vec3 oc = r.origin - sphere.centre;
  
  float a = dot(r.direction, r.direction);
  float half_b = dot(oc, r.direction);
  float c = dot(oc, oc) - sphere.radius*sphere.radius;
  
  float discriminant = half_b*half_b - a*c;
  if (discriminant < 0.0) { return false; }
  float sqrtd = sqrt(discriminant);
  
  float root = (-half_b - sqrtd) / a;
  if (root < t_min || t_max < root) {
    root = (-half_b + sqrtd) / a;
    if (root < t_min || t_max < root){
      return false;
    }
  }
  record.t = root;
  record.p = at(r, root);
  //record.normal = normalize((record.p - sphere.centre) / sphere.radius);
  record.normal = (record.p - sphere.centre) / sphere.radius;
  return true;
}

bool hitWorld (Sphere scene[WorldLength], Ray r, out Hit record) {
    Hit temp_hit = Hit( vec3(0.0,0.0,0.0), vec3(0.0,0.0,0.0), 0.0, false, 0);
    bool hitSomething = false;
    float closest = 500.0;
    
    for (int i = 0; i <= WorldLength - 1; i++) {
      if ( hitSphere(World[i], r, temp_hit, 0.003, 150.0) == true && temp_hit.t <= closest) {
        hitSomething = true;
        closest = temp_hit.t;
        temp_hit.object = i;
        record = temp_hit;
        }
    }
    return hitSomething;
}

vec4 lighting(Ray r, vec3 normal) { // r, g, b, light 
  // calculates light from 0-1 at a location given the direction of the ray
  Hit shadowHit = Hit( vec3(0.0,0.0,0.0), vec3(0.0,0.0,0.0), 0.0, false, 0); 
  vec4 light = vec4(0.0, 0.0, 0.0, 0.05); // initial ambient amount. So nothing is fully in the dark
  float brt = 0.0;
  vec3 reflected = normalize(reflect(r.direction, normal));

  for (int i = 0; i <= LightLength - 1; i++) {
    //Ray lightRay = Ray(r.origin, normalize( (Lights[i].centre + (randomInSphere(gl_FragCoord.xy, 1.234) * Lights[i].radius) - r.origin) ));
    Ray lightRay = Ray(r.origin, normalize(Lights[i].centre  - r.origin) ); 

    if (hitWorld(World, lightRay, shadowHit) == true) {
    } else {
      brt = Lights[i].mat.shiny; // how strong lamp is
      light.rgb += Lights[i].mat.colour * brt;
      light.w += max( dot(lightRay.direction, normalize(normal)) * brt, 0.0); // dot product of the direction to the light and the surface normal gives how much light that spot is recieving. the higher the angle between the normal and the light, the darker it is. maxes with 0 because dot product can return negative values, and nothing can be negatively bright
      light.w += max( dot(reflected, normalize(r.direction)) * brt, 0.0); // dot product between the ray that bounces off the object and the ray from the camera to the object. this gives the bright highlights on objects. maxes with 0 to prevent negative values
    }
  }
  return light;
}

vec3 skyColour (vec3 direction) { // calculates a colour from a blueish gradient depending on the vertical component of the rays direction 
  // used for the sky when the ray doesn't hit anything
  //float t = 0.5 * (normalize(direction).y + 1.0);
  //return vec3( (1.0-t)*vec3(1,1,1) + t*vec3(0.5,0.7,1.0) );
  float t = normalize(direction).y;
  //return 1.0 * vec3( (abs(sin(iTime/3.0) )-t)*vec3(0.2,0.0,1.0) + t*vec3(1.0,0.6,0.0) );
  return vec3( 
    sin(iTime/3.0) * t,
    cos(iTime*2.0/3.0) * (1.0-t),
    sin(iTime/3.0)
    );
}

vec3 rayColour (Ray r, Sphere scene[WorldLength], float randomSeed) {
  Hit record = Hit( vec3(0.0,0.0,0.0), vec3(0.0,0.0,0.0), 0.0, false, 1 );
    
  vec3 unitDirection;
  float t;
  
  float bounces = 0.0; // how many times the ray has bounced
  
  vec3 colour = vec3(0.0, 0.0, 0.0); // colour from the ray
  
  float energy = 1.0; // how much of the rays lighs hasn't been absorbed

  while ( hitWorld(scene, r, record) == true && bounces < BounceLimit && energy >= 0.0) {
    bounces++;
    
    // bounces the ray
    vec3 bounceTarget = reflect(r.direction , record.normal) + record.p;
    //vec3 reflBounceTarget = reflect(r.direction , record.normal) + record.p;
    //vec3 bounceTarget = record.normal + record.p + lessRandomInSphere(gl_FragCoord.xy, randomSeed) / 2.0;
    r.origin = record.p; // the new origin of the ray is where it hit another object
    r.direction = bounceTarget - r.origin;
    
    vec4 light = lighting(r, r.direction);
    colour += ((World[record.object].mat.colour * (1.0 - World[record.object].mat.shiny) * light.w * light.rgb) + (colour * World[record.object].mat.shiny) * light.w) * energy;
    //colour += ((World[record.object].mat.colour * (1.0 - World[record.object].mat.shiny) * light) + (colour * World[record.object].mat.shiny) * light) * energy * max(sin(dot(normalize(bounceTarget - record.p), normalize(reflBounceTarget - record.p)) * 6.28), 0.1);
    energy -= (1.0 - World[record.object].mat.shiny);
    
  }
  if (bounces > 0.0) {
    if (energy > 0.0) {
      colour += skyColour(r.direction) * energy * World[record.object].mat.shiny;
    }
    return colour;
  } 
  return skyColour(r.direction);
}
    
void main() {
  Lights[0].centre = iLights[0].xyz; Lights[0].radius = 10.0;
  Lights[1].centre = iLights[1].xyz; Lights[1].radius = 10.0;
  Lights[2].centre = iLights[2].xyz; Lights[2].radius = 10.0;

  for (int i = 0; i < WorldLength; i++) {
    World[i].centre = iWorld[i].xyz;
    World[i].mat = Mats[int(iWorld[i].w)];
  }

  //cam.location.z = sin(iTime)/2.0 + 1.5;
  cam.location.y = 2.5;

  vec3 AAcheck[4];
  float AAdist = 1.0;
  Ray ray = GetRay(cam, vec2(0.0, AAdist));
  AAcheck[0] = rayColour(ray, World, 0.0); // up colour
  
  ray = GetRay(cam, vec2(AAdist, 0.0));
  AAcheck[1] = rayColour(ray, World, 1.1); // right colour
  
  ray = GetRay(cam, vec2(0.0, -AAdist));
  AAcheck[2] = rayColour(ray, World, 2.2); // down colour
  
  ray = GetRay(cam, vec2(-AAdist, 0.0));
  AAcheck[3] = rayColour(ray, World, 3.3); // left colour
  
  vec3 verticalDif = (AAcheck[0] - AAcheck[2]) - (AAcheck[2] - AAcheck[0]); // the differnce between the colour a bit up and a bit down
  vec3 horizontalDif = (AAcheck[3] - AAcheck[1]) - (AAcheck[1] - AAcheck[3]); // the difference between the colour a bit left and a bit right
  vec3 colourDif = abs(verticalDif) + abs(horizontalDif); // add both colour differences
  float totalDif = colourDif.r + colourDif.g + colourDif.b;
  
  /*
  if (totalDif >= 0.01) {
    outColour = vec4(1.0, 1.0, 1.0, 1.0);
  }
  else {
    outColour = vec4(0.3, 0.3, 0.3, 1.0);
  }
  */
  ///*
  // if the difference in colours is greater than a threshold, then multisample the pixel for AA
  if(totalDif > AAthreshold) {
    
    outColour = vec4(0.0, 0.0, 0.0, 0.0);
    for (float i; i < SamplesPerPixel; i++) {
  
      vec2 rayShift = vec2(
        trand(gl_FragCoord.xy, 0.123 * i),
        trand(gl_FragCoord.xy, 0.456 * i)); // random vector from -1,1
      ray = GetRay(cam, rayShift);

      outColour += vec4(rayColour(ray, World, i), 1.0);
    }
    outColour /= SamplesPerPixel;
  } 
  else {
    ray = GetRay(cam, vec2(0.0, 0.0) );
    //outColour = vec4(rayColour(ray, World), 1.0);
    vec3 avgColour = (AAcheck[0] + AAcheck[1] + AAcheck[2] + AAcheck[3]) / 4.0; // averages the colours from the AA check
    outColour = vec4(avgColour, 1.0);
  }
  //*/
  outColour = vec4(
    sqrt(outColour.x),
    sqrt(outColour.y),
    sqrt(outColour.z), 1.0);
}
/////////////////////////////////////////////////////////////////////////////
</script>

<script>
// https://webgl2fundamentals.org/webgl/webgl-fundamentals.html
"use strict"; // prevents undeclared variables from being used
function createShader(gl, type, source) {
  var shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (success) {
    return shader;
  }

  console.log(gl.getShaderInfoLog(shader));  // eslint-disable-line
  gl.deleteShader(shader);
  return undefined;
}

function createProgram(gl, vertexShader, fragmentShader) {
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  var success = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (success) {
    return program;
  }

  console.log(gl.getProgramInfoLog(program));  // eslint-disable-line
  gl.deleteProgram(program);
  return undefined;
}

function resizeCanvasToDisplaySize(canvas) {
  // Lookup the size the browser is displaying the canvas in CSS pixels.
  const displayWidth  = canvas.clientWidth;
  const displayHeight = canvas.clientHeight;
 
  // Check if the canvas is not the same size.
  const needResize = canvas.width  !== displayWidth ||
                     canvas.height !== displayHeight;
 
  if (needResize) {
    // Make the canvas the same size
    canvas.width  = displayWidth / 4;
    canvas.height = displayHeight / 4;
    
  }
 
  return needResize;
}
function main() {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  const canvas = document.querySelector("#c");
  const gl = canvas.getContext("webgl2");
  if (!gl) {
    return;
  }

  const vs = `#version 300 es
    // an attribute is an input (in) to a vertex shader.
    // It will receive data from a buffer
    in vec4 a_position;
    // all shaders have a main function
    void main() {
      // gl_Position is a special variable a vertex shader
      // is responsible for setting
      gl_Position = a_position;
    }
  `;
  // compile GSGL shaders
  var vertexShader = createShader(gl, gl.VERTEX_SHADER, vs);
  var fsScript = document.getElementById("fs");
  var fs = fsScript.text;
  var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fs);
  // link the two shaders into a program
  var program = createProgram(gl, vertexShader, fragmentShader);

  // look up where the vertex data needs to go.
  const positionAttributeLocation = gl.getAttribLocation(program, "a_position");

  // look up uniform locations
  var resolutionLocation = gl.getUniformLocation(program, 'iResolution');
  var audioLocation = gl.getUniformLocation(program, 'iSong');
  var timeLocation = gl.getUniformLocation(program, 'iTime');
  var worldLocation = gl.getUniformLocation(program, 'iWorld');
  var lightsLocation = gl.getUniformLocation(program, 'iLights');

  // Create a vertex array object (attribute state)
  const vao = gl.createVertexArray();

  // and make it the one we're currently working with
  gl.bindVertexArray(vao);

  // Create a buffer to put three 2d clip space points in
  const positionBuffer = gl.createBuffer();

  // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  // fill it with a 2 triangles that cover clip space
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -1, -1,  // first triangle
     1, -1,
    -1,  1,
    -1,  1,  // second triangle
     1, -1,
     1,  1,
  ]), gl.STATIC_DRAW);

  // Turn on the attribute
  gl.enableVertexAttribArray(positionAttributeLocation);

  // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
  gl.vertexAttribPointer(
      positionAttributeLocation,
      2,          // 2 components per iteration
      gl.FLOAT,   // the data is 32bit floats
      false,      // don't normalize the data
      0,          // 0 = move forward size * sizeof(type) each iteration to get the next position
      0,          // start at the beginning of the buffer
  );
  const playpauseElem = document.querySelector('.playpause');
  const inputElem = document.querySelector('.divcanvas');
  inputElem.addEventListener('mouseover', requestFrame);
  inputElem.addEventListener('mouseout', cancelFrame);

  function sceneMove(x, y, z) {
    for (let i = 0; i < 17; i++) {
      scene[i*4] += x;
      scene[i*4 +1] += y;
      scene[i*4 +2] += z;
    }
  }

  function obstaclesMove(fps) {
    sceneMove(0, 0, 10 / (fps / 6) );
    for (let i = 0; i < 17; i++) {
      if (scene[i*4] < -30 || scene[i*4] > 30) { 
        scene[i*4] = scene[i*4] * -1; 
      }
      if (scene[i*4 + 2] > 8) { 
        scene[i*4 + 2] = Math.random() * -30 -50;
        scene[i*4 + 1] = Math.random() + 1;
        scene[i*4] = Math.random() * 60 - 30;
      }
      if ( scene[i*4 + 2] > -1.5 && scene[i*4 + 2] < -0.5) {
        if (scene[i*4] > -1.2 && scene[i*4] < 1.2) {
          audio.pause();
          playingSong = false;
          kaboom.play();
          alert("You lose! Your flew for " + Math.round(time) + " seconds. Press OK to retry.");
          timeStart = Date.now();
          scene = [...scenePreTransform];
          left = false;
          right = false;
        }
      }      
    } 
  }

  function shipRoll(steering) {
    scene[17*4] = scenePreTransform[17*4] - steering/3;
    scene[18*4] = scenePreTransform[18*4] - steering/3;
    scene[19*4] = scenePreTransform[19*4] - steering/3;

    scene[20*4] = scenePreTransform[20*4] + steering/10;
    scene[21*4] = scenePreTransform[21*4] + steering/10;
    scene[22*4] = scenePreTransform[22*4] + steering/10;

    scene[17*4 +1] = scenePreTransform[17*4 +1] - steering/3; 
    scene[18*4 +1] = scenePreTransform[18*4 +1] + steering/3; 
  }
    //scene[68] = (mouseX - (rect.width / 2)) / 
    //  rect.height * 10 - 0.7;

  let left = false;
  let right = false;
  let steering = 0;
  let movedX = 0;
  let timeStart = Date.now(); // ms since jan 1 1970

  function getData() {
    return fetch('starsOfTheNight.wav')
    .then(function(response) {
      return response.arrayBuffer();
    });
  }
  document.addEventListener("keydown", function (event) {
    if (!playingSong) { 
      audio.play(); playingSong = true;
      let song = new Int16Array(getData());
      console.log(song);
    } // only play song after keypress

    if (event.defaultPrevented) {return;}
    var handled = false;
    if (event.key !== undefined) {
      handled = true;
      if (event.key == 'ArrowLeft') { left = true; } 
      if (event.key == 'ArrowRight') { right = true; }
      if (event.key == 'a' || event.key == 'A') { left = true; }
      if (event.key == 'd' || event.key == 'D') { right = true; }
    }
    if (handled) { event.preventDefault(); }
  }, true);

  document.addEventListener("keyup", function (event) {
    if (event.defaultPrevented) {return;}
    var handled = false;
    if (event.key !== undefined) {
      handled = true;
      if (event.key == 'ArrowLeft') { left = false; } 
      if (event.key == 'ArrowRight') { right = false; }
      if (event.key == 'a' || event.key == 'A') { left = false; }
      if (event.key == 'd' || event.key == 'D') { right = false; }
    }
    if (handled) { event.preventDefault(); }
  }, true);
  //inputElem.addEventListener('mousemove', setMousePosition);

  function tick(fps) {
    if (left == true && right == true) {
      steering = 0;
    } else if (left == true) {
      steering = 1;
    } else if (right == true) {
      steering = -1;
    } else steering = 0;
    sceneMove(steering * 3 / (fps / 6), 0, 0);
    obstaclesMove(fps);
    shipRoll(steering);
  }

  let requestId;
  function requestFrame() {
    if (!requestId) {
      requestId = requestAnimationFrame(render);
    }
  }
  function cancelFrame() {
    if (requestId) {
      cancelAnimationFrame(requestId);
      requestId = undefined;
    }
  }

  let then = 0;
  let time = 0;

  let scene = new Float32Array([
      5.0,  0.5, -50.0,  1.0,
       5.0,  0.5, -49.0,  0.0,
       5.0,  0.5, -48.0,  1.0,
      5.0,  0.5, -47.0,  0.0,
       5.0,  0.5, -46.0,  1.0,
       5.0,  0.5, -45.0,  1.0,
      5.0,  0.5, -44.0,  1.0,
       5.0,  0.5, -39.0,  1.0,
       5.0,  0.5, -38.0,  0.0,
      5.0,  0.5, -37.0,  0.0,
      5.0,  0.5, -36.0,  1.0,
      5.0,  0.5, -35.0,  1.0,
      5.0,  0.5, -34.0,  0.0,
      5.0,  0.5, -33.0,  0.0,
      5.0,  0.5, -32.0,  1.0,
      5.0,  0.5, -31.0,  0.0,
      5.0,  0.5, -30.0, 1.0,
      -0.7,  0.5, -1.0,  7.0, // ship left
       0.7,  0.5, -1.0,  7.0, // ship right
       0.0,  0.5, -1.0,  6.0, // ship middle
      -50.0,  0.0, -100.0, 5.0,// sun 1
        0.0,   10.0,  -100.0, 4.0, // sun 2 
       50.0,   20.0,  -100.0, 3.0, // sun 3
       0.0, -1000.5, 0.0, 2.0  // ground
  ]);
  let scenePreTransform = [...scene];

  let lights = new Float32Array([
    -55.0,  5.0, -30.0,
    0.0,   10.0, -30.0,
    55.0,   20.0, -30.0
  ]);
  
  //fetch('starsOfTheNight.wav', { mode: 'no-cors'});
  // .then( )

  var audio = new Audio();
  audio.src = 'starsOfTheNight.mp3';
  var kaboom = new Audio('kaboom.mp3');
  var playingSong = false;

  var rawAudioL = [];
  var rawAudioR = [];

  function render(now) {
    requestId = undefined;
    now *= 0.001;  // convert to seconds
    const elapsedTime = Math.min(now - then, 0.1);
    tick(1/elapsedTime);
    //console.log(Math.round(1/elapsedTime));
    time += elapsedTime;
    then = now;

    resizeCanvasToDisplaySize(gl.canvas);

    // Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    // Tell it to use our program (pair of shaders)
    gl.useProgram(program);

    // Bind the attribute/buffer set we want.
    gl.bindVertexArray(vao);

    gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);
    gl.uniform2f(audioLocation, rawAudioL[time*44100], rawAudioR[time*44100]);
    gl.uniform1f(timeLocation, time);
    gl.uniform4fv(worldLocation, scene);
    gl.uniform3fv(lightsLocation, lights);
    
    gl.drawArrays(
        gl.TRIANGLES,
        0,     // offset
        6,     // num vertices to process
    );
    requestFrame();
  }

  requestFrame();
  requestAnimationFrame(cancelFrame);
}
alert("Use A/D or Left and Right Arrow keys to move. Avoid the balls for as long as you can. Press OK to start.");
main();


</script>