UAL CCI: Introduction to Creative Computing 2025: ๐๐ป: Lecture 1: Introduction.
Back to slide index.
Back to slide index.
Welcome to the Creative Computing Institute!
Welcome to the Introduction to Creative Computing Intensive 2025!
This is a brand new version of this course, so I'd love to hear all your feedback - please please please DM me on Instagram with your thoughts, or email me, via my website.
By the end of this lecture, we'll have learnt about:
- Introduction to the Intensive
- Introduction to the other people helping on this Intensive
- Important methods for succeeding on this course (and in general)
- My background
- The Creative Computing Institute (CCI)
- What you'll learn in this Intensive
- Other coding resources and teachers of Creative Coding
Introduction to the Intensive.
The homepage for the Intensive is: https://jgl.github.io/IntroductionToCreativeComputing2025/. Please refer to it for all the slides for all the sessions.
For the next five days we'll be doing 10 sessions. This is the first session. Two sessions a day - 1000-1300 and 1400-1700. Each session is made up of three parts:
- A 60 minute lecture
- A 90 minute workshop
- A 30 minute discussion
Introduction to the other people helping on this Intensive.
We are very lucky to have another person with us on this intensive. Elsa Farmer. I'll let her introduce herself!
Important methods for succeeding on this course (and in general)
Some things to keep in mind:
- ๐ Dory
- ๐น Henrick Kniberg on making skateboards
- ๐ฆ A rubber duck
- โ Cassie Robinson's thoughts
- ๐ Chuck Wendig on being a magic skeleton
- ๐ David Bowie on being out of your depth
- ๐ธ Yohji Yamamoto on copying
- ๐ On going slow
- ๐ Susan Wendell on hearing disabled people
What does Dory do? This is the most important thing in creative coding (and life).
Henrick Kniberg on how to make a car. In other words, if you want to make a car, make a skateboard, then a scooter, then a bicycle, then a motorbike and THEN a car. I want you to make lots of skateboards.
Rubber duck debugging is a very powerful technique.
Cassie Robinson's thoughts on what to think about when you make something.
Chuck Wendig on what to remember.
Just a little out of your depth is the right place to be.
Yohji Yamamoto is right. Copy what you love!
Just try. As soon as you try you are way ahead of most other people.
Susan Wendell wrote powerfully about disability and feminism. What explosion of knowledge could you make with your life?
My Background
๐ด๓ ง๓ ข๓ ท๓ ฌ๓ ณ๓ ฟ Wales and being bored.
โจ Imperial and Star Wars.
โฐ Royal College of Art and being earlylate.
๐ฎ๐น Fabrica and not starving.
๐ UnitedVisualArtists and feedback loops.
๐ Hellicar&Lewis and open source.
๐ง๐ปโโ๏ธ Teaching and psychic load and meditation.
๐ฏโโ๏ธ Universal Everything and people not projects.
What is the Creative Computing Institute (CCI)?
What you are going to learn in this Intensive.
We are going to learn about Creative Computing - a blend of Computational Thinking and Creative Coding.
What is Computational Thinking?
- To learn how see problems at many levels (abstraction), break down problems (decomposition), find the order in them (pattern recognition), make solutions using a series of steps (algorithms) and realise that you might be able to use that solution in lots of areas (generalisation).
- Most of all, to learn how to be autodidacts.
- First task: what is an autodidact?
Look it up! What did you find?
What is Creative Coding?
I believe all coding is creative, as all life is creative. Specifically, creative coding is about blending creative techniques with software engineering. I want you to learn how to write code but also how you could use computing to change your practice. You can make lots of earth credits writing software, but I'm much more interested in giving you the tools to change yourself, your practice and the world.
Next, a really important diagram.
Jim Campbell's formula for Computer Art. Realise that you can use things without understanding every aspect of them. All that computers do is process inputs into outputs. That's it.
But what are we going to learn?
We are going to learn JavaScript, which is the most commonly used programming language in the world.
Some inspiration for the things you can make with JavaScript:
- Shaderbooth.com from the brilliant Max Bittker, who also made Orb.Farm and Sandspiel.
- constraint.systems by Grant Custer. Source code available here!
- Patatap by Jono.
- Sketch a doodle and have it map to your body in real time!
We are going to learn JavaScript using a library called p5.js. A library is just a collection of code. p5.js was specifically designed as a great way for designers, artists and others to learn to code. It was originally created by Lauren McCarthy but now has many contributors. p5.js emerged out of another project: Processing.
Let's watch the (interactive) presentation about p5.js at hello.p5js.org (Chrome or Firebox only).
Other coding resources and teachers of Creative Coding
Some useful general JavaScript coding resources:
- A free, 4-part video course with interactive code examples to learn how to make a website using HTML, JS, CSS and Node.js. A free, 20-page zine about making web apps with Node.js from the same team at Glitch.com. A Party Starter Kit if you want to make a party.
- JavaScript basics from the p5.js wiki - a good place to refer back to while we are doing this course, with a bit of the history of JavaScript at the start.
- JavaScript for Cats - great intro tutorial to JavaScript that you can do right in your browser.
- The Modern JavaScript Tutorial - a crowd sourced tutorial that is contantly being updated. Comprehensive series of tutorials and exercises on every aspect of modern JavaScript.
- Mozilla Developer Network JavaScript reference - series of tutorials and references from Mozilla, the maker of Firefox.
- Stack Overflow is an online forum for developers using many different languages. It's possible to search by JavaScript only, or even p5.js only.
Some useful p5.js coding resources:
- A good place to start your p5.js learning journey is the Setting Up Your Environment tutorial. The tutorial section has lots more tutorials. The examples section is full of real examples to copy from - that's how I usually start a new project - by duplicating an existing project. When I'm writing p5.js, I always have the reference open so that I can refer to it constantly. Finally, p5.js forum is a great place to ask questions and find other learners. I use it all the time.
- The Nature of Code and The Coding Train both by Daniel Shiffman. The Coding Train is a brilliant YouTube channel that has amazing creative coding content. I'd really, really, really recommend Daniel's Code! Programming with p5.js playlist.
- Programming Design Systems - "a free digital book that teaches a practical introduction to the new foundations of graphic design", by Rune Madsen - all examples are written in p5.js. A great p5.js and general graphic design resource.
I found a great p5.js cheat sheet for beginners! I really recommend downloading this in your favourite human language and saving it to your desktop.
Other creative coding teachers and courses:
- A brilliant article on the history of generative art.
- Matt DesLauriers is a 30 year old generative artist and creative coder from Toronto, Canada, and now based in London, UK. He's taught a great course on "Generative Design & Media Art with JavaScript" at the UCL Bartlett School of Architecture, within the Design for Performance and Interaction programme. He's also taught an Intro to Creative Coding course that uses p5.js.
- Allison Parrish has published her notes on Creative Coding. Allison teaches at NYU's Interactive Telecommunications Program, where Daniel Shiffman also teaches. You can also find the 2019 ITP Introduction to Computational Media: Code syllabus and notes on the ITP GitHub.
- Golan Levin is the person that I wrote to in 1999 asking what I should do next. He's the reason I'm here. He runs the Frank-Ratchye STUDIO for Creative Inquiry at Carnegie Mellon University. He's also posted all his teaching, which I highly recommend looking through. He's also posted individual lectures on a variety of subjects on his GitHub.
- UCLA Design Media Arts is where the creator of p5.js, Lauren McCarthy teaches. You can look through all their courses and resources here. They've also published a free course "Introduction to Programming for the Visual Arts with p5.js".
- "Introduction to Computational Media with p5.js" by Luisa Pereira on behalf of New York City Department of Education Computer Science for All initiative.
Other coding resources:
- Awesome Creative Coding - a "carefully curated list of awesome creative coding resources primarily for beginners/intermediates" - tons of brilliant creative coding resources here.
- CS50, Harvard University's introduction to the intellectual enterprises of computer science and the art of programming - not strictly creative coding, but a good introduction to programming and computer science.
- Super old school (1986) introduction to Computer Science from Hal Abelson at MIT - lots of wisdom here, but not a good source for how to learn p5.js!
- Computerphile is a YouTube channel with "videos all about computers and computer stuff". It's also the sister channel of the brilliant Numberphile.
Thanks! Time for a short break!
Back to slide index.
Back to slide index.