asteroids_demo.js

import {defs, tiny} from './examples/common.js';
import {Shape_From_File} from './examples/obj-file-demo.js';

const {
    Vector, Vector3, vec, vec3, vec4, color, hex_color, Shader, Matrix, Mat4, Light, Shape, Material, Scene, Texture
} = tiny;

const {
    Textured_Phong
} = defs;

// adjustable parameters for the game
const LIGHT_POSITION = vec4(0, 5, 5, 1);
const INIT_LIGHT_SIZE = 1000

const INIT_EYE_POSITION = vec3(0, 15, 15)
const INIT_EYE_DIRECTION = vec3(0, 0, -20)

const NUM_ASTEROID_TYPES = 3
const ASTEROID_SPAWN_Z_COORD = -70
const ASTEROID_SPAWN_X_COORD_MAX = 70
const ASTEROID_NATURAL_ROTATION = 8.0

const MAX_ASTEROID_FRAMES_TO_ORIGIN = 1000
const MIN_ASTEROID_FRAMES_TO_ORIGIN = 300

const ASTEROID_SPAWN_PERIOD = 0.5

const MAX_SPACESHIP_ROTATION = 0.5
const SPACESHIP_ROTATION_SPEED = 50 // smaller number, higher speed
const SPACESHIP_DISTANCE_FROM_ORIGIN = 3.0

const POINTS_PER_ASTEROID_SHOT = 10

const NUMBER_OF_LIVES = 3

const BUFFER_SECS_BETWEEN_PROJECTILES = 0.75

const NUM_SECS_START_FADE_AFTER_EXPLOSION = Math.PI

