twisted arrow for the vernissage's direction

rethread-studio · Mar 25, 2024 · a6de78a · a6de78a
1 parent 5cce586
commit a6de78a
Showing 1 changed file with 154 additions and 0 deletions.
diff --git a/code/algorithmicart2024-vernissage/poster/arrow2.html b/code/algorithmicart2024-vernissage/poster/arrow2.html
@@ -0,0 +1,154 @@
+<!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
+        //letter: 8.5in x 11in
+        //96dpi is for plotting on the UUNA TEK iDraw
+        //w=96*8.5=816
+        //h=96*11=1056
+        var echelle = 1
+        var w = 816 * echelle
+        var h = 1056 * echelle
+        var rightmargin = 0.9 * w
+        var leftmargin = 0.1 * w
+        var topmargin = 0.1 * h
+        var bottommargin = 0.9 * h
+        var actualwidth = rightmargin - leftmargin
+        var actualheight = bottommargin - topmargin
+        var cnv, imgbtn
+        var font
+
+        function setup() {
+            getsvg()
+            //getpng()
+            centerCanvas();
+            colorMode(HSB, 360, 100, 100, 250);
+            strokeCap(SQUARE)
+            noFill()
+            maxcount = random(39, 45)
+        }
+
+        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("arrow.svg");
+        }
+        function savepng() {
+            save("arrow.png");
+        }
+
+        function preload() {
+	        font=loadFont("./1CamBam_Stick_1.ttf");
+        }
+
+        function draw() {
+            background(0, 0, 100)
+            stroke(0,0,0)
+            rect(0, 0, w, h)
+            arrow()
+            noLoop()
+        }
+
+        function arrow(){
+            var arrowwid = 0.4*actualwidth
+            var arrowlen=0.58*actualheight
+            var cx=w*0.5
+            //arrow body
+//            line(cx-arrowwid*0.5,topmargin,cx+arrowwid*0.5,topmargin)
+//            line(cx-arrowwid*0.5,topmargin,cx-arrowwid*0.5,topmargin+arrowlen)
+//            line(cx+arrowwid*0.5,topmargin,cx+arrowwid*0.5,topmargin+arrowlen)
+            addstraightlines(cx-arrowwid*0.5,cx+arrowwid*0.5,topmargin,topmargin+arrowlen)  
+            //arrow head
+//            line(cx-arrowwid*0.5,topmargin+arrowlen,leftmargin,topmargin+arrowlen)
+//            line(cx+arrowwid*0.5,topmargin+arrowlen,rightmargin,topmargin+arrowlen)
+//            line(leftmargin,topmargin+arrowlen,cx,bottommargin)
+//            line(rightmargin,topmargin+arrowlen,cx,bottommargin)
+            addlinesintriangle(cx,cx,cx,topmargin+arrowlen,bottommargin)
+        }
+
+        //draw 
+        function addstraightlines(x1,x2,yorigin,ydest){
+            var yoff=0.0
+            var yinc=0.1
+            var t=0.5*noise(yoff);yoff+=yinc;
+            var px1,py1,px2,py2
+            while(t<1){
+                px1 = (1 - t) * x1 + (t * x2);
+                py1 = (1 - t) * yorigin + (t * ydest);
+                line(px1,yorigin,x2,py1);
+                t+=0.05*noise(yoff);yoff+=yinc;
+            }
+            t=0.5*noise(yoff);yoff+=yinc;
+            while(t<1){
+                px1 = (1 - t) * x2 + (t * x1);
+                py1 = (1 - t) * yorigin + (t * ydest);
+                line(px1,yorigin,x1,py1);
+                t+=0.05*noise(yoff);yoff+=yinc;
+            }
+        }
+
+        function addlinesintriangle(x1,x2,x3,yorigin,ydest){
+            var px1,py1,px2,py2,t
+            var yoff=0.0
+            var yinc=0.1
+            t=0.05*noise(yoff);yoff+=yinc;
+            while(t<1){
+                px1 = (1 - t) * x1 + (t * leftmargin);
+                px2 = (1 - t) * leftmargin + (t * x3);
+                py1 = (1 - t) * yorigin + (t * ydest);
+                line(px1,yorigin,px2,py1);
+                t+=0.05*noise(yoff);yoff+=yinc;
+            }
+            t=0.05*noise(yoff);yoff+=yinc;
+            while(t<1){
+                px1 = (1 - t) * x2 + (t * rightmargin);
+                px2 = (1 - t) * rightmargin + (t * x3);
+                py1 = (1 - t) * yorigin + (t * ydest);
+                line(px1,yorigin,px2,py1);
+                t+=0.05*noise(yoff);yoff+=yinc;
+            }
+        }
+    </script>
+</body>
+
+</html>