added Shapes

experiments/benedikt/6_graphics.html

@@ -25,24 +25,14 @@
             user-select: none; /* Standard syntax */
         }
 
-        @media (prefers-color-scheme: dark) {
-            body {
-                background-color: var(--background-dark-mode);
-            }
-        }
 
         h1 {
             font-family: Helvetica, sans-serif;
             position: absolute;
             top: 3vh;
             left: 50%;
             transform: translateX(-50%);
-        }
-
-        @media (prefers-color-scheme: dark) {
-            h1 {
-                color: white;
-            }
+            cursor:default;
         }
 
         svg {
@@ -101,6 +91,29 @@
             cursor: pointer;
         }
 
+        .shape-selector {
+            position: absolute;
+            top: 90%;
+            left: 30%;
+            transform: translate(-50%, -50%);
+            display: flex;
+            flex-direction: row;
+            align-items: baseline;
+            gap: 1vw;
+            border-radius: 2vw;
+            padding: 1.3vw;
+            background-color: rgba(224, 224, 224, 0.4);
+            backdrop-filter: blur(10px);
+
+        }
+
+        .shape {
+            width: 3.5vw;
+            height: 3.5vw;
+            cursor: pointer;
+            border-radius: 0.5vw;
+        }
+
 
 
     </style>
@@ -115,40 +128,100 @@ <h1>Pick a Color and start Drawing</h1>
         <div id="4" class="color color-4"></div>
     </div>
 
+    <div class="shape-selector">
+        <div id="circle" class="shape shape-1">
+            <img src="icons/circle0.svg" alt="circle icon">
+        </div>
+        <div id="triangle" class="shape shape-2">
+            <img src="icons/triangle0.svg" alt="triangle icon">
+        </div>
+        <div id="star" class="shape shape-3">
+            <img src="icons/star0.svg" alt="star icon">
+        </div>
+    </div>
+
     <div class="reset">Reset</div>
 
     <script>
         const svg = document.querySelector('svg');
         const resetButton = document.querySelector('.reset');
         const colorButtons = document.querySelectorAll('.color');
+        const shapeButtons = document.querySelectorAll('.shape');
         let isDrawing = false;
         let currentColor = 'black';
+        let currentShape = 'circle';
+
 
+        //ColorSelector
         colorButtons.forEach(button => {
             button.addEventListener('click', () =>{
-                currentColor = currentColor = getComputedStyle(button).backgroundColor;
+                currentColor = getComputedStyle(button).backgroundColor;
             });
         });
 
+        //ShapeSelector
+        shapeButtons.forEach(button => {
+            button.addEventListener('click', () =>{
+                currentShape = button.id;
+            });
+        });
+
+        //DragPaint
         svg.addEventListener('mousedown', () => (isDrawing = true));
         svg.addEventListener('mouseup', () => (isDrawing = false));
         svg.addEventListener('mousemove', (event) => {
-            if (isDrawing) createCircle(event.clientX, event.clientY);
-        })
+            if (isDrawing) createShape(event.clientX, event.clientY);
+        });
+
+        function createShape(x, y) {
+            if (currentShape === 'circle') {
+                createCircle(x, y);
+            } else if (currentShape === 'triangle') {
+                createTriangle(x, y);
+            } else if (currentShape === 'star') {
+                createStar(x, y);
+            }
+        }
+
 
+        //Functions
         function createCircle(x, y) {
-        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-        circle.setAttribute('cx', x);
-        circle.setAttribute('cy', y);
-        circle.setAttribute('r', 5+Math.random()*25, 0, 2 * Math.PI);
-        circle.setAttribute('fill', currentColor);
-        circle.setAttribute('cursor', 'pointer');
-        svg.appendChild(circle);
-    }
-
-    resetButton.addEventListener('click', () => {
+            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+            circle.setAttribute('cx', x);
+            circle.setAttribute('cy', y);
+            circle.setAttribute('r', 5+Math.random()*25, 0, 2 * Math.PI);
+            circle.setAttribute('fill', currentColor);
+            circle.setAttribute('cursor', 'pointer');
+            svg.appendChild(circle);
+        }
+
+        function createTriangle(x, y) {
+            const size = 5 + Math.random()*25;
+            const points = `${x},${y - size} ${x - size},${y + size} ${x + size},${y + size}`;
+            const triangle = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+            triangle.setAttribute('points', points);
+            triangle.setAttribute('fill', currentColor);
+            svg.appendChild(triangle);
+        }
+
+        function createStar(x, y) {
+            const size = 10 + Math.random() * 35;
+            const points = [];
+            for (let i = 0; i < 16; i++) {
+                const angle = (i * Math.PI) / 8;
+                const radius = i % 2 === 0 ? size : size / 2;
+                points.push(`${x + radius * Math.cos(angle)},${y + radius * Math.sin(angle)}`);
+            }
+            const star = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+            star.setAttribute('points', points.join(' '));
+            star.setAttribute('fill', currentColor);
+            svg.appendChild(star);
+        }
+
+        //Reset
+        resetButton.addEventListener('click', () => {
         svg.innerHTML = '';
-    });
+        });
     </script>
 
 </body>