Courses

The starting point of the curriculum, made for beginners.

1. Processing and p5.js
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. The Reference
12. Mouse Interaction
13. Colors
14. Randomness
15. Variables
16. Conditional Statements
17. Switch
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. Exercise: Geometric Typography
33. Wrapping Up

A deep dive into For-Loops in Processing and p5.js

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

Learn to utilize waves for motion graphics in Processing and p5.js

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

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

Fundamentals in text and kinetic typography with Processing and p5.js

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. Addon: Letter Spacing
18. Wrapping Up

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. Wrapping Up

Exploring the copy-function in Processing and p5.js

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

Fundamental principles of Arrays in Processing and p5.js

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

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. Interactivity 3
12. Case Study: Llum Negra
13. Case Study: Slate and Ash
14. Addon: Grid Cells
15. Wrapping Up

The modulo operator is a magical little tool that can be used to achieve many different effects and solve several […]

1. Intro
2. Rhythmic Patterns
3. Rhythmic Grids
4. Example: Patterns
5. Boomerang animation with a modulo-controlled toggle
6. Sequencing with Modulo
7. Randomization with Modulo
8. Slowing down a sketch with modulo
9. Two-dimensional Distribution with a single For-Loop
10. Examples: Single-loop Grids
11. Wrapping Up

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