Merge branch 'main' of https://github.com/uclab-potsdam/interinfo

uclab-potsdam · Dec 11, 2024 · aced508 · aced508
2 parents 2d1620a + 5f84fac
commit aced508
Show file tree

Hide file tree

Showing 11 changed files with 430 additions and 125 deletions.
diff --git a/examples/graphics/canvas_animated.html b/examples/graphics/canvas_animated.html
@@ -24,7 +24,7 @@
 
     // click to add circle
     canvas.addEventListener('click', (event) => {
-        addCircle(event.clientX, event.clientY);
+        addCircle(event.clientX, event.clientY);        
     });
 
     // set initial properties of new circle

diff --git a/experiments/gioia/6_svg_editable.html b/experiments/gioia/6_svg_editable.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Editable SVG - Graphics - Interactive Information</title>
+<style>
+body { 
+    margin: 0; padding: 0;
+}
+
+svg {
+    width: 100vw;
+    height: 100vh;
+}
+</style>
+</head>
+<body>
+
+<svg xmlns="http://www.w3.org/2000/svg"></svg>
+
+<script>
+    const svg = document.querySelector('svg');
+
+    let selectedShape = null; // shape being dragged or resized
+    let offsetX, offsetY; // offsets for dragging
+
+    svg.addEventListener('click', (event) => {
+        if (event.target.tagName === 'circle' || event.target.tagName === 'rect' || event.target.tagName === 'polygon') return; // Avoid creating shapes on existing ones
+        createShape(event.clientX, event.clientY);
+    });
+
+    function createShape(x, y) {
+        const shapeType = ['circle', 'rect', 'triangle'][Math.floor(Math.random() * 3)];
+
+        switch (shapeType) {
+            case 'circle':
+                createCircle(x, y);
+                break;
+            case 'rect':
+                createRectangle(x, y);
+                break;
+            case 'triangle':
+                createTriangle(x, y);
+                break;
+        }
+    }
+
+    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', 10 + Math.random() * 100);
+        circle.setAttribute('fill', getRandomColor());
+        circle.setAttribute('cursor', 'pointer');
+        svg.appendChild(circle);
+
+        addDragBehavior(circle);
+    }
+
+    function createRectangle(x, y) {
+        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        const width = 20 + Math.random() * 150;
+        const height = 20 + Math.random() * 150;
+        rect.setAttribute('x', x - width / 2);
+        rect.setAttribute('y', y - height / 2);
+        rect.setAttribute('width', width);
+        rect.setAttribute('height', height);
+        rect.setAttribute('fill', getRandomColor());
+        rect.setAttribute('cursor', 'pointer');
+        svg.appendChild(rect);
+
+        addDragBehavior(rect);
+    }
+
+    function createTriangle(x, y) {
+        const size = 30 + Math.random() * 120;
+        const points = [
+            `${x},${y - size / 2}`,
+            `${x - size / 2},${y + size / 2}`,
+            `${x + size / 2},${y + size / 2}`
+        ].join(' ');
+        const triangle = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+        triangle.setAttribute('points', points);
+        triangle.setAttribute('fill', getRandomColor());
+        triangle.setAttribute('cursor', 'pointer');
+        svg.appendChild(triangle);
+
+        addDragBehavior(triangle);
+    }
+
+    function addDragBehavior(shape) {
+        shape.addEventListener('mousedown', (event) => {
+            selectedShape = shape;
+            if (shape.tagName === 'circle') {
+                offsetX = event.clientX - parseFloat(shape.getAttribute('cx'));
+                offsetY = event.clientY - parseFloat(shape.getAttribute('cy'));
+            } else if (shape.tagName === 'rect') {
+                offsetX = event.clientX - parseFloat(shape.getAttribute('x'));
+                offsetY = event.clientY - parseFloat(shape.getAttribute('y'));
+            } else if (shape.tagName === 'polygon') {
+                offsetX = event.clientX;
+                offsetY = event.clientY;
+            }
+        });
+    }
+
+    svg.addEventListener('mousemove', (event) => {
+        if (!selectedShape) return;
+
+        if (selectedShape.tagName === 'circle') {
+            const x = event.clientX - offsetX;
+            const y = event.clientY - offsetY;
+            selectedShape.setAttribute('cx', x);
+            selectedShape.setAttribute('cy', y);
+        } else if (selectedShape.tagName === 'rect') {
+            const x = event.clientX - offsetX;
+            const y = event.clientY - offsetY;
+            selectedShape.setAttribute('x', x);
+            selectedShape.setAttribute('y', y);
+        } else if (selectedShape.tagName === 'polygon') {
+            const dx = event.clientX - offsetX;
+            const dy = event.clientY - offsetY;
+            const points = selectedShape.getAttribute('points').split(' ').map(point => {
+                const [px, py] = point.split(',').map(Number);
+                return `${px + dx},${py + dy}`;
+            }).join(' ');
+            selectedShape.setAttribute('points', points);
+            offsetX = event.clientX;
+            offsetY = event.clientY;
+        }
+    });
+
+    svg.addEventListener('mouseup', () => { selectedShape = null; });
+    svg.addEventListener('mouseleave', () => { selectedShape = null; });
+
+    function getRandomColor() {
+        const letters = '0123456789ABCDEF';
+        let color = '#';
+        for (let i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)];
+        }
+        return color;
+    }
+</script>
+</body>
+</html>
diff --git a/experiments/gioia/canvas.html b/experiments/gioia/canvas.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Canvas - Graphics - Interactive Information</title>
+<style>
+body { 
+    margin: 0; padding: 0;
+}
+</style>
+</head>
+<body>
+
+<canvas></canvas>
+
+<script>
+const canvas = document.querySelector('canvas');
+const context = canvas.getContext('2d');
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+// click to draw marks
+canvas.addEventListener('click', (event) => {
+    drawCircle(event.clientX, event.clientY);
+});
+
+// draw circle at a given position
+function drawCircle(x, y) {
+    context.beginPath();
+    context.arc(x, y, 10+Math.random()*100, 0, 2 * Math.PI);
+    context.fillStyle = "black"
+    context.fill();
+}
+
+</script>
+</body>
+</html>
diff --git a/experiments/gregor/5_scroll.html b/experiments/gregor/5_scroll.html
@@ -12,6 +12,9 @@
     height: 100vh;
     background-color: black;
     font-family: "Just Me Again Down Here";
