archive complete

2026-03-16 19:04:56 +00:00
parent 4e94902f01
commit da5879fc6e
20 changed files with 1034 additions and 1002 deletions
--- a/projects/warping_lines.html
+++ b/projects/warping_lines.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <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>
+
+    <style>
+        body {
+            padding: 0;
+            margin: 0;
+            font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+            background: #fafafa;
+        }
+
+        .intro {
+            max-width: 900px;
+            margin: 20px auto 10px;
+            padding: 0 16px;
+        }
+
+        .intro h1 {
+            margin: 0 0 6px;
+            font-size: 1.5rem;
+        }
+
+        .intro p {
+            margin: 4px 0 14px;
+            line-height: 1.45;
+        }
+
+        .slidecontainer {
+            width: 100%;
+            /* Width of the outside container */
+        }
+
+        /* The slider itself */
+        .slider {
+            -webkit-appearance: none;
+            /* Override default CSS styles */
+            appearance: none;
+            width: 100%;
+            /* Full-width */
+            height: 25px;
+            /* Specified height */
+            background: #d3d3d3;
+            /* Grey background */
+            outline: none;
+            /* Remove outline */
+            opacity: 1;
+            /* Set transparency (for mouse-over effects on hover) */
+            -webkit-transition: .2s;
+            /* 0.2 seconds transition on hover */
+            transition: opacity .2s;
+        }
+
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            /* Override default look */
+            appearance: none;
+            width: 25px;
+            /* Set a specific slider handle width */
+            height: 25px;
+            /* Slider handle height */
+            background: #434343;
+            /* Grey background */
+            cursor: pointer;
+            /* Cursor on hover */
+        }
+
+        .slider::-moz-range-thumb {
+            width: 25px;
+            /* Set a specific slider handle width */
+            height: 25px;
+            /* Slider handle height */
+            background: #434343;
+            /* Grey background */
+            cursor: pointer;
+            /* Cursor on hover */
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="intro">
+        <h1>Oscillating Arrow Field Visualizer</h1>
+        <p>
+            A sketch to <s>hopefully</s> demonstrate the illusion of the <a
+                href="https://en.wikipedia.org/wiki/M%C3%BCller-Lyer_illusion">Müller-Lyer Illusion</a>
+        </p>
+        <p>The lines - that are the same length, should look longer and shorter based on the angle of the arrow heads.
+        </p>
+        <p>
+            Increasing the value adds more horizontal slices, creating a denser and more detailed pattern.
+            Tap or click to pause and resume the motion.
+        </p>
+    </div>
+    <div class="slidecontainer">
+        <input type="range" min="2" max="11" step="1" value="2" class="slider" id="myRange">
+    </div>
+
+    <script>
+        let vMargin, hMargin, arrowHeight, t, lineNum;
+        let lineMove = true;
+
+        function setup() {
+            createCanvas(windowWidth, windowHeight * 0.6);
+            hMargin = 12;
+            arrowHeight = 25;
+            t = 0;
+            lineNum = 1;
+        }
+
+        function windowResized() {
+            resizeCanvas(windowWidth, windowHeight * 0.6);
+        }
+
+        function draw() {
+            background(43);
+            angleMode(DEGREES);
+            lineNum = document.getElementById('myRange').value;
+
+            drawLine(hMargin, lineNum + 1);
+
+            if (lineMove) {
+                t++;
+            }
+
+            if (t == 360) {
+                t = 0;
+            }
+        }
+
+        function drawLine(hm, vm) {
+            //let changex = map(sin(t), -1, 1, -22, 22);
+            let changex = sin(t) * 18;
+            vm /= 10;
+            for (let j = 1; j < vm - 1; j++) {
+
+                stroke(255, 34, 63);
+                strokeWeight(4);
+                line(width / hm, j * height / vm, width / 2, j * height / vm); //red line
+
+                stroke(69, 98, 255);
+                line(width / 2, j * height / vm, (hm - 1) * width / hm, j * height / vm); //blue line
+
+                stroke(255);
+                line(width / hm, j * height / vm, width / hm + changex, (j * height / vm) - arrowHeight); //left top
+                line(width / hm + changex, (j * height / vm) + arrowHeight, width / hm, j * height / vm); //left bottom
+
+                line((hm - 1) * width / hm + changex, j * height / vm + arrowHeight, (hm - 1) * width / hm, j * height / vm); //right bottom
+                line(width / 2 - changex, j * height / vm + arrowHeight, width / 2, j * height / vm); //center bottom
+
+                line((hm - 1) * width / hm, j * height / vm, (hm - 1) * width / hm + changex, (j * height / vm) - arrowHeight); //right bottom
+                line(width / 2, j * height / vm, width / 2 - changex, (j * height / vm) - arrowHeight); //center top
+            }
+        }
+
+        function mouseClicked() {
+            lineMove = !lineMove;
+        }
+    </script>
+</body>
+
+</html>