Crystal Caves

            
              // This is a long one. I hope this over-commenting helps. Let's do this!

// Let's put our settings up top so we can change them easily
let settings = {
  spotlightRadius: 400,
  boxCount: 50,
  moveSpeed: 1,
  turboSpeed: 5,
}

// Let's define our states, there's only one in this game at the moment
function state(s){
  // we call our init state all the way down the bottom of our code
  if (s==="init"){
    // let's create an instance of our class Application
    const app = new Application;

    // Add our UI
    let wrapper = document.querySelector('#game-wrapper');
    // update light position
    wrapper.addEventListener('mousemove',function(e){
      app.universe.light.position.x = e.clientX*window.devicePixelRatio;
      app.universe.light.position.y = e.clientY*window.devicePixelRatio;
    });
    // engage turbo when our mouse is down
    wrapper.addEventListener('mousedown',() => {
      app.universe.speed = settings.turboSpeed;
    });
    // release turbo when mouse is up
    wrapper.addEventListener('mouseup',()=>{
      app.universe.speed = settings.moveSpeed;
    });
  }
}

// This is our application class. It contains our Universe which contains our Boxes and our Light
// I called them boxes, not crystals, because this project changed direction as it progressed
class Application {
  constructor(){
    // Our app has a width and a height
    // wWe don't know their size yet but we can figure them out using the resize function below
    this.width = null;
    this.height = null;

    let wrapper = document.querySelector('#game-wrapper');
    // Let's create our canvas that the game will be rendered on
    this.canvas = document.createElement('canvas');
    // and put it inside of our wrapper
    wrapper.appendChild(this.canvas);
    // create a context for it that we will render into, it's a 2d sim
    this.context = this.canvas.getContext('2d');

    // We'll also need a masking canvas to hide crystals ourside of the lit area
    // It's the black outside of our visible ring, we'll call it an overlay
    this.canvasOverlay = document.createElement('canvas');
    wrapper.appendChild(this.canvasOverlay);
    this.contextOverlay = this.canvasOverlay.getContext('2d');

    // Let's resize our canvas
    this.resize();
    // and set up a listener which will resize it again if the window size changes
    window.addEventListener('resize', () => this.resize(), false);

    // if you haven't come across this "() => foo()":
    // It's just a condensed way of writing "function() {foo()}"
    // read here: https://babeljs.io/learn-es2015/

    // Let's add our Universe class to our app and pass through the width and height values
    this.universe = new Universe(this.width,this.height);

    // and start our render function
    this.render();
  }