+    display: flex;
+    flex-direction: row;
+    overflow-x: scroll;
 }
 
 .video-container {
@@ -61,6 +64,7 @@
 
 h1 { font-size: 5em; top: 20vh; }
 h2 { font-size: 4em; top: 30vh; }
+
 </style>
 </head>
 <body>

diff --git a/experiments/gregor/6_graphics.html b/experiments/gregor/6_graphics.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Layered Circles and Squares</title>
+<style>
+body { 
+    margin: 0; padding: 0;
+}
+
+svg {
+    width: 100vw;
+    height: 100vh;
+}
+</style>
+</head>
+<body>
+
+<svg xmlns="http://www.w3.org/2000/svg"></svg>
+
+<script>
+
+const svg = document.querySelector('svg');
+var toggle = true;
+
+// create random hex code
+function RandomColor() {
+  var hex = '0123456789ABCDEF';
+  var color = '#';
+  for (var i = 0; i < 6; i++) {
+    color += hex[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+// add 8 layered circles and squares alternately at click location
+svg.addEventListener('click', (event) => {
+
+    //toggle between circles and squares
+    if (toggle === true) {
+        for (var i = 0; i < 8; i++) {
+            createCircle(event.clientX, event.clientY);
+        }
+    toggle = false;
+    } else {
+        for (var i = 0; i < 8; i++) {
+            createSquare(event.clientX, event.clientY);
+        }
+        toggle = true; 
+    }
+});
+
+// create a new circle
+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', 10+Math.random()*100, 0, 2 * Math.PI);
+    circle.setAttribute('fill', RandomColor());        
+    svg.appendChild(circle);
+}
+
+//create a new square
+function createSquare(x, y) {
+    const square = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    const size = 10+Math.random()*100; //create random size to set width AND height
+    square.setAttribute('x', x - size / 2); //center click location
+    square.setAttribute('y', y - size / 2); //center click location
+    square.setAttribute('height', size);
+    square.setAttribute('width', size);
+    square.setAttribute('fill', RandomColor());        
+    svg.appendChild(square);
+}
+
+
+
+</script>
+</body>
+</html>
diff --git a/experiments/marine/6_graphic.html b/experiments/marine/6_graphic.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Canvas - Graphics - Interactive Information</title>
+<style>
+    body {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center; /* Centre horizontalement */
+        align-items: center;    /* Centre verticalement */
+        height: 100vh;          /* Hauteur de la fenêtre */
+        background-color: #f0f0f0; /* Fond de la page */
+    }
+
+    canvas {
+        background-color: aqua;
+        border: 3px solid black;
+        border-radius: 8px;
+    }
+
+
+</style>
+</head>
+<body>
+
+    <div class= canva-wrapper> 
+        <canvas></canvas>
+    </div>
+
+<script>
+const canvas = document.querySelector('canvas');
+const context = canvas.getContext('2d');
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+let isDrawing = false; // Indique si la souris est en train de dessiner
+
+// Écouteurs pour gérer le clic prolongé
+canvas.addEventListener('mousedown', (event) => {
+    isDrawing = true;
+    drawCircle(event.clientX, event.clientY); // Dessine immédiatement au point de départ
+});
+
+canvas.addEventListener('mousemove', (event) => {
+    if (isDrawing) {
+        drawCircle(event.clientX, event.clientY); // Dessine des cercles pendant le déplacement
+    }
+});
+
+canvas.addEventListener('mouseup', () => {
+    isDrawing = false; // Arrête de dessiner quand le clic est relâché
+});
+
+// click to draw marks
+canvas.addEventListener('click', (event) => {
+    drawCircle(event.clientX, event.clientY);
+});
+
+// draw circle at a given position
+function drawCircle(x, y) {
+    const circleColor= Math.floor(Math.random()* 360);
+    context.beginPath();
+    context.arc(x, y, 5, 0, 2 * Math.PI);
+    context.fillStyle = `hsl(${circleColor}, 100%, 50%)` ;
+    context.fill();
+}
+
+</script>
+</body>
+</html>