Differences

This shows you the differences between two versions of the page.

--- code:dome_projection_v01 [2025/04/29 16:16] – removed Felix Hardmood Beck
+++ code:dome_projection_v01 [2025/04/29 16:16] (current) – created Felix Hardmood Beck
@@ Line 1: / Line 1: @@
+<code>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Maske – Farbwechsel + Volle Buttonfläche + Korrekte Rotation</title>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
+    <style>
+      body { margin: 0; overflow: hidden; background: black; }
+      canvas { display: block; position: absolute; z-index: -1; }
+      #gui-container { position: absolute; left: 50px; bottom: 50px; z-index: 10; pointer-events: auto; }
+      #help-container {
+        position: absolute; left: 50px; top: 50px;
+        background: rgba(0,0,0,0.7); color: white; padding: 10px 20px;
+        border: 1px solid red; border-radius: 10px; font-family: sans-serif; font-size: 14px;
+        z-index: 20; display: none;
+      }
+      .dg.main { background-color: #222 !important; color: red !important; }
+      .dg .close-button { display: none !important; }
+      .dg .slider-fg { background: red !important; }
+      .dg .c .slider { background: #444 !important; }
+      .dg .cr.number { border-left: 3px solid red !important; }
+      .dg input[type="text"] { color: red !important; }
+    </style>
+  </head>
+  <body>
+    <div id="gui-container"></div>
+    <div id="help-container">
+      <strong>Shortcuts:</strong><br>
+      [h] Show/Hide Handles and GUI<br>
+      [r] Reset Workspace<br>
+      [a] Fill Circle Red<br>
+      [b] Fill Circle Green<br>
+      [c] Fill Circle Blue<br>
+      [d] Fill Circle Yellow<br>
+      [0] Remove Circle Fill<br><br>
+      <em>Click outside the area → Fullscreen toggle</em><br>
+      <em>Click on Load A/B/C/D → Change color</em>
+    </div>
+    <script>
+      let corners = [], circleCenter, interfaceElements = [], draggingIndex = -1, draggingCircleCenter = false, draggingInterfaceIndex = -1;
+      let showHandles = false, circleFillColor = null;
+      const cornerRadius = 25, interfaceSize = { w: 240, h: 80 };
+      let params = { Diameter: 400 }, gui;
+      function setup() {
+        createCanvas(windowWidth, windowHeight);
+        resetCorners(); resetCircleCenter(); setupInterfaceElements();
+        gui = new dat.GUI({ autoPlace: false });
+        document.getElementById('gui-container').appendChild(gui.domElement);
+        gui.add(params, 'Diameter', 100, 1000).step(1).name('Circle Diameter');
+        document.getElementById('gui-container').style.display = 'none';
+      }
+      function draw() {
+        background(0);
+        fill(50); noStroke();
+        beginShape(); for (let pt of corners) vertex(pt.x, pt.y); endShape(CLOSE);
+        if (circleFillColor) fill(circleFillColor); else noFill();
+        stroke(255); strokeWeight(1);
+        ellipse(circleCenter.x, circleCenter.y, params.Diameter);
+        noStroke();
+        rectMode(CENTER); textAlign(CENTER, CENTER); textSize(16);
+        for (let el of interfaceElements) {
+          push();
+          translate(el.position.x, el.position.y);
+          rotate(radians(el.rotation));
+          fill(100); rect(0, 0, interfaceSize.w, interfaceSize.h);
+          fill(255); text(el.label, 0, 0);
+          if (showHandles) { fill(255, 0, 0); ellipse(0, 0, cornerRadius); }
+          pop();
+        }
+        if (showHandles) {
+          fill(255, 0, 0);
+          for (let pt of corners) ellipse(pt.x, pt.y, cornerRadius);
+          ellipse(circleCenter.x, circleCenter.y, cornerRadius);
+        }
+      }
+      function mousePressed() {
+        const guiBounds = document.getElementById('gui-container').getBoundingClientRect();
+        if (mouseX >= guiBounds.left && mouseX <= guiBounds.left + guiBounds.width &&
+            mouseY >= guiBounds.top && mouseY <= guiBounds.top + guiBounds.height) return;
+        for (let i = 0; i < interfaceElements.length; i++) {
+          let el = interfaceElements[i];
+          let local = screenToLocal(mouseX, mouseY, el);
+          if (local.x > -interfaceSize.w/2 && local.x < interfaceSize.w/2 &&
+              local.y > -interfaceSize.h/2 && local.y < interfaceSize.h/2) {
+            if (showHandles) {
+              draggingInterfaceIndex = i;
+            } else {
+              if (el.label.includes("A")) circleFillColor = color(255, 0, 0);
+              if (el.label.includes("B")) circleFillColor = color(0, 255, 0);
+              if (el.label.includes("C")) circleFillColor = color(0, 0, 255);
+              if (el.label.includes("D")) circleFillColor = color(255, 255, 0);
+            }
+            return;
+          }
+        }
+        if (showHandles) {
+          if (dist(mouseX, mouseY, circleCenter.x, circleCenter.y) < cornerRadius / 2) {
+            draggingCircleCenter = true; return;
+          }
+          for (let i = 0; i < corners.length; i++) {
+            if (dist(mouseX, mouseY, corners[i].x, corners[i].y) < cornerRadius / 2) {
+              draggingIndex = i; return;
+            }
+          }
+        }
+        if (!insideWorkArea(mouseX, mouseY)) fullscreen(!fullscreen());
+      }
+      function screenToLocal(mx, my, el) {
+        let dx = mx - el.position.x;
+        let dy = my - el.position.y;
+        let angle = radians(-el.rotation);
+        let localX = dx * cos(angle) - dy * sin(angle);
+        let localY = dx * sin(angle) + dy * cos(angle);
+        return {x: localX, y: localY};
+      }
+      function mouseDragged() {
+        if (draggingIndex !== -1) {
+          corners[draggingIndex].x = mouseX;
+          corners[draggingIndex].y = mouseY;
+        } else if (draggingCircleCenter) {
+          circleCenter.x = mouseX;
+          circleCenter.y = mouseY;
+        } else if (draggingInterfaceIndex !== -1) {
+          if (insideWorkArea(mouseX, mouseY)) {
+            interfaceElements[draggingInterfaceIndex].position.x = mouseX;
+            interfaceElements[draggingInterfaceIndex].position.y = mouseY;
+          }
+        }
+      }
+      function mouseReleased() {
+        draggingIndex = -1; draggingCircleCenter = false; draggingInterfaceIndex = -1;
+      }
+      function keyPressed() {
+        if (key === 'h' || key === 'H') {
+          showHandles = !showHandles;
+          document.getElementById('gui-container').style.display = showHandles ? 'block' : 'none';
+          document.getElementById('help-container').style.display = showHandles ? 'block' : 'none';
+        }
+        if (key === 'r' || key === 'R') {
+          resetCorners(); resetCircleCenter(); setupInterfaceElements();
+          params.Diameter = 400; gui.updateDisplay(); circleFillColor = null;
+        }
+        if (key === 'a' || key === 'A') circleFillColor = color(255, 0, 0);
+        if (key === 'b' || key === 'B') circleFillColor = color(0, 255, 0);
+        if (key === 'c' || key === 'C') circleFillColor = color(0, 0, 255);
+        if (key === 'd' || key === 'D') circleFillColor = color(255, 255, 0);
+        if (key === '0') circleFillColor = null;
+      }
+      function windowResized() { resizeCanvas(windowWidth, windowHeight); }
+      function resetCorners() {
+        const margin = 20;
+        const s = min(540, (min(windowWidth, windowHeight) - 2 * margin) / 2);
+        const centerX = windowWidth / 2;
+        const centerY = windowHeight / 2;
+        corners = [
+          createVector(centerX - s, centerY - s),
+          createVector(centerX + s, centerY - s),
+          createVector(centerX + s, centerY + s),
+          createVector(centerX - s, centerY + s)
+        ];
+      }
+      function resetCircleCenter() { circleCenter = createVector(windowWidth/2, windowHeight/2); }
+      function setupInterfaceElements() {
+        const cx = windowWidth / 2, cy = windowHeight / 2;
+        interfaceElements = [
+          { id: "topLeft", label: "Load A", rotation: 180, position: createVector(cx-200, cy-200) },
+          { id: "topRight", label: "Load B", rotation: 270, position: createVector(cx+200, cy-200) },
+          { id: "bottomRight", label: "Load C", rotation: 0, position: createVector(cx+200, cy+200) },
+          { id: "bottomLeft", label: "Load D", rotation: 90, position: createVector(cx-200, cy+200) }
+        ];
+      }
+      function insideWorkArea(x, y) { return collidePointPoly(x, y, corners); }
+      function collidePointPoly(px, py, vertices) {
+        let collision = false;
+        for (let current = 0; current < vertices.length; current++) {
+          let next = (current + 1) % vertices.length;
+          let vc = vertices[current];
+          let vn = vertices[next];
+          if (((vc.y > py && vn.y < py) || (vc.y < py && vn.y > py)) &&
+              (px < (vn.x - vc.x) * (py - vc.y) / (vn.y - vc.y) + vc.x)) {
+            collision = !collision;
+          }
+        }
+        return collision;
+      }
+    </script>
+  </body>
+</html>
+</code>