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

uclab-potsdam · Dec 13, 2024 · d601877 · d601877
2 parents de30c7a + 588490f
commit d601877
Show file tree

Hide file tree

Showing 3 changed files with 246 additions and 0 deletions.
diff --git a/experiments/anikafiedler/5_media.html b/experiments/anikafiedler/5_media.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Video - Media - Interactive Information</title>
+<style>
+body { 
+    background-color: black;
+    padding: 0; margin: 0;
+    display: flex;
+    justify-content: center; 
+    align-items: center;   
+    height: 100vh;
+    scale: 100%;    
+}
+
+video {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 50%;
+    z-index: 0;
+}
+
+h1, h2 { 
+    color: white; 
+    position:absolute; 
+    z-index: 1;
+    text-align:center;
+    width: 100%;
+}
+
+h1 { font-size: 3em; top: 5vh; }
+h2 { font-size: 2.5em; top: 80vh; }
+
+</style>
+</head>
+<body>
+
+<video id="video" controls width="800" poster="poster.png">
+    <source src="https://fhpcloud.fh-potsdam.de/s/DpmteQWJCkkWCWA/download/video.mp4" type="video/mp4">
+    <track kind="subtitles" src="subtitles.vtt" srclang="en" default>
+    Download video as <a href="https://fhpcloud.fh-potsdam.de/s/DpmteQWJCkkWCWA/download/video.mp4">MP4</a>.
+</video>
+
+<h1>Meowww!</h1>
+<h2>MEOWWWWWWWWW!</h2>
+
+<script>
+const video = document.getElementById('video');
+
+document.addEventListener('keydown', (event) => {
+    if (event.code === 'Space') {
+        event.preventDefault(); // this prevents scrolling when spacebar press
+        if (video.paused) video.play();
+        else video.pause();        
+    }
+});
+</script>
+</body>
+</html>
diff --git a/experiments/anikafiedler/6_animated.camvas.html b/experiments/anikafiedler/6_animated.camvas.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Animated 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;
+
+    const shapes = []; // store all shapes for animation
+
+    // Array von drei festen Farben
+    const colors = ['red', 'green', 'blue'];
+
+    // click to add a shape (circle, rectangle, or triangle)
+    canvas.addEventListener('click', (event) => {
+        addShape(event.clientX, event.clientY);
+    });
+
+    // set initial properties for new shapes
+    function addShape(x, y) {
+        const shapeType = Math.random() < 0.33 ? 'circle' : (Math.random() < 0.5 ? 'rectangle' : 'triangle');
+
+        // Wähle zufällig eine Farbe aus dem Array
+        const randomColor = colors[Math.floor(Math.random() * colors.length)];
+
+        const shape = {
+            x: x,
+            y: y,
+            color: randomColor, // zufällig ausgewählte Farbe
+            dx: Math.random() * 5, // random horizontal speed
+            dy: Math.random() * 5, // random vertical speed
+            size: 20 + Math.random() * 30, // random size for the shape
+            type: shapeType,
+        };
+        shapes.push(shape);
+    }
+
+    // animate all shapes
+    function animate() {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+
+        shapes.forEach((shape) => {
+            // update position
+            shape.x += shape.dx;
+            shape.y += shape.dy;
+
+            // bounce off walls
+            if (shape.x - shape.size < 0 || shape.x + shape.size > canvas.width) {
+                shape.dx *= -1;
+            }
+            if (shape.y - shape.size < 0 || shape.y + shape.size > canvas.height) {
+                shape.dy *= -1;
+            }
+
+            // draw the shape based on its type
+            context.fillStyle = shape.color;
+            if (shape.type === 'circle') {
+                context.beginPath();
+                context.arc(shape.x, shape.y, shape.size, 0, 2 * Math.PI);
+                context.fill();
+            } else if (shape.type === 'rectangle') {
+                context.fillRect(shape.x - shape.size / 2, shape.y - shape.size / 2, shape.size, shape.size);
+            } else if (shape.type === 'triangle') {
+                context.beginPath();
+                context.moveTo(shape.x, shape.y - shape.size / 2);
+                context.lineTo(shape.x - shape.size / 2, shape.y + shape.size / 2);
+                context.lineTo(shape.x + shape.size / 2, shape.y + shape.size / 2);
+                context.closePath();
+                context.fill();
+            }
+        });
+
+        // keep looping the animation
+        requestAnimationFrame(animate);
+    }
+
+    animate(); // start animation loop
+</script>
+</body>
+</html>
+
diff --git a/experiments/maxi/6_graphics.html b/experiments/maxi/6_graphics.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Animated Canvas - Graphics - Interactive Information</title>
+<style>
+body { 
+    margin: 0; padding: 0;
+    background-color: #009EDE;
+}
+</style>
+</head>
+<body>
+
+<canvas></canvas>
+
+<script>
+    const canvas = document.querySelector('canvas');
+    const context = canvas.getContext('2d');
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    const circles = []; // store circles for animation
+
+    // click to add circle
+    canvas.addEventListener('click', (event) => {
+        addCircle(event.clientX, event.clientY);
+    });
+
+    // generate a random color
+    function getRandomColor() {
+        const letters = '0123456789ABCDEF';
+        let color = '#';
+        for (let i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)];
+        }
+        return color;
+    }
+
+    // set initial properties of new circle
+    function addCircle(x, y) {
+        const radius = 20 + Math.random() * 30;
+        const gradient = context.createRadialGradient(x, y, radius * 0.3, x, y, radius);
+        gradient.addColorStop(0, getRandomColor());
+        gradient.addColorStop(1, getRandomColor());
+
+        const circle = {
+            x: x,
+            y: y,
+            radius: radius,
+            gradient: gradient,
+            dx: Math.random() * 5, // random horizontal speed
+            dy: Math.random() * 5, // random vertical speed
+        };
+        circles.push(circle);
+    }
+
+    // animate the circles
+    function animate() {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+
+        circles.forEach((circle) => {
+            // update position
+            circle.x += circle.dx;
+            circle.y += circle.dy;
+
+            // bounce off walls
+            if (circle.x - circle.radius < 0 || circle.x + circle.radius > canvas.width) {
+                circle.dx *= -1;
+            }
+            if (circle.y - circle.radius < 0 || circle.y + circle.radius > canvas.height) {
+                circle.dy *= -1;
+            }
+
+            // draw the circle
+            context.beginPath();
+            context.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
+            context.fillStyle = circle.gradient;
+            context.fill();
+        });
+        // keep looping the animation
+        requestAnimationFrame(animate);
+    }
+
+    animate(); // start animation loop
+</script>
+</body>
+</html>