diff --git a/index.html b/index.html
index f5d2ebf..61a9c67 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <title>AlgoArt Creator Studio</title>
     <meta name="author" content="Platform developed by the AlgoArt team led by Michael Wehar.">
@@ -7,10 +8,10 @@
     <meta name="viewport" content="width=850">
     <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
-          integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
-            integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
-            crossorigin="anonymous"></script>
+        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
+        crossorigin="anonymous"></script>
     <link rel="stylesheet" href="styles.css?ver=5">
 </head>
 
@@ -20,7 +21,8 @@
         <nav class="navbar navbar-expand-lg sticky-top">
             <div class="container-fluid">
                 <!-- Website Title -->
-                <h1><a class="navbar-brand" href="https://algoart.org"><span>AlgoArt</span><span class="dot-org">.org</span></a></h1>
+                <h1><a class="navbar-brand" href="https://algoart.org"><span>AlgoArt</span><span
+                            class="dot-org">.org</span></a></h1>
                 <!-- Subtitle -->
                 <div class="front_nav">
                     <div class="navbar-nav">
@@ -29,8 +31,9 @@ <h1><a class="navbar-brand" href="https://algoart.org"><span>AlgoArt</span><span
                     </div>
                 </div>
                 <!-- Button for smaller browser display -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
-                        aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
+                    aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
                 <!-- Right Side Buttons -->
@@ -41,10 +44,13 @@ <h1><a class="navbar-brand" href="https://algoart.org"><span>AlgoArt</span><span
                         <a type="button" class="btn btn-outline-secondary" role="button"
                             href="https://github.com/Algorithmically-Generated-Artwork/Drawing-Program"
                             style="margin-right: 5px; display: flex; align-items: center">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
-                                    <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
-                                    <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
-                                </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor"
+                                class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
+                                <path fill-rule="evenodd"
+                                    d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z" />
+                                <path fill-rule="evenodd"
+                                    d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z" />
+                            </svg>
                             &nbsp; GitHub Repository
                         </a>
                     </div>
@@ -59,62 +65,59 @@ <h1><a class="navbar-brand" href="https://algoart.org"><span>AlgoArt</span><span
             <!-- Actions -->
             <div class="action_sidebar">
                 <!-- Start/Pause Button -->
-                <button type="button" class="btn" onclick="start()"
-                        data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Start"
-                        data-bs-custom-class="custom-tooltip"
-                        id="start_pause_button">
+                <button type="button" class="btn" onclick="start()" data-bs-toggle="tooltip" data-bs-placement="top"
+                    data-bs-title="Start" data-bs-custom-class="custom-tooltip" id="start_pause_button">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-play-circle"
-                         viewBox="0 0 17 17"
-                         id="startButton" style="color: forestgreen">
-                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-                        <path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
+                        viewBox="0 0 17 17" id="startButton" style="color: forestgreen">
+                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                        <path
+                            d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z" />
                     </svg>
                     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-pause-circle"
-                         viewBox="0 0 17 17"
-                         id="pauseButton" style="display: none; color: indianred">
-                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                        viewBox="0 0 17 17" id="pauseButton" style="display: none; color: indianred">
+                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                         <path d="M5 6.25a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0v-3.5zm3.5 0a1.25
-                        1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0v-3.5z"/>
+                        1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0v-3.5z" />
                     </svg>
                 </button>
                 <!-- Reset Button -->
-                <button type="button" class="btn" onclick="reset()"
-                        data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Reset"
-                        data-bs-custom-class="custom-tooltip">
+                <button type="button" class="btn" onclick="reset()" data-bs-toggle="tooltip" data-bs-placement="top"
+                    data-bs-title="Reset" data-bs-custom-class="custom-tooltip">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-clockwise"
-                         viewBox="0 0 17 17" style="color: dodgerblue">
-                        <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
-                        <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+                        viewBox="0 0 17 17" style="color: dodgerblue">
+                        <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
+                        <path
+                            d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                     </svg>
                 </button>
                 <!-- Clear Canvas Button -->
