<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1.0, initial-scale=1.0">
    <title>Nick Voorham</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="./css/style.css?vs=1" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- <script type="application/javascript" src="./fixed.js"></script> -->
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            class Mouse {
                x = 0;
                y = 0;
                click = false;
            }

            class Boid {
                static max_speed = 6;
                static list = [];
                static radius = 100;
                static separation_radius = Boid.radius / 1.3;
                static mouse = new Mouse();
                static follow_mouse = false;
                static tap_timeout = null;
                static shape = {width: 50, height: 50};
                static acceleration = 600;
                static released = false;
                static create(x, y, initial_angle, speed) {
                    Boid.list.push(new Boid(x, y, initial_angle, speed));
                }
                

                static calculate_mouse_position(x, y) {
                    const rect = Page.canvas.getBoundingClientRect();
                    const scaleX = Page.canvas.width / rect.width;
                    const scaleY = Page.canvas.height / rect.height;
                    const downscale_factor = Page.get_downscale_factor();

                    return {
                        x: (x - rect.left) * scaleX,
                        y: (y - rect.top) * scaleY + Page.scroll.y * 2 / downscale_factor
                    };
                }

                static handle_phone_tap(event) {
                    let x = 0;
                    let y = 0;
                    if (event.changedTouches && event.changedTouches.length > 0) {
                        x = event.changedTouches[0].clientX;
                        y = event.changedTouches[0].clientY;
                    } else {
                        return;
                    }

                    if (Boid.tap_timeout != null) {
                        clearTimeout(Boid.tap_timeout);
                    }

                    Boid.follow_mouse = true;

                    const click_position = Boid.calculate_mouse_position(x, y);
                    
                    Boid.mouse.x = click_position.x;
                    Boid.mouse.y = click_position.y;

                    Boid.tap_timeout = setTimeout(() => {
                        Boid.follow_mouse = false;
                    }, 2500);
                }

                static handle_mouse_move(event) {
                    const mouse_position = Boid.calculate_mouse_position(event.clientX, event.clientY);

                    Boid.mouse.x = mouse_position.x;
                    Boid.mouse.y = mouse_position.y;
                }

                static handle_mouse_click(evt) {
                    Boid.mouse.click = evt.buttons != 0

                    if (!Boid.tap_timeout) {
                        Boid.follow_mouse = Boid.mouse.click;
                    }
                }

                
                previous_position = {
                    x: 0,
                    y: 0,
                };
                
                previous_velocity = {
                    x: 0,
                    y: 0,
                };
                
                position;
                
                total_velocity_sum = {
                    x: 0,
                    y: 0,
                }
                velocity;
                speed;

                constructor(x, y, angle, speed) {
                    this.position = {x: x, y: y};
                    this.previous_position = this.position;
                    this.velocity = {x: Math.sin(angle), y: Math.cos(angle)};
                    this.previous_velocity = {x: 0, y: 0};
                }

                loop_on_edge() {
                    this.position.x = ((this.position.x + Boid.shape.width / 2) % (Page.canvas.width + Boid.shape.width)) - Boid.shape.width / 2;
                    if (this.position.x < -Boid.shape.width / 2) {
                        this.position.x += Page.canvas.width + Boid.shape.width / 2;
                    }
                    
                    const downscale_factor = Page.get_downscale_factor();
                    const document_height = document.body.getBoundingClientRect().height * 2 / downscale_factor;
                    this.position.y = (document_height + Boid.shape.height + this.position.y) % (document_height + Boid.shape.height);

                    // To prevent glitchy renders (interpolating between the other side of the screen to the current position)
                    this.previous_position = this.position;
                }

                noise() {
                    return {x: Math.random() - 0.5, y: Math.random() - 0.5}
                }

                limit_velocity = (velocity) => {
                    const magnitude = vector_distance(velocity, {x: 0, y: 0});
                    
                    if (magnitude > Boid.max_speed) {
                        return vector_multiply(vector_normalize(velocity), Boid.max_speed);
                    }
                    
                    return velocity;
                }

                wind() {
                    return {x: 0.1, y: 0};
                }

                update_velocity(delta_time) {
                    const nearby_boids = get_boids_in_area(this, Boid.radius);
                    let sum_positions = {x: 0, y: 0};
                    let cohesion_velocity = {x: 0, y: 0};
                    let alignment_velocity = {x: 0, y: 0};
                    let separation_velocity = {x: 0, y: 0};
                    if (nearby_boids.length > 0) {
                        for (let i = 0; i < nearby_boids.length; i++) {
                            const boid = nearby_boids[i];
                            const boid_distance = vector_distance(this.position, boid.position);
                            if (boid_distance == 0) {
                                continue;
                            }

                            // Cohesion
                            sum_positions = vector_sum([sum_positions, boid.position]);

                            // Separation
                            if (boid_distance < Boid.separation_radius) {
                                const position_difference = vector_subtract(this.position, boid.position);
                                const normalized_difference = vector_normalize(position_difference);
                                const weighted_difference = vector_divide(normalized_difference, boid_distance / 3);

                                separation_velocity = vector_sum([separation_velocity, weighted_difference])
                            }

                            // Alignment
                            const normalized_velocity = vector_normalize(boid.velocity);
                            const weighted_velocity = vector_divide(normalized_velocity, boid_distance);

                            alignment_velocity = vector_sum([alignment_velocity, weighted_velocity])
                        }

                        // Cohesion
                        const desired_position = vector_divide(sum_positions, nearby_boids.length);
                        const desired_difference = vector_subtract(desired_position, this.position);

                        cohesion_velocity = vector_multiply(vector_normalize(desired_difference), 0.05);
                    }

                    const contain_velocity = this.contain(1, 2);
                    const super_containment_velocity = this.contain(10, 1.2);
                    const mouse_velocity = this.follow_mouse();
                    const noise = vector_multiply(this.noise(), 0.05);

                    this.previous_position = this.position;
                    this.previous_velocity = {...this.velocity};

                    this.total_velocity_sum = vector_sum([this.total_velocity_sum, separation_velocity, cohesion_velocity, alignment_velocity, noise, mouse_velocity, contain_velocity, super_containment_velocity]);
                }

                update() {
                    this.total_velocity_sum = vector_multiply(this.total_velocity_sum, Boid.acceleration / updates_per_second);

                    this.velocity = vector_sum([this.velocity, this.total_velocity_sum]);
                    this.total_velocity_sum = {
                        x: 0,
                        y: 0,
                    }

                    this.velocity = this.limit_velocity(this.velocity);
                    
                    this.position = vector_sum([this.position, this.velocity]);

                    this.loop_on_edge();
                }

                contain(force, size) {
                    if (Boid.released) {
                        return {
                            x: 0,
                            y: 0,
                        };
                    }
                    let ab = Page.boids_box.getBoundingClientRect();

                    const box_area = {
                        x: ab.x + ab.width / 2,
                        y: ab.y + ab.height / 2 + Page.scroll.y,
                        width: ab.width / size,
                        height: ab.height / size,
                    };

                    let x = Math.max(Math.min(0, box_area.x - this.position.x + box_area.width / 2), box_area.x - this.position.x - box_area.width / 2);
                    let y = Math.max(Math.min(0, box_area.y - this.position.y + box_area.height / 2), box_area.y - this.position.y - box_area.height / 2);

                    const difference = vector_divide({
                        x: x,
                        y: y,
                    }, 400 / force);

                    return difference;
                }

                follow_mouse() {
                    if (Boid.mouse == null) {
                        return {x: 0, y: 0};
                    }

                    if (!Boid.follow_mouse) {
                        return {x: 0, y: 0};
                    }

                    let goal = vector_subtract({x: Boid.mouse.x, y: Boid.mouse.y}, this.position);
                    const magnitude = Math.abs(goal.x) + Math.abs(goal.y);

                    goal = vector_divide(goal, 200);

                    if (magnitude > 100) {
                        return vector_multiply(vector_divide(goal, magnitude), 100);
                    }
                    return goal;
                }

                render(ctx, scroll, time_difference) {
                    const x = Math.round(lerp(this.position.x, this.previous_position.x, time_difference * updates_per_second));
                    const y = Math.round(lerp(this.position.y, this.previous_position.y, time_difference * updates_per_second));

                    const downscale_factor = Page.get_downscale_factor();

                    if (y - scroll.y * 2 / downscale_factor < 0) {
                        return;
                    }

                    const scale = {w: Boid.shape.width / 2, h: Boid.shape.height / 2};
                    ctx.setTransform(1, 0, 0, 1, 0, 0);
                    
                    ctx.translate(x - Page.scroll.x * 2 / downscale_factor, y - Page.scroll.y * 2 / downscale_factor);

                    const angle_from = Math.atan2(this.previous_velocity.y, this.previous_velocity.x);
                    const angle_to = Math.atan2(this.velocity.y, this.velocity.x);
                    
                    ctx.rotate(angle_lerp(angle_to, angle_from, time_difference * updates_per_second ) + Math.PI / 2);

                    ctx.moveTo(0, -scale.h);
                    ctx.lineTo(-scale.w / 2, scale.h);
                    ctx.lineTo(0, scale.h / 2);
                    ctx.lineTo(scale.w / 2, scale.h);
                }
            }

            // Classes
            function vector_sum(vectors) {
                const sum = {x: 0, y: 0};

                for (let i = 0; i < vectors.length; i++) {
                    const vector = vectors[i];
                    sum.x = sum.x + vector.x;
                    sum.y = sum.y + vector.y;
                }

                return sum;
            }

            function angle_lerp(from, to, t) {
                const diff = ((to - from + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
                return from + diff * t;
            }

            function lerp(from, to, translation_unit) {
                return from * (1 - translation_unit) + to * translation_unit;
            }

            function vector_average(vectors) {
                const sum = vector_sum(vectors);

                return vector_divide(sum, vectors.length);
            }

            function vector_distance(vector_a, vector_b) {
                return distance(vector_a.x, vector_a.y, vector_b.x, vector_b.y);
            }

            function vector_divide(vector, scalar) {
                return {x: vector.x / scalar, y: vector.y / scalar};
            }

            function vector_multiply(vector, scalar) {
                return {x: vector.x * scalar, y: vector.y * scalar};
            }

            function vector_subtract(vector_a, vector_to_subtract) {
                return {x: vector_a.x - vector_to_subtract.x, y: vector_a.y - vector_to_subtract.y};
            }

            function vector_add(vector_a, vector_b) {
                return {x: vector_a.x + vector_b.x, y: vector_a.y + vector_b.y};
            }

            function vector_normalize(vector) {
                const total = Math.sqrt(Math.pow(vector.x, 2) + Math.pow(vector.y, 2));
                if (total == 0) {
                    return {x: 0, y: 1};
                }

                return {x: vector.x / total, y: vector.y / total};
            }

            function vector_square_magnitude(vector_a, vector_b) {
                return (vector_a.x - vector_b.x) * (vector_a.x - vector_b.x) + (vector_a.y - vector_b.y) * (vector_a.y - vector_b.y);
            }

            function distance(x, y, x2, y2) {
                return Math.sqrt(Math.pow(x - x2, 2) + Math.pow(y - y2, 2));
            }

            // TODO: Store boids inside of a quadtree
            function get_boids_in_area(current_boid, radius) {
                const list = [];
                const boids = [];
                if (!World.quad_tree) {
                    return list;
                }
                World.quad_tree.query_range(boids, new AABB(
                    current_boid.position,
                    radius,
                    10
                ));
                
                
                for (let i = 0; i < boids.length; i++) {
                    const boid = boids[i];
                    if (current_boid === boid) {
                        continue;
                    }

                    const boid_distance = vector_square_magnitude(current_boid.position, boid.position);
                    if (boid_distance < radius * radius) {
                        list.push(boid);
                    }
                };
                
                return list;
            }

            class AABB {
                center = {x: 0, y: 0};
                half_dimension;

                constructor(center, half_dimension) {
                    this.center = center;
                    this.half_dimension = half_dimension;
                }

                contains_point(point) {
                    const x_inside = 
                        point.x < this.center.x + this.half_dimension &&
                        point.x > this.center.x - this.half_dimension;
                    const y_inside = 
                        point.y < this.center.y + this.half_dimension &&
                        point.y > this.center.y - this.half_dimension;

                    return x_inside && y_inside;
                }

                intersects_aabb(aabb) {
                    const x_inside = Math.abs(aabb.center.x - this.center.x) < aabb.half_dimension + this.half_dimension;
                    const y_inside = Math.abs(aabb.center.y - this.center.y) < aabb.half_dimension + this.half_dimension;

                    return x_inside &&  y_inside;
                }
            }

            class QuadTree {
                static NODE_CAPACITY = 4;
                static MAX_DEPTH = 8;
                depth = 0;
                boundary;
                points = [];

                north_west;
                north_east;
                south_west;
                south_east;

                constructor(boundary, depth) {
                    this.boundary = boundary;
                    this.depth = depth;
                }

                insert(element) {
                    if (!this.boundary.contains_point(element.position)) {
                        return false;
                    }

                    if (this.points.length < QuadTree.NODE_CAPACITY && this.north_west == null) 
                    {
                        this.points.push(element);
                        return true;
                    }

                    if (this.north_west == null) {
                        this.subdivide();
                    }
                
                    if (this.north_west.insert(element)) return true;
                    if (this.north_east.insert(element)) return true;
                    if (this.south_west.insert(element)) return true;
                    if (this.south_east.insert(element)) return true;

                    return false;
                }

                subdivide() {
                    if (this.depth >= QuadTree.MAX_DEPTH) {
                        return;
                    }

                    const half_dimension = this.boundary.half_dimension / 2;
                    const north_west_aabb = new AABB({
                        x: this.boundary.center.x - half_dimension,
                        y: this.boundary.center.y - half_dimension
                    }, half_dimension);
                    this.north_west = new QuadTree(north_west_aabb, this.depth + 1);
                    
                    const north_east_aabb = new AABB({
                        x: this.boundary.center.x + half_dimension,
                        y: this.boundary.center.y - half_dimension
                    }, half_dimension);
                    this.north_east = new QuadTree(north_east_aabb, this.depth + 1);

                    
                    const south_west_aabb = new AABB({
                        x: this.boundary.center.x - half_dimension,
                        y: this.boundary.center.y + half_dimension
                    }, half_dimension);
                    this.south_west = new QuadTree(south_west_aabb, this.depth + 1);
                    
                    const south_east_aabb = new AABB({
                        x: this.boundary.center.x + half_dimension,
                        y: this.boundary.center.y + half_dimension
                    }, half_dimension);
                    this.south_east = new QuadTree(south_east_aabb, this.depth + 1);
                }

                query_range(result, aabb, limit) {
                    if (!this.boundary.intersects_aabb(aabb)) {
                        return;
                    }

                    for (let i = 0; i < this.points.length; i++) {
                        const point = this.points[i];
                        if (aabb.contains_point(point.position)) {
                            result.push(point);
                            if (result.length > limit) {
                                return;
                            }
                        }
                    }
                    
                    if (this.north_west == null) {
                        return;
                    }

                    this.north_west.query_range(result, aabb, limit);
                    this.north_east.query_range(result, aabb, limit);
                    this.south_west.query_range(result, aabb, limit);
                    this.south_east.query_range(result, aabb, limit);

                    return;
                }

                render(ctx) {
                    ctx.strokeRect(
                        Math.round(this.boundary.center.x - this.boundary.half_dimension), 
                        Math.round(this.boundary.center.y - this.boundary.half_dimension),
                        this.boundary.half_dimension * 2,
                        this.boundary.half_dimension * 2
                    );

                    if (this.north_west != null) {
                        this.north_west.render(ctx);
                        this.north_east.render(ctx);
                        this.south_west.render(ctx);
                        this.south_east.render(ctx);
                    }
                }
            }

            class Page {
                static canvas = document.getElementById("boids-canvas");
                static boids_box = document.getElementById("boids-box");
                static ctx = Page.canvas.getContext("2d");
                static scroll = {x: 0, y: 0};
                static DEBUG = false;
                static started_intro = false;

                static get_downscale_factor() {
                    const width = window.innerWidth;

                    if (width > 1000) {
                        return 2;
                    } else if (width >= 500 && width <= 1000) {
                        return 1.5;
                    } else {
                        return 1;
                    }
                }

                // Handlers
                static handle_scroll(evt) {
                    Page.scroll.x = window.scrollX || window.pageXOffset;
                    Page.scroll.y = window.scrollY || window.pageYOffset;

                    // if (Page.started_intro == false) {
                    //     if (Page.boids_box.getBoundingClientRect().y < 300) {
                    //     }
                    // }

                    Page.handle_resize();
                }

                static handle_resize() {
                    const dpr = window.devicePixelRatio || 1;
                    const rect = Page.canvas.getBoundingClientRect();
                    const downscale = Page.get_downscale_factor();

                    rect.width /= downscale;
                    rect.height /= downscale;

                    Page.canvas.width = rect.width * dpr;
                    Page.canvas.height = rect.height * dpr;

                    Page.ctx.scale(dpr, dpr);

                    Page.canvas.style.width = `${rect.width}px`;
                    Page.canvas.style.height = `${rect.height}px`;
                }

                static setup() {
                    Page.handle_resize();
                    Page.ctx.filter = 'none';
                    Page.ctx.imageSmoothingEnabled = false;
                }
            }

            // Game logic
            class World {
                static quad_tree;
                static BOID_SETUP_COUNT = 125;
                static render_quad_tree = false;

                static update_velocity() {
                    for (let i = 0; i < Boid.list.length; i++) {
                        if (i >= Boid.active_boid_count) {
                            break;
                        }
                        
                        const boid = Boid.list[i];
                        boid.update_velocity();
                    };
                }

                static update() {
                    for (let i = 0; i < Boid.list.length; i++) {
                        if (i >= Boid.active_boid_count) {
                            break;
                        }

                        const boid = Boid.list[i];
                        boid.update();
                    };

                    const rect = document.body.getBoundingClientRect();

                    World.quad_tree = new QuadTree(new AABB(
                        {x: rect.width, y: rect.height},
                        Math.max(rect.width, rect.height)
                    ))

                    for (let i = 0; i < Boid.list.length; i++) {
                        if (i >= Boid.active_boid_count) {
                            break;
                        }

                        const boid = Boid.list[i];
                        World.quad_tree.insert(boid);
                    };
                }

                static clear(ctx) {
                    ctx.setTransform(1, 0, 0, 1, 0, 0);
                    ctx.clearRect(0, 0, Page.canvas.width, Page.canvas.height);
                }

                static render(ctx, time_difference) {
                    ctx.beginPath();
                    
                    for (let i = 0; i < Boid.list.length; i++) {
                        if (i >= Boid.active_boid_count) {
                            break;
                        }
                        
                        const boid = Boid.list[i];
                        boid.render(ctx, Page.scroll, time_difference);
                    };
                    ctx.fillStyle = 'white';
                    ctx.fill();

                    const downscale_factor = Page.get_downscale_factor();

                    if (World.render_quad_tree && World.quad_tree) {
                        ctx.lineWidth = "6";
                        ctx.strokeStyle = "red";
                        ctx.setTransform(1, 0, 0, 1, 0, 0);

                        ctx.translate(-Page.scroll.x * 2 / downscale_factor, -Page.scroll.y * 2 / downscale_factor);
                        // const ghost = {
                        //     x: Boid.mouse.x,
                        //     y: Boid.mouse.y,
                        //     width: 25,
                        //     height: 25,
                        // };
                        // ctx.fillRect(ghost.x - ghost.width / 2, ghost.y - ghost.height / 2, ghost.width, ghost.height);
                        World.quad_tree.render(ctx);
                    }
                    ctx.setTransform(1, 0, 0, 1, 0, 0);
                }

                static setup() {
                    // for(let i = 0; i < World.BOID_SETUP_COUNT; i++) {
                    // }
                }

                static handle_scroll() {
                    // World.render(Page.ctx);
                }
            }
            
            window.addEventListener("scroll", Page.handle_scroll);
            window.addEventListener("resize", Page.handle_resize);
            window.addEventListener("DOMContentLoaded", Page.setup);
            window.addEventListener("mousemove", Boid.handle_mouse_move);
            window.addEventListener("mousedown", Boid.handle_mouse_click);
            window.addEventListener("mouseup", Boid.handle_mouse_click);
            window.addEventListener('touchend', Boid.handle_phone_tap);
            window.addEventListener("scroll", World.handle_scroll);
            window.addEventListener("DOMContentLoaded", World.setup);

            document.getElementById("slider_updates_per_second").addEventListener("input", function(evt) {
                const value = evt.target.value;
                updates_per_second = value;
                document.getElementById("indicator_updates_per_second").innerHTML = `(${value})`;
            });

            document.getElementById("slider_boid_max_speed").addEventListener("input", function(evt) {
                const value = evt.target.value;
                Boid.max_speed = value;
                document.getElementById("indicator_boid_max_speed").innerHTML = `(${value})`;
            });

            document.getElementById("slider_boid_acceleration").addEventListener("input", function(evt) {
                const value = evt.target.value;
                Boid.acceleration = value;
                document.getElementById("indicator_boid_acceleration").innerHTML = `(${value})`;
            });

            document.getElementById("slider_boid_count").addEventListener("input", function(evt) {
                const value = evt.target.value;
                document.getElementById("indicator_boid_count").innerHTML = `(${value})`;

                while (Boid.active_boid_count < value) {
                    let ab = Page.boids_box.getBoundingClientRect();

                    const x = ab.x + ab.width / 2;
                    const y = ab.y + ab.height / 2;

                    if (Boid.list.length <= Boid.active_boid_count) {
                        Boid.create(
                            x, 
                            y + Page.scroll.y, 
                            0,
                        );
                    } else {
                        let current_boid = Boid.list[Boid.active_boid_count];
                        let angle = Math.atan2(current_boid.velocity.y, current_boid.velocity.x) + Math.PI / 2;
                        current_boid.position = {
                            x: x + Math.sin(angle) * 10,
                            y: y + Math.cos(angle) * 10 + Page.scroll.y,
                        };
                    }

                    Boid.active_boid_count = Boid.active_boid_count + 1;
                }

                if (Boid.active_boid_count > value) {
                    Boid.active_boid_count = Math.floor(value);
                }
            });

            let start_button = document.getElementById("start_simulation");
            start_button.addEventListener("click", () => {
                start_button.style.display = "none";
                Page.started_intro = true;

                setTimeout(() => {
                    const panel = document.getElementById("boids-settings-panel");
                    panel.classList.toggle("settings-visible");

                    setTimeout(() => {
                        const release_panel = document.getElementById("release-settings-panel");
                        release_panel.classList.toggle("settings-visible");
                    }, 5000);
                }, 5000);

                requestAnimationFrame(intro);
            });

            let release_button = document.getElementById("release-the-boids");
            release_button.addEventListener("click", () => {
                Boid.released = !Boid.released;
                if (Boid.released) {
                    release_button.innerHTML = "Contain the boids!";
                } else {
                    release_button.innerHTML = "Release them again!";
                }
            })

            let show_quad_tree_button = document.getElementById("show-quad-tree");
            show_quad_tree_button.addEventListener("click", () => {
                World.render_quad_tree = !World.render_quad_tree;
                if (World.render_quad_tree) {
                    show_quad_tree_button.innerHTML = "Hide quadtree";
                } else {
                    show_quad_tree_button.innerHTML = "Show quadtree";
                }
            })

            // window.addEventListener("DOMContentLoaded", Boid.setup);

            let last_update = Date.now();
            let total_time_difference = 0;
            let updates_per_second = 20;
            function loop() {
                let now = Date.now();
                let time_difference = (now - last_update) / 1000;
                last_update = now;
                
                total_time_difference += time_difference;
                if (total_time_difference > 5) {
                    total_time_difference = 1 / updates_per_second;
                }

                World.clear(Page.ctx);
                while (total_time_difference > 0) {
                    total_time_difference -= 1 / updates_per_second;
                    World.update_velocity();
                }
                
                World.update();
                World.render(Page.ctx, Math.abs(total_time_difference));
                
                requestAnimationFrame(loop);
            }

            let boid_count = 0;
            let intro_timer = 0;
            let speedup = 1;

            const boids_text_elements = [
                document.getElementById("boids-text-1"),
                document.getElementById("boids-text-2"),
                document.getElementById("boids-text-3"),
                document.getElementById("boids-text-4")
            ];
            

            function intro() {
                let boids_text_amount = boids_text_elements.length;
                Boid.active_boid_count = World.BOID_SETUP_COUNT;

                while (intro_timer > 0) {
                    if (boid_count >= World.BOID_SETUP_COUNT) {
                        break;
                    }

                    const angle = boid_count / World.BOID_SETUP_COUNT * Math.PI * 2 * 2;
                    const offset = (boid_count / (World.BOID_SETUP_COUNT / 2) < 1 ? 55 : 150);
                    let ab = Page.boids_box.getBoundingClientRect();

                    Boid.create(
                        ab.x + ab.width / 2 + Math.sin(angle) * offset, 
                        ab.y + ab.height / 2 + Page.scroll.y + Math.cos(angle) * offset, 
                        angle + Math.PI/2,
                    );
                    
                    for (let i = 0; i < boids_text_amount; i++) {
                        if (boid_count == Math.floor(World.BOID_SETUP_COUNT / 3) * i) {
                            boids_text_elements[i].style.display = "block";
                        }
                        if (boid_count == Math.floor(World.BOID_SETUP_COUNT / 3) * i) {
                            let idx = i - 1;
                            if (idx >= 0) { 
                                boids_text_elements[idx].style.display = "none";
                            }
                        }
                    }
                    intro_timer -= 1;
                    boid_count++;
                }
                
                intro_timer+= 1 + speedup;
                World.render(Page.ctx, 0);
                if (boid_count < World.BOID_SETUP_COUNT) {
                    requestAnimationFrame(intro);
                } else {
                    last_update = Date.now();
                    setTimeout(() => {
                        for (let i = 0; i < boids_text_amount; i++) {
                            boids_text_elements[i].style.display = "none";
                        }
                    }, 2000);
                    requestAnimationFrame(loop);
                }
            }
        });
    </script>
