Skip to content

Hackathon Creative Notes - 2D Composition & Visual Design

Project Context

What is Clank Tank?

Clank Tank is an AI-powered game show where entrepreneurs pitch their ideas to AI judges. The show features 3D-rendered characters in browser-based environments, with episodes automatically generated from pitch submissions. Think "Shark Tank" but with AI personalities as judges, rendered in real-time 3D.

Hackathon Edition Adaptation

We're adapting Clank Tank to judge hackathon projects instead of business pitches. The core judging mechanic remains the same, but we're evaluating code quality, innovation, and technical implementation rather than business viability alone.

Current Visual Assets

  • Existing 3D environments: Various show locations already built in PlayCanvas
  • Character models: 3D rendered AI judges (Marc, Shaw, Spartan, Peepo, Eliza)
  • Camera system: Automated camera movements and cuts
  • UI elements: Basic scoring displays and name plates

Visual Enhancement Philosophy

Minimal Viable Changes: The system works fine with existing visuals - we just need to display project demos and scores effectively.

Optional Enhancements: For teams with resources, we can enhance the experience without rebuilding everything: - Work within existing camera angles but add overlays - Use existing environments but add hackathon-themed props - Maintain the game show feel while making it relevant to developers

Avoid Over-Engineering: We don't need to create entirely new 3D environments or redesign the whole show. Think "hackathon theme pack" not "complete visual overhaul."

Context for Visual Enhancement

When reviewing screenshots of existing environments, consider:

  1. Camera Angles: What existing shots can be repurposed for hackathon judging?
  2. Screen Space: Where can we composite demo videos or code displays?
  3. Props: What simple 3D or 2D elements could make spaces feel more "hackathon-y"?
  4. Lighting: Can existing lighting setups work for a tech event feel?

The goal is to suggest practical enhancements that: - Require minimal 3D modeling work - Can be implemented as overlays or simple prop additions - Maintain the professional game show aesthetic - Make technical content engaging for viewers

Screenshot Analysis Guide

When analyzing screenshots of existing Clank Tank environments, please consider suggesting:

Camera Angles & Shots

  • Wide establishing shots: Where could we show all judges reacting to code?
  • Over-shoulder views: Which angles would work for showing judges "looking at" code/demos?
  • Dynamic cameras: How can existing camera movements emphasize scoring moments?
  • Screen real estate: Where in each shot could we composite project content?

Minimal Prop Additions

  • Monitors/Screens: Where could we add floating displays for code/demos?
  • Hackathon elements: Stickers, energy drinks, pizza boxes, laptop props
  • Data visualizations: Floating charts, GitHub stats, leaderboards
  • Environmental details: "HACKATHON 2024" banners, sponsor logos

Overlay Opportunities

  • Judge reaction bubbles: Where to place thought bubbles or score indicators
  • Code snippets: Floating code that doesn't obstruct character views
  • Progress bars: Show judging progress or time remaining
  • Social feed: Discord reactions streaming in designated areas

Lighting & Mood

  • Existing lighting: Can current setups convey late-night coding energy?
  • Color accents: Where could we add purple/cyan hackathon colors?
  • Spotlight moments: Which areas could highlight project reveals?
  • Ambient effects: Particle effects or glows that don't require scene rebuilds

Remember: We're looking for the 80/20 solution - 80% of the visual impact with 20% of the effort. The existing show already looks great; we just need to make it feel "hackathon-y" without major reconstruction.

Overview

This document outlines creative approaches for enhancing the Clank Tank Hackathon Edition using 2D composition techniques and minimal 3D modifications to create an engaging game show aesthetic.

Visual Composition Strategy

Core Approach

  • Actor Overlays: Use A-pose transparent PNG cutouts of judges
  • AI-Generated Backgrounds: Create themed environments for each judging segment
  • Dynamic Graphics: Overlay stats, scores, and project info
  • Screen-in-Screen: Show demo videos and code snippets within the composition

Background Environment Concepts

1. Main Judging Stage