-                <button type="button" class="btn" onclick="clearCanvas()"
-                        data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Clear"
-                        data-bs-custom-class="custom-tooltip">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 17 17"
-                         style="color: orangered">
-                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-                        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707
-                    8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+                <button type="button" class="btn" onclick="clearCanvas()" data-bs-toggle="tooltip"
+                    data-bs-placement="top" data-bs-title="Clear" data-bs-custom-class="custom-tooltip">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-x-circle"
+                        viewBox="0 0 17 17" style="color: orangered">
+                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                        <path
+                            d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707
+                    8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                     </svg>
                 </button>
                 <!-- Save Image Button -->
-                <button type="button" class="btn" onclick="saveCanvas()"
-                        data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Save"
-                        data-bs-custom-class="custom-tooltip">
+                <button type="button" class="btn" onclick="saveCanvas()" data-bs-toggle="tooltip"
+                    data-bs-placement="top" data-bs-title="Save" data-bs-custom-class="custom-tooltip">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-box-arrow-down"
-                         viewBox="0 0 17 17" style="color: #F4D03F">
+                        viewBox="0 0 17 17" style="color: #F4D03F">
                         <path fill-rule="evenodd" d="M3.5 10a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v8a.5.5 0 0
                     1-.5.5h-2a.5.5 0 0 0 0 1h2A1.5 1.5 0 0 0 14 9.5v-8A1.5 1.5 0 0 0 12.5 0h-9A1.5 1.5 0 0 0 2 1.5v8A1.5
-                    1.5 0 0 0 3.5 11h2a.5.5 0 0 0 0-1h-2z"/>
+                    1.5 0 0 0 3.5 11h2a.5.5 0 0 0 0-1h-2z" />
                         <path fill-rule="evenodd" d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5
-                    14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"/>
+                    14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z" />
                     </svg>
                 </button>
             </div>
             <!-- Canvas -->
             <div class="canvas_wrapper">
-                <canvas id="myCanvas" class="canvas" width="600" height="600">Your browser does not support the HTML5 canvas
+                <canvas id="myCanvas" class="canvas" width="600" height="600">Your browser does not support the HTML5
+                    canvas
                     tag.
                 </canvas>
             </div>
@@ -126,14 +129,14 @@ <h1><a class="navbar-brand" href="https://algoart.org"><span>AlgoArt</span><span
                 <div class="tab-content" id="v-pills-tabContent">
                     <!-- Algo Panel -->
                     <div class="tab-pane fade show active" id="v-pills-algo" role="tabpanel"
-                         aria-labelledby="v-pills-algo-tab" tabindex="0">
+                        aria-labelledby="v-pills-algo-tab" tabindex="0">
                         <div class="algo_panel">
                             <!-- Panel Title -->
                             <strong class="d-flex w-100 align-items-center">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-code-slash"
-                                     viewBox="0 0 16 16"
-                                     style="color: forestgreen">
-                                    <path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/>
+                                    viewBox="0 0 16 16" style="color: forestgreen">
+                                    <path
+                                        d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z" />
                                 </svg>
                                 &nbsp;Algorithm Lists
                             </strong>
@@ -143,51 +146,52 @@ <h1><a class="navbar-brand" href="https://algoart.org"><span>AlgoArt</span><span
                     </div>
                     <!-- Parameter Panel -->
                     <div class="tab-pane fade" id="v-pills-params" role="tabpanel" aria-labelledby="v-pills-params-tab"
-                         tabindex="0">
+                        tabindex="0">
                         <div class="param_panel">
                             <!-- Panel Name -->
                             <strong class="d-flex w-100 align-items-center">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-list-nested"
-                                     viewBox="0 0 16 16"
-                                     style="color: dodgerblue">
+                                    viewBox="0 0 16 16" style="color: dodgerblue">
                                     <path fill-rule="evenodd"
