Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CMD Ingaze Reveal Animation</title> | |
| <style> | |
| body { | |
| background-color: #000000; /* Black background */ | |
| color: #00FF00; /* Bright green text */ | |
| font-family: 'Courier New', Courier, monospace; /* Classic CMD font */ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; /* Make body fill viewport height */ | |
| margin: 0; | |
| overflow: hidden; /* Prevent scrollbars */ | |
| } | |
| #cmd-animation-container { | |
| padding: 20px; | |
| border: 2px solid #00AA00; /* Darker green border */ | |
| background-color: #080808; /* Slightly off-black for the "screen" */ | |
| box-shadow: 0 0 15px #00FF00; /* Green glow effect */ | |
| border-radius: 8px; /* Rounded corners for the container */ | |
| /* Ensure the container doesn't exceed viewport width if content is too wide */ | |
| max-width: 95vw; | |
| box-sizing: border-box; /* Include padding and border in the element's total width and height */ | |
| } | |
| pre#cmd-animation { | |
| white-space: pre; /* Preserve whitespace and newlines */ | |
| text-align: left; | |
| font-size: 14px; /* Adjusted for better fit */ | |
| line-height: 1.1; /* Compact lines */ | |
| margin: 0; | |
| overflow-x: auto; /* Add scroll if content is wider than container */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="cmd-animation-container"> | |
| <pre id="cmd-animation"></pre> | |
| </div> | |
| <script> | |
| // --- Configuration --- | |
| const scene_width = 65; // Characters, increased for Ingaze logo | |
| const scene_height = 22; // Lines | |
| const frameDuration = 150; // Milliseconds per frame | |
| const MAX_DATA_PARTICLES = 150; | |
| const FLOOR_LEVEL = scene_height - 1; | |
| // --- ASCII Art Definitions --- | |
| const stick_man_art_normal = [" O ", " /|\\ ", " / \\ "]; | |
| const stick_man_art_walk_1 = [" O ", " /|\\ ", " / > "]; | |
| const stick_man_art_walk_2 = [" O ", " /|\\ ", " < \\ "]; | |
| const stick_man_art_surprise = [" \\O/ ", " | ", " / \\ "]; // Stickman surprised by lightning/explosion | |
| const stick_man_art_gone = [" ", " ", " "]; // For when stickman disappears | |
| const linked_in_art = ["+----+", "|i n |", "+----+"]; | |
| const linked_in_art_hit = ["x----x", "|BOOM|", "x----x"]; // When hit by lightning | |
| const lightning_strike_segment = "\\"; // Simple segment for descending lightning | |
| const explosion_symbols = ['*', '#', '@', '!', '%', '&', 'X', 'O', '$', '+', '~']; | |
| const explosion_art_frames = [ | |
| // Frame 1: Small impact | |
| [ | |
| " * ", | |
| " *#* ", | |
| " * " | |
| ], | |
| // Frame 2: Expanding | |
| [ | |
| " @!% ", | |
| " @*#*& ", | |
| " X%O " | |
| ], | |
| // Frame 3: Larger and more chaotic | |
| [ | |
| " $*~+@ ", | |
| "$#@!%*&", | |
| " X*O#~ ", | |
| " !+%$ " | |
| ], | |
| // Frame 4: Fading / contracting | |
| [ | |
| " ~ ", | |
| " +*% ", | |
| " $ " | |
| ] | |
| ]; | |
| const ingaze_logo_art = [ | |
| "IIIII N N GGG AAA ZZZZZ EEEEE", | |
| " I NN N G A A Z E ", | |
| " I N N N G GG AAAAA Z EEE ", | |
| " I N NN G G A A Z E ", | |
| "IIIII N N GGG A A ZZZZZ EEEEE" | |
| ]; | |
| const ingaze_logo_width = ingaze_logo_art[0].length; | |
| const ingaze_logo_height = ingaze_logo_art.length; | |
| // --- Global State --- | |
| let data_particles = []; // {char, x, y, vy, active} | |
| let current_lightning_y = -1; // Y position of the lightning tip, -1 means not active | |
| // --- Helper Functions --- | |
| function overlay(baseLines, artLines, startX, startY, ignoreSpaces = true) { | |
| artLines.forEach((artLine, i) => { | |
| const y = startY + i; | |
| if (y >= 0 && y < baseLines.length && artLine) { | |
| let baseLineArr = baseLines[y].split(''); | |
| for (let j = 0; j < artLine.length; j++) { | |
| const x = startX + j; | |
| if (x >= 0 && x < baseLineArr.length) { | |
| if (ignoreSpaces && artLine[j] === ' ') continue; | |
| baseLineArr[x] = artLine[j]; | |
| } | |
| } | |
| baseLines[y] = baseLineArr.join(''); | |
| } | |
| }); | |
| } | |
| function drawLightningBolt(sceneLines, tipX, tipY, length) { | |
| for (let i = 0; i < length; i++) { | |
| const y = tipY - i; | |
| const x = tipX + (i % 2 === 0 ? 0 : (i % 4 === 1 ? -1 : 1)); // Simple zig-zag | |
| if (y >= 0 && y < scene_height && x >= 0 && x < scene_width) { | |
| if (sceneLines[y][x] === ' ') { // Avoid overwriting other elements if possible | |
| let lineArr = sceneLines[y].split(''); | |
| lineArr[x] = lightning_strike_segment; | |
| sceneLines[y] = lineArr.join(''); | |
| } | |
| } | |
| } | |
| } | |
| function buildScene(stickmanArt, stickmanPos, showLogo, currentLogoArt, currentLogoPos, | |
| showLightningBolt, lightningTipX, lightningTipY, lightningLength, | |
| currentExplosionArt, explosionPos, | |
| showIngazeLogo, ingazeArt, ingazePos) { | |
| let sceneLines = Array(scene_height).fill(" ".repeat(scene_width)); | |
| // 1. Data particles (drawn first, can be overwritten) | |
| data_particles.forEach(p => { | |
| const px = Math.round(p.x); | |
| const py = Math.round(p.y); | |
| if (py >= 0 && py < sceneLines.length && px >= 0 && px < scene_width) { | |
| if (sceneLines[py][px] === ' ') { | |
| let lineArr = sceneLines[py].split(''); | |
| lineArr[px] = p.char; | |
| sceneLines[py] = lineArr.join(''); | |
| } | |
| } | |
| }); | |
| // 2. Stickman | |
| overlay(sceneLines, stickmanArt, stickmanPos.x, stickmanPos.y); | |
| // 3. LinkedIn Logo | |
| if (showLogo) { | |
| overlay(sceneLines, currentLogoArt, currentLogoPos.x, currentLogoPos.y); | |
| } | |
| // 4. Lightning Bolt | |
| if (showLightningBolt && lightningTipY >=0) { | |
| drawLightningBolt(sceneLines, lightningTipX, lightningTipY, lightningLength); | |
| } | |
| // 5. Explosion | |
| if (currentExplosionArt && currentExplosionArt.length > 0) { | |
| overlay(sceneLines, currentExplosionArt, explosionPos.x, explosionPos.y, false); // false: allow spaces in explosion art | |
| } | |
| // 6. Ingaze Logo | |
| if (showIngazeLogo) { | |
| overlay(sceneLines, ingazeArt, ingazePos.x, ingazePos.y); | |
| } | |
| return sceneLines.join('\n'); | |
| } | |
| function spawnDataParticle(logoX, logoY, logoWidth) { | |
| if (data_particles.length >= MAX_DATA_PARTICLES) return; | |
| const char = Math.random() > 0.5 ? '1' : '0'; | |
| const x = logoX + 1 + Math.floor(Math.random() * (logoWidth - 2)); | |
| const y = logoY + linked_in_art.length; | |
| const vy = 0.2 + Math.random() * 0.3; | |
| data_particles.push({ char, x, y, vy, active: true }); | |
| } | |
| // --- Animation Sequence Generation --- | |
| // This function generates all frames once and stores them. | |
| function generateAnimationFrames() { | |
| const sequence = []; | |
| // Reset global state that might persist across generations if this is called multiple times | |
| data_particles = []; | |
| current_lightning_y = -1; | |
| const stickman_height = stick_man_art_normal.length; | |
| const stickman_width = stick_man_art_normal[0].length; | |
| const logo_width = linked_in_art[0].length; | |
| const logo_height = linked_in_art.length; | |
| const stickman_base_y = FLOOR_LEVEL - stickman_height; | |
| const logo_base_y = stickman_base_y; | |
| const stickman_initial_pos = { x: 2, y: stickman_base_y }; | |
| // Adjusted logo_initial_pos to be more to the right to give stickman space | |
| const logo_initial_pos = { x: scene_width - logo_width - 20, y: logo_base_y }; | |
| const stickman_walk_target_x = logo_initial_pos.x - stickman_width - 1; | |
| const ingaze_pos = { | |
| x: Math.floor((scene_width - ingaze_logo_width) / 2), | |
| y: Math.floor((scene_height - ingaze_logo_height) / 2) | |
| }; | |
| const explosion_center_x = logo_initial_pos.x + Math.floor(logo_width / 2); | |
| const explosion_center_y = logo_initial_pos.y + Math.floor(logo_height / 2); | |
| // Phase 0: Stickman Walks to Logo | |
| // Ensure stickman_walk_target_x is not less than initial_pos.x if logo is too far left | |
| const target_x_for_walk = Math.max(stickman_initial_pos.x + 1, stickman_walk_target_x); | |
| const walk_frames = Math.max(10, Math.floor(Math.abs(target_x_for_walk - stickman_initial_pos.x) / 1.2) ); | |
| let current_stickman_x = stickman_initial_pos.x; | |
| // Ensure walk_step_x is not NaN if walk_frames is 0 (though it's max(10, ...)) | |
| const walk_step_x = walk_frames > 0 ? (target_x_for_walk - stickman_initial_pos.x) / walk_frames : 0; | |
| for (let i = 0; i < walk_frames; i++) { | |
| current_stickman_x += walk_step_x; | |
| const walk_art = (i % 4 < 2) ? stick_man_art_walk_1 : stick_man_art_walk_2; | |
| sequence.push(buildScene(walk_art, { x: Math.round(current_stickman_x), y: stickman_base_y }, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {})); | |
| } | |
| current_stickman_x = target_x_for_walk; | |
| let current_stickman_pos = { x: current_stickman_x, y: stickman_base_y }; | |
| // Phase 1: Pause before shake | |
| for (let i = 0; i < 3; i++) { | |
| sequence.push(buildScene(stick_man_art_normal, current_stickman_pos, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {})); | |
| } | |
| // Phase 2: Shaking LinkedIn & Data Fall | |
| let current_logo_pos_phase2 = { ...logo_initial_pos }; | |
| const shake_frames = 25; | |
| for (let i = 0; i < shake_frames; i++) { | |
| let logoAdj = { x: 0, y: 0 }; | |
| if (i % 6 < 2) logoAdj = { x: 1, y: 0 }; else if (i % 6 < 4) logoAdj = { x: -1, y: 0 }; | |
| current_logo_pos_phase2.x = logo_initial_pos.x + logoAdj.x; | |
| if (i % 2 === 0) spawnDataParticle(current_logo_pos_phase2.x, current_logo_pos_phase2.y, logo_width); | |
| // Create a new array for data_particles to update positions for this frame | |
| let next_frame_particles = []; | |
| data_particles.forEach(p => { | |
| let new_p = {...p}; | |
| if (new_p.active) { | |
| new_p.y += new_p.vy; | |
| if (new_p.y >= FLOOR_LEVEL) { | |
| new_p.y = FLOOR_LEVEL; | |
| new_p.vy = 0; | |
| new_p.active = false; | |
| } | |
| } | |
| next_frame_particles.push(new_p); | |
| }); | |
| data_particles = next_frame_particles; // Update global particles for next frame generation | |
| sequence.push(buildScene(stick_man_art_normal, current_stickman_pos, true, linked_in_art, current_logo_pos_phase2, false,0,0,0, [], {}, false, [], {})); | |
| } | |
| current_logo_pos_phase2 = { ...logo_initial_pos }; // Reset logo position | |
| // Phase 3: Data Settles, Stickman gets ready for impact | |
| const settle_frames = 10; | |
| for (let i = 0; i < settle_frames; i++) { | |
| let stickmanArtPhase3 = (i < settle_frames / 2) ? stick_man_art_normal : stick_man_art_surprise; | |
| let next_frame_particles_settle = []; | |
| data_particles.forEach(p => { // Ensure all particles settle | |
| let new_p = {...p}; | |
| if (new_p.active) { | |
| new_p.y += new_p.vy; | |
| if (new_p.y >= FLOOR_LEVEL) { | |
| new_p.y = FLOOR_LEVEL; | |
| new_p.vy = 0; | |
| new_p.active = false; | |
| } | |
| } | |
| next_frame_particles_settle.push(new_p); | |
| }); | |
| data_particles = next_frame_particles_settle; | |
| sequence.push(buildScene(stickmanArtPhase3, current_stickman_pos, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {})); | |
| } | |
| // Phase 4: Lightning Strike | |
| const lightning_target_y = logo_initial_pos.y; | |
| const lightning_strike_frames = lightning_target_y + 3; | |
| const lightning_bolt_length = 5; | |
| const lightning_tip_x_strike = logo_initial_pos.x + Math.floor(logo_width / 2); | |
| let frame_lightning_y = 0; | |
| for (let i = 0; i < lightning_strike_frames; i++) { | |
| frame_lightning_y = i; | |
| let logo_art_to_use = linked_in_art; | |
| if (frame_lightning_y >= lightning_target_y) { | |
| logo_art_to_use = linked_in_art_hit; | |
| frame_lightning_y = lightning_target_y; | |
| } | |
| // Update current_lightning_y for buildScene to use | |
| current_lightning_y = frame_lightning_y; | |
| sequence.push(buildScene(stick_man_art_surprise, current_stickman_pos, true, logo_art_to_use, logo_initial_pos, true, lightning_tip_x_strike, current_lightning_y, lightning_bolt_length, [], {}, false, [], {})); | |
| } | |
| current_lightning_y = -1; // Lightning done for buildScene logic | |
| // Phase 5: Explosion | |
| const explosion_duration_per_frame = 2; | |
| let stickman_art_explosion = stick_man_art_surprise; | |
| for (let i = 0; i < explosion_art_frames.length; i++) { | |
| const explosion_art = explosion_art_frames[i]; | |
| const explosion_art_width = Math.max(...explosion_art.map(l => l.length)); | |
| const explosion_art_height = explosion_art.length; | |
| const current_explosion_pos = { | |
| x: explosion_center_x - Math.floor(explosion_art_width / 2), | |
| y: explosion_center_y - Math.floor(explosion_art_height / 2) | |
| }; | |
| for (let j = 0; j < explosion_duration_per_frame; j++) { | |
| if (i === 0 && j === 0) { | |
| data_particles = []; // Clear all data particles for buildScene | |
| stickman_art_explosion = stick_man_art_gone; | |
| } | |
| sequence.push(buildScene(stickman_art_explosion, current_stickman_pos, false, [], {}, false,0,0,0, explosion_art, current_explosion_pos, false, [], {})); | |
| } | |
| } | |
| // Phase 6: "Ingaze" Logo Reveal | |
| const ingaze_reveal_pause_frames = 5; | |
| for(let i=0; i < ingaze_reveal_pause_frames; i++) { | |
| sequence.push(buildScene(stick_man_art_gone, current_stickman_pos, false, [], {}, false,0,0,0, [], {}, false, [], {})); | |
| } | |
| const ingaze_display_frames = 30; | |
| for (let i = 0; i < ingaze_display_frames; i++) { | |
| sequence.push(buildScene(stick_man_art_gone, current_stickman_pos, false, [], {}, false,0,0,0, [], {}, true, ingaze_logo_art, ingaze_pos)); | |
| } | |
| return sequence; | |
| } | |
| // --- Animation Player --- | |
| const animationElement = document.getElementById('cmd-animation'); | |
| let currentFrame = 0; | |
| let animationInterval; | |
| let staticAnimationFrames = []; // Will hold the pre-generated frames | |
| function playAnimation() { | |
| // Ensure frames are generated before playing | |
| if (staticAnimationFrames.length === 0) { | |
| console.error("Animation frames not generated yet!"); | |
| if(animationElement) animationElement.textContent = "Error: Animation frames missing."; | |
| return; | |
| } | |
| animationInterval = setInterval(() => { | |
| if (animationElement && staticAnimationFrames[currentFrame]) { | |
| animationElement.textContent = staticAnimationFrames[currentFrame]; | |
| } | |
| currentFrame++; | |
| if (currentFrame >= staticAnimationFrames.length) { | |
| currentFrame = 0; // Loop animation | |
| // Re-initialize particle state for a clean loop if it's not handled by generation | |
| // The generateAnimationFrames function now resets particles at its start. | |
| // For a true visual loop, we might need to call generateAnimationFrames() again | |
| // or design the particle logic to reset cleanly on loop. | |
| // For now, a simple frame loop is implemented. | |
| // If generateAnimationFrames is heavy, avoid calling it every loop. | |
| // The current logic in generateAnimationFrames resets data_particles at the beginning. | |
| // To make the loop truly seamless with dynamic particles, the generation logic | |
| // would need to be part of the loop or the state reset more carefully. | |
| // Given the current structure, we'll loop the pre-generated sequence. | |
| } | |
| }, frameDuration); | |
| } | |
| // Initialize and start animation | |
| // Using a self-invoking function or ensuring DOM is ready | |
| (function() { | |
| // Check if the DOM is already loaded | |
| if (document.readyState === "complete" || document.readyState === "interactive") { | |
| initAnimation(); | |
| } else { | |
| window.addEventListener('DOMContentLoaded', initAnimation); | |
| } | |
| })(); | |
| function initAnimation() { | |
| if (!animationElement) { | |
| console.error("Animation element not found"); | |
| return; | |
| } | |
| try { | |
| staticAnimationFrames = generateAnimationFrames(); // Generate all frames | |
| if (staticAnimationFrames.length > 0) { | |
| animationElement.textContent = staticAnimationFrames[0]; // Show first frame | |
| playAnimation(); | |
| } else { | |
| animationElement.textContent = "Error: Could not generate animation."; | |
| } | |
| } catch (error) { | |
| console.error("Error during animation setup:", error); | |
| if(animationElement) animationElement.textContent = "Error initializing animation: " + error.message; | |
| } | |
| } | |
| // Clean up interval when the window/iframe is unloaded (optional, good practice) | |
| window.addEventListener('unload', () => { | |
| if (animationInterval) { | |
| clearInterval(animationInterval); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |