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. Geometric Typography
12. The Reference
13. Mouse Interaction
14. Colors
15. Randomness
16. Variables
17. Conditional Statements
18. Switch
19. Operators
20. Transformations
21. push() and pop()
22. Comments
23. for-loops
24. for loops (Examples)
25. Waves
26. Waves (Examples)
27. Modulo
28. Mapping
29. Saving Images
30. Using the Console
31. Functions
32. Keyboard Interaction
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
11. Appendix

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
14. Appendix

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

Scalable Vector Graphics – SVG is an image format that stores two-dimensional images. In contrast to pixel based formats like […]

1. PShape
2. Preparing a SVG
3. Loading and displaying a shape
4. Resizing shapes
5. Disabling the Styling
6. Scaling an SVG with shape()
7. Exporting PDF
8. Exporting SVGs
9. Saving SVGs from Illustrator
10. Debugging
11. Tools
12. Wrapping Up
13. Appendix

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
9. Appendix

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

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
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. Case Study: Slate and Ash
13. Addon: Grid Cells
14. Wrapping Up
15. Appendix

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
12. 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

1. Intro
2. How Easing works
3. State Transitions
4. Wrapping Up