^^._, work in progress, small changes
This commit is contained in:
Kali Gallon
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
@@ -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) */
|
||||
}
|
||||
@@ -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();
|
||||
|
||||
@@ -1,71 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="eng">
|
||||
<head>
|
||||
|
||||
|
||||
<!--
|
||||
<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>
|
||||
<html lang="en">
|
||||
<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>
|
||||
|
||||
<nav class="menu" aria-label="Menu principal">
|
||||
<button class="menu__item" data-action="login" aria-label="Login">Login</button>
|
||||
-->
|
||||
<div class="shape doodle-1 loop-color" id="shape1"></div>
|
||||
<div class="shape doodle-2 loop-color" id="shape2"></div>
|
||||
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user