web-gizmos (fun inside!)

• Web app fetches random anime boy images from Nekos API through a proxy
• Displays image with metadata including ID, rating, tags, source link, and color palette
• Features Comic Sans font, pink gradient background, and interactive button for new images

    const targetUrl = "https://api.nekosapi.com/v4/images/random?limit=1&tags=boy...";
    async function loadImage() { const response = await fetch(apiUrl); ... }
  

This application displays random anime boy images from the Nekos API with accompanying metadata and color palette swatches. Users can fetch new images by clicking a button, and each image card shows details like ID, rating, tags, and source link. The interface uses a playful pink-themed design with Comic Sans font and smooth hover effects.

• Webpage for playing ASL sequences based on user input text
• Features an input field with autocomplete suggestions
• Includes a video player to display ASL sequences

    <input id="userText" placeholder="Enter text..." autocomplete="off"/>
    <video id="aslVideo" width="500" controls></video>
  

This webpage allows users to enter text and play corresponding ASL (American Sign Language) sequences. It features an input field with autocomplete suggestions and a video player to display the ASL sequences. The page includes a button to fetch and play the ASL sequence based on the user's input text.

• Custom font tester application with responsive design
• Features font file upload (.ttf, .otf, .woff, .woff2) with @font-face implementation
• Interactive font size slider (8px to 72px) with smooth transitions
• Real-time custom text input display with placeholder management
• Comprehensive typography testing including headings, paragraphs, lists, forms, and glyphs

    const reader = new FileReader();
    reader.onload = (e) => { /* Apply @font-face rule */ };
    fontTestArea.style.fontFamily = `'${FONT_FAMILY_NAME}', system-ui, sans-serif`;
  

This web application provides a comprehensive environment for testing custom fonts across various typographic elements. Users can upload font files, adjust font sizes with a slider, and input custom text to see real-time rendering results. The application includes a wide range of test cases including headings, paragraphs, lists, forms, and special characters, all styled with a modern, responsive design using CSS variables and grid layouts.

• Creates a Matrix-style falling text animation with customizable parameters
• Uses canvas to render animated characters that fall vertically and move horizontally
• Supports URL parameters for customizing text, color, speed, font, and other visual properties

    const canvas = document.getElementById('matrix');
    const ctx = canvas.getContext('2d');
  

This HTML page creates a Matrix-style falling text animation using canvas. The animation features customizable parameters through URL query strings, including text display, color, speed, and font settings. Characters fall down the screen while optionally moving horizontally, creating a dynamic visual effect with configurable transparency and framerate.

• Audio visualizer with 2D canvas overlay and 3D background canvas
• Multiple visualizer modes including bars, waveform, and circle visualizations
• Real-time audio processing using Web Audio API with FFT analysis
• Metadata display including album art, title, artist, and album information
• Multiple audio input modes: local microphone, WebSocket stream, and local file

    const canvas2D = document.getElementById('visualizer-2d');
    const ctx = canvas2D.getContext('2d');
    const canvas3D = document.getElementById('visualizer-3d');
  

This web application provides an interactive audio visualizer with real-time audio processing capabilities. It features multiple visualization modes, metadata display, and supports various audio input sources including microphone, WebSocket streams, and local files. The application uses the Web Audio API for audio analysis and provides customizable settings for sensitivity, FFT size, and smoothing.

• Web-based MIDI sampler using Tone.js and midi-player-js libraries
• Supports custom audio and MIDI file uploads or default files
• Features play, pause, and restart controls with real-time status updates

    const playBtn = document.getElementById('playBtn');
    async function initSampler(url) { sampler = new Tone.Sampler({ urls: { C4: url } }); }
  

A MIDI sampler web application that triggers custom audio samples based on MIDI note events. Users can upload their own audio and MIDI files or use default files, with controls to play, pause, and restart the sequence. The application uses Tone.js for audio synthesis and midi-player-js for MIDI file parsing.

• SVG pattern generator with seeded randomness for reproducible designs
• Six distinct style engines: Memphis, Bauhaus, Isometric, Voronoi, Waves, Op-Art
• Deterministic output based on seed, dimensions, style, density, palette, and stroke width
• Export to both SVG and PNG formats with texture overlay options

    const rng = PRNG(`${seed}|${style}|${W}x${H}|${density}`);
    switch (style) { case 'memphis': genMemphis(rootGroup, rng, W, H, palette, bg, strokeWidth); break; }
  