</head>
<body>
    <nav class="navbar navbar-dark sticky-top navbar-expand-lg bg-sight-1">
        <div class="container">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="nav collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                    <!-- HOME with dropdown -->
                    <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle active" href="#" id="homeDropdown" role="button">
                        <i class="fas fa-home"></i> Home
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark bg-sight-1" aria-labelledby="homeDropdown">
                        <li><a class="dropdown-item" href="#about-me"><i class="fas fa-user"></i> About Me</a></li>
                        <li><a class="dropdown-item" href="#projects"><i class="fas fa-folder-open"></i> Projects</a></li>
                    </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid bg-sight-1">
        <div class="container-fluid bg-sight-3">
            <div class="container">
                <canvas id="boids-canvas" style="pointer-events: none;" class="end-0 top-0 position-fixed w-100 h-100"></canvas>
                
                <div class="py-5 position-relative">
                    <div class="container-element bg-sight-2 text-light container p-5 rounded">
                        <div class="row ">
                            <div class="col-sm-12 mt-auto mb-auto col-lg-6 col-xl-5">
                                <figure class="figure">
                                    <img src="img/Me.jpg" class="rounded img-fluid" alt="A picture of Nick Voorham.">
                                </figure>
                            </div>
                            <div class="col-sm-12 col-lg-6">
                                <h2 id="about-me" class="fs-1 text-left mb-3">About me</h2>
                                <hr>
                                <div class="row">
                                    <p class="fs-5">My name is Nick Voorham. I design and develop games that reward player curiosity through emergent gameplay. I am learning to build and refine complex algorithms, with early examples shown in the projects on this page.
                                    </p>
                                </div>
                                <h2 class="fs-1 text-left mb-3 w-100 ">My goal</h2>
                                <hr>
                                <p class="fs-5">
                                    My goal is to create games that enable interactive exploration of complex concepts, from physics and mathematics to cosmology, allowing players to experiment and internalize abstract ideas through immersive systems.
                                </p>
                                <div class="gap-2 row">
                                    <div>
                                        <a href="https://www.linkedin.com/in/nick-voorham-9aa48b170/" target="_blank" role="button" class="btn btn-secondary w-auto">
                                            <i class="bi bi-linkedin"></i>
                                        </a>
                                        <a href="mailto: gleeglor@gmail.com" role="button" class="btn btn-secondary w-auto">
                                            <i class="bi bi-envelope"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="py-5 position-relative">
                    <div class="container-element bg-sight-2 text-light container p-5 rounded">
                        <h2 id="the-boids" class="fs-1 text-left mb-3">Boids</h2>

                        <div id="boids-settings-panel" class="settings-panel row">
                            <span class="col-6 fs-3">Updates per second <span id="indicator_updates_per_second">(20)</span></span>
                            <input class="col-6" id="slider_updates_per_second" type="range" step="1" min="1" max="60" value="20">
                            
                            <span class="col-6 fs-3">Boids max speed <span id="indicator_boid_max_speed">(6)</span></span>
                            <input class="col-6" id="slider_boid_max_speed" type="range" step="1" min="1" max="60" value="6">

                            <span class="col-6 fs-3">Boids speed <span id="indicator_boid_acceleration">(600)</span></span>
                            <input class="col-6" id="slider_boid_acceleration" type="range" step="1" min="300" max="6000" value="600">

                            <span class="col-6 fs-3">Boid count <span id="indicator_boid_count">(125)</span></span>
                            <input class="col-6" id="slider_boid_count" type="range" step="1" min="0" max="1200" value="125">

                            <button id="show-quad-tree" class="col-6 btn btn-lg btn-primary">Show quadtree</button>
                            
                        </div>
                        <br>
                        <div id="release-settings-panel" class="settings-panel row">
                            <button id="release-the-boids" class="col-6 btn-lg p-3 btn btn-danger">Release... The boids...</button>
                        </div>
                    </div>
                    <div id="boids-box" class="vh-100 d-flex border">
                        <div style="height: 50%" class="position-box">
                            <h1 id="boids-text-1" style="display: none" class="lg-text center text-dark">3</h1>
                            <h2 id="boids-text-2" style="display: none" class="lg-text center text-dark">2</h2>
                            <h2 id="boids-text-3" style="display: none" class="lg-text center text-dark">1</h2>
                            <h2 id="boids-text-4" style="display: none" class="lg-text center text-dark">GOOOO!!!</h2>
                        </div>
                        <button id="start_simulation" class="position-absolute center">
                            Start the boid simulation
                        </button>
                    </div>
                </div>
                <div class="py-5 position-relative">
                    <div class="bg-sight-4 text-light container p-5 rounded">
                        <h2 id="projects" class="fs-1 text-center mb-3">My projects</h2>
                        <hr>
                        <div class="row gy-5 justify-content-between ">
                            <div class="col-12 col-md-5">
                                <div class="card bg-sight-3" >
                                    <div class="card-body p-0 text-light">
                                        <div class="image-container">
                                            <img src="img/Singularity bomb.png" class="w-100 small-image" alt="Rainworld singularity bomb">
                                            <div class="overlay p-4 d-flex align-items-end">
                                                <h5 class="fs-3">Rain world: Exotic weaponry</h5>
                                            </div>
                                        </div>
                                        <div class="p-4 pt-3">
                                            <p class="badge bg-sight-2 rounded-5 p-2 mb-3 me-1">Game</p>
                                            <p class="badge bg-sight-2 rounded-5 p-2 mb-3 me-1">Mod</p>
                                            <p class="card-text">Explosive weaponry with special effects for Rain World.</p>
                                            <!-- <a href="/rainworld.html" class="card-link rounded-5 btn bg-read">Read more</a> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-5">
                                <div class="card bg-sight-3" >
                                    <div class="card-body p-0 text-light">
                                        <div class="image-container">
                                            <img src="img/Unavailable.png" class="w-100 small-image" alt="Garrys mod projects">
                                            <div class="overlay p-4 d-flex align-items-end">
                                                <h5 class="fs-3">Protocol kardashev</h5>
                                            </div>
                                        </div>
                                        <div class="p-4 pt-3">
                                            <p class="badge bg-sight-2 rounded-5 p-2 mb-3 me-1">Game</p>
                                            <p class="card-text">A game about resource management, exponential growth and exploiting game mechanics, centered around the concept of the <a target="_blank" href="https://en.wikipedia.org/wiki/Kardashev_scale">Kardashev scale</a></p>
                                            <!-- <a href="/" class="card-link rounded-5 btn bg-read">Read more</a> -->
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>