export class Asteroids_Demo extends Scene {
    constructor() {
        super();
        // *** Shapes
        this.shapes = {
            asteroid1: new Shape_From_File("assets/Asteroid1.obj"),
            asteroid2: new Shape_From_File("assets/Asteroid2.obj"),
            asteroid3: new Shape_From_File("assets/Asteroid1.obj"),
            background_sphere: new defs.Subdivision_Sphere(4),
            background_cube: new defs.Cube(),

            projectile: new defs.Cube(),

            spaceship: new Shape_From_File("assets/Fighter_01.obj"),

            explosion: new defs.Subdivision_Sphere(5),
        };

        // *** Materials
        this.materials = {
            asteroid1: new Material(new defs.Phong_Shader(),
                {ambient: 0.3, diffusivity: 1, specular: 0.2, color: hex_color("#646464")}),
            asteroid2: new Material(new defs.Phong_Shader(),
                {ambient: 0.3, diffusivity: 1, specular: 0.2, color: hex_color("#3a3a3a")}),
            asteroid3: new Material(new defs.Phong_Shader(),
                {ambient: 0.3, diffusivity: 1, specular: 0.2, color: hex_color("#afafaf")}),

            background: new Material(new Apply_Texture(), {
                color: hex_color("#000000"),
                ambient: 1,
                specular: 0,
                diffusivity: 0,

                texture: new Texture("assets/galaxy_2048.jpg", "LINEAR_MIPMAP_LINEAR")
            }),

            spaceship: new Material(new Apply_Texture(), {
                color: hex_color("#000000"),
                ambient: 1,
                specular: 0,
                diffusivity: 0,
                texture: new Texture("assets/spaceship_texture.jpg")
            }),
            projectile: new Material(new defs.Phong_Shader(),
                {ambient: .4, diffusivity: .6, color: hex_color("#ffffff")}),

            explosion: new Material(new Apply_Texture(), {
                    color: hex_color("#000000"),
                    ambient: 1,
                    specular: 0,
                    diffusivity: 0,
                    texture: new Texture("assets/explosion.jpg")
                }
            )
        }
        this.eye_position = INIT_EYE_POSITION
        this.eye_direction = INIT_EYE_DIRECTION

        this.initial_camera_location = Mat4.look_at(this.eye_position, this.eye_direction, vec3(0, 1, 0));


        // need asteroid_type because there was bug that if asteroid removed, the indices would get shifted down
        // so asteroid_type retains the asteroid type of every asteroid
        this.asteroid_type = [];
        // need asteroids inital positions
        this.asteroid_init_pos = [];
        // need asteroid positions
        this.asteroid_pos = [];
        // need # frames for asteroid to reach origin
        this.asteroid_frames_till_origin = [];
        this.asteroid_rotation_dir = [];
        // asteroids, start with one asteroid
        this.num_asteroids = 0;

        // asteroid spawner helping
        this.last_asteroid_spawned_t = 0;

        // background model transform
        //this.background_sphere_model_transform = Mat4.identity().times(Mat4.translation(0, 0, -60)).times(Mat4.scale(100, 100, 0.01));
        this.background_sphere_model_transform = Mat4.identity().times(Mat4.translation(0, 0, -30)).times(Mat4.scale(50, 50, 50));

        // spaceship properties
        this.spaceship_pos = [0, 0, -1.0 * SPACESHIP_DISTANCE_FROM_ORIGIN] // this needs to be fixed
        this.spaceshipRotationAmount = 0.0
        this.turnLeft = false;
        this.turnRight = false;

        // projectile properties
        this.num_projectiles = 0;
        this.projectile_init_pos = [];
        this.projectile_pos = [];
        this.projectile_rotation_amount = [];
        this.time_since_last_projectile = BUFFER_SECS_BETWEEN_PROJECTILES * 1000;

        // pause animation flag
        this.pause_asteroids = 0;

        // stats
        this.score = 0;
        this.lives = NUMBER_OF_LIVES;

        // screen shake properties
        this.is_screen_shake = false
        this.time_start_screen_shake = 0
        this.time_elapsed_screen_shake = 0

        // asteroid collision explosion
        this.asteroid_explosion_start_time = [];
        this.num_asteroids_exploding = 0;
        this.asteroid_explosion_particle_loc = [];
        this.asteroid_explosion_init_loc = [];
        this.explosion_particle_type = [];

        // explosion properties
            // used for spaceship explosion animation
        this.time_start_explosion_animation = 0; // absolute time that the spaceship explosion starts
        this.time_elapsed_explosion = 0; // relative time that the spaceship explosion is going through
        this.spaceship_explosion_progress = 0; // for exploding spaceship, need to dim the spaceship with progress

        // fading light at end
        this.start_fade = false
        this.background_ambience = 1
        this.asteroid_ambience = 0.3
        this.light_size = INIT_LIGHT_SIZE
        this.time_start_fade = 0

        this.asteroid_spawn_period = ASTEROID_SPAWN_PERIOD
    }

    make_control_panel() {
        // spawn asteroid, pause, and spaceship movement
        this.key_triggered_button("Spawn Asteroid", ["c"], () => {
            this.spawn_asteroid();
        });
        this.key_triggered_button("Rotate Left", ["q"], () => this.turnLeft = true, undefined, () => this.turnLeft = false)
        this.key_triggered_button("Rotate Right", ["e"], () => this.turnRight = true, undefined, () => this.turnRight = false)
        this.key_triggered_button("Shoot Projectile", ["`"], () => this.spawn_projectile())
        this.key_triggered_button("Pause Asteroids", ["p"], () => {
            if (this.lives > 0) {
                this.pause_asteroids ^= 1;
            }
        });
    }

