Code Demos

Interactive Quilt Pattern Generator

Explore a browser-based quilt design tool that lets you experiment with color palettes, grid sizes, mirroring, and borders to create custom Half-Square Triangle (HST) quilt layouts. You can design directly in your browser and export the result as a PNG for reference or printing.

Launch the Quilt Pattern Generator

Key Features

  • Color Palettes: Choose from options like Basic, Warm, Cool, Holo, Twilight, Cold, and Futuristic.
  • Custom Grid Size: Adjust the quilt grid to explore different block counts and compositions.
  • Mirrored Layouts: Enable mirroring so all four quadrants reflect the top-left design.
  • Border Controls: Set border line width (in pixels) and toggle between black or white borders.
  • One-Click Actions: Generate new patterns, randomize colors, and save your design as a PNG image.

Quick Instructions

  • Change Orientation: Left-click any tile to cycle its orientation through square and HST directions (L / U / R / D / F).
  • Change Color: Left-click a color swatch to select it, then click a triangle in a tile to apply the color. Click the swatch again to deselect.
  • Mirror Pattern: Turn on mirroring so the other three quadrants automatically reflect the top-left design.
  • Change Pattern Size: Adjust the grid size for the top-left quadrant (for example, 5 creates a 5×5 quadrant and a 10×10 full quilt when mirrored).
  • Apply Border Lines: Set the border width above 0 px to show border lines around each tile.
  • Border Color: Choose black or white for the border line color.

Jump to Features | Jump to Instructions | Open the Quilt Pattern Generator

Lazer Kites

Lazer Kites is a fast-paced skill game built entirely in the browser. You control a flying kite that moves forward constantly while steering, firing lasers, collecting power-ups, and popping floating targets. The game runs smoothly on desktop and mobile and features optional aim-assist, power-ups, dynamic clouds, bubble targets, varying wind speeds, and a persistent high-score system stored locally on your device.

Play Lazer Kites

Key Features

  • Continuous Flight: The kite accelerates forward automatically, creating constant forward motion.
  • Responsive Steering: Use A/D or ◀/▶ keys (or mobile touch controls) to turn smoothly.
  • Laser Combat: Fire with Space or tap to pop targets scattered across the sky.
  • Dynamic Targets: Small, medium, and large bubbles drift across the arena, each worth different points.
  • Power-Ups: Collect Slow-Time, Fast-Fire, or Aim-Assist hexagons to temporarily boost performance.
  • High Score Memory: Your highest score is automatically saved in your browser using localStorage.
  • Mobile-Friendly: Includes touch-based steering and firing controls.
  • Performance-Optimized: Smart canvas scaling and devicePixelRatio management for smooth gameplay.

How to Play

  • Start the Game: Press Space or tap the screen to begin a new round.
  • Steer: Use A/D or the ◀/▶ keys. On mobile, tap Left/Right.
  • Fire: Press Space or tap the Fire button.
  • Pop Targets: Aim your laser beam at targets. Smaller targets are worth more points.
  • Collect Power-Ups: Fly over blue (Slow-Time), orange (Fast-Fire), or purple (Aim-Assist) hexagons to activate bonuses for 8 seconds.
  • Stay in Motion: The kite constantly moves forward and wraps around screen edges to stay in play.
  • Beat the Clock: You have 60 seconds to score as many points as possible.

Jump to Features | Jump to Instructions | Open Lazer Kites

Random Space Facts

Random Space Facts is an interactive webpage that displays a new fact about our universe, planets, and the broader cosmos every time the user taps, clicks, or interacts with the screen. The content panel sits above a fully dynamic p5.js “gravity ripple” starfield that responds to touch or mouse input, creating an immersive space-themed background on both desktop and mobile devices.

Users can trigger fact changes by tapping or clicking anywhere on the screen. Touching and holding activates a gravity well that pulls nearby stars toward the interaction point. Releasing triggers a ripple effect that gently pushes the starfield outward. The experience scales automatically to any screen size.

Launch Random Space Facts

Key Features

  • Randomized Space Facts: Each interaction updates the display with one of dozens of curated facts about planets, stars, and the broader universe.
  • Interactive Gravity Field: Clicking, tapping, or touching creates a temporary gravity point that pulls stars toward your finger or cursor.
  • Ripple Release Effect: Lifting your finger or releasing the mouse produces an expanding ripple that subtly pushes stars away.
  • Shooting Stars: Procedurally generated meteor streaks appear occasionally, adding depth and movement to the background.
  • Mobile-Optimized: The interface detects mobile devices and adjusts star density and interaction handling automatically.
  • Responsive Scaling: The p5.js canvas resizes with the browser window to maintain full-screen coverage.
  • Blurred Glass UI Panel: The text container uses a translucent, blurred “glassmorphism” style to stay readable over the animated starfield.

How It Works

  • Change the Fact: Tap or click anywhere to generate a new random space fact.
  • Create Gravity: Hold your finger or mouse button to pull nearby stars toward the interaction point.
  • Release to Ripple: Let go to produce an expanding ripple that briefly disturbs the starfield.
  • Background Animation: Shooting stars, drifting stars, and ambient motion continue automatically in the background.

Jump to Features | Jump to Interaction | Open Random Space Facts

Interactive Fish Schooling Name Tank

