Algorand Ink – Live Blockchain Art

Experience the blockchain’s heartbeat as an ink painting. Real-time Algorand MainNet data crafts dynamic artworks—each brush stroke a transaction securely stored on IPFS and ready to mint as an NFT.

Comment 1

Inspiration

I’ve long been captivated by the elegance and immediacy of Japanese sumi-e ink painting—how a single brushstroke can capture emotion, impermanence and intention. Pair that with Algorand’s sub-five-second block times and you have a living, breathing canvas. I wanted to merge those worlds: let the blockchain’s heartbeat guide each stroke, turning live MainNet data into expressive, meditative art.

What it does

  • Streams Algorand MainNet metrics (transactions, block time, stake, round) every few seconds
  • Maps data points to brush parameters: intensity, size, opacity, position
  • Renders organic ink strokes via p5.js and overlays interactive D3.js metrics
  • Instant NFT creation: select any brush stroke (or the whole canvas), connect your wallet, and mint on Algorand with one click
  • Clears or auto-paints on demand—hover strokes to inspect their on-chain data
  • Saves each canvas to IPFS (via Pinata) and mints it as an Algorand NFT
  • Ships as a PWA so you can paint offline and sync later

How we built it

  1. Starter & UI
    • Bootstrapped with Vite + React + TypeScript for lightning-fast dev and type safety
    • Styled controls and responsive layouts with Tailwind CSS
  2. Data Pipeline
    • Polled Nodely’s Free Tier API for up-to-the-second MainNet stats
    • Synced our polling interval to Algorand’s ~2.7 s block time
  3. Generative Engine
    • Used p5.js for immediate-mode canvas drawing—brush shape, flow and ink density driven by live data
    • Employed D3.js SVG overlays to show transaction count, round number and stake when hovering
  4. Wallet & Instant Minting
    • Integrated AlgoSigner/MyAlgo for seamless in-browser wallet connection
    • Built a one-click “Mint Stroke” flow: users authorize a single transaction to mint a selected stroke as an NFT
    • Stored metadata and art on IPFS via Pinata, then minted with Algorand SDK
  5. Polish & Packaging
    • Added PWA manifest and service worker for offline painting
    • Handled local wallet persistence with encrypted browser storage and clear privacy warnings

Challenges we ran into

  • Data vs. Frames: Balancing p5’s 60 fps loop with block-time polling without dropped strokes
  • React vs. Canvas: Preventing React re-renders from stalling the p5 canvas while updating UI smoothly
  • IPFS Delays: Designing a UX that reassures users during Pinata’s pinning process
  • Beginner Wallet UX: Making “connect & mint” intuitive for first-time NFT creators without sacrificing security

Accomplishments that we're proud of

  • A truly beginner-friendly NFT flow: connect any Algorand wallet and mint individual strokes in seconds
  • End-to-end decentralized pipeline: live data → generative art → IPFS storage → Algorand NFT
  • Seamless cross-app wallet integration for both TestNet and MainNet
  • Offline-first PWA design so art can be created anytime, anywhere
  • Interactive hover-over metrics that tie each stroke to a specific on-chain event

What we learned

  • How to translate raw blockchain metrics into meaningful generative art parameters
  • Techniques for bridging React’s declarative model with p5.js’s imperative drawing
  • Strategies for low-latency data ingestion and synchronized rendering loops
  • Best practices for integrating decentralized storage (IPFS) and a frictionless NFT mint experience

What’s next for Algorand Ink – Live Blockchain Art

  • Custom Brush Packs: Let collectors define new brush shapes & ink textures based on transaction types
  • Multi-Chain Canvases: Layer live data streams from Algorand, Ethereum and Solana into one evolving piece
  • Collaborative Mode: Multiple wallets contribute strokes to a shared canvas in real-time
  • Web-Worker Offloading: Offload heavy data parsing & stroke computation for buttery-smooth animation
  • On-Chain Parameter Control: Small NFT-gated DAOs that let token holders vote on stroke styles, color palettes or data mappings

Built With

Share this project:

Updates