-                                          d="M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z"/>
+                                        d="M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z" />
                                 </svg>
                                 &nbsp;Parameter Panel
                             </strong>
                             <!-- Name of the current algorithm -->
                             <div class="current_param_name">
                                 <strong>
-                                    Selected: <span class="current_algo"
-                                                    style="display: inline-flex"></span>
+                                    Selected: <span class="current_algo" style="display: inline-flex"></span>
                                 </strong>
                             </div>
                             <!-- Parameter General Choices (e.g. default, save, randomize) -->
                             <div class="param_choices" style="margin-top: 10px; margin-bottom: 20px">
                                 <div class="btn-group" role="group" aria-label="param_choices">
                                     <button type="button" class="btn btn-outline-secondary" id="default"
-                                            onclick="set_to_default()" style="border-right: none">Default
+                                        onclick="set_to_default()" style="border-right: none">Default
                                     </button>
                                     <button type="button" class="btn btn-outline-secondary" id="randomize"
-                                            onclick="randomize_params()" style="border-right: none">Randomize
+                                        onclick="randomize_params()" style="border-right: none">Randomize
                                     </button>
                                     <button type="button" class="btn btn-outline-secondary" id="save"
-                                            onclick="save_params()">Save
+                                        onclick="save_params()">Save
                                     </button>
                                 </div>
                             </div>
                             <!-- List of Parameters (all parameters are generated dynamically) -->
                             <div class="inner_param" id="inner_param">
                                 <div class="hr-solid" style="margin-bottom: 2px"></div>
-                                <strong class="d-flex w-100 align-items-center" style="font-size: 21px; margin-bottom: 5px">Boolean Params</strong>
+                                <strong class="d-flex w-100 align-items-center"
+                                    style="font-size: 21px; margin-bottom: 5px">Boolean Params</strong>
                                 <!-- Parameters that are shorter -->
                                 <div class="checkbox_param" id="checkbox_param"></div>
                                 <div class="hr-solid" style="margin-bottom: 2px"></div>
-                                <strong class="d-flex w-100 align-items-center" style="font-size: 21px; margin-bottom: 5px">Numeric & String Params</strong>
+                                <strong class="d-flex w-100 align-items-center"
+                                    style="font-size: 21px; margin-bottom: 5px">Numeric & String Params</strong>
                                 <!-- Parameters that are checkboxes -->
                                 <div class="shorter_param" id="shorter_param"></div>
                                 <div class="hr-solid" style="margin-bottom: 2px"></div>
-                                <strong class="d-flex w-100 align-items-center" style="font-size: 21px; margin-bottom: 5px">Longer Params</strong>
+                                <strong class="d-flex w-100 align-items-center"
+                                    style="font-size: 21px; margin-bottom: 5px">Longer Params</strong>
                                 <!-- Parameters that are longer -->
                                 <div class="longer_param" id="longer_param"></div>
                                 <br>
@@ -196,23 +200,27 @@ <h1><a class="navbar-brand" href="https://algoart.org"><span>AlgoArt</span><span
                     </div>
                     <!-- About Panel -->
                     <div class="tab-pane fade" id="v-pills-about" role="tabpanel" aria-labelledby="v-pills-about-tab"
-                         tabindex="0">
+                        tabindex="0">
                         <div class="about_panel">
                             <!-- Panel Name -->
                             <strong class="d-flex w-100 align-items-center">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-info-circle"
-                                     viewBox="0 0 16 16"
-                                     style="color: #F4D03F">
-                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-                                    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+                                    viewBox="0 0 16 16" style="color: #F4D03F">
+                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                                    <path
+                                        d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
                                 </svg>
                                 &nbsp;About
                             </strong>
                             <!-- Website Description -->
-                            <div class="inner_about" id="inner_about" style="padding: 8px; padding-left: 18px; padding-right: 18px;">
+                            <div class="inner_about" id="inner_about"
+                                style="padding: 8px; padding-left: 18px; padding-right: 18px;">
                                 <h4 style="font-weight: bold">Welcome to the Creator Studio!</h4>
                                 <p>