The Fish Schooling Name Tank is an interactive, full-screen p5.js experience where colorful fish swim, school, and feed in a dynamic underwater scene. Each fish has its own unique name drawn from a large pool of ocean-inspired names, and users can reveal these names by tapping or clicking on individual fish.

The tank responds to user interaction in two ways: tapping or clicking on the water surface creates a temporary “feeding spot” with drifting pebbles that attract nearby fish into spiraling schools, and tapping or clicking directly on a fish opens a floating name popup. Tapping or clicking the popup itself hides it again, keeping the screen clear as the fish continue to swim and re-form their schools.

Launch the Fish Schooling Name Tank

Key Features

  • Named Fish: Each fish is assigned a unique name from an extensive list of ocean- and water-themed names, ensuring minimal repetition while the tank fills with personality.
  • Schooling Behavior: Fish are grouped by size and color into schools that align, cohere, and separate using flocking rules, creating natural-looking group motion.
  • Interactive Feeding Spots: Tapping or clicking the water creates a feeding spot with animated pebbles that draw fish into a swirling, circling pattern before they drift back into free swim.
  • Name Popups: Clicking or tapping a fish opens a soft, rounded popup hovering above it, displaying the fish’s name on a readable card styled like a speech bubble.
  • Full-Screen Responsive Canvas: The p5.js canvas automatically resizes with the browser window and adjusts fish count based on screen area to maintain performance and density.
  • Mobile-Aware Motion: The simulation detects mobile devices and subtly scales speed and forces to keep the experience smooth on phones and tablets.
  • Layered Ocean Background: A gradient water background and subtle motion cues create the impression of looking down into a deep tank from above.

How It Works

  • Feed the Fish: Tap or click anywhere that is not on a fish to create a feeding spot. Nearby fish will curve toward the spot, spiral around it, and briefly grow as they “eat.”
  • Reveal a Name: Tap or click directly on a fish to open its name popup. Only one fish name is shown at a time to keep the screen clean.
  • Hide the Popup: Tap or click the popup itself to hide the name and return to an unobstructed view of the tank.
  • Watch the Schools: Fish continuously align with neighbors of similar size and color, forming fluid, shifting schools across the tank.
  • Resize the Window: The tank recalculates canvas size and fish count to fit any desktop or mobile screen, preserving a balanced, full-screen experience.

Jump to Features | Jump to Interaction | Open the Fish Schooling Name Tank

Interactive Self-Order Kiosk Demo

The Self-Order Kiosk Demo is a touch-friendly, full-screen ordering interface built with HTML, CSS, and vanilla JavaScript. It recreates the feel of a modern quick-service restaurant kiosk, with large tap targets, clear visual hierarchy, and a responsive three-panel layout that works across desktop, tablet, and mobile screens.

Guests browse menu categories, add items to an order with a single tap, and review quantities and totals in a live order summary panel. The kiosk supports both Dine-In and Takeaway modes, includes automatic tax calculation, and presents a checkout flow with a review step, allowing users to confirm or adjust their selections before placing the order.

Launch the Self-Order Kiosk Demo

Key Features

  • Three-Panel Kiosk Layout: A left-hand category rail, central menu grid, and right-hand order summary panel mirror real-world kiosk interfaces and keep navigation intuitive.
  • Dynamic Categories & Menu Items: Categories and items are populated dynamically into a grid of cards, each showing the item name, short description, and price with a prominent “Add” button.
  • Live Order Summary: The order panel updates in real time with item names, quantities, and line totals, plus running subtotal, tax, and total values.
  • Quantity Controls: Simple plus/minus buttons let users increase or decrease item quantities without leaving the order view, with items removed automatically when quantity reaches zero.
  • Dine-In vs. Takeaway Toggle: A pill-style toggle at the top of the screen lets guests switch between Dine-In and Takeaway, updating the order type badge in the summary panel.
  • Light/Dark Theme Toggle: A theme button in the header instantly flips between light and dark modes, adjusting background, surface, and text colors for different environments.
  • Responsive & Mobile-Optimized: On tablets and phones the layout collapses into two or one columns, with a fixed bottom “Checkout” bar that keeps the total and call-to-action always visible.
  • Modal Checkout Experience: Tapping Checkout opens a centered modal overlay where users can review their order, see the final total, and complete or cancel the transaction.
  • Accessible Markup: ARIA labels, roles, and clear focus targets are used throughout to improve screen reader and keyboard navigation behavior.

How It Works

  • Select an Order Type: Use the Dine-In / Takeaway toggle in the header to choose how the order will be served. The current selection is reflected in a pill inside the order panel.
  • Choose a Category: Tap a category card on the left to filter the menu. The active category is highlighted, and a label above the menu grid shows what you are currently browsing.
  • Add Items to the Order: In the menu grid, tap the button on any item card to add it to your order. The order summary updates immediately with the item, quantity, and price.
  • Adjust Quantities: In the order panel, use the plus and minus buttons to change quantities. Totals recalculate automatically as you make adjustments.
  • Review and Checkout: When you are ready, tap the Checkout button (or the bottom checkout bar on mobile) to open the review modal. Confirm the total, then place the order or close the modal to continue editing.
  • Start a New Order: After checkout, the interface can be reset to an empty order state so the next guest can begin a fresh order on the same kiosk.

Jump to Features | Jump to Interaction | Open the Self-Order Kiosk Demo