Code Feet ❲Ultimate · 2024❳

Code Feet ❲Ultimate · 2024❳

.footprint-hint font-size: 0.7rem; color: #6d8f8a; @media (max-width: 720px) .stat font-size: 0.7rem; padding: 0.2rem 0.7rem; .badge font-size: 0.7rem; </style> </head> <body> <div> <div class="matrix-container"> <canvas id="codeFeetCanvas" width="900" height="600" style="width:100%; height:auto; max-width:900px; aspect-ratio:900/600"></canvas> <div class="info-panel"> <div class="badge">◢ CODE FEET ◣ — DIGITAL IMPRINT</div> <div class="stats"> <div class="stat"><span>🦶</span> ACTIVE TRACES: <span id="traceCount">0</span></div> <div class="stat"><span>⚡</span> RAIN INTENSITY</div> <button id="resetBtn">⟳ RESET FOOTSTEPS</button> </div> </div> <div class="footprint-hint" style="text-align:center; margin-top:12px;">✦ click + drag — paint code-footprints | each step leaves a matrix rain ✦</div> </div> </div>

button background: none; border: 1px solid #2effb0; color: #b5ffe0; font-family: monospace; font-weight: bold; padding: 0.3rem 1rem; border-radius: 2rem; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(8px); font-size: 0.8rem;

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Code Feet | Digital Footprint Matrix</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* prevents accidental text selection while interacting */

.badge font-family: monospace; font-weight: bold; font-size: 0.85rem; letter-spacing: 1px; background: #00000066; padding: 0.3rem 1rem; border-radius: 2rem; color: #9efff0; border-left: 3px solid #2effc0; code feet

/* main canvas container with futuristic glassmorphism */ .matrix-container background: rgba(10, 20, 28, 0.55); backdrop-filter: blur(3px); border-radius: 3rem; padding: 1.2rem; box-shadow: 0 20px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08); border: 1px solid rgba(0, 255, 196, 0.2);

button:hover background: #2effb022; color: #ffffff; border-color: #7effdd; box-shadow: 0 0 8px #0ff6; transform: scale(0.97);

@keyframes pulseText 0% opacity: 0.7; text-shadow: 0 0 0 #0ff0; 100% opacity: 1; text-shadow: 0 0 3px #0ffa; CODE RAIN (matrix characters cascading from footprint) ----

.info-panel display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.2rem; flex-wrap: wrap; gap: 12px; background: #03060cee; padding: 0.8rem 1.5rem; border-radius: 3rem; backdrop-filter: blur(4px); border: 1px solid #2affb620;