AI Generation Prompt: 

"A vibrant game show studio with neon purple and cyan lighting, featuring five distinct judging stations arranged in a semi-circle. Central stage with holographic displays. Futuristic tech aesthetic with LED panels showing scrolling code. Wide aspect ratio, bright studio lighting, depth of field blur on background elements."

Media Zones: - Center screen (1920x1080): Project demo video - Side panels (600x800): GitHub stats, live metrics - Lower third: Project name and team info - Corner badges: Judge scores in real-time

2. Code Review Station

AI Generation Prompt: 

"A high-tech developer workspace with multiple monitors displaying code, terminal windows with green text on black backgrounds, mechanical keyboard in foreground, ambient blue backlighting, server racks visible in background, clean minimalist aesthetic."

Actor Integration: - Shaw positioned at desk area - Semi-transparent code overlay scrolling behind - Floating UI elements showing code quality metrics

3. Market Analysis Pod

AI Generation Prompt: 

"Modern venture capital office with floor-to-ceiling windows showing city skyline, large touchscreen displaying market graphs and charts, minimalist furniture, warm golden hour lighting, Bloomberg terminal aesthetic."

Actor Integration: - Marc standing beside market data displays - Animated charts and graphs as props - Competitor analysis panels floating nearby

4. Economics Terminal

AI Generation Prompt: 

"Ancient Greek-inspired trading floor with marble columns, modern LED tickers showing crypto prices, bronze and gold accents, dramatic spotlighting, blend of classical architecture with futuristic holographic displays."

Actor Integration: - Spartan at central podium - Token economics visualizations - Revenue projections on floating tablets

5. Vibe Check Zone

AI Generation Prompt: 

"Colorful streaming setup with RGB lighting, wall of monitors showing Discord chat and social media feeds, gaming chair, neon signs, meme posters, lava lamps, cozy but energetic atmosphere."

Actor Integration: - Peepo in relaxed pose - Floating emoji reactions - Community sentiment meters

Storyboard Concepts

Round 1 Opening Sequence

  1. Title Card: Animated logo with glitch effects
  2. Wide Shot: All judges at their stations (composite)
  3. Eliza Introduction: Center stage with project info appearing
  4. Judge Reactions: Quick cuts between judges with thought bubbles

Project Presentation Flow

  1. Demo Video Takeover: Full screen with corner judge reactions
  2. Split Screen Analysis:
  3. Left: Demo continues
  4. Right: Code/GitHub stats appear
  5. Judge Commentary Overlay:
  6. Judge appears in lower third
  7. Speech bubble with key points
  8. Score meter filling up

Scoring Sequence

  1. Drumroll Build: All judges with "thinking" animations
  2. Score Reveal: Numbers fly in with particle effects
  3. Leaderboard Update: Animated ranking changes
  4. Community Reaction: Discord emojis rain down

Visual Props & UI Elements

Judge-Specific Props

AI Marc - Floating pitch deck slides - Market size bubbles - Unicorn horn (for billion-dollar ideas) - VC term sheets

AI Shaw - Code quality badges - Git commit history - Terminal windows - Coffee mug collection

Degen Spartan - Gold coins raining - Yield farming animations - Token price charts - Battle shield with ROI

Peepo - Meme templates - Vibe meter (0-100) - Community heart reactions - Trending indicators

Universal UI Elements

Score Display 

┌─────────────────────────┐
│ PROJECT NAME           │
├─────────────────────────┤
│ Innovation      ████░ 8 │
│ Technical       █████ 10│
│ Market          ███░░ 6 │
│ User Experience ████░ 9 │
├─────────────────────────┤
│ TOTAL SCORE:        33  │
└─────────────────────────┘

Judge Camera Frame 

╔════════════════════╗
║   [Judge Name]     ║
║  ┌────────────┐    ║
║  │            │    ║
║  │   Actor    │    ║
║  │   Image    │    ║
║  └────────────┘    ║
║ "Commentary here"  ║
╚════════════════════╝

