Prelim. Before Web 1
ID412 Interactive Space — Prof. Yiyun Kang, TA Jeanyoon Choi (XD Lab)
1. About TA
- Jeanyoon Choi | XD Lab
- Currently PhD Experience Design Lab (XD Lab) @ KAIST Dep. Industrial Design
- Prev. MA Information Experience Design @ Royal College of Art
- Prev. BS Industrial Engineering @ Seoul National University
- Lecturer at K-Arts
- Elice Coding Frontend Web Dev. Bootcamp Lecturer
- Research Topic: Multi-Device Web Artwork
2. Key Objective of Interactive Space Coding Session
A Creative Frontend Web Development Session, by learning the basics of State-of-the-Art Frameworks (React.js, Next.js).
You will
- Develop your Computational Design practice beyond Visual-Oriented Coding
- Extend the language of web-based medium beyond Commercial/Practical Use-cases
- Leverage Web-based Approaches to design a Multi-Sensory Immersive & Interactive Space
3. Why Creative Web Dev?
TouchDesigner vs. Web Dev
- TouchDesigner
- Strong in Audio-Visual Creation
- Limitation of Node-based Logic
- More 'Visual' Centric, Sensor-based Interaction Centric
- Web Development
- (Used to have) a very stiff learning curve
- But now with LLMs, your imagination is your only limit
- More systemic approach - Narrative-oriented
- More 'Context/Narrative' Centric, Semantic Interaction Centric
- You can combine TD Output + Web Input (Which we will not cover though)
Creative Coding vs. Web Dev
- Traditional Approach of Art/Design Institution teaching Coding: p5.js / Processing
- More of Creative Coding rather than Creative Software
- Easy to learn but limited community / far from industry standard
- Creative Web Dev
- Hard to learn
- But easily compatible & integratable with all the Web Industry Standards
- Dive Deeper into the field of software & frontend engineering
- More System/Platform/Functionality-Oriented than Creative Coding
| Creative Coding | Web Dev | Creative Web Dev | |
|---|---|---|---|
| Major Usage | Art School Context | Industry Standard | Starts from an Art School, Headed towards the Industry |
| Focus | Visual-Oriented | Functionality-Oriented | Functionality-Oriented |
| Expandability | Limited | Expandable | Expandable |
| Characteristic | Experimental by Nature | Practical by Nature | Experimental by Nature |
| Community | Small Community | Gigantic Community | Growing |
| Learning Curve | Relatively Easy | Very Hard yet Rewarding (There is no free lunch) | Hard yet rewarding (Now it's kinda easy w/ LLMs) |
4. Which Frameworks to focus?
- Fundamentals: HTML, CSS, Javascript
- Language: TypeScript (Javascript + types)
- Javascript Frameworks: React.js
- React-based Fullstack Framework: Next.js (App Router)
- Styling: CSS Modules
- Package Manager: pnpm
- Version Managing: Git
- Deployment: Vercel
- Code Editor: VS Code + Claude Code
Advanced Techniques
- Creative Coding, GLSL, Three.js (W1)
- Socket.io, Multi-Device Interaction (W2)
- APIs, Sound, Unreal (W3)
These topics are super useful to produce creative outputs using Web.
This course wouldn't be possible… without LLMs
- DO USE LLMs and coding agents within the Class
- You should learn how to interact and iterate using LLMs
- Your learning curve… Accelerated much faster
Speculating the future of Coding within the Post-LLM
- Language-based tools with Strong & Large Community will Dominate
- React/Next based Frontend Coding
- Visual-based/Node-based programming might lose attraction
- Lots of traditional Web Developers (might) lose their jobs
- BUT Professionals with Domain Knowledge can now integrate Programming very flexibly: It's an opportunity for you, as designers, to leverage this chance as much as you can
- In a near future, programming will become more and more easier
- This lecture is already easier than what it should be a year ago, and will be easier next year
- Please update yourself on the latest trends and do not hesitate to integrate coding/programming extensively within your design practice/research
XD Lab References: Web-based Creative Output
- Passage of Water: Three.js (W1) + Data Vis + Video (W1)
- SoTA: Multi-Device Web Artwork (Socket.io, W2) + GPT API (W3) + Three.js (W1)
- Uncharted Territory: Mix of Video (W1) + Three.js (W1)
5. Schedule & Assignments
| Week | Date | Agenda | Assignment |
|---|---|---|---|
| Web 1 | 10/26 | Creative Coding (Canvas, GLSL, Three.js) | Web Assignment 1: Environment Setup & Clone code your favourite website |
| Web 2 | 11/9 | Cross-Device Interaction (WebSocket) | Web Assignment 2: Build Creative Coding Experience |
| Web 3 | 11/16 | Integrating System (API, Sound, Mobile, Unreal) | Web Assignment 3: Build Mobile-to-Laptop Interactive Experience |
Final Term: COACTIVITY — Interactive audio-visual installation (Sound mandatory), Unreal + Web, 1st-floor Black Room.
6. Class Tools
- VS Code + Claude Code (Your Code Editor + Your Coding Agent)
- localhost:3000 (Your Live localhost)
- Lecture Notes (This website)
- Real-time Code Sharing
7. Notes
- I cannot help debugging your problem individually. Please use LLMs/Claude Code or ask your peers in real-time.
- If you are lost, please do ask your peers to help out.
- If you are experienced, please do help your peers.
Tutorial HW
Hi everyone,
As per the syllabus, we will have three creative frontend web coding classes starting from the 26th of October.
As noted, before the 26th of October, you will need a COMPLETE understanding of the following concepts:
- HTML/CSS/Javascript (Approx 25 hrs learning)
- React.js Fundamentals (Approx 25 hrs learning)
And will need to install
- Node.js (LTS) + pnpm
- Git
- Visual Studio Code
- Claude Code
- Create your GitHub account
- Claude subscription (Highly Recommended — Claude Code runs on it)
Detailed Instruction:
1. INSTALLATION
- Create a GitHub Account: LINK
- Install Node.js LTS (Environment): LINK
- Install pnpm (Package Manager): LINK
- Open the 'Terminal' within your Visual Studio Code.
- Type
npm install --global pnpm.
- Install Git: LINK
- Install Visual Studio Code (Code Editor): LINK
- Install Claude Code (Coding Agent): LINK
- Also install the Claude Code extension in VS Code.
- GitHub Student Developer Pack: LINK
These Blogs might help if you are having any trouble going through English Documentations:
2. TUTORIAL
Assuming that you're a complete beginner with none of these experiences, I'll give you some tutorial links that will help you guide yourself through the journey of front-end coding. If you're experienced in either one of these frameworks or experienced in coding in general (Python/C++/Java etc.), you can look for more advanced tutorials by googling through the web.
HTML/CSS/Javascript Tutorials
- Korean: 생활코딩
- English:
- Opt 1. The Odin Project: HTML/CSS/Javascript Foundations https://www.theodinproject.com/paths
- Opt 2. Scrimba
- HTML/CSS: https://v2.scrimba.com/learn-html-and-css-c0p
- Javascript: https://v2.scrimba.com/learn-javascript-c0v
React.js Tutorials
- Korean: 생활코딩
- React https://opentutorials.org/course/4900
- Next.js (App Router) https://opentutorials.org/course/5098
- English
- Opt 1. The Odin Project: Fullstack Javascript
- Jump straight to 'React' if you're short on time
- Go through all the contents until 'React' if you are willing to dive deeper
- https://www.theodinproject.com/paths/full-stack-javascript
- Opt 2. Scrimba
- Opt 1. The Odin Project: Fullstack Javascript
Official Documentation:
- React Documentation
- Quick Start: https://react.dev/learn
- Tutorial: Tic-Tac-Toe https://react.dev/learn/tutorial-tic-tac-toe
- Next.js Documentation
- App Router: https://nextjs.org/docs/app
3. SELF QUIZ
After completing these tutorials, please visit the following link and take the self-quiz to assess your understanding of HTML/CSS/JS & React. I will release the answer a day before the class starts. Note that this quiz is NOT graded, but it is highly recommended for you to go through these questions.
Self Quiz Links: Questions (PDF) · Folder