    display(context, program_state) {
        if (!context.scratchpad.controls) {
            this.children.push(context.scratchpad.controls = new defs.Movement_Controls());
        }

        // lights and camera setup
        program_state.set_camera(Mat4.look_at(this.eye_position, this.eye_direction, vec3(0, 1, 0)));
        program_state.lights = [new Light(LIGHT_POSITION, color(1, 1, 1, 1), this.light_size)];

        if (this.start_fade) {

            this.draw_background(context, program_state, [true, this.background_ambience]);

        }
        else {
            this.draw_background(context, program_state);
        }

        program_state.projection_transform = Mat4.perspective(
            Math.PI / 4, context.width / context.height, 1, 100);

        let t = program_state.animation_time / 1000, dt = program_state.animation_delta_time / 1000;
        this.time_since_last_projectile += 10

        // update asteroid positions, cull if far away, draw resulting asteroids
        if (!this.pause_asteroids) {
            this.update_asteroids();

        }
        this.cull_asteroids();
        this.draw_asteroids(context, program_state, t);

        // draw spaceship
        this.draw_spaceship(context, program_state);

        // draw update and cull projectiles
        this.draw_projectile(context, program_state, t, dt);
        this.update_projectiles()
        this.cull_projectiles()

        // detect collisions
        this.check_asteroid_to_spaceship_collisions(t);
        this.check_projectile_to_asteroid_collision(t);

        // draw asteroid explosions and update their particles and cull particles that are done
        this.draw_asteroid_explosions(context, program_state);
        this.update_asteroid_explosions();
        this.cull_asteroid_explosions(t)

        // screen shake
        this.check_screen_shake();

        // increase difficulty by updating asteroid_spawn_period to decrease respectively with score
        if (this.asteroid_spawn_period > 0.1) {
            this.asteroid_spawn_period = ASTEROID_SPAWN_PERIOD - 0.05 * (Math.floor(this.score / (5 * POINTS_PER_ASTEROID_SHOT)))
        }

        // spawn asteroid every so often
        if (!this.pause_asteroids) {
            if (t - this.last_asteroid_spawned_t > this.asteroid_spawn_period) {
                this.spawn_asteroid();
                this.last_asteroid_spawned_t = t;
            }
        }

        this.game_over(context, program_state, t)
        this.displayUI()


    }

    displayUI() {

        let score = document.getElementById("score")
        score.innerHTML = this.score;

        let health = document.getElementById("health")
        health.innerHTML = "<img src='assets/heart.png' style='width: 50px; height: auto'> </img>".repeat(this.lives)
        health.innerHTML += "<img src='assets/empty_heart.png' style='width: 50px; height: auto'> </img>".repeat(NUMBER_OF_LIVES - this.lives)
    }

    // draw background
    draw_background(context, program_state, isFading= [false, 1]) {
        // zoom out
        this.shapes.background_sphere.arrays.texture_coord.forEach(
            (v, i, l) => l[i] = vec(v[0] * 5, v[1] * 5)
        )
        // draw transform of slightly rotating background -- maybe not this is super dizzy
        // let t = program_state.animation_time / 1000;
        // this.background_sphere_model_transform = this.background_sphere_model_transform.times(Mat4.rotation(0.00001, 0, 1, 0));
        if (isFading[0]) {
            this.shapes.background_sphere.draw(context, program_state, this.background_sphere_model_transform, this.materials.background.override({ambient: isFading[1]}));
        }
        else {
            this.shapes.background_sphere.draw(context, program_state, this.background_sphere_model_transform, this.materials.background);

        }

    }

    // spawn asteroid
    spawn_asteroid() {
        // need to redo the new_asteroid_transformation everytime spawn new
        // asteroid spawn at the top -- spawn from -30 to 30 x value
        // calculate new spawn location
        let x = Math.random() * (ASTEROID_SPAWN_X_COORD_MAX + ASTEROID_SPAWN_X_COORD_MAX) - ASTEROID_SPAWN_X_COORD_MAX;
        let y = 0;
        let z = ASTEROID_SPAWN_Z_COORD;
        let frames_until_asteroid_to_origin = Math.random() * (MAX_ASTEROID_FRAMES_TO_ORIGIN - MIN_ASTEROID_FRAMES_TO_ORIGIN) + (MIN_ASTEROID_FRAMES_TO_ORIGIN)

        // push the attributes to system
        this.num_asteroids += 1
        this.asteroid_init_pos.push([x, y, z]);
        this.asteroid_pos.push([x, y, z]);
        this.asteroid_type.push((this.num_asteroids - 1) % NUM_ASTEROID_TYPES);
        this.asteroid_frames_till_origin.push(frames_until_asteroid_to_origin);
        this.asteroid_rotation_dir.push([Math.random(), Math.random(), Math.random()])
    }