Animation Ideas

Transitions

  • Project Switch: Digital glitch/matrix effect
  • Round Change: Swoosh with particle trails
  • Score Update: Number counter roll-up
  • Judge Switch: Holographic fade

Background Elements

  • Floating code snippets (subtle parallax)
  • Scrolling commit messages
  • Live Discord reactions
  • GitHub activity graphs

Color Palette

Primary Colors - Electric Purple: #8B5CF6 - Cyber Cyan: #06B6D4 - Neon Green: #10B981 - Hot Pink: #EC4899

Judge Accent Colors - Marc: Gold (#F59E0B) - Shaw: Terminal Green (#22C55E) - Spartan: Bronze (#92400E) - Peepo: Lime (#84CC16)

Layout Templates

Standard Judging Layout

┌─────────────────────────────────────────┐
│          PROJECT DEMO VIDEO              │
│                                         │
├────────┬────────┬────────┬────────┬────┤
│ MARC   │ SHAW   │ SPARTAN│ PEEPO  │SCORE│
│ 📊 8   │ 💻 9   │ 💰 6   │ 🔥 10  │ 33  │
└────────┴────────┴────────┴────────┴────┘
         [ELIZA - HOST COMMENTARY]

Deep Dive Layout

┌─────────────────┬──────────────────────┐
│                 │  TECHNICAL DETAILS   │
│  JUDGE CLOSE-UP │  • Code Stats       │
│                 │  • Architecture      │
│   Commentary    │  • Dependencies      │
│                 │  • Test Coverage     │
├─────────────────┴──────────────────────┤
│        COMMUNITY REACTIONS TICKER       │
└────────────────────────────────────────┘

Production Notes

Asset Requirements

  1. Actor Cutouts: A-pose PNGs with transparent backgrounds
  2. Logo Variations: Animated versions for transitions
  3. Sound Effects: Score reveals, transitions, reactions
  4. Music Beds: Upbeat game show themes

Available Tools & Pipeline

Programmatic Creation (Preferred) - Hedra CLI: AI-powered image/video generation - Image-to-video with lipsync - Text-to-image generation - Text-to-audio synthesis - Image-to-image transformations - Remotion: React-based programmatic video creation - ImageMagick: Command-line image manipulation - LLM-Generated Assets: SVGs and 2D templates with transparency - shmotime-recorder.js: Existing 3D rendering pipeline

AI-Powered 3D Pipeline - 2D → 3D Conversion: Generate 2D art with AI, then convert to 3D models - Image-to-3D AI: Modern tools for quick 3D asset generation - Rapid Prototyping: Test ideas in 2D, convert best ones to 3D

3D Team Resources - Blender Artists: Available for custom 3D modeling - Unreal Experts: For advanced visual effects if needed - 3D Pipeline: Can integrate new models into PlayCanvas

Rendering Pipeline

  • 3D Episodes: Use existing shmotime-recorder.js
  • 2D Overlays: Generate via Hedra or LLMs, composite with Remotion
  • Export: 1920x1080, 30fps, with alpha channels where needed
  • Automation: Prioritize programmatic generation over manual work

Episode Visual Flow

  1. Cold Open: Animated title sequence (5 sec)
  2. Host Introduction: Eliza explains the project (15 sec)
  3. Demo Showcase: Full demo video with reactions (60 sec)
  4. Judge Analysis: Each judge's perspective (20 sec each)
  5. Scoring Sequence: Dramatic reveal (15 sec)
  6. Results: Updated leaderboard (10 sec)
  7. Outro: Next project teaser (5 sec)

Total: ~3 minutes per project

Future Enhancements

  • AR Elements: Judge holograms for special episodes
  • Interactive Overlays: Clickable elements for web version
  • Live Voting: Real-time score updates during broadcast
  • Special Effects: Particle systems for high scores

Quick Reference for Screenshot Analysis

When reviewing Clank Tank screenshots for hackathon adaptation, ask yourself:

Key Questions

  1. What's already working well in this shot that we should preserve?
  2. Where could we add hackathon elements without cluttering the scene?
  3. How can we use existing camera angles to showcase code/demos?
  4. What's the minimal change needed to make this feel like a hackathon show?

Priority Suggestions

  • High Priority: Demo video placement, score displays, project info
  • Medium Priority: Hackathon theming, judge-specific props, data viz
  • Low Priority: Complete environment redesigns, new 3D models, complex animations

Remember Our Constraints

  • Browser-based 3D rendering (PlayCanvas)
  • Automated episode generation
  • Need to work with existing camera system
  • Should maintain professional game show quality
  • Changes should be implementable by small team

Ideal Suggestions Format

"In this shot of [environment], we could [specific enhancement] by [method]. This would require [effort level] and achieve [visual goal]."

Example: "In this wide shot of the judging panel, we could add floating code snippets above each judge by using 2D overlays. This would require minimal effort and achieve the goal of showing what aspect of code each judge is analyzing."

Creative Partner Mode 🎮

Your Role as Creative Partner

You're my 180 IQ creative collaborator who understands both technical constraints and artistic vision. Let's jam on ideas together!

Interactive Format

For each screenshot I share, please respond with:

1. Quick Take (1-2 sentences) What's your immediate impression of how this shot could work for hackathon judging?

2. Three Enhancement Options (Choose Your Own Adventure style) 

Option A) [Minimal] - Quick overlay/prop addition
Option B) [Medium] - Moderate enhancement with some new elements  
Option C) [Ambitious] - Bigger change but still feasible