  render(){
    // Canvases need to be cleared each frame or else what you draw will just layer on top
    // So let's clear the whole canvas
    this.context.clearRect(0,0,this.width*window.devicePixelRatio,this.height*window.devicePixelRatio);

    // Let's fill in the "lit" area around our mouse with a nice gradien so the light looks like it fades away
    // First let's create our gradient
    let gradient=this.context.createRadialGradient(this.universe.light.position.x,this.universe.light.position.y,0.9*settings.spotlightRadius,this.universe.light.position.x,this.universe.light.position.y,0);
    // ... and pass through our hex colors
    gradient.addColorStop(0,"#202062");
    gradient.addColorStop(1,"#988280");

    // Now let's add this gradient to our canvas context
    this.context.fillStyle = gradient;
    this.context.fillRect(0,0,this.width,this.height);

    // Now let's draw the boxes from our universe
    // They exist in the universe, but everything is rendered in our app's render step
    let boxes = this.universe.boxArray;
    // create a for loop that goes through our box array
    for (var i=0; i<boxes.length;i++){
      //  and pulls out each box one at a time
      let box = boxes[i];

      // Let's draw this crystal
      // -----------------------
      // First let's get it's color
      this.context.fillStyle = box.color;
      this.context.strokeStyle = box.color;
      // For each side of the crystal we'll have to project that side into the distance:
      // Notice that each point on a crystal casts a "shadow" that extends away from where a mouse is
      // So for each point on this box let's do that
      for (let i = 0;i<box.shadowCorners.length;i++){
        // shade by section between this point and the next point and then the shadow
        // and loop back to the start if we're at our final point (to close the shape)
        let j = (i<box.shadowCorners.length-1) ? i+1:0

        // Let's project the side of our crystal off into the distance by creating a polygon
        // this is tricky to describe but maybe this will help imgur.com/a/84048
        this.context.beginPath();
        this.context.moveTo(box.corners[i].x,box.corners[i].y);
        this.context.lineTo(box.shadowCorners[i].x,box.shadowCorners[i].y);
        this.context.lineTo(box.shadowCorners[j].x,box.shadowCorners[j].y);
        this.context.lineTo(box.corners[j].x,box.corners[j].y);

        // close out path, fill and stroke and 
        this.context.closePath();
        this.context.stroke();
        this.context.fill();

        // We repeat this process for every side of every crystal :o computers are so cool
      }

      // Okay but we've still got to draw the happy box over the top of this mess
      this.context.beginPath();
      // fortunately this is just one shape
      this.context.moveTo(box.corners[0].x,box.corners[0].y);
      for (let i = 1;i<box.sides;i++){
        this.context.lineTo(box.corners[i].x,box.corners[i].y);
      }
      this.context.closePath();
      this.context.fill();
      this.context.stroke();
    }

    // Let's paint a little happy circle in where our mouse is
    // Remember, this is your universe, you don't have to do this
    // Just make it up as you go... (RIP Bob Ross)
    this.context.beginPath();
    this.context.arc(this.universe.light.position.x,this.universe.light.position.y,2,0,2*Math.PI);
    this.context.stroke();

    // Now let's draw our overlay
    // First let's clear the old one
    this.contextOverlay.clearRect(0,0,this.width*window.devicePixelRatio,this.height*window.devicePixelRatio);

    // We want a transparent circle centered around our mouse
    // rimmed with the color that our light fades out to
    gradient=this.contextOverlay.createRadialGradient(this.universe.light.position.x,this.universe.light.position.y,settings.spotlightRadius,this.universe.light.position.x,this.universe.light.position.y,0);
    gradient.addColorStop(0,"#0a0e23");
    gradient.addColorStop(0.5,"transparent");

    // Try commenting out these lines to see it without the overlay
    this.contextOverlay.fillStyle = gradient;
    this.contextOverlay.fillRect(0,0,this.width,this.height);

    // Now update the position of everything in our universe
    this.update();

    // And request another render frame
    window.requestAnimationFrame(()=>this.render());
  }

  update(){
    this.universe.update(this.center);
  }

  resize(){
    // Set our app width and height to that of the window
    this.width = window.innerWidth;
    this.height = window.innerHeight;

    // And resize our wrapper to these dimensions
    document.querySelector('#game-wrapper').style.width = this.width+'px';
    document.querySelector('#game-wrapper').style.height = this.height+'px';

    // Then get the size for our canvas based off the pixel density of the screen
    this.width *= window.devicePixelRatio;
    this.height *= window.devicePixelRatio;

    // and resize our canvases
    this.canvas.width = this.width;
    this.canvas.height = this.height;
    this.canvasOverlay.width = this.width;
    this.canvasOverlay.height = this.height;

    // regenerate our boxes
    if (this.universe) this.universe.generateBoxes();

    // BLEND MODE
    // this will mix the colors of the crystals as they are laid over the top of one another
    this.context.globalCompositeOperation = 'screen';

    // And define our center pixel
    this.center = {
      x: this.width/2,
      y: this.height/2
    }
  }
}

// Our Universe class contains our light and our Boxes (crystals)
class Universe{
  constructor(width,height){
    // It inherits the width and height of our app
    this.width = width;
    this.height = height;
    this.speed = settings.moveSpeed;

    // Let's store all of the boxes in our universe in an array for nice access
    this.boxArray = [];

    // generate our Boxes
    this.generateBoxes();

    // And also add the light which hangs out on our mouse
    this.light = new Light(width*.75,height*.35);
  }

  generateBoxes(){
    // Clear array if there is one
    this.boxArray = [];
    // Let's create the number of boxes we defined in our settings
    for (let i=0;i<settings.boxCount;i++){
      // create a box
      let box = new Box(this.width, this.height);
      // and add it to our array of boxes
      this.boxArray.push(box);
    }
  }

