1 Welcome
1.1 AI tutor
You’re not alone with this book. Every chapter of this part links to the same AI tutor, a chat that knows what the course has taught you so far. Ask it whenever an explanation doesn’t click, and it helps you with the commands you already have instead of jumping ahead.
Hints and questions instead of finished programs, in English or German.
1.2 Welcome to Creative Coding
Welcome to this course! Over the next months you’ll learn how to program a computer, and you’ll do it in a creative way. Instead of only printing text on a black screen, you’ll draw shapes, build animations, and create small interactive artworks and games. That’s why the course is called Creative Coding: you learn programming by making things you can see and change, then show to your friends.
You don’t need any programming experience to start. The course begins at zero and builds up step by step. If you can use a computer and you’re curious, you have everything you need.
1.3 The tools you’ll use
In this course you’ll work with two tools: a programming language called TypeScript and a graphics library called p5.js. Together they let you write real, professional-style code and see the results on screen right away.
1.3.1 TypeScript, the language
TypeScript is one of the most popular programming languages in the world. Many well-known websites and apps are built with it, and professional developers use it every day. So you’re not learning a toy language made only for classrooms: the skills you pick up here are the same skills real software teams use.
At the same time, TypeScript is friendly to beginners. It watches your code while you type and warns you about many mistakes before you even run the program. Think of it as a language with a built-in spell checker for code.
1.3.2 p5.js, the graphics library
p5.js is a library for creating interactive graphics and animations. A library is a collection of ready-made code that you can use in your own programs. Instead of writing hundreds of lines yourself just to draw a circle, you call one short command from the library and the circle appears. Libraries let you build on the work of other programmers, which is how almost all software is made.
p5.js was created for students and artists. It’s designed so that your very first program can be just a few lines that draw something on screen. From there you can build up: shapes become patterns, patterns become animations, and animations become games and interactive art.
With p5.js you can draw your first circle in minutes, but people also use it for serious generative art and data visualizations. You won’t outgrow it during this course.
1.4 Why learn to code when AI writes code?
Maybe you’re thinking: “AI tools can write code now. Why should I learn it myself?” That’s a fair question, and it deserves an honest answer. Here are four reasons.
1.4.1 Programming is more than typing code
When you program, the typing is the smallest part. The real work is thinking: you take a big, fuzzy problem, break it into small clear steps, and put those steps in a logical order. You also make creative decisions, because there is almost never just one way to solve a problem. Breaking problems down, thinking logically, and finding creative solutions help you far beyond programming: in school, in any job, and whenever you face something complicated.
1.4.2 AI is like a genie in a lamp
You may know the old story of the genie in the lamp: a magical being appears and grants your wishes. But there’s a catch. The genie gives you exactly what you say, not what you mean. Wish carelessly and you get something you didn’t want at all.
AI works the same way. It will happily produce code for you, but the result is only as good as your wish. To get useful code, you need to know what is possible, what to ask for, and how to judge what you get back. Learning to program by hand teaches you exactly that. You learn what a computer can do, how software is built, and what a good solution looks like. In short: you learn what to wish for.
1.4.3 Someone has to fix the last few percent
AI makes mistakes. It writes code that looks correct but sometimes isn’t, and it can get stuck on the tricky final details of a program. Professionals are the people who spot those mistakes and fix the last few percent that the AI can’t get right. You can only do that if you understand the code yourself. The better you understand programming, the more powerful AI becomes as your assistant instead of your replacement.
1.4.4 Programming is fun
The last reason is the simplest: programming is fun. There’s a special feeling when you imagine something, write the code for it, and watch the computer bring it to life exactly the way you pictured it (or in a surprising way that’s even better). In this course that feeling comes quickly, because your programs draw, move, and react from the very first lessons.
1.5 Your coding assistant comes later
Two AIs belong to this course, and you meet them at different times. The first one is the AI tutor at the top of every chapter. It explains things and helps you read an error message, but it never writes your program for you. That’s the AI you use from today on.
The second one is a coding assistant. It writes real TypeScript with p5.js together with you, and it waits until the last part of the book, where you move from the web playground to Visual Studio Code (Section 67.8). It waits because a coding assistant only helps someone who can read what it writes and spot the line that’s wrong. By the last part you can, because every line you typed yourself on the way there is a line you know how to check.
1.5.1 Why not just any AI from the internet
Between now and then you’ll be tempted to ask a general AI on the internet for code, so you should know what you’d get. That AI knows nothing about your course. It writes code the way it would for a professional, full of things nobody has shown you yet. Code like that might run, but you can’t explain it, and you can’t repair it when it breaks. You’re the one who hands the program in, so you’re the one who has to understand every line of it.
The coding assistant of this course is different, because the coding rules of this book are built into it. It writes the kind of code you can read and explain in class, and it stays with the commands you’ve already learned instead of jumping ahead.
1.6 Check your understanding
Before you move on to the next chapter, take the short quiz below. You answer five questions about this chapter in your own words, and an AI reads your answers and tells you what you already understand and what you should read again. The quiz is anonymous, and answering in German is fine too.