-                                    <a href="https://algoart.org">AlgoArt.org</a> is a digital platform that brings together Artists and Technologists to create algorithmically generated visual designs and artworks.  Using our Creator Studio, you can generate your own unique artworks!
+                                    <a href="https://algoart.org">AlgoArt.org</a> is a digital platform that brings
+                                    together Artists and Technologists to create algorithmically generated visual
+                                    designs and artworks. Using our Creator Studio, you can generate your own unique
+                                    artworks!
                                 </p>
                                 <p>
                                     Here is how to get started!
@@ -222,46 +230,62 @@ <h4 style="font-weight: bold">Welcome to the Creator Studio!</h4>
                                         Select an Algorithm from our Algorithm List.
                                     </li>
                                     <li>
-                                        Go to the Params Tab, then adjust parameters by clicking checkboxes or typing into textboxes and pressing enter.
+                                        Go to the Params Tab, then adjust parameters by clicking checkboxes or typing
+                                        into textboxes and pressing enter.
                                     </li>
                                     <li>
                                         Press the Start Button to create your own artwork!
                                     </li>
                                     <li>
-                                        You can pause and start again at anytime.  You can restart by clicking the Reset Button and clear the canvas by clicking the Clear Button.
+                                        You can pause and start again at anytime. You can restart by clicking the Reset
+                                        Button and clear the canvas by clicking the Clear Button.
                                     </li>
                                     <li>
                                         Finally, be sure to click the Save Button to download your masterpiece!
                                     </li>
                                 </ul>
                                 <p>
-                                    To see more artworks, please visit <a href="https://algoart.org/gallery.html">Our Gallery</a> and select your favorites!  Also, visit our <a href="https://github.com/Algorithmically-Generated-Artwork/Drawing-Program">GitHub Repo</a> to create your own drawing algorithms using our framework!
+                                    To see more artworks, please visit <a href="https://algoart.org/gallery.html">Our
+                                        Gallery</a> and select your favorites! Also, visit our <a
+                                        href="https://github.com/Algorithmically-Generated-Artwork/Drawing-Program">GitHub
+                                        Repo</a> to create your own drawing algorithms using our framework!
                                 </p>
                                 <div class="hr-solid" style="padding-top: 8px;"></div>
                                 <p>
-                                  To learn more about our drawing algorithms and platform, see the following videos:
+                                    To learn more about our drawing algorithms and platform, see the following videos:
                                 </p>
-                                <h5 style="font-weight: bold; padding-bottom: 5px;">Demonstration of Drawing Algorithms</h5>
+                                <h5 style="font-weight: bold; padding-bottom: 5px;">Demonstration of Drawing Algorithms
+                                </h5>
                                 <p style="margin: 0; text-align: center">
                                     <a href="https://www.youtube.com/watch?v=SGNbv__s0rI">
-                                        <img class="video-preview" title="Demonstration Video" src="video_preview/image1.png">
+                                        <img class="video-preview" title="Demonstration Video"
+                                            src="video_preview/image1.png">
                                     </a>
                                 </p>
                                 <div style="padding-top: 13px;"></div>
-                                <h5 style="font-weight: bold; padding-bottom: 5px;">Talk About How Our Platform Works</h5>
+                                <h5 style="font-weight: bold; padding-bottom: 5px;">Talk About How Our Platform Works
+                                </h5>
                                 <p style="margin: 0; text-align: center">
                                     <a href="https://www.youtube.com/watch?v=0Ts7Sa_z69Y&t=46s">
-                                        <img class="video-preview" title="Educational Video" src="video_preview/image2.png">
+                                        <img class="video-preview" title="Educational Video"
+                                            src="video_preview/image2.png">
                                     </a>
                                 </p>
                                 <div style="padding-top: 13px;"></div>
                                 <div class="hr-solid" style="padding-top: 8px;"></div>
                                 <h5 style="font-weight: bold">Credits</h5>
                                 <p>
