Courses

An introductory course to Creative Coding, covering the most important topics, both for Processing and p5.js

1. Processing and p5.js – a comparison
2. Processing: Installation and quick walkthrough
3. p5.js: Installation and quick walkthrough
4. Setup and Draw
5. Setting the size for your sketch
6. Background
7. Basic Geometry
8. Styling Shapes with Stroke and Fill
9. rectMode() and ellipseMode()
10. Lines, Triangles and Polygons
11. Geometric Typography
12. The Reference
13. Mouse Interaction
14. Colors
15. Randomness
16. Variables
17. Conditional Statements
18. Operators
19. Transformations
20. push() and pop()
21. Comments
22. for-loops
23. for loops (Examples)
24. Waves
25. Waves (Examples)
26. Modulo
27. Mapping
28. Saving Images
29. Using the Console
30. Functions
31. Keyboard Interaction
32. Wrapping Up

A brief introduction to 3D enviroments in Processing

1. The P3D-Renderer (Processing)
2. The WEBGL-Renderer (p5.js)
3. 3D Matrix Basics
4. 3D Transformations
5. push() and pop() recap
6. 3D Geometry
7. 3D Geometry (Examples)
8. Lighting your Scene
9. Directional Light
10. The Camera
11. Wrapping Up

A deep dive into For-Loops in Processing

1. Anatomy of the For-Loop
2. Random Distribution
3. Linear Distribution
4. Circular Distribution
5. Circular Distribution (Examples)
6. Nested For-Loops
7. Nested For-Loops (Examples)
8. Truchet Patterns
9. Centering a Grid System
10. Wrapping Up

Learn to utilize waves for motion graphics in Processing

1. Intro
2. sin()
3. tan()
4. Drawing a circle with sin() and cos()
5. Simple Waveforms
6. Complex Waveforms
7. Recap: The map()-function
8. Dynamic waveforms with for-loops
9. Dynamic waveforms with nested for-loops
10. Rendering perfect loops
11. Further use cases
12. Gallery
13. Wrapping up
14. Appendix

Fundamentals in text and kinetic typography with Processing.

1. Chars and Strings
2. Displaying Text
3. Styling Text
4. Preloading (p5.js)
5. Asset-Management
6. Utilizing a font
7. Text-Frames
8. Line-Breaks
9. Line-Height
10. String Methods
11. String Concatenation
12. Getting the Text-Width
13. Example: charArt
14. Example: Newsticker
15. Example: 3D Typography
16. Example: Circular Distribution
17. Wrapping Up
18. Appendix

All you need to know to work with Images in Processing and p5.js.

1. Intro
2. Preloading (p5.js)
3. Asset Management
4. PImage
5. Displaying an image
6. Resizing an image
7. Scaling
8. Image Filters
9. Masking
10. Picking colors
11. Pixelation
12. Brightness
13. Threshold
14. Faking Color Separation
15. Rasterization
16. Rasterization in 3D / Extrusion
17. Rasterization combined with Wave-Motion
18. Example: Random Collage Generator
19. Example: Random Collage Generator 2
20. Wrapping Up
21. Appendix

Exploring the copy-function in Processing

1. Intro
2. The copy-function
3. Masking with the copy-function
4. Magnifying Glass
5. Linear Slitscan
6. Circular Slitscan
7. Copy 2D
8. Wrapping Up
9. Appendix

Fundamental principles of Arrays in Processing

1. Arrays
2. Indexes
3. Example: My favorite cities
4. Strings are Arrays of Chars
5. Arrays can have any Datatype
6. Array flexibility
7. 2D Arrays
8. Loading Strings from a Text-File
9. Example: Barcelona Districts
10. Example: Array of Images
11. Example: Array of Colors
12. Example: Meditations
13. Wrapping Up
14. Appendix

In this course you will learn how to use two-dimensional grids for a variety of design applications.

1. Intro
2. Setting up a Grid System
3. Setting up the logic
4. Components: Geometric Shapes
5. Components: Images
6. Components: Image details
7. Components: Image details from an array
8. Using a 2D-array for state management
9. Interactivity 1
10. Interactivity 2
11. Case Study: Llum Negra
12. Wrapping Up
13. Appendix

An intro to data visualization.

1. Intro
2. Understanding the data
3. Linear Distribution
4. Example: Bach Mechanics
5. Modulo recap
6. Two-dimensional distribution
7. Circular distribution
8. 3D Whirl
9. Digital Mobilé
10. Wrapping up
11. Appendix

A deep dive into PGraphics

1. PGraphics
2. Working with PGraphics
3. Objects and Dot-Syntax
4. Drawing on PGraphics
5. Masking and Cropping
6. Transformations
7. Setting Renderers
8. Transparency
9. Layer Stacks
10. Tabs
11. Nesting PGraphics
12. PGraphics Rasterization
13. Wrapping Up

This course is about the aesthetic potential of ASCII typography. Specifically, in this course you’ll learn how to develop your […]

1. Intro
2. Prerequisites
3. Pixelation Recap
4. Image Rasterization
5. Fonts and Charsets
6. Image Rasterization with Block Characters
7. PGraphics Rasterization 2D
8. PGraphics Rasterization 3D
9. Reusable renderer functions
10. Wrapping Up
11. Appendix