🎨 Vibe Coding Lab ✨

Creative Coding Through Intuition & AI 🤖

An evening of exploration, experimentation, and collective creativity 🚀

Vincent Bruijn 2025-06-21 NP3 MOBi Groningen

🗺️ Tonight's Journey

  1. ❓ What is Vibe Coding?
  2. ⚙️ Technical Strategies
  3. 🎨 Creative Strategies
  4. 💬 Q&A
  5. 🎪 Live Demo (Vera Molnár)
  6. 🚀 Let's Code Together!

🙋‍♂️ Who am I?

Vincent Bruijn

🌐 y-a-v-a.org

🌐 infrath.in (with AX710)

👖 G-STAR

👋 Let's Get to Know Each Other

🗳️ Quick Poll:

  • 💻 What's your programming experience?
  • 🤖 How familiar are you with AI prompting?

✨ What is Vibe Coding?

"A gentler, more intuitive path to building software. It enables anyone to bring ideas to life." 💡
- Rick Rubin, "The Way of Code" 📖

🎯 Vibe Coding Principles

  • 🧠 Encourages intuitive, human-centric design
  • ✨ Promotes clean, purpose-driven outputs
  • 💬 Values vision and communication over technical expertise
  • 🎨 Crafting code with intention and essence

🔄 In Other Words...

🎯 Intent-Driven Development

or

🚀 Purpose-Driven Development

Creative Parallels

🎵 Musical Jamming

Improvisation, call & response

🎭 Theatersport

Free-form improv, "yes, and..."

🎨 Creative Flow

Intuitive expression

⚙️ Technical Strategies

🚀 How to Start Vibe Coding

🌐 Web Interfaces

🦘 Free Model Hopping

  • 🔷 Google Gemini
  • ⚡ Vercel's v0 (great for quick vibes!)
  • 🤖 Claude
  • 💬 ChatGPT
  • 🎯 Many more with free tiers

💡 Pro tip: Use your Google account for easy access

💻 Local Development Tools

🤖 Code Editors with AI:

  • 📝 VS Code + Cline
  • ⚡ Cursor
  • 🌊 Windsurf

🎯 Perfect Starting Stack:

  • 📄 HTML/JS/CSS in one index.html
  • 🟢 NodeJS + npx serve
  • 🎨 Three.js or p5.js from CDN

💬 Prompting Strategies

🗣️ Natural Language

Explain to AI like you would to a friend or neighbor 👥

💡 Useful Phrases

  • 🎨 "Use an HTML canvas element"
  • 🎲 "Add randomness"
  • 🔢 "Give me X options to choose from"
  • 🌐 "Keep in mind to use standard web APIs only"

🎛️ Meta-Features

Ask AI to add controls: 🎮

  • 🔄 Press 'R' to refresh/regenerate
  • 🎚️ Sliders for parameters
  • 🎨 Color pickers
  • 🎲 "Entropy" or randomness controls
  • ⌨️ Text inputs for live changes

📚 Documentation Approach

🛤️ Two Paths:

  1. 🔨 Build first → Ask for README.md
  2. 📝 Write README.md → Ask AI to build it

✨ Both work beautifully for vibe coding!

🚀 For the Pros

🏠 Local Liberation

  • 💻 Run your own local models
  • 🔒 Complete privacy
  • 💪 Requires strong hardware
  • ☁️ Cloud variant: Run Ollama in cloud

🎨 Creative Strategies

✨ The Art of Vibe Coding

🏺 The Archaeological Approach

Starting with found code and excavating/reimagining them 🔍

  • "What if this old Processing sketch was 3D?" 📐
  • "What if this responded to audio?" 🎵

📦 Constraint Boxing

Deliberately imposing arbitrary limitations 🚧

  • 🎨 "Only use three colors"
  • 📏 "No curves allowed"
  • 🐦 "Must fit in a tweet"
  • 📊 "Only mathematical functions from 1970"

⚡ The constraint becomes the creative engine

🔀 The Remix Strategy

Taking two unrelated concepts and forcing them together 🤝

  • 🔬 "Conway's Game of Life meets Arabic calligraphy"
  • 📈 "Stock market data as Medieval manuscripts"

💭 Emotional Debugging

Using coding as mood regulation 🧘

  • 💥 Chaotic particle systems when frustrated
  • 🌊 Gentle wave functions when contemplative
  • 📐 Rigid geometric patterns when seeking control

🌊 Chaos Surfing

Challenge the AI to "go full entropy" 🎲

  • 🔥 Crank creativity dial to maximum
  • 🤗 Embrace unexpected outputs
  • ⛏️ Mine randomness for creative seeds

💭 Like accessing the AI's dream state

🤝 Collaborative Consciousness

Treating AI as genuine creative partner 🤖

The conversation itself becomes part of the artistic process 💬

✨ Generating ideas neither human nor AI would reach alone

🔄 Responsive Evolution

Each iteration responds to what the previous step revealed 👂

Not following predetermined plans but listening to what the code tells you 🎵

🐛 Bugs become creative prompts

🧠 Mental Composting

Ideas ferment in your subconscious 🌱

Like aging wine or making sourdough 🍷🍞

⏰ Time and mental chemistry do the work

✨ More Creative Strategies

  • 🍞 The Breadcrumb Trail: Scattered incomplete ideas that cross-pollinate
  • 🎨 Gallery Prep: Transforming sketches into exhibition-ready work
  • 🦘 Sketch Hopping: Creative restlessness, moving between projects

❓ Questions & Answers

What would you like to know about vibe coding? 🤔

💭 Common Questions:

  • ⏰ How do I know when to stop iterating?
  • 🤝 What if the AI doesn't understand my vision?
  • ⚖️ How do I balance structure with spontaneity?

🎪 Live Demo

✨ Inspired by Vera Molnár

🎨 Pioneer of computer art and algorithmic drawing

🚀 We'll vibe code something inspired by her geometric explorations

🎬 Demo Time!

Let's see what emerges when we combine: 🧪

  • 📐 Vera Molnár's geometric precision
  • 🤖 AI's creative interpretation
  • 💬 Our live creative dialogue

⚡ Using v0 for real-time creation

💭 Closing Thoughts

🌐 Beyond Web Technologies

We focused on HTML/JS/CSS tonight 📱

But vibe coding works with: 🛠️

  • 🐍 Python
  • 🦀 Rust
  • 📱 Swift
  • ✨ Any language!

🔮 The Future is Changing

🤖 AI coding agents will transform software development

🎨 Vibe coding makes this accessible to everyone

🌊 Let your creativity flow!

🚀 Let's Get Started!

🎵 Time for the Vibe Coding Jam

👥 Pair Up with Neighbors

  • 🤝 Share your approaches
  • 💬 Discuss prompts
  • 💡 Exchange suggestions
  • 🎯 Explain what you want to build

🎸 Like bands jamming together

🎉 Ready to Vibe Code?

✨ Let's Begin! 🚀