-                                    The AlgoArt Platform was developed by Swarthmore College faculty member M. Wehar and student researchers X. Dong, J. Gallardo Moreno, O. Khan, X. Li, M. Newman-Toker, R. Oet, V. Sumano, L. Suresh, and A. Zhang. Special thanks to all friends and collaborators who offered help!
+                                    The AlgoArt Platform was developed by Swarthmore College faculty member M. Wehar and
+                                    student researchers X. Dong, J. Gallardo Moreno, O. Khan, X. Li, M. Newman-Toker, R.
+                                    Oet, V. Sumano, L. Suresh, and A. Zhang. Special thanks to all friends and
+                                    collaborators who offered help!
                                 </p>
                                 <p class="about-libraries">
-                                    * This platform was developed using the <a href="https://github.com/jquery/jquery">JQuery</a> and <a href="https://github.com/twbs/bootstrap">Bootstrap</a> libraries as well as <a href="https://github.com/twbs/icons">Bootstrap Icons</a> which were made available under <a href="https://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
+                                    * This platform was developed using the <a
+                                        href="https://github.com/jquery/jquery">JQuery</a> and <a
+                                        href="https://github.com/twbs/bootstrap">Bootstrap</a> libraries as well as <a
+                                        href="https://github.com/twbs/icons">Bootstrap Icons</a> which were made
+                                    available under <a href="https://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
                                 </p>
                             </div>
                         </div>
@@ -271,27 +295,27 @@ <h5 style="font-weight: bold">Credits</h5>
             <!-- Selection Buttons -->
             <div class="sideSelection" style="display: flex">
                 <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"
-                     style="justify-content: center">
+                    style="justify-content: center">
                     <button class="nav-link active" id="v-pills-algo-tab" data-bs-toggle="pill"
-                            data-bs-target="#v-pills-algo" type="button" role="tab" aria-controls="v-pills-algo"
-                            aria-selected="true">Algos
+                        data-bs-target="#v-pills-algo" type="button" role="tab" aria-controls="v-pills-algo"
+                        aria-selected="true">Algos
                     </button>
                     <button class="nav-link" id="v-pills-params-tab" data-bs-toggle="pill"
-                            data-bs-target="#v-pills-params" type="button" role="tab" aria-controls="v-pills-params"
-                            aria-selected="false">Params
+                        data-bs-target="#v-pills-params" type="button" role="tab" aria-controls="v-pills-params"
+                        aria-selected="false">Params
                     </button>
                     <button class="nav-link" id="v-pills-about-tab" data-bs-toggle="pill"
-                            data-bs-target="#v-pills-about" type="button" role="tab" aria-controls="v-pills-about"
-                            aria-selected="false" style="margin-top: auto; margin-bottom: 0">About
+                        data-bs-target="#v-pills-about" type="button" role="tab" aria-controls="v-pills-about"
+                        aria-selected="false" style="margin-top: auto; margin-bottom: 0">About
                     </button>
                 </div>
             </div>
             <!-- Offcanvas for smaller browser display -->
             <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight"
-                 aria-labelledby="offcanvasRightLabel">
+                aria-labelledby="offcanvasRightLabel">
                 <!-- for closing the offcanvas -->
-                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
-                        aria-label="Close" id="offcanvas_close" style="display: none"></button>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"
+                    id="offcanvas_close" style="display: none"></button>
             </div>
         </div>
     </div>
@@ -308,6 +332,7 @@ <h5 style="font-weight: bold">Credits</h5>
         var width = c.width;
         var height = c.height;
     </script>
+    <script src="utils.js"></script>
     <script src="algGP.js"></script>
     <script src="algGP_params.js"></script>
     <script src="algVines.js"></script>
@@ -322,4 +347,5 @@ <h5 style="font-weight: bold">Credits</h5>
     <script src="algDots_params.js"></script>
     <script src="index.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/utils.js b/utils.js