    // update position of asteroids
    update_asteroids() {
        for (let i = 0; i < this.num_asteroids; i += 1) {
            // calculate new position
            let new_x = this.asteroid_pos[i][0] - (this.asteroid_init_pos[i][0] / this.asteroid_frames_till_origin[i])
            let new_y = this.asteroid_pos[i][1] - (this.asteroid_init_pos[i][1] / this.asteroid_frames_till_origin[i])
            let new_z = this.asteroid_pos[i][2] - (this.asteroid_init_pos[i][2] / this.asteroid_frames_till_origin[i])

            this.asteroid_pos[i] = [new_x, new_y, new_z]
        }
    }

    draw_asteroids(context, program_state, t) {
        // calculate the point they are in rotation
        let rotation = (t * Math.PI / ASTEROID_NATURAL_ROTATION);

        // draw asteroids
        for (let i = 0; i < this.num_asteroids; i += 1) {
            // make the transform with some rotation
            let asteroid_transform = (Mat4.identity().times(Mat4.translation(this.asteroid_pos[i][0], this.asteroid_pos[i][1], this.asteroid_pos[i][2]))
                .times(Mat4.rotation(rotation, this.asteroid_rotation_dir[i][0], this.asteroid_rotation_dir[i][1], this.asteroid_rotation_dir[i][2])));
            if (this.start_fade) {
                if (this.asteroid_type[i] == 0) {
                    this.shapes.asteroid1.draw(context, program_state, asteroid_transform, this.materials.asteroid1.override({ambient: this.asteroid_ambience}));
                } else if (this.asteroid_type[i] == 1) {
                    this.shapes.asteroid2.draw(context, program_state, asteroid_transform, this.materials.asteroid2.override({ambient: this.asteroid_ambience}));
                } else if (this.asteroid_type[i] == 2) {
                    this.shapes.asteroid3.draw(context, program_state, asteroid_transform, this.materials.asteroid3.override({ambient: this.asteroid_ambience}));
                }
            }
            else {
                    if (this.asteroid_type[i] == 0) {
                        this.shapes.asteroid1.draw(context, program_state, asteroid_transform, this.materials.asteroid1);
                    } else if (this.asteroid_type[i] == 1) {
                        this.shapes.asteroid2.draw(context, program_state, asteroid_transform, this.materials.asteroid2);
                    } else if (this.asteroid_type[i] == 2) {
                        this.shapes.asteroid3.draw(context, program_state, asteroid_transform, this.materials.asteroid3);
                    }
            }
        }
    }

    // delete asteroids that are too far
    cull_asteroids() {
        for (let i = 0; i < this.num_asteroids; i += 1) {
            if (this.asteroid_pos[i][2] > 0) {
                this.delete_asteroid(i);
                i -= 1;
            }
        }
    }

    // delete asteroid given index
    delete_asteroid(i) {
        this.num_asteroids -= 1;
        this.asteroid_type.splice(i, 1);
        this.asteroid_init_pos.splice(i, 1);
        this.asteroid_pos.splice(i, 1);
        this.asteroid_frames_till_origin.splice(i, 1);
        this.asteroid_rotation_dir.splice(i, 1);
    }

