W1

Week 1. Introduction to Creative Web Dev.

1. VS Code + Claude Code setup

1. VS Code (Visual Studio Code) = Your Editor (Where you code)
2. Claude Code = Your Coding Agent (Who codes with you)
   1. After the introduction of LLMs (ChatGPT, Claude AI), many developers started to integrate LLMs within their programming
   2. AI-integrated editors (Cursor AI, GitHub Copilot) came first. Now the agent runs as a CLI (Command Line Interface) inside your editor's terminal, reads and edits your files, runs your commands
   3. Alternatives: OpenAI Codex, Gemini CLI, Cursor AI
   4. Relatively new, the next 'Game Changer' might change within a couple of months
3. Install: Claude Code + the Claude Code extension in VS Code
4. Open your project folder in VS Code, open the terminal, type claude
5. Models (platform.claude.com pricing, per 1M tokens)
   1. Claude Fable 5.1: input $10 / output $50
   2. Claude Opus 5.5: input $4 / output $20
   3. We'll use Opus 5.5 in class due to cost. Type /model inside Claude Code to switch
6. Harness: AGENTS.md
7. Git as your checkpoint
   1. git diff: What did the agent change?
   2. git restore .: Throw away what the agent changed
   3. git add . + git commit -m "...": Save a checkpoint you can come back to

2. What is Next.js?

1. React.js: State-of-the-Art Frontend Framework developed by Meta
2. Limitation of React: Frontend-only tool, relatively low-level/too simple
3. Introduction of Next.js: React-based + Server-side-Rendering + SEO + Other optimisations….
4. Next.js: App Router vs. Pages Router
   1. App Router: Next.js 13+, app/ directory, Server Components by default
   2. Pages Router: The old way of doing Next.js, pages/ directory, Client-first logic
   3. We use the App Router
   4. Disclaimer: When looking for Tutorials & Googling for resources, please do consider if the code is written in App Router or Pages Router. LLMs also mix them up: say "App Router" in your prompt

3. Use this template

1. https://github.com/jeanyoon-choi/id412-2026
   1. This is the place where we'll host lecture notes/in-class coding sessions within the next three weeks
2. 'Use this template' → 'Create a new repository' → your own repository (e.g. id412-yourname)
3. Open up your parent file directory on VS Code terminal
4. git clone https://github.com/YOURNAME/id412-yourname.git
5. Open up your id412-yourname file directory on VS Code
6. Your repository is already connected to your GitHub (git remote -v)

4. Download the dependencies

1. What is a Package Manager?
   1. Packages: Code that someone else had written for you
   2. You can download different 'packages' via Package Manager
   3. Examples: Three.js, Tone.js, Socket.io, ….
2. npm vs. yarn vs. pnpm
   1. npm: Default & Heavy
   2. yarn: Lighter
   3. pnpm: Fast package manager saving disk space
      1. Let's use pnpm
3. Terminal Line Commands
   1. pnpm install
      1. Installs all packages written in the package.json
   2. pnpm add <package name>
      1. Installs designated package
   3. pnpm dev
      1. Kicks off your localhost, now ready to code!

5. Hello World~!

1. Navigate localhost:3000 on your browser
   1. Chrome as default
   2. Say hi to the lecture notes!
2. Where is this code coming from?
   1. app/page.tsx
   2. localhost:3000
3. How do you navigate to other URLs?
   1. app/experiments/w1/time-interval/page.tsx
   2. localhost:3000/experiments/w1/time-interval
   3. Every folder with a page.tsx inside app/ becomes a URL
4. What are each directory for?
   1. app/ → Where you handle Routes/Pages, and where most of things happen
      1. app/lecture/ → These notes
      2. app/experiments/w1/, w2/, w3/ → In-class coding, one folder per experiment
      3. app/final/ → Your final project
      4. app/api/ → Server side api calling (W3)
   2. hooks/ → React's Custom Hooks (useSocket, W2)
   3. public/ → Where you store your assets (images, videos, 3d models)
   4. node_modules/ → Packages codes downloaded from pnpm
5. Code structure
   1. Each experiment folder has page.tsx and *.module.css
      1. page.tsx: Your logic and JSX components
      2. *.module.css: CSS Modules powered styling
   2. "use client" on the first line when you use state, effects, events, browser APIs

Now let's start coding!

Time interval

1. Simple Time Interval (ex. localhost:3000/experiments/w1/time-interval)
2. Miyajima Tatsuo-inspired Time Interval LINK

Mouse move

1. Simple Mouse Move Visual
2. Simple Kaonashi
3. Scary Kaonashi
4. James Turrell-inspired interaction LINK

Image

1. Simple Image
2. Multiple Images
3. Grid Images
4. Overlap Images
5. Chaotic Images

Video

1. Simple Youtube iframe (Kim Beom LINK)
2. Youtube iframe with designated start time
3. Multiple Youtubes
4. Overlap Youtubes

Data

1. Simple Data Calling
2. Data with Date
3. Simple Data Vis

