^^._, work in progress, small changes

Transcendence/srcs/frontend/src/doodle.css

@@ -0,0 +1,68 @@
+body, html {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #003366; /* Your monochrome blue background */
+    overflow: hidden; /* Prevents scrollbars if shapes move off-screen */
+}
+
+.shape {
+    /* The "Physical" properties */
+    position: fixed;
+    /* transform: translate(-50%, -50%); Optional: This makes 'left/top' refer to the CENTER of the doodle */
+
+    width: 300px;
+    height: 300px;
+    
+
+    /* The "Stenciling" instructions (but no image yet!) */
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    
+    /* The default "Paint" color */
+    background-color: white; 
+}
+
+.doodle-1 {
+    -webkit-mask-image: url('assets/doodle/doodle1.png');
+    mask-image: url('assets/doodle/doodle1.png');
+    /* Set initial position here */
+    left: 50vw;
+    top: 30vw;
+}
+
+.doodle-2 {
+    -webkit-mask-image: url('assets/doodle/doodle1.png');
+    mask-image: url('assets/doodle/doodle1.png');
+    left: 20vw;
+    top: 70vw;
+}
+
+/* 3. A quick animation for the color loop */
+.loop-color {
+    animation: colorShift 24s infinite alternate ease-in-out;
+}
+@keyframes colorShift {
+    /* 0% and 100% are identical to create the "Infinite Circle" effect */
+    0%   { background-color: #3075ff; } /* Royal Blue (Start) */
+    
+    8%   { background-color: #24a1ff; } /* Sky Blue */
+    17%  { background-color: #1ad8ff; } /* Cyan */
+
+    25%  { background-color: #1bffa7; } /* Seafoam Green */
+    33%  { background-color: #1fff4d; } /* Bright Green */
+    42%  { background-color: #8bff32; } /* Lime Green */
+
+    50%  { background-color: #dcff38; } /* Electric Yellow */
+    58%  { background-color: #ffbc29; } /* Golden Yellow */
+    67%  { background-color: #ff8c4a; } /* Coral Orange */
+
+    75%  { background-color: #ff1d1d; } /* Hot Red */
+    83%  { background-color: #ff2bf3; } /* Magenta Pink */
+    92%  { background-color: #ac37ff; } /* Electric Purple */
+
+    100% { background-color: #3075ff; } /* Royal Blue (Seamless Loop) */
+}

Transcendence/srcs/frontend/src/doodle.js

@@ -0,0 +1,154 @@
+// Function to update a specific shape's color and position
+function updateShape(id, x, y, color) {
+    const element = document.getElementById(id);
+    
+    if (element) {
+        element.style.left = x + "px";
+        element.style.top = y + "px";
+        element.style.backgroundColor = color;
+    }
+}
+
+// Example usage: Move shape1 to (100, 100) and make it red
+// updateShape('shape1', 100, 100, '#ff0000');
+
+function moveRandomly(id) {
+    const element = document.getElementById(id);
+    if (!element) return;
+
+    // Calculate random coordinates
+    // We subtract 300 so the shape doesn't go partially off-screen (since your width is 300px)
+    const maxX = window.innerWidth - 300;
+    const maxY = window.innerHeight - 300;
+
+    const randomX = Math.floor(Math.random() * maxX);
+    const randomY = Math.floor(Math.random() * maxY);
+
+    // Generate a random HEX color
+    const randomColor = "#" + Math.floor(Math.random()*16777215).toString(16);
+
+    // Apply the changes
+    element.style.left = randomX + "px";
+    element.style.top = randomY + "px";
+    element.style.backgroundColor = randomColor;
+}
+
+// To make it move every 2 seconds automatically:
+// setInterval(() => moveRandomly('shape1'), 2000);
+// setInterval(() => moveRandomly('shape2'), 2000);
+
+// Store the state of our moving shapes
+const movingShapes = {};
+function startSmoothRandomMove(id, speed = 2) {
+    const el = document.getElementById(id);
+    if (!el) return;
+
+    // We store position as 0.0 to 1.0 (percentage of screen)
+    // This makes it "Resolution Independent"
+    const state = {
+        percentX: parseFloat(el.style.left) / 100 || Math.random(),
+        percentY: parseFloat(el.style.top) / 100 || Math.random(),
+        angle: Math.random() * Math.PI * 2,
+        speed: speed 
+    };
+
+    function update() {
+        // 1. Get current pixel dimensions of the window
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        
+        // 2. Convert speed (pixels) into a "percentage" of this specific screen
+        const vx = (Math.cos(state.angle) * state.speed) / width;
+        const vy = (Math.sin(state.angle) * state.speed) / height;
+
+        state.percentX += vx;
+        state.percentY += vy;
+
+        // 3. Bounce logic (Keep between 0% and 100%)
+        // We subtract a little (e.g., 0.1) so the 300px shape doesn't go off-edge
+        const bufferX = 300 / width; 
+        const bufferY = 300 / height;
+
+        if (state.percentX < 0 || state.percentX > (1 - bufferX)) {
+            state.angle = Math.PI - state.angle;
+            state.percentX = Math.max(0, Math.min(state.percentX, 1 - bufferX));
+        }
+        if (state.percentY < 0 || state.percentY > (1 - bufferY)) {
+            state.angle = -state.angle;
+            state.percentY = Math.max(0, Math.min(state.percentY, 1 - bufferY));
+        }
+
+        // 4. Apply as percentages
+        el.style.left = (state.percentX * 100) + "vw";
+        el.style.top = (state.percentY * 100) + "vh";
+
+        requestAnimationFrame(update);
+    }
+
+    requestAnimationFrame(update);
+}
+
+// function startSmoothRandomMove(id, speed = 2) {
+//     const el = document.getElementById(id);
+//     if (!el) return;
+
+//     // Initial state: Start in the center, pick a random angle
+//     movingShapes[id] = {
+//         x: parseFloat(el.style.left) || 500,
+//         y: parseFloat(el.style.top) || 300,
+//         angle: Math.random() * Math.PI * 2, // Random direction in radians
+//         speed: speed
+//     };
+
+//     function update() {
+//         const state = movingShapes[id];
+
+//         // 1. Calculate new position based on angle and speed
+//         state.x += Math.cos(state.angle) * state.speed;
+//         state.y += Math.sin(state.angle) * state.speed;
+
+//         // 2. "Bounce" logic: Change direction if hitting screen edges
+//         if (state.x < 0 || state.x > window.innerWidth - 300) {
+//             state.angle = Math.PI - state.angle; // Flip horizontal
+//         }
+//         if (state.y < 0 || state.y > window.innerHeight - 300) {
+//             state.angle = -state.angle; // Flip vertical
+//         }
+
+//         // 3. Randomly change direction slightly (the "Wander" effect)
+//         // 1% chance every frame to pivot slightly
+//         if (Math.random() < 0.01) {
+//             state.angle += (Math.random() - 0.5) * 1; 
+//         }
+
+//         // 4. Apply to the element
+//         el.style.left = state.x + "px";
+//         el.style.top = state.y + "px";
+
+//         // Keep the loop going
+//         requestAnimationFrame(update);
+//     }
+
+//     // Start the first "heartbeat"
+//     requestAnimationFrame(update);
+// }
+
+startSmoothRandomMove('shape1', 3); // Moves at speed 3
+startSmoothRandomMove('shape2', 1.5); // Moves slower
+
+
+function randomizeAnimationStarts() {
+    const shapes = document.querySelectorAll('.loop-color');
+    
+    shapes.forEach(shape => {
+        // Pick a random number between 0 and 10 (since your loop is 10s)
+        const randomDelay = Math.random() * -10; 
+        
+        // Apply it directly to the element's style
+        shape.style.animationDelay = randomDelay + "s";
+    });
+}
+
+// Call this once when the script loads
+randomizeAnimationStarts();
+

Transcendence/srcs/frontend/src/test.html

@@ -1,71 +1,16 @@
 <!DOCTYPE html>
-<html lang="eng">
+<html lang="en">
-    <head>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dynamic Hand-Drawn Shapes</title>
+	<link rel="stylesheet" href="doodle.css">
+	<script src="doodle.js" defer></script>
+</head>
+<body>
 
+    <div class="shape doodle-1 loop-color" id="shape1"></div>
+    <div class="shape doodle-2 loop-color" id="shape2"></div>
 
-<!-- 
+</body>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>Transcendence.io</title>
-		<link rel="stylesheet" href="index.css" />
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
-	</head>
-	<body>
-		<h1 class="title">Transcendence.io</h1>
-
-		<nav class="menu" aria-label="Menu principal">
-			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
- -->
-
-    </head>
-    <body>
-        <div class="test1" style="border: 15px solid black; width: fit-content; color: blue; border-width: 3px;
-			border-color: brown; box-sizing: border-box; size: 200px;">
-        hello       
-			<div class="test1" style="border: 15px solid black; width: fit-content; color: blue; border-width: 3px;
-				border-color: brown;">
-        	hello
-        	</div>
-        </div>
-        <div style="border: 5px solid red; padding: 30px; margin: 40px ; background-color: lightblue;">
-			<img src="200.jpg" style="border: 5px solid green; width: 15%;">
-        </div>
-    
-		<div>
-			<span style="border: 1rem dashed yellowgreen; line-height: 25px; display: inline-block;
-				margin: 20px;">
-				ahah
-			</span>
-		
-			<span style="border: 10px inset purple;">
-				eheheheheheheheheeheh
-			</span>
-			<span id="hello" style="border: 3px solid #ff05f6; border-radius: 15px;">
-				ohohhohohohohohohohohohohohohhohohohoho
-			</span>
-		</div>
-		<div>
-
-		</div>
-    
-    
-    
-    
-    
-    
-    
-    </body>
-    <footer>
-    
-    
-    
-    
-    
-    
-    
-    </footer>
 </html>