    draw_spaceship(context, program_state) {

        // turning left and right if player alive
        if (this.lives > 0) {
            if (this.turnLeft) {
                if (this.spaceshipRotationAmount < MAX_SPACESHIP_ROTATION)
                    this.spaceshipRotationAmount += MAX_SPACESHIP_ROTATION / SPACESHIP_ROTATION_SPEED
            }
            if (this.turnRight) {
                if (this.spaceshipRotationAmount > -1 * MAX_SPACESHIP_ROTATION)
                    this.spaceshipRotationAmount -= MAX_SPACESHIP_ROTATION / SPACESHIP_ROTATION_SPEED
            }
        }

        let spaceship_transform = Mat4.identity().times(Mat4.translation(this.spaceship_pos[0], this.spaceship_pos[1], this.spaceship_pos[2])).times(Mat4.rotation(this.spaceshipRotationAmount, 0, 1, 0)).times(Mat4.rotation(Math.PI, 0, 1, 0)).times(Mat4.scale(1, 1, 1));

        this.spaceship_pos = [10.0 * Math.cos(Math.PI / 2.0 + this.spaceshipRotationAmount), 0, -10.0 * Math.sin(Math.PI / 2.0 + this.spaceshipRotationAmount)]

        // if player is alive
        if (this.lives > 0) {
            // normal spaceship drawing when spaceship alive
            this.shapes.spaceship.draw(context, program_state, spaceship_transform, this.materials.spaceship);
        }
        // else when dead, normal draw unless explosion past apex, then dim the spaceship with explosion reduction
        else {
            // once explosion past apex, start dimming it
            // note that the apex is when the calculation > pi /2
            if ((this.time_elapsed_explosion / 2) > (Math.PI/2)) {
                this.shapes.spaceship.draw(context, program_state, spaceship_transform, this.materials.spaceship.override(color(0, 0, 0, this.spaceship_explosion_progress/5)));
            }
            else {
                // explosion not yet past apex so still draw it normally
                this.shapes.spaceship.draw(context, program_state, spaceship_transform, this.materials.spaceship);
            }
        }
    }

    // check collisions returns the index of asteroid that collided with spaceship
    // loops through all asteroids and if the difference of position in x y AND z < 2 for any given asteroid, we return that collision happened
    check_asteroid_to_spaceship_collisions(t) {
        for (let i = 0; i < this.num_asteroids; i += 1) {
            // if their z axis value less than 2*radius different then we continue checking
            if (Math.abs(this.asteroid_pos[i][2] - this.spaceship_pos[2]) < 2) {
                if (Math.abs(this.asteroid_pos[i][1] - this.spaceship_pos[1]) < 2) {
                    if (Math.abs(this.asteroid_pos[i][0] - this.spaceship_pos[0]) < 2) {
                        // deem the explosion the average of the locations
                        this.initialize_asteroid_explosion(
                            t,
                            this.asteroid_pos[i][0],
                            this.asteroid_pos[i][1],
                            this.asteroid_pos[i][2],
                            this.asteroid_type[i]
                        )
                        this.delete_asteroid(i)
                        i -= 1;
                        this.lives -= 1
                        this.is_screen_shake = true
                    }
                }
            }
        }
    }



    check_screen_shake() {
        if (this.is_screen_shake && this.lives > 0) {

            if (this.time_start_screen_shake < 100) {
                this.time_start_screen_shake += 1
                if ((this.time_start_screen_shake * 9) % 2) {
                    this.eye_position[0] += 1
                    this.eye_position[1] += 1
                }
                else {
                    this.eye_position[0] -= 1
                    this.eye_position[1] -= 1
                }
            }
            else {
                this.time_start_screen_shake = 0
                this.is_screen_shake = false
            }
        }
    }