Word-puzzle (Beta)

1. Simple Word Puzzle
2. Experimental Typography

6. GLSL

• What is GLSL?
  • OpenGL Shading Language: a small C-like language that runs on the GPU, not in Javascript
  • Your program runs once per vertex (vertex shader) and once per pixel (fragment shader), all of them in parallel
  • Fragment shader: given a pixel coordinate (and time, mouse, …), return a colour. That's it
  • Thousands of pixels at once → things that are too slow in a Canvas loop become free
• How does it connect to Three.js?
  • ShaderMaterial: a material whose vertex/fragment shaders you write yourself
  • uniforms: values you pass from Javascript into the shader every frame (time, mouse, resolution, …)
  • A single full-screen plane + a fragment shader = a 2D canvas painted by the GPU
• What is it good for?
  • Per-pixel fields: gradients, noise, flow, distance fields, blur, feedback
  • Large numbers of particles / instances
  • Post-processing: effects over the whole frame
• Not good for: layout, text, UI logic. Let React/CSS do that
• References
  • The Book of Shaders LINK
  • Shadertoy LINK
  • Three.js ShaderMaterial LINK

GLSL examples

1. Hello Fragment Shader: colour from uv
2. Time & mouse uniforms
3. Noise field
4. Feedback

7. Three.js

• What is Three.js?
  • A Javascript 3D Library
  • 3D + Javascript, Web 3D, Open Source (Free!), Coding-based
  • Interactive, Accessible, Incorporable with pre-built 3D Models
  • Vanilla Three.js = Vanilla Javascript + Three.js
    • I.e. Not using React Three
    • Do-able but longer code, not bonded with React Logic
• What is React-Three?
  • Series of frameworks/integration strategy to use Three.js efficiently and in a React Way
  • React-Three Fiber: React renderer for Three.js LINK
    • https://codesandbox.io/p/sandbox/5g22g7
  • React-Three Drei: Collection of Ready-to-use utilities/help functions LINK
  • React-Three Postprocessing: Post-processing Effects LINK
  • React-Three Rapier/Cannon: Physics Library LINK
  • Not exactly a React-Three integration, but React Spring (Animation Library) LINK
• Why Three.js?
  • Cinema 4D: Static 3D Moving Image, GUI-based, High Accessibility, Low Interactivity
  • Unity: Interactive 3D Game, GUI + C# Coding, Low Accessibility, High Interactivity
  • Three.js: Interactive web-based 3D environment, Javascript-based Coding, Mid Accessibility, Mid Interactivity
  • When to Use Three.js
    • Interactive Web
    • Integrated Web
    • Easy-to-access Demo (No Installation)
    • 'Wow' Effect
    • Future of Web / WebXR
• Why learn 3D Web Development?
  • Simply better visual & aesthetic
  • Potentially future of the web
    • Future of Web UI
    • Future of Immersive Web
    • You can lead the scene!
  • Steep Learning Curve… Start small & lean
• Good Three.js Examples/References
  • Three.js Reference LINK
  • React-Three Fiber References LINK
  • Web Art & Experiments
    • Google A&C Heartbeat of the Earth LINK
    • The WebGL Globe, GitHub Contribution Graph (3D Data Visualisation)
  • Portfolios: Active Theory (Particles), Bruno Simon (Car-based)
  • My Works: Passage of Water, Uncharted Territory LINK
• Good Three.js Tutorials
  • Free
    • Wawa Sensei LINK
    • There are loads of YouTube tutorials out there
  • Paid
    • Three.js Journey LINK
    • Wawa Sensei LINK

Setup & Primitives: Let's Code from Scratch

1. Hello Three.js: Build a Cube
2. Additional Lights
3. Moving Around the Scene
   1. OrbitControls, @react-three/drei
4. Different Geometries? Box, sphere, cylinder, cone?
   1. More bunches of geometries: LINK
   2. Disclaimer: This is a Vanilla Three.js Not React-Three Logic
5. Different Materials? MeshBasic? MeshNormal? MeshStandard?
   1. More bunches of materials: LINK LINK2
   2. Disclaimer: This is a Vanilla Three.js Not React-Three Logic
6. Multiple Meshes
   1. Hint: Use new Array(n).fill(0).map((_, i) => ...)
   2. Or use your agent
7. Animations
   1. useFrame from @react-three/fiber
8. Load your custom 3d Model
   1. Gltf-2-jsx LINK
9. Environment Map

8. Deployment

1. Deploying: Making your localhost-coded web-app live, accessible throughout the world!
2. Next.js → Easy Deployment via Vercel
3. Sign-up Vercel https://vercel.com/
4. First, you need to push your code to GitHub. On your VS Code Terminal, type
   1. git add .
   2. git commit -m "Update"
   3. git push
5. Now your code repository on your GitHub is up to date
6. Head to vercel https://vercel.com/
7. Add New > Project > Import Git Repository > 'Import' > Framework Preset set Next.js > Deploy
8. Tada!
9. From now on, every git push redeploys