  // This is called alongside each render frame 
  update(centerPixel){
    // First we calculate our change in direction based on where the mouse is 
    // the further it is from the center, the more we move in that direction
    // Our change in x
    let dx = (centerPixel.x - this.light.position.x)/100;
    // and our change in y
    let dy = (centerPixel.y - this.light.position.y)/100;

    // Now we can use this change to update our box positions and their shadows
    Array.prototype.forEach.call(this.boxArray, (box)=>{
      box.update(centerPixel,dx*this.speed,dy*this.speed,this.light);
    });
  }
}

// Each box is a crystal
class Box {
  constructor(width,height){
    // When it's created let's give it a random position inside of the width and height of our universe
    this.position = {
      x: Math.random()*width,
      y: Math.random()*height,
    }
    // and give it a random radius
    this.radius = Math.random()*30;
    // a random rotation
    this.rotation = Math.random();
    // a random rotation speed
    this.rotationSpeed = (Math.random()-0.5)/100;
    // a random number of sides
    // (min 3 sides max 8)
    this.sides = Math.floor(Math.random()*6+3);
    // and a random color using the getRandomColor function below
    this.color = this.getRandomColor();

    // let's create an array for each box to store the location of it's corners and the projection of those corners away from our light source
    this.corners = [];
    // and let's figure out those locations
    this.getCornerLocations();
    this.shadowCorners = this.corners;
  }

  update(centerPixel,dx,dy,light){
    // update the box position
    this.position.x += dx;
    this.position.y += dy;

    // check location of our box and loop it if it's outside of canvas 
    if (this.position.x<-this.radius){
      this.position.x+=centerPixel.x*2+this.radius*2;
    } else if (this.position.x>centerPixel.x*2+this.radius){
      this.position.x -= centerPixel.x*2+this.radius*2;
    }
    if (this.position.y<0-this.radius){
      this.position.y+=centerPixel.y*2+this.radius*2;
    } else if (this.position.y>centerPixel.y*2+this.radius){
      this.position.y-=centerPixel.y*2+this.radius*2;
    }

    // rotate the box according to it's speed
    this.rotation += this.rotationSpeed;

    // Dump our old locations
    this.corners = [];
    this.shadowCorners = [];

    // and find the new corners of our box and porject them
    this.getCornerLocations();
    this.getShadowCorners(light);
  }

  getCornerLocations(){   
    // We're going to draw our shapes on a circle by breaking the circle up into the number of sections that we need
    // The angle between each of our points is defined by:
    let internalAngle = Math.PI*2/this.sides;
    // see imgur.com/a/YhwKg

    // Let's calculate the location of each of the corners for our polygon
    for (var i=0;i<this.sides;i++){
      // Use trig to get the location based off of our x and y
      let x = this.position.x + this.radius*Math.sin(this.rotation+i*internalAngle);
      let y = this.position.y + this.radius*Math.cos(this.rotation+i*internalAngle);
      // and push to the array
      this.corners.push({x:x,y:y});
    }
  }

  getShadowCorners(light){
    // Our shadow corners are the projected corners of our boxes

    // for each of our box corners, let's figure out the projection
    for (var i=0;i<this.sides;i++){
      // Let's figure out the x and y of our corner relative to our light, and make our shadowCorner a point on the same line, much further away
      let dx = this.corners[i].x - light.position.x;
      let dy = this.corners[i].y - light.position.y;
      let dist = Math.sqrt(dx*dx+dy*dy);

      // extrapolate this line into the distance (relative to our starting point)
      let x = light.position.x + dx * settings.spotlightRadius / dist * 20;  // 20 times the distance of our light radius
      let y = light.position.y + dy * settings.spotlightRadius / dist * 20; 

      // lol whoop[s]
      // let x = this.corners[i].x + dx * settings.spotlightRadius / dist;
      // let y = this.corners[i].y + dy * settings.spotlightRadius / dist; 

      // and push the point to our shadowCorner array
      this.shadowCorners.push({x:x,y:y});
    }
  }

  // function we use to get a random color
  getRandomColor() {
    let letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++ ) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
}

// Our light class, pretty simple...
// I was thinking about adding multiple lights or light of different colors and creating a light class could of allowed me to do this in the future. But I didn't :P
class Light {
  constructor(x,y){
    this.position = {
      x: x,
      y: y,
    }
  }
}

// on load, start our initialization state
window.onload = function() {
  state("init");
  // followMe("init");
}