new file mode 100644
index 0000000..64bd7a7
--- /dev/null
+++ b/utils.js
@@ -0,0 +1,114 @@
+/**
+ * Creates a seeded random number generator using Linear Congruential Generator algorithm.
+ * Provides reproducible random numbers - same seed always produces same sequence.
+ * 
+ * @param {number} [seed=12345] - The seed value for the random number generator
+ * @returns {Object} RNG object with methods for generating random values
+ * @returns {function(): number} returns.next - Get next random number between 0 and 1
+ * @returns {function(number, number): number} returns.float - Get random float between min and max
+ * @returns {function(number, number): number} returns.int - Get random integer between min and max (inclusive)
+ * @returns {function(number): boolean} returns.bool - Get random boolean with optional probability
+ * @returns {function(Array): *} returns.choice - Pick random element from array
+ * @returns {function(Array): Array} returns.shuffle - Return shuffled copy of array
+ * 
+ * @example
+ * // Basic usage
+ * const rng = random(42);
+ * console.log(rng.next()); // 0.7266343236062676 (always same with seed 42)
+ * console.log(rng.float(0, 100)); // Random float between 0-100
+ * console.log(rng.int(1, 6)); // Random integer 1-6 (dice roll)
+ * 
+ * @example
+ * // Array operations
+ * const rng = random(123);
+ * const colors = ['red', 'green', 'blue'];
+ * console.log(rng.choice(colors)); // Random color
+ * console.log(rng.shuffle([1, 2, 3, 4])); // Shuffled array
+ * 
+ * @example
+ * // Reproducibility
+ * const rng1 = random(555);
+ * const rng2 = random(555);
+ * console.log(rng1.next() === rng2.next()); // true - same seed, same result
+ */
+const random = (seed = Date.now()) => {
+    let state = seed;
+
+    /**
+     * Get the next random number in sequence
+     * 
+     * Linear Congruential Generator implementation
+     * Uses constants from Numerical Recipes: a=1664525, c=1013904223, m=2^32
+     * 
+     * @returns {number} Random number between 0 and 1
+     */
+    const next = () => {
+        state = (state * 1664525 + 1013904223) % 4294967296;
+
+        return state / 4294967296;
+    };
+
+    /**
+     * Get random floating point number within range
+     * 
+     * @param {number} [min=0] - Minimum value (inclusive)
+     * @param {number} [max=1] - Maximum value (exclusive)
+     * 
+     * @returns {number} Random float between min and max
+     */
+    const float = (min = 0, max = 1) => next() * (max - min) + min;
+
+    /**
+     * Get random integer within range
+     * 
+     * @param {number} min - Minimum value (inclusive)
+     * @param {number} max - Maximum value (inclusive)
+     * 
+     * @returns {number} Random integer between min and max
+     */
+    const int = (min, max) => Math.floor(next() * (max - min + 1)) + min;
+
+    /**
+     * Get random boolean value
+     * 
+     * @param {number} [probability=0.5] - Probability of returning true (0-1)
+     * 
+     * @returns {boolean} Random boolean based on probability
+     */
+    const bool = (probability = 0.5) => next() < probability;
+
+    /**
+     * Pick random element from array
+     * 
+     * @param {Array} array - Array to choose from
+     * 
+     * @returns {*} Random element from the array
+     */
+    const choice = (array) => array[Math.floor(next() * array.length)];
+
+    /**
+     * Shuffle array using Fisher-Yates algorithm
+     * 
+     * @param {Array} array - Array to shuffle
+     * 
+     * @returns {Array} New shuffled array (original unchanged)
+     */
+    const shuffle = (array) => {
+        const shuffled = [...array];
+        for (let i = shuffled.length - 1; i > 0; i--) {
+            const j = int(0, i);
+            [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+        }
+
+        return shuffled;
+    };
+
+    return {
+        next,
+        float,
+        int,
+        bool,
+        choice,
+        shuffle,
+    };
+};
\ No newline at end of file
