.]°[><]°[.

bbaudry · Mar 2, 2024 · 17f6130 · 17f6130
1 parent d9b0e20
commit 17f6130
Showing 1 changed file with 109 additions and 0 deletions.
diff --git a/p5-experiments/plottableperspective011.html b/p5-experiments/plottableperspective011.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
+    <script src="https://unpkg.com/[email protected]"></script>
+    <style>
+        body {
+            padding: 0;
+            margin: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <script>
+        //pixel = dpi * mm / 25.4 mm
+        //A3: 297mm × 420mm
+        //96dpi is for plotting on the UUNA TEK iDraw
+        //w=96*297/25.4=1122.5
+        //h=96*420/25.4=1587.4
+        var echelle = 0.5
+        var w = 1122 * echelle
+        var h = 1587 * echelle
+        var rightmargin = 0.8 * w
+        var leftmargin = 0.2 * w
+        var topmargin = 0.2 * h
+        var bottommargin = 0.8 * h
+        var actualwidth = rightmargin - leftmargin
+        var actualheight = bottommargin - topmargin
+        var cnv, imgbtn, maxcount
+
+        function setup() {
+            //getsvg()
+            getpng()
+            centerCanvas();
+            colorMode(HSB, 360, 100, 100, 250);
+            strokeCap(SQUARE)
+            background(0,0,100)
+            noFill()
+        }
+
+        function getsvg() {
+            cnv = createCanvas(w, h, SVG);
+            imgbtn = createButton("save svg");
+            placebtn();
+            imgbtn.mouseClicked(savesvg);
+        }
+        function getpng() {
+            cnv = createCanvas(w, h);
+            imgbtn = createButton("save png");
+            placebtn();
+            imgbtn.mouseClicked(savepng);
+        }
+
+        function centerCanvas() {
+            var x = (windowWidth - w) / 2;
+            var y = (windowHeight - h) / 2;
+            cnv.position(x, y);
+        }
+
+        function placebtn() {
+            var x = (windowWidth - w) / 2;
+            var y = (windowHeight - h) / 2;
+            imgbtn.position(x - 200, y + h / 2 + 42)
+        }
+
+        function savesvg() {
+            save("plottableperspective001.svg");
+        }
+        function savepng() {
+            save("plottableperspective001.png");
+        }
+
+        function draw() {
+            grid()
+            noLoop()
+
+        }
+
+        function grid() {
+            var offset = 0.003*w
+            var step = (rightmargin - leftmargin) / 12 - offset
+            for (var x = leftmargin; x < rightmargin; x += 2 * (step+offset)) {
+                for (var y = topmargin + (step / 2); y < bottommargin; y += 2 * (step+offset)) {
+                    drawoneportion(x, y, x + step, y + 0.5 * step, x + step, y + 1.5 * step, x, y + step)
+                    drawoneportion(x + step, y + 0.5 * step, x + 2 * step, y, x + 2 * step, y + step, x + step, y + 1.5 * step)
+                    drawoneportion(x, y, x + step, y - 0.5 * step, x + 2 * step, y, x + step, y + 0.5 * step)
+                }
+            }
+        }
+
+
+        function drawoneportion(x1, y1, x2, y2, x3, y3, x4, y4) {
+            quad(x1, y1, x2, y2, x3, y3, x4, y4)
+        }
+
+        function getpointonline(origin, destination, t) {
+            return ((1 - t) * origin + (t * destination))
+
+        }
+
+    </script>
+</body>
+
+</html>