    // this just sets the values of the explosion to happen and then
    // in the main loop, itll actually animate explosion based on the information
    // stored from this function
    initialize_asteroid_explosion(t, x, y, z, particle_type) {
        // asteroid collision explosion
        let explosion_particle_positions = []

        let start_time = t;

        for (let i = 0; i < 8; i++) {
            let asteroid_explosion_x = x + 2 * (Math.random() - 0.5)
            let asteroid_explosion_y = y + 2 * (Math.random() - 0.5)
            let asteroid_explosion_z = z + 2 * (Math.random() - 0.5)

            explosion_particle_positions.push([asteroid_explosion_x, asteroid_explosion_y, asteroid_explosion_z])
        }

        this.num_asteroids_exploding += 1;
        this.asteroid_explosion_start_time.push(start_time);
        this.asteroid_explosion_particle_loc.push(explosion_particle_positions);
        this.asteroid_explosion_init_loc.push([x, y, z]);
        this.explosion_particle_type.push(particle_type);
    }

    // asteroid collision info:
        // this.asteroid_explosion_start_time = [];
        // this.num_asteroids_exploding = 0;
        // this.asteroid_explosion_particle_loc = [];
        // this.asteroid_explosion_init_loc = [];
        // this.explosion_particle_type = [];
    // with asteroid collision info, just draw the asteroid explosion particles
    // the individual particle positions will be updated in update_asteroid_explosions 
    draw_asteroid_explosions(context, program_state) {
        let t = program_state.animation_time / 1000;
        for (let i = 0; i < this.num_asteroids_exploding; i += 1) {
            let explosion_elapsed_time = t - this.asteroid_explosion_start_time[i];
            let explosion_particle_type = this.explosion_particle_type[i];
            // for each particle
                // this.asteroid_explosion_particle_loc[i] has all of the locations of particles
            for (let j = 0; j < (this.asteroid_explosion_particle_loc[i]).length; j += 1) {
                // draw the particle
                let particle_transform = Mat4.identity()
                    .times(Mat4.translation(this.asteroid_explosion_particle_loc[i][j][0], this.asteroid_explosion_particle_loc[i][j][1], this.asteroid_explosion_particle_loc[i][j][2]))
                    .times(Mat4.scale(0.3, 0.3, 0.3));
                if (explosion_particle_type == 0) {
                    // opaqueness calculation -- elapsed time goes from 0 -> 1
                    // then we want opaqueness to go from 1 to 0 in that time
                    // so elapsed time + 1  
                    this.shapes.asteroid1.draw(context, program_state, particle_transform, this.materials.asteroid1.override(color(0, 0, 0, 1 - (2.5*explosion_elapsed_time))));//color(100, 100, 100, 1 - (2.5*explosion_elapsed_time))));
                } else if (explosion_particle_type == 1) {
                    this.shapes.asteroid2.draw(context, program_state, particle_transform, this.materials.asteroid2.override(color(0, 0, 0, 1 - (2.5*explosion_elapsed_time)))); // 58, 58, 58, 1 - (2.5*explosion_elapsed_time))));
                } else if (explosion_particle_type == 2) {
                    this.shapes.asteroid3.draw(context, program_state, particle_transform, this.materials.asteroid3.override(color(0, 0, 0, 1 - (2.5*explosion_elapsed_time))));// 175, 175, 175, 1 - (2.5*explosion_elapsed_time))));
                }
            }
        }
    }

    // update position of asteroid explosion particles
    update_asteroid_explosions() {
        for (let i = 0; i < this.num_asteroids_exploding; i += 1) {
            // for each particle
                // this.asteroid_explosion_particle_loc[i] has all of the locations of particles
            for (let j = 0; j < (this.asteroid_explosion_particle_loc[i]).length; j += 1) {
                let new_x = this.asteroid_explosion_particle_loc[i][j][0] + ((this.asteroid_explosion_particle_loc[i][j][0] - this.asteroid_explosion_init_loc[i][0]) / 100);
                let new_y = this.asteroid_explosion_particle_loc[i][j][1] + ((this.asteroid_explosion_particle_loc[i][j][1] - this.asteroid_explosion_init_loc[i][1]) / 100);
                let new_z = this.asteroid_explosion_particle_loc[i][j][2] + ((this.asteroid_explosion_particle_loc[i][j][2] - this.asteroid_explosion_init_loc[i][2]) / 100);

                this.asteroid_explosion_particle_loc[i][j] = [new_x, new_y, new_z];
            }
        }
    }