body background: radial-gradient(circle at 20% 30%, #0a0f1e, #03060c); min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Fira Code', 'Courier New', 'Source Code Pro', monospace; padding: 20px;

<script> (function()', '!', '?', '@', '%', '$', 'λ', '∑', 'π', '∫', '√', '∞', 'α', 'β', 'δ', 'fn', '=>', '::', '++', '--', '!=', '===', 'class', 'def', 'var', 'let', 'const' ]; function getRandomCodeChar() return codeSymbols[Math.floor(Math.random() * codeSymbols.length)]; // create a fresh footprint object function createFootprint(x, y, intensity = 1.0) // clamp coordinates within canvas edges (with padding) const clampedX = Math.min(W - 12, Math.max(12, x)); const clampedY = Math.min(H - 12, Math.max(12, y)); const dropsArray = generateCodeDrops(clampedX, clampedY, intensity); return x: clampedX, y: clampedY, age: 0, maxAge: FOOTPRINT_LIFE, intensity: Math.min(1.2, intensity), codeDrops: dropsArray, // for glowing footprint ring pulsePhase: Math.random() * Math.PI * 2 ; // add new trace with possible replacement of oldest if limit reached function addFootprint(x, y, intensity = 0.9) if(traces.length >= MAX_TRACES) // remove the oldest footprint (lowest age not necessarily, but first in array is oldest) traces.shift(); traces.push(createFootprint(x, y, intensity)); updateTraceCounter(); // remove all traces function resetAllFootprints() traces = []; updateTraceCounter(); // update UI counter function updateTraceCounter() const counterSpan = document.getElementById('traceCount'); if(counterSpan) counterSpan.innerText = traces.length; // while dragging: add steps if distance threshold met function addFootprintStep(currentX, currentY, previousX, previousY, intensityBase = 0.85) if(!previousX && !previousY) addFootprint(currentX, currentY, intensityBase); return true; const dx = currentX - previousX; const dy = currentY - previousY; const distance = Math.hypot(dx, dy); if(distance >= NEW_STEP_DIST) // place footprint at current position addFootprint(currentX, currentY, intensityBase + Math.random() * 0.3); return true; return false; // ---------- UPDATE RAIN DROPS INSIDE EACH FOOTPRINT (ANIMATE) ---------- function updateDrops() for(let t of traces) // age increments each frame t.age++; // update each drop inside this footprint const drops = t.codeDrops; for(let i=0; i<drops.length; i++) // remove expired footprints (age > maxAge) const beforeCount = traces.length; traces = traces.filter(t => t.age < t.maxAge); if(beforeCount !== traces.length) updateTraceCounter(); // ------------- DRAWING ENGINE (CYBERPUNK + CODE RAIN + FOOTPRINT GLOW) ------------- function draw() if(!ctx) return; ctx.clearRect(0, 0, W, H); // ---- 1. Deep tech grid background ---- const gradBack = ctx.createLinearGradient(0, 0, W, H); gradBack.addColorStop(0, '#021016'); gradBack.addColorStop(1, '#010a0f'); ctx.fillStyle = gradBack; ctx.fillRect(0, 0, W, H); // draw subtle grid lines (matrix style) ctx.strokeStyle = '#0ff22020'; ctx.lineWidth = 0.5; for(let i = 0; i < W; i += 35) ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, H); ctx.stroke(); for(let i = 0; i < H; i += 35) ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(W, i); ctx.stroke(); // ---- 2. draw each footprint (glowing soles + code rain) ---- for(let idx = 0; idx < traces.length; idx++) const t = traces[idx]; const lifeRatio = 1 - (t.age / t.maxAge); // 1 fresh -> 0 dead const glowIntensity = 0.4 + lifeRatio * 0.9; const footprintAlpha = Math.min(0.9, lifeRatio * 0.8 + 0.3); // --- outer neon glow (footprint aura) ctx.save(); ctx.shadowBlur = 0; const gradient = ctx.createRadialGradient(t.x, t.y, 5, t.x, t.y, FOOTPRINT_RADIUS + 8); gradient.addColorStop(0, `rgba(0, 255, 200, $0.4 * lifeRatio)`); gradient.addColorStop(0.7, `rgba(0, 180, 140, $0.2 * lifeRatio)`); gradient.addColorStop(1, `rgba(0, 50, 40, 0)`); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(t.x, t.y, FOOTPRINT_RADIUS + 9, 0, Math.PI*2); ctx.fill(); // --- organic footprint shape (like two lobes / sole impression) ctx.shadowColor = `rgba(0, 255, 200, $0.5 * lifeRatio)`; ctx.shadowBlur = 12; ctx.beginPath(); // footprint stylized: main pad + toe imprints const anglePhase = (frame * 0.02 + t.pulsePhase); const pulseScale = 1 + Math.sin(anglePhase) * 0.03; const radiusAdj = FOOTPRINT_RADIUS * pulseScale; // main heel + ball shape ctx.ellipse(t.x - 3, t.y + 2, radiusAdj*0.55, radiusAdj*0.7, 0, 0, Math.PI*2); ctx.ellipse(t.x + 5, t.y - 3, radiusAdj*0.5, radiusAdj*0.6, 0.2, 0, Math.PI*2); ctx.fillStyle = `rgba(20, 230, 170, $0.25 * lifeRatio)`; ctx.fill(); ctx.strokeStyle = `rgba(80, 255, 200, $0.7 * lifeRatio)`; ctx.lineWidth = 1.8; ctx.stroke(); // toe marks (tiny circles) for(let toe = 0; toe < 5; toe++) const offX = -8 + toe * 4 + (Math.sin(frame*0.1 + toe)*2); const offY = -12 + Math.sin(toe)*2; ctx.beginPath(); ctx.arc(t.x + offX, t.y + offY, 3 + Math.sin(frame*0.2+toe)*0.5, 0, Math.PI*2); ctx.fillStyle = `rgba(0, 210, 180, $0.4 * lifeRatio)`; ctx.fill(); ctx.shadowBlur = 6; // ---- 3. CODE RAIN (matrix characters cascading from footprint) ---- ctx.font = `500 14px 'Fira Code', 'Courier New', monospace`; for(let drop of t.codeDrops) // additional binary digits floating around (secondary particles) ctx.shadowBlur = 3; for(let p=0; p<8; p++) const angleOff = frame*0.05 + p; const rad = FOOTPRINT_RADIUS * 0.6 + Math.sin(angleOff)*6; const xOff = Math.cos(angleOff + idx) * rad; const yOff = Math.sin(angleOff*1.3 + idx) * rad*0.7; ctx.fillStyle = `rgba(120, 255, 210, $0.25 * lifeRatio)`; ctx.font = `bold 10px monospace`; ctx.fillText( (p%2===0?'#':';'), t.x + xOff, t.y + yOff - 5); ctx.restore(); // draw a "digital suture" ring ctx.beginPath(); ctx.arc(t.x, t.y, FOOTPRINT_RADIUS-2, 0, Math.PI*2); ctx.strokeStyle = `rgba(0, 255, 200, $0.5 * lifeRatio)`; ctx.lineWidth = 1.2; ctx.setLineDash([4, 8]); ctx.stroke(); ctx.setLineDash([]); // ---- 4. cursor + active drawing hint & interactive glow ---- if(drawing) ctx.beginPath(); ctx.arc(lastX, lastY, 12, 0, Math.PI*2); ctx.fillStyle = '#2effb020'; ctx.fill(); ctx.strokeStyle = '#afffdd'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.arc(lastX, lastY, 16, 0, Math.PI*2); ctx.stroke(); // signature watermark ctx.font = "8px monospace"; ctx.fillStyle = "#2a6b5e88"; ctx.fillText("// code-feet — digital imprint //", W-160, H-8); // ------------- EVENT HANDLERS (mouse + touch) ------------- function getCanvasCoords(e) const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; // logical width 900 / actual CSS width const scaleY = canvas.height / rect.height; let clientX, clientY; if(e.touches) if(e.touches.length === 0) return null; clientX = e.touches[0].clientX; clientY = e.touches[0].clientY; else clientX = e.clientX; clientY = e.clientY; let canvasX = (clientX - rect.left) * scaleX; let canvasY = (clientY - rect.top) * scaleY; canvasX = Math.min(W-5, Math.max(5, canvasX)); canvasY = Math.min(H-5, Math.max(5, canvasY)); return x: canvasX, y: canvasY ; function startDraw(e) e.preventDefault(); const coords = getCanvasCoords(e); if(!coords) return; drawing = true; lastX = coords.x; lastY = coords.y; // immediate footprint on click/tap addFootprint(lastX, lastY, 0.95); updateTraceCounter(); function drawMove(e) if(!drawing) return; e.preventDefault(); const coords = getCanvasCoords(e); if(!coords) return; const newX = coords.x; const newY = coords.y; // if distance threshold met, add fresh footprint const dist = Math.hypot(newX - lastX, newY - lastY); if(dist >= NEW_STEP_DIST) addFootprint(newX, newY, 0.8 + Math.random()*0.4); lastX = newX; lastY = newY; else if(dist > 3) // optional: add very light imprint sometimes? but keep minimal to avoid spam if(Math.random() < 0.08) addFootprint(newX, newY, 0.6); lastX = newX; lastY = newY; updateTraceCounter(); function endDraw(e) drawing = false; e.preventDefault(); // reset button action document.getElementById('resetBtn').addEventListener('click', () => resetAllFootprints(); ); // Attach events (mouse + touch) canvas.addEventListener('mousedown', startDraw); window.addEventListener('mousemove', (e) => if(drawing) drawMove(e); ); window.addEventListener('mouseup', endDraw); canvas.addEventListener('touchstart', startDraw, passive: false); canvas.addEventListener('touchmove', drawMove, passive: false); canvas.addEventListener('touchend', endDraw); canvas.addEventListener('touchcancel', endDraw); // disable context menu on canvas canvas.addEventListener('contextmenu', (e) => e.preventDefault()); // ---- Animation Loop (update drops + draw) ---- function animate() updateDrops(); // update all falling code chars inside footprints, age footprints draw(); frame++; animationId = requestAnimationFrame(animate); // start the whole engine animate(); // optional: add few initial footprints to showcase effect (demo) setTimeout(() => addFootprint(W/2 - 40, H/2 + 30, 0.9); addFootprint(W/2 + 45, H/2 + 28, 0.9); addFootprint(W/2, H/2 - 15, 0.7); updateTraceCounter(); , 200); )(); </script> </body> </html> ctx.fillStyle = `rgba(120

.stats display: flex; gap: 1.5rem; font-family: 'Fira Code', monospace; font-weight: 500;

canvas display: block; margin: 0 auto; border-radius: 1.8rem; box-shadow: 0 0 0 2px rgba(0, 255, 200, 0.1), 0 15px 35px rgba(0,0,0,0.5); cursor: crosshair; transition: filter 0.2s ease;