Created by Prof. Masood Kamandy of Pasadena City College and the University of California Santa Barbara
Welcome to Creative Coding with Processing! This course is a free and open-source course developed by Masood Kamandy for students at Pasadena City College and the University of California Santa Barbara.
Creative Coding is a way of learning how to program by creating visual art with computer graphics. It's an umbrella term that encompasses many different approaches to using code as a medium for art. You'll hear words like generative and procedural a lot. One way of defining looking at it is that we will be making art by writing instructions for a computer to follow and sometimes we'll introduce randomness to make the outcomes varied and unknown.
There is a long history and many approaches to using code to create art. The goal of this course is to help you find your own approach and perspective through hands-on practice.
You can engage in creative coding through many different languages. There are creative coding frameworks written in Java, JavaScript, Python, C++, Rust, and Swift to name just a few. In this course we'll be using Processing, which is a Java-based framework.
- Hardware Requrements
- Software Requirements
- Textbooks
- Recommended Resources
- Course Content Overview and Schedule
- Inclusion Statement
- Code of Conduct
- Course Grade Breakdown
- Acknowledgements
- Corrections
- License
To develop code in this course you'll need a macOS, Windows, or Linux-based computer.
We'll be using the Processing Development Environment (PDE):
- Getting Started with Processing (2nd Edition)
- Form+Code
- Processing: A Programming Handbook for Visual Designers and Artists (2nd Edition) - This book is optional, but strongly recomended. My students often feel it is the best reference available for Processing and helps with their understanding.
The online communities and resources available for the Processing platforms can be enormously helpful. once you learn the differences between Processing, p5.js, SwiftProcessing, and it can be easy to translate between the frameworks.
If you'd like to learn creative coding in another language like Swift or JavaScript, this course is available in those flavors as well.
- SwiftProcessing
- p5.js (Coming Soon)
| Week # | Module | Content Covered | Exercise | Project |
|---|---|---|---|---|
| 1 | Intro | Orientation Syllabus. Useful resources. Outcomes for the course. Strategies for success in this course. |
- | - |
| 1, 2 | 1 | Drawing with Code Coding without a computer. Drawing with basic shapes in Processing. |
Coding for Humans | Drawing with Code |
| 3, 4 | 2 | Color, Loops, and Animation Coordinate system. Digital color. Built-in functions. Animation. Variables. Basic arithmetic. For loops & conditional logic. Relational & logical operators. Arrays. |
For Loop & Repetition | Animation & Interaction |
| 5, 6 | 3 | Motion, Collages, and Images Motion. Map and lerp. Random numbers. Sliders. |
Collage (Still) | Mask |
| 7, 8 | 4 | Functions and Expanded Cinema Functions. Switches. |
Collage (Animated) Typography with Functions |
Expanded Cinema Part 1 |
| 9, 10 | 5 | Classes, Objects, and More Arrays Objects and classes. Arrays. |
Typography with Objects | Expanded Cinema Part 2 |
| 11, 12 | 6 | Using Objects to Create a Game Breaking a game into its object oriented parts. |
Game Elements | Game |
| 13–16 | 7 | Final Project | Final Proposal | Final Project |
| Week # | Module | Content Covered | Exercise | Project |
|---|---|---|---|---|
| 1 | Intro | Orientation Syllabus. Useful resources. Outcomes for the course. Strategies for success in this course. |
- | - |
| 1 | 1 | Drawing with Code Coding without a computer. Drawing with basic shapes in Processing. |
Coding for Humans | Drawing with Code |
| 2 | 2 | Color, Loops, and Animation Coordinate system. Digital color. Built-in functions. Animation. Variables. Basic arithmetic. For loops & conditional logic. Relational & logical operators. Arrays. |
For Loop & Repetition | Animation & Interaction |
| 3 | 3 | Motion, Collages, and Images Motion. Map and lerp. Random numbers. Sliders. |
Collage (Still) | Mask |
| 4 | 4 | Functions and Expanded Cinema Functions. Switches. |
Collage (Animated) Typography with Functions |
Expanded Cinema Part 1 |
| 5 | 5 | Classes, Objects, and More Arrays Objects and classes. Arrays. |
Typography with Objects | Expanded Cinema Part 2 |
| 6, 7 | 6 | Using Objects to Create a Game Breaking a game into its object oriented parts. |
Game Elements | Game |
| 8–10 | 7 | Final Project | Final Proposal | Final Project |
We all benefit from being exposed to and understanding different perspectives. It improves everything we make and makes the world more livable when we understand that our perspective is just one of many. To that end, my classroom is one where there will be no discrimination on the basis of race, color, religion (creed), gender, gender expression, age, national origin (ancestry), disability, marital status, sexual orientation, or military status. We will assume no previous knowledge and that everyone is a beginner and create a community of support so that all of us can thrive.
In my classrooms I like to follow in the footsteps of the p5.js's Community Statement and Code of Conduct. This code of conduct sums up the values I try to adhere to in my classrooms and I expect students to stick to them too.
Be mindful of your language. Any of the following behavior is unacceptable:
- Offensive comments related to gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, ability, class, religion, culture, subculture, political opinion, age, skill level, occupation, or background
- Threats of violence
- Deliberate intimidation
- Sexually explicit or violent material that is not contextualized and preceded by a considerate warning
- Unwelcome sexual attention
- Stalking or following
- Or any other kinds of harassment
Use your best judgement. If it will possibly make others uncomfortable, do not post it.
Be respectful. Disagreement is not an opportunity to attack someone else's thoughts or opinions. Although views may differ, remember to approach every situation with patience and care.
Be considerate. Think about how your contribution will affect others in the community.
Be open minded. Embrace new people and new ideas. Our community is continually evolving and we welcome positive change.
| Category | Weight |
|---|---|
| Projects | 35% |
| Exercises | 20% |
| In-Class Activities | 10% |
| Final Project | 35% |
"If I have seen further it is by standing on the shoulders of Giants." —Isaac Newton, 1676
Attribution is a challenge, so I've made every effort to give credit where credit is due, and every effort has been made to ensure that this course is as unique as possible within the context of the open-source community. If you have any concerns in this regard, please contact me.
This course was created using knowledge I've accrued through my experience from many, many teachers, mentors, friends, and other contacts who fed my excitement about art, design, photography, and code. Contained in all of these assignments, directly or indirectly, are their teachings, their support, or both, and for them I am grateful.
The single largest influence was having Casey Reas as a professor and mentor. Many of these assignments started out in his courses and served as the foundation of my own teaching career.
Others who I offer my gratitude to are Derek Milne, Ben Fry, Adam Ferriss, Chandler McWilliams, Daniel Temkin, Jon Kaufman, The Recurse Center, UCSB's Media Arts & Technology Dept., Pasadena City College, Christopher O'Leary, April Kawaoka, Silvia Rigon, Melanie Willhide, Zaki Kamandy, Brad Larsen, Lauren Lee McCarthy, Zöe Wood, Jennifer Jacobs, Penelope Umbrico, James Welling, Cathy Opie, Kathy Ryan, Stephen Frailey, Golan Levin, Daniel Shiffmann, George Legrady, Tobias Hollerer, and Keiko the Shiba Inu.
Please submit any correctiosn to me at masood@masoodkamandy.com. Mistakes are a natural part of a large project like this and I'm always appreciative of suggestions for corrections.
The course content (assignments and other written material) is available as free and open source course under a Creative Commons BY-NC-SA 4.0 License. This means you may use the content of this course for non-commercial purposes with attribution and as long as any modifications you make are also made open source under this same license.
All code provided in this course is provided under a GNU Lesser General Public Release (LGPL) 2.1 license.
All artwork and images contained within this course are owned by their respective owners. If you'd like an image to be taken down, please write to me to request it be taken down at masood@masoodkamandy.com.