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/oscillations_in_3d.html
+++ b/projects/oscillations_in_3d.html
@@ -0,0 +1,62 @@
+<html>
+<title>Oscilations in 3D</title>
+
+<head>
+    <link rel="shortcut icon" type"image/ico" href"/Media/iconImage.ico">
+    <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
+</head>
+<script>
+    let angle = 0;
+    let w = 30; //amount of boxes
+    let ma;
+    let maxD
+
+    function setup() {
+        createCanvas(600, 600, WEBGL);
+        frameRate(24);
+        ma = atan(1 / sqrt(2)); //max angle
+        maxD = dist(0, 0, 200, 200); //max distance
+    }
+
+    function draw() {
+        background(100);
+        ortho(-400, 400, -400, 400, 0, 1000); //to set up ortho projection
+        directionalLight(255, 255, 255, 0, -1, 0);
+
+        rotateX(-QUARTER_PI);
+        rotateY(ma);
+
+        let offset = 0;
+        for (let z = 0; z < height; z += w) {
+            for (let x = 0; x < width; x += w) {
+                push()
+                let d = dist(x, z, width / 2, height / 2)
+                offset = map(d, 0, maxD, -PI, PI);
+                let a = angle + offset;
+                let h = floor(map(sin(a), -1, 1, 100, 350));
+                normalMaterial();
+                translate(x - width / 2, 0, z - width / 2);
+                box(w, h, w);
+                pop()
+            }
+        }
+        angle -= 0.1;
+    }
+    function mousePressed() {
+        if (w == 20) {
+            w = 25;
+        } else if (w == 25) {
+            w = 30;
+        } else {
+            w = 20;
+        }
+        redraw();
+    }
+</script>
+<style>
+    @import url('https://fonts.googleapis.com/css?family=Black+Han+Sans');
+</style>
+<p style="font-family: 'Black Han Sans', sans-serif;">Click me to change the number of boxes</p>
+
+</html>