This web application generates deterministic SVG patterns using seeded pseudorandom number generation. Users can customize dimensions, select from six artistic styles, adjust complexity, choose color palettes, and export their creations as vector SVG or raster PNG files. The seed-based approach ensures identical patterns can be recreated by reusing the same settings.

• Procedural PCB simulator with logic gates, switches, displays, and LEDs
• Smart A* routing algorithm with fan-out limits and force-connect option
• Interactive components that respond to mouse clicks and propagate signals
• Customizable parameters including seed, density, speed, and visual effects
• Real-time simulation with CRT scanline and glow effects

    class PRNG { constructor(seed) { this.seed = this.hashString(seed.toString()); } }
    class Generator { constructor(seed, w, h, density, forceConnect, maxFanout) { this.generate(); } }
  

This procedural PCB simulator generates random circuit boards with logic components that interact through signal propagation. Users can adjust parameters like component density and fan-out limits, then interact with switches and observe signal flow through traces. The A* routing algorithm intelligently connects components while avoiding collisions, with optional force-connect mode for crowded boards.

• Converts images to HTML text representations with configurable settings
• Supports sequence or random character generation based on image pixels
• Offers export options for HTML, SVG, and PNG formats

    const contrastCurve = [0,0,0,0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,4,4,5,5,6,6,6,7,8,8,9,9,10,10,11,12,12,13,14,14,15,16,17,17,18,19,20,21,22,23,23,24,25,26,27,28,29,30,31,32,33,34,35,37,38,39,40,41,42,43,45,46,47,48,49,51,52,53,54,56,57,58,60,61,62,64,65,66,68,69,71,72,73,75,76,78,79,81,82,84,85,87,88,90,91,93,94,96,97,99,100,102,103,105,106,108,109,111,113,114,116,117,119,120,122,124,125,127,128,130,131,133,135,136,138,139,141,142,144,146,147,149,150,152,153,155,156,158,159,161,162,164,165,167,168,170,171,173,174,176,177,179,180,182,183,184,186,187,189,190,191,193,194,195,197,198,199,201,202,203,204,206,207,208,209,210,212,213,214,215,216,217,218,220,221,222,223,224,225,226,227,228,229,230,231,232,232,233,234,235,236,237,238,238,239,240,241,241,242,243,243,244,245,245,246,246,247,247,248,249,249,249,250,250,251,251,252,252,252,253,253,253,253,254,254,254,254,254,255,255,255,255,255,255,255,255];
    function generateTextImage(ctx, width, height) { let result = ''; let oldColor = null; for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const pixelData = ctx.getImageData(x, y, 1, 1).data; const color = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`; if (color !== oldColor) { const character = nextCharacter(); if (x === 0) { result += `${character}`; } else { result += `${character}`; } oldColor = color; } else { result += nextCharacter(); } } oldColor = null; result += '
'; } return result; }
  

This web application transforms uploaded images into HTML text art using configurable settings for character type, width, colors, and font size. The tool processes images by reading pixel data and mapping it to HTML elements with appropriate colors, supporting both sequence and random character generation patterns. Users can export their creations as HTML, SVG, or PNG files for sharing or further use.

• Web app that degrades image/video quality over time by scaling down resolution and crushing audio.
• Supports uploading images or videos, then applying pixelation and audio degradation to create a GIF or degraded video file.
• Features real-time preview, customizable degradation parameters, and download options.

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d', { alpha: false });
    const gif = new GIF({ workers: 2, quality: 10, width: canvas.width, height: canvas.height });
  

This web application lets users upload images or videos and apply progressive degradation effects including pixelation and audio bitcrushing. It provides real-time preview, customizable parameters for final scale, pixelation step, audio crush strength, and output options like GIF or degraded video. The app uses canvas manipulation for visual degradation and Web Audio API for audio processing, with optional recording capabilities for video output.

• Real-time multiplayer racing game using MQTT for networking
• Pixelated 2D graphics with neon cyberpunk aesthetic
• Map editor for creating custom race tracks
• Chat system with moderation commands
• Mobile controls support

    mqttClient = mqtt.connect(currentBroker, { clientId: CLIENT_ID, clean: true });
    publish('pos', { id: myCar.id, x: myCar.x, y: myCar.y, angle: myCar.angle });
  

DRiFT.js is a browser-based multiplayer racing game featuring real-time physics, custom map creation, and chat functionality. Players connect via MQTT to race together, with the host controlling physics settings and the ability to share maps. The game includes a map editor, particle effects, and supports both desktop and mobile controls.

• Interactive turtle simulation with multiple turtle personalities and behaviors
• Pathfinding AI using A* algorithm with obstacle avoidance and 8-directional movement
• Grid-based world with terrain types (walls, glass, water, grass, sand) affecting turtle movement
• Food collection system with turtle vision cones and smell detection for finding food
• Customizable settings panel with mobile-responsive design and keyboard shortcuts

    function findPath(sx, sy, ex, ey) { /* A* pathfinding with 8-directional movement */ }
    class Turtle { /* AI behavior: IDLE, WAIT, SEEK states with smooth rotation */ }
  

This web-based turtle simulation features intelligent AI turtles with distinct personalities, pathfinding capabilities, and interactive behaviors. Users can spawn turtles, place food and obstacles, edit terrain, and customize simulation settings through a responsive control panel. The simulation includes advanced features like A* pathfinding, turtle vision cones, food detection systems, and mobile touch controls.

• Multiplayer racing game using Three.js for 3D graphics and MQTT for real-time networking
• Procedurally generated terrain with five biomes (grasslands, desert, snow, mars, caves) using simplex noise
• Host edition includes terrain customization tools and soundboard for in-game audio effects
• Mobile-optimized controls with virtual joystick and nitro buttons
• Persistent settings stored in IndexedDB and server status checking for MQTT brokers

    const Utils = { lerp: (a, b, t) => a + (b - a) * t, clamp: (val, min, max) => Math.min(Math.max(val, min), max), rand: (min, max) => Math.random() * (max - min) + min, strToColor: (str) => { let hash = 0; for (let i = 0; i < str.length; i++) hash = str.charCodeAt(i) + ((hash << 5) - hash); const c = (hash & 0x00FFFFFF).toString(16).toUpperCase(); return '#' + "00000".substring(0, 6 - c.length) + c; }, getTimeString: (gameTime) => { const totalMinutes = Math.floor(gameTime * 24 * 60); const h = Math.floor(totalMinutes / 60); const m = totalMinutes % 60; const ampm = h >= 12 ? 'PM' : 'AM'; const h12 = h % 12 || 12; return `${h12}:${m.toString().padStart(2, '0')} ${ampm}`; } };
    class DB { constructor(dbName, storeName) { this.dbName = dbName; this.storeName = storeName; this.db = null; } async init() { return new Promise((resolve, reject) => { const request = indexedDB.open(this.dbName, 2); request.onupgradeneeded = (e) => { const db = e.target.result; if (!db.objectStoreNames.contains(this.storeName)) db.createObjectStore(this.storeName); }; request.onsuccess = (e) => { this.db = e.target.result; resolve(); }; request.onerror = (e) => reject("DB Error"); }); } async get(key) { return new Promise((resolve) => { const tx = this.db.transaction([this.storeName], "readonly"); const req = tx.objectStore(this.storeName).get(key); req.onsuccess = () => resolve(req.result); req.onerror = () => resolve(null); }); } async put(key, value) { return new Promise((resolve) => { const tx = this.db.transaction([this.storeName], "readwrite"); tx.objectStore(this.storeName).put(value, key); tx.oncomplete = () => resolve(); }); } }
  

Infinity Racer is a browser-based multiplayer racing game featuring procedurally generated terrain and real-time networking. The game uses Three.js for 3D rendering and MQTT for multiplayer communication, supporting up to five different biomes with dynamic weather cycles. Players can customize terrain generation parameters, use a built-in soundboard for audio effects, and compete with others in real-time races. The host edition provides additional controls for world customization and server management, while maintaining mobile compatibility with touch controls.

• 2D mining game with multiplayer support via MQTT broker
• Procedural world generation with ore veins and teleporters
• Upgradable equipment system (drill, hull, fuel, cargo, etc.)
• Mobile-optimized controls with virtual D-pad and action buttons
• Save system with local IndexedDB storage and cloud sync via Puter
• Admin/host controls for server management and player moderation
• Custom modal system for prompts, confirmations, and settings

    const TILE_TYPES = { EMPTY: 0, DIRT: 1, STONE: 3, COAL: 6, IRON: 7, GOLD: 8, DIAMOND: 9, BEDROCK: 99 };
    class GameEngine { update() { /* movement, mining, heat, particles */ } draw() { /* rendering pipeline */ } }
    class NetworkManager { connect() { /* MQTT setup */ } handleMessage() { /* join, move, chat, map sync */ } }
  

Mega Miner NG is a browser-based multiplayer mining game featuring procedurally generated worlds, real-time multiplayer via MQTT, and extensive upgrade systems. Players dig for resources, upgrade their equipment, and can teleport between discovered stations. The game includes mobile-optimized controls, cloud save functionality, and admin tools for server management.