ShayneGeo · ShayneGeo · Mar 15, 2024 · Mar 15, 2024 · Mar 15, 2024 · Mar 20, 2024
diff --git a/IMG_1730.JPG b/IMG_1730.JPG
diff --git a/README.md b/README.md
@@ -1,2 +1,6 @@
 # ShayneGeo.github.io
 Shayne Magstadt's Website
+
+<a href="http://www.youtube.com/watch?feature=player_embedded&v=x6I4NZFgA5M
+" target="_blank"><img src="http://img.youtube.com/vi/x6I4NZFgA5M/0.jpg" 
+alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
diff --git a/code.html b/code.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spirograph</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f2; /* Light earthy background */
+            color: #333;
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        canvas {
+            border: 1px solid #333;
+            margin-top: 20px;
+        }
+        .controls {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .controls input, .controls select, .controls button {
+            margin: 5px;
+        }
+        .button {
+            display: inline-block;
+            padding: 10px 20px;
+            font-size: 16px;
+            color: #fff;
+            background-color: #ff6f61;
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            transition: background-color 0.3s ease;
+            margin-top: 20px; /* Ensure there's space above the button */
+        }
+        .button:hover {
+            background-color: #ff4940;
+        }
+    </style>
+</head>
+<body>
+    <h1>Spirograph</h1>
+    <div class="controls">
+        <label for="R">R (fixed circle radius):</label>
+        <input type="number" id="R" value="120">
+        <label for="r">r (moving circle radius):</label>
+        <input type="number" id="r" value="65">
+        <label for="O">O (offset):</label>
+        <input type="number" id="O" value="75">
+        <label for="chaos">Random Level:</label>
+        <input type="range" id="chaos" min="0" max="10" value="0" step="1">
+        <label for="mode">Mode:</label>
+        <select id="mode">
+            <option value="1">Mode 1</option>
+            <option value="2">Mode 2</option>
+        </select>
+        <button onclick="updateSpirograph()">Draw Spirograph</button>
+    </div>
+    <canvas id="spirographCanvas" width="400" height="400"></canvas>
+    <a href="codebuttons.html" class="button">Back to Codebutton</a>
+    <script>
+        function drawSpirograph(ctx, R, r, O, chaos, mode) {
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Clear the canvas
+            let x1 = R - O;
+            let y1 = 0;
+            let i = 0;
+            const steps = 20000; // Increase this number for a more detailed spirograph
+            ctx.beginPath();
+            ctx.moveTo(x1 + 200, y1 + 200);
+            for (i = 0; i <= steps; i++) {
+                let angle = i * Math.PI / 72;
+                let randomFactor = 1 + (Math.random() - 0.5) * chaos / 10;
+                let x2, y2;
+
+                if (mode === "1") {
+                    x2 = randomFactor * ((R + r) * Math.cos(angle) - (r + O) * Math.cos(((R + r) / r) * angle));
+                    y2 = randomFactor * ((R + r) * Math.sin(angle) - (r + O) * Math.sin(((R + r) / r) * angle));
+                } else if (mode === "2") {
+                    // New equation for Mode 2
+                    x2 = randomFactor * ((R + r) * Math.cos(angle) - (r + O) * Math.sin(((R + r) / r) * angle));
+                    y2 = randomFactor * ((R + r) * Math.sin(angle) - (r + O) * Math.cos(((R + r) / r) * angle));
+                }
+
+                ctx.lineTo(x2 + 200, y2 + 200);
+            }
+            ctx.strokeStyle = '#2c5f2d';
+            ctx.stroke();
+        }
+
+        function updateSpirograph() {
+            const R = parseInt(document.getElementById('R').value);
+            const r = parseInt(document.getElementById('r').value);
+            const O = parseInt(document.getElementById('O').value);
+            const chaos = parseInt(document.getElementById('chaos').value);
+            const mode = document.getElementById('mode').value;
+            const canvas = document.getElementById('spirographCanvas');
+            const ctx = canvas.getContext('2d');
+            drawSpirograph(ctx, R, r, O, chaos, mode);
+        }
+
+        window.onload = function() {
+            updateSpirograph(); // Draw initial spirograph with default values
+        };
+    </script>
+</body>
+</html>
diff --git a/code2.html b/code2.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fractal Tree</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #333;
+            color: #fff;
+        }
+        canvas {
+            border: 1px solid #fff;
+            margin-top: 20px;
+        }
+        .controls {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-top: 20px; /* Move the input boxes down a bit */
+        }
+        .controls input, .controls label, .controls button {
+            margin: 5px;
+        }
+        .button {
+            display: inline-block;
+            padding: 10px 20px;
+            font-size: 16px;
+            color: #fff;
+            background-color: #ff6f61;
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            transition: background-color 0.3s ease;
+            margin-top: 20px; /* Ensure there's space above the button */
+        }
+        .button:hover {
+            background-color: #ff4940;
+        }
+    </style>
+</head>
+<body>
+    <div class="controls">
+        <label for="length">Initial Length:</label>
+        <input type="number" id="length" value="20">
+        <button onclick="updateFractalTree()">Draw Fractal Tree</button>
+    </div>
+    <canvas id="fractalTreeCanvas" width="400" height="400"></canvas>
+    <a href="codebuttons.html" class="button">Back to Codebutton</a>
+    <script>
+        function drawFractalTree(ctx, startX, startY, length, angle, branchWidth, color) {
+            ctx.beginPath();
+            ctx.save();
+            ctx.strokeStyle = color;
+            ctx.shadowBlur = 15;
+            ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
+            ctx.lineWidth = branchWidth;
+            ctx.translate(startX, startY);
+            ctx.rotate(angle * Math.PI / 180);
+            ctx.moveTo(0, 0);
+            ctx.lineTo(0, -length);
+            ctx.stroke();
+
+            if (length < 10) {
+                ctx.restore();
+                return;
+            }
+
+            drawFractalTree(ctx, 0, -length, length * 0.8, angle - 15, branchWidth, color);
+            drawFractalTree(ctx, 0, -length, length * 0.8, angle + 15, branchWidth, color);
+
+            ctx.restore();
+        }
+
+        function updateFractalTree() {
+            const length = parseInt(document.getElementById('length').value);
+            const color = '#ff0000'; // Red color
+            const canvas = document.getElementById('fractalTreeCanvas');
+            const ctx = canvas.getContext('2d');
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            drawFractalTree(ctx, canvas.width / 2, canvas.height - 20, length, 0, 2, color);
+        }
+
+        window.onload = function() {
+            updateFractalTree(); // Draw initial fractal tree with default values
+        };
+    </script>
+</body>
+</html>
diff --git a/code3.html b/code3.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Agent-Based Modeling</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #333;
+            color: #fff;
+        }
+        canvas {
+            border: 1px solid #fff;
+            margin-top: 20px;
+        }
+        .controls {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-top: 20px;
+        }
+        .controls input, .controls label, .controls button, .controls a {
+            margin: 5px;
+        }
+        .button {
+            display: inline-block;
+            padding: 10px 20px;
+            font-size: 16px;
+            color: #fff;
+            background-color: #ff6f61;
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            transition: background-color 0.3s ease;
+        }
+        .button:hover {
+            background-color: #ff4940;
+        }
+    </style>
+</head>
+<body>
+    <h1>Agent-Based Modeling: Predator and Prey</h1>
+    <div class="controls">
+        <label for="numPrey">Number of Prey:</label>
+        <input type="number" id="numPrey" value="50">
+        <label for="numPredators">Number of Predators:</label>
+        <input type="number" id="numPredators" value="5">
+        <button onclick="setupSimulation()">Start Simulation</button>
+        <a href="codebuttons.html" class="button">Back to Codebutton</a>
+    </div>
+    <canvas id="abmCanvas" width="800" height="600"></canvas>
+    <script>
+        class Agent {
+            constructor(x, y, color) {
+                this.x = x;
+                this.y = y;
+                this.color = color;
+                this.size = 5;
+            }
+
+            distance(other) {
+                return Math.sqrt((this.x - other.x) ** 2 + (this.y - other.y) ** 2);
+            }
+
+            draw(ctx) {
+                ctx.fillStyle = this.color;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+
+        class Prey extends Agent {
+            constructor(x, y) {
+                super(x, y, 'white');
+            }
+
+            move() {
+                this.x += (Math.random() - 0.5) * 10;
+                this.y += (Math.random() - 0.5) * 10;
+
+                // Ensure the prey stays within the canvas bounds
+                if (this.x < 0) this.x = 0;
+                if (this.x > 800) this.x = 800;
+                if (this.y < 0) this.y = 0;
+                if (this.y > 600) this.y = 600;
+            }
+        }
+
+        class Predator extends Agent {
+            constructor(x, y) {
+                super(x, y, 'red');
+                this.size = 8;
+            }
+
+            move(preyList) {
+                if (preyList.length === 0) return;
+
+                // Find the nearest prey
+                let nearestPrey = preyList[0];
+                let minDist = this.distance(nearestPrey);
+
+                for (const prey of preyList) {
+                    const dist = this.distance(prey);
+                    if (dist < minDist) {
+                        minDist = dist;
+                        nearestPrey = prey;
+                    }
+                }
+
+                // Move towards the nearest prey
+                const angle = Math.atan2(nearestPrey.y - this.y, nearestPrey.x - this.x);
+                this.x += Math.cos(angle) * 5;
+                this.y += Math.sin(angle) * 5;
+
+                // Ensure the predator stays within the canvas bounds
+                if (this.x < 0) this.x = 0;
+                if (this.x > 800) this.x = 800;
+                if (this.y < 0) this.y = 0;
+                if (this.y > 600) this.y = 600;
+
+                // Check if the predator catches the prey
+                if (this.distance(nearestPrey) < this.size + nearestPrey.size) {
+                    const index = preyList.indexOf(nearestPrey);
+                    if (index > -1) {
+                        preyList.splice(index, 1); // Remove the caught prey
+                    }
+                }
+            }
+        }
+
+        function setupSimulation() {
+            const numPrey = parseInt(document.getElementById('numPrey').value);
+            const numPredators = parseInt(document.getElementById('numPredators').value);
+            const canvas = document.getElementById('abmCanvas');
+            const ctx = canvas.getContext('2d');
+
+            const preyList = [];
+            const predatorList = [];
+
+            for (let i = 0; i < numPrey; i++) {
+                preyList.push(new Prey(Math.random() * 800, Math.random() * 600));
+            }
+
+            for (let i = 0; i < numPredators; i++) {
+                predatorList.push(new Predator(Math.random() * 800, Math.random() * 600));
+            }
+
+            function update() {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+                for (const prey of preyList) {
+                    prey.move();
+                    prey.draw(ctx);
+                }
+
+                for (const predator of predatorList) {
+                    predator.move(preyList);
+                    predator.draw(ctx);
+                }
+
+                requestAnimationFrame(update);
+            }
+
+            update();
+        }
+    </script>
+</body>
+</html>