Add projects and tutorials

2026-03-16 18:03:17 +00:00
parent fc54c3bd4e
commit 4e94902f01
132 changed files with 19170 additions and 65 deletions
--- a/projects/ellipse_construction.html
+++ b/projects/ellipse_construction.html
@@ -0,0 +1,184 @@
+<DOCTYPE! html>
+    <html>
+
+    <head>
+        <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
+    </head>
+
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: #fafafa;
+            margin: 20px;
+            text-align: center;
+        }
+
+        #container {
+            max-width: 900px;
+            margin: 0 auto;
+        }
+
+        h1,
+        h2,
+        p {
+            margin: 10px 0;
+        }
+    </style>
+
+    <div id="container">
+        <h1>Ellipse Construction</h1>
+
+        <p>
+            Inspired by a Richard Feyman's <a href="https://en.wikipedia.org/wiki/Feynman's_Lost_Lecture">lost
+                lecture</a> & <a href="https://www.youtube.com/watch?v=xdIjYBtnvZU">3blue1brown's video</a>.
+        </p>
+        <p>A geometric proof as to why planetary orbits are ellipitcal.</p>
+
+        <h2 id="PIbox"></h2>
+        <h3 id="percentage"></h3>
+    </div>
+
+
+    <script>
+        class dot {
+            constructor(x, y) {
+                this.x = x;
+                this.y = y;
+            }
+        }
+
+        var ux, uy;
+        var points = [];
+        var numericValue = 15;
+
+        function setup() {
+            createCanvas(800, 800);
+            background(41);
+        }
+
+        function draw() {
+            translate(width / 2, height / 2);
+            background(41);
+
+            stroke(75, 75, 215);
+            strokeWeight(3);
+            noFill();
+            ellipse(0, 0, width - (0.0625 * width), height - (0.0625 * height));
+
+            stroke(215, 215, 15);
+            strokeWeight(7);
+            point(0, 0);
+            if (mouseY > 0 && mouseY < height && mouseX > 0 && mouseX < width) {
+                if (mouseIsPressed == true && mouseButton == LEFT) {
+
+                    ux = mouseX - width / 2;
+                    uy = mouseY - height / 2;
+                    point(ux, uy);
+                    getCirclePoints();
+                    drawLines(ux, uy);
+                    drawTLines(ux, uy);
+
+                } else if (mouseIsPressed == true && mouseButton == RIGHT) {
+                    ux = mouseX - width / 2;
+                    uy = mouseY - height / 2;
+                    point(ux, uy);
+                    getCirclePoints();
+                    drawTLines(ux, uy);
+                }
+            }
+        }
+
+        function getCirclePoints() {
+            var r = (width - (0.0625 * width)) / 2;
+            var step = 1 / numericValue;
+            var index = 0;
+            for (var i = 0; i < TWO_PI; i += step) {
+                var cx = r * Math.sin(i);
+                var cy = r * Math.cos(i);
+                points[index] = new dot(cx, cy);
+                index++;
+            }
+        }
+
+        function drawLines(startX, startY) {
+            strokeWeight(0.4);
+            stroke(255, 100);
+
+            for (var i = 0; i < points.length; i++) {
+                line(startX, startY, points[i].x, points[i].y);
+                //findMidpoint(startX, startY, points[i].x, points[i].y);
+            }
+        }
+
+        function drawTLines(startX, startY) {
+            strokeWeight(0.4);
+            stroke(255);
+
+            for (var i = 0; i < points.length; i++) {
+                findMidpoint(startX, startY, points[i].x, points[i].y);
+            }
+        }
+
+        function findMidpoint(x1, y1, x2, y2) {
+            //find center
+            var cx = (x1 + x2) / 2;
+            var cy = (y1 + y2) / 2;
+
+            //move line to the center on the origin
+            x1 -= cx; y1 -= cy;
+            x2 -= cx; y2 -= cy;
+
+            //rotate both points
+            xtemp = x1; ytemp = y1;
+            x1 = -ytemp; y1 = xtemp;
+
+            xtemp = x2; ytemp = y2;
+            x2 = -ytemp; y2 = xtemp;
+
+            //move the center point back to where it was
+            x1 += cx; y1 += cy;
+            x2 += cx; y2 += cy;
+            stroke(255, 0, 0);
+            line(x1, y1, x2, y2);
+            stroke(255);
+        }
+
+        function genLines() {
+            var pointOk = false;
+            do {
+                ux = random(width);
+                uy = random(height);
+                if (getDist(0, ux, 0, uy) <= (width - (0.0625 * width)) / 2) {
+                    pointOk = true;
+                }
+            }
+            while (!pointOk);
+
+            point(ux, uy);
+            getCirclePoints();
+            drawLines(ux, uy);
+            drawTLines(ux, uy);
+        }
+
+        function genTLines() {
+            var pointOk = false;
+            do {
+                ux = random(width);
+                uy = random(height);
+                if (getDist(0, ux, 0, uy) <= (width - (0.0625 * width)) / 2) {
+                    pointOk = true;
+                }
+            }
+            while (!pointOk);
+
+            point(ux, uy);
+            getCirclePoints();
+            drawTLines(ux, uy);
+        }
+
+        function getDist(x1, x2, y1, y2) {
+            return Math.sqrt((x1 - x2) ^ 2 + (y1 - y2) ^ 2);
+        }
+    </script>
+
+    </html>