    // remove asteroid explosions that have been around too long 
    //  > 0.5 s or something
    cull_asteroid_explosions(t) {
        for (let i = 0; i < this.num_asteroids_exploding; i += 1) {
            if (t - this.asteroid_explosion_start_time[i] > 0.5) {
                this.num_asteroids_exploding -= 1;
                this.asteroid_explosion_start_time.splice(i,1);
                this.asteroid_explosion_particle_loc.splice(i,1);
                this.asteroid_explosion_init_loc.splice(i,1);
                this.explosion_particle_type.splice(i,1);
                i -= 1;
            }
        }
    }

    spawn_projectile() {
        if (this.time_since_last_projectile > BUFFER_SECS_BETWEEN_PROJECTILES * 1000 && this.lives > 0) {
            this.time_since_last_projectile = 0
            this.num_projectiles += 1;
            this.projectile_rotation_amount.push(this.spaceshipRotationAmount)
            this.projectile_pos.push([this.spaceship_pos[0], this.spaceship_pos[1], this.spaceship_pos[2]])
            this.projectile_init_pos.push([this.spaceship_pos[0], this.spaceship_pos[1], this.spaceship_pos[2]])
        }
    }


    update_projectiles() {
        for (let i = 0; i < this.num_projectiles; i += 1) {
            // calculate new position
            let new_x = this.projectile_pos[i][0] + (this.projectile_init_pos[i][0] / 50)
            let new_y = this.projectile_pos[i][1]
            let new_z = this.projectile_pos[i][2] + (this.projectile_init_pos[i][2] / 50)

            this.projectile_pos[i] = [new_x, new_y, new_z]
        }
    }

    draw_projectile(context, program_state, t) {

        for (let i = 0; i < this.num_projectiles; i += 1) {
            let projectile_transform = Mat4.identity().times(Mat4.translation(this.projectile_pos[i][0], this.projectile_pos[i][1], this.projectile_pos[i][2])).times(Mat4.rotation(this.projectile_rotation_amount[i], 0, 1, 0)).times(Mat4.scale(0.1, 0.1, 0.1))
            this.shapes.projectile.draw(context, program_state, projectile_transform, this.materials.projectile.override({color: hex_color("#d92222")}))
        }
    }

    cull_projectiles() {
        for (let i = 0; i < this.num_projectiles; i += 1) {
            if (this.projectile_pos[i][2] < ASTEROID_SPAWN_Z_COORD) {
                this.delete_projectile(i);
                i -= 1;
            }
        }
    }

    delete_projectile(i) {
        this.num_projectiles -= 1;
        this.projectile_init_pos.splice(i, 1);
        this.projectile_pos.splice(i, 1);
        this.projectile_rotation_amount.splice(i, 1);
    }

    check_projectile_to_asteroid_collision(t) {

        for (let i = 0; i < this.num_asteroids; i += 1) {
            for (let j = 0; j < this.num_projectiles; j += 1) {
                // if their z axis value less than 2*radius different then we continue checking

                if (Math.abs(this.asteroid_pos[i][2] - this.projectile_pos[j][2]) < 2) {
                    if (Math.abs(this.asteroid_pos[i][1] - this.projectile_pos[j][1]) < 2) {
                        if (Math.abs(this.asteroid_pos[i][0] - this.projectile_pos[j][0]) < 2) {
                            this.initialize_asteroid_explosion(
                                t,
                                this.asteroid_pos[i][0],
                                this.asteroid_pos[i][1],
                                this.asteroid_pos[i][2],
                                this.asteroid_type[i]
                            )

                            this.delete_asteroid(i)
                            this.delete_projectile(j)
                            i -= 1;
                            j -= 1;
                            this.score += POINTS_PER_ASTEROID_SHOT

                            return
                        }
                    }
                }
            }
        }
    }

    game_over(context, program_state, t) {
        if (this.lives <= 0) {
            // time elapsed since beginning explosion
            this.time_elapsed_explosion = t - this.time_start_explosion_animation;

            if (this.time_elapsed_explosion > NUM_SECS_START_FADE_AFTER_EXPLOSION) { // should const the time
                this.start_fade = true
                this.time_start_fade = this.time_elapsed_explosion - NUM_SECS_START_FADE_AFTER_EXPLOSION

                if (this.time_start_fade < 5 && this.background_ambience > 0.002 && this.asteroid_ambience > 0.0006 && this.light_size > 1.95) { // seconds of fade
                    this.background_ambience -= 0.002 // rate of fade, -0.2 per sec
                    this.asteroid_ambience -= 0.0006 // -0.06 per sec
                    this.light_size -= 1.95

                    this.eye_position[1] -= 0.02
                    this.eye_position[2] -= 0.03

                    let temp = this.time_start_fade/3.5
                    let eye_direction_x = INIT_EYE_DIRECTION[0] * (1 - temp) + temp * this.spaceship_pos[0]
                    let eye_direction_y = INIT_EYE_DIRECTION[1] * (1 - temp) + temp * this.spaceship_pos[1]
                    let eye_direction_z = INIT_EYE_DIRECTION[2] * (1 - temp) + temp * this.spaceship_pos[2]

                    this.eye_direction = vec3(eye_direction_x , eye_direction_y, eye_direction_z)

                }
                else {
                    this.light_size = 0
                }

            }

            // stop asteroids
            this.pause_asteroids = true
            
            // stop the explosions once the explosion_scale goes 0 -> 1 -> 0
                // which is when (time_elapsed_explosion / 2) == PI
            if ((this.time_elapsed_explosion / 2) < Math.PI) {
                // draw explosions
                for (let i = 0; i < 10; i++) {

                    let explosion_x = this.spaceship_pos[0] + 4 * (Math.random() - 0.5)
                    let explosion_y = this.spaceship_pos[1] + 2 * (Math.random() - 0.5)
                    let explosion_z = this.spaceship_pos[2] + 2 * (Math.random() - 0.5)

                    // IF YOU CHANGE THIS CALCULATION, WILL NEED TO UPDATE WHEN THE SPACESHIP DISAPPEARS ALSO
                    // WILL ALSO NEED TO UPDATE THE IF statement that wraps all of this
                    let explosion_scale = Math.sin(this.time_elapsed_explosion / 2)

                    // store the explosion scale since this goes from 0 -> 1 -> 0, we can use this
                    // to draw the spaceship opaqueness and once it hits 1, just disappears
                    this.spaceship_explosion_progress = explosion_scale

                    let explosion_transform = Mat4.identity().times(
                        Mat4.translation(explosion_x, explosion_y, explosion_z)).times(
                        Mat4.scale(explosion_scale, explosion_scale, explosion_scale))


                    this.shapes.explosion.draw(context, program_state, explosion_transform, this.materials.explosion)
                }
            }
        }
        else {
            this.time_start_explosion_animation = t
        }
    }
}


class Apply_Texture extends Textured_Phong {
    fragment_glsl_code() {
        return this.shared_glsl_code() + `
            varying vec2 f_tex_coord;
            uniform sampler2D texture;
            uniform float animation_time;
            void main(){
                vec4 tex_color = texture2D( texture, f_tex_coord);
                
                if( tex_color.w < .01 ) discard;
                                                                         // Compute an initial (ambient) color:
                gl_FragColor = vec4( ( tex_color.xyz + shape_color.xyz ) * ambient, shape_color.w * tex_color.w ); 
                                                                         // Compute the final color with contributions from lights:
                gl_FragColor.xyz += phong_model_lights( normalize( N ), vertex_worldspace );
        } `;
    }
}