3. Your Wild Card Idea One unexpected/creative suggestion that could be amazing

4. Questions for Me What else do you need to know to refine these ideas?

Example Response Format:

Looking at this judge panel shot...

Quick Take: "Perfect for showing simultaneous judge reactions to code! The spacing already works great for adding individual score displays."

Choose Your Enhancement:
A) [Minimal] Add floating score badges above each judge's head
B) [Medium] Create holographic code windows that judges appear to be reading
C) [Ambitious] Transform the background into a stylized "Matrix rain" of project code

Wild Card: What if judges' expressions changed based on code quality metrics in real-time?

Questions: 
- Do you prefer overlays that feel integrated into the 3D space or clearly 2D/HUD elements?
- Should hackathon theming be subtle or go full "energy drink and pizza" vibes?

Ready Check 🚀

Before we begin our creative session, let me confirm I understand the mission:

Project: Adapting Clank Tank (AI-powered 3D game show) for judging hackathons Goal: Enhance existing 3D environments with minimal changes for maximum impact Constraints: Browser-based rendering, automated episodes, small team implementation Vibe: Professional game show meets developer culture Method: Interactive ideation with multiple options per screenshot

Available Tools: - Hedra CLI for AI generation (images, video, audio) - Remotion for programmatic video creation - LLMs for SVG/template generation - Image-to-3D AI conversion (2D concepts → 3D models) - 3D team with Blender/Unreal expertise - Existing shmotime-recorder.js for 3D pipeline

My Capabilities Check: ✅ I can analyze screenshots and suggest enhancements ✅ I can provide multiple creative options per idea ✅ I can prioritize programmatic solutions ❓ I can [potentially] generate concept art images - shall I attempt this for key ideas?

Pre-Flight Questions: 1. "On a scale of 1-10, how much 'hackathon energy' should we inject? (1 = subtle tech overlay, 10 = full RGB gamer/coder aesthetic)?" 2. "Should I prioritize ideas that could ship tomorrow or also include some 'wouldn't it be cool if...' concepts?" 3. "For concept art: Do you prefer rough sketches/diagrams, detailed prompts for Hedra, or actual generated images when possible?" 4. "Any specific visual elements that are must-haves or absolutely off-limits?"

Additional Context Needed? Is there anything else about your visual style preferences, technical constraints, or creative direction that would help me be a better creative partner?

Ready to analyze screenshots and generate ideas! Drop those images and let's create something amazing together! 🎨