Courses

Overview

Creative Coding Essentials

The starting point of the curriculum, made for beginners. (33 Lessons)

Sketching with Code

Learn best practices for a fluent and smooth sketching process (9 Lessons)

Mastering the For-Loop

A deep dive into For-Loops in Processing and p5.js (10 Lessons)

Waves

Learn to utilize waves for motion graphics in Processing and p5.js (13 Lessons)

Random Compositions

One of the most exciting and maybe even unsettling discoveries in the learning process of Creative Coding in Graphic Design […] (12 Lessons)

Exercises: Vera Molnar Reconstructed

Exercises for beginners and intermediate creative coders. (16 Lessons)

Exercises: Bauhaus Coding Workshop

A collection of creative exercises, based on the teachings in the preliminary course at the Bauhaus in Weimar. (14 Lessons)

The Third Dimension

A brief introduction to 3D enviroments in Processing (11 Lessons)

Typemachines

Fundamentals in text and kinetic typography with Processing and p5.js (18 Lessons)

Images and Pixels

All you need to know to work with Images in Processing and p5.js. (18 Lessons)

Copy and Paste

Exploring the copy-function in Processing and p5.js (8 Lessons)

Generative Sculptures

Learn to transform image data into three-dimensional structures. (12 Lessons)

Basic Datastructures

Fundamental principles of Arrays in Processing and p5.js (13 Lessons)

Grid Systems

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

Modulo Mixtape

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

Form follows Music

An exemplary introduction to generative design and data visualization. (8 Lessons)

TextMode (WIP)

Explorations in String Manipulation. (16 Lessons)

PGraphics

A deep dive into PGraphics (13 Lessons)

Generative Collages

Learn to merge photos and graphics into expressive collages. (11 Lessons)

ASCII Adventures

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

Building Tools

Up to this point, you have changed all the parameters in your sketches directly in the code. This will get […] (19 Lessons)

Basics

Creative Coding Essentials

Creative Coding Essentials

The starting point of the curriculum, made for beginners.
Start →

  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
Sketching with Code

Sketching with Code

Learn best practices for a fluent and smooth sketching process
Start →

  1. Intro
  2. Folder Structure
  3. Always be Iterating
  4. Thumbnails
  5. Video Thumbnails
  6. Sketch Branching
  7. Decoupling the data with relative Paths
  8. Managing different aspect ratios
  9. Wrapping Up
Mastering the For-Loop

Mastering the For-Loop

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

  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
Waves

Waves

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

  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
Random Compositions

Random Compositions

One of the most exciting and maybe even unsettling discoveries in the learning process of Creative Coding in Graphic Design […]
Start →

  1. Recap: The random() Function
  2. A basic Random Composition
  3. Adding Space
  4. A simple way to animate Random Compositions
  5. Random Conditions / Probability
  6. Adding Color
  7. Positive-Negative (with Functional Programming)
  8. Constants and Variables
  9. Random Face Generator
  10. Adding Images
  11. From 2D to 3D
  12. Wrapping Up
Vera Molnar Reconstructed

Vera Molnar Reconstructed

Exercises for beginners and intermediate creative coders.
Start →

  1. Intro
  2. Square Puzzle
  3. Parallel strokes
  4. Squares in two positions
  5. Disorder (Grid)
  6. Displaced Squares
  7. Triangle pairs
  8. Three Columns Bars
  9. Grids of Circles
  10. Squares Gradient
  11. 16 elements
  12. Concentric Spiral
  13. Arrows
  14. Radial Distribution
  15. Four Circles
  16. Wrapping up
Bauhaus Coding Workshop

Bauhaus Coding Workshop

A collection of creative exercises, based on the teachings in the preliminary course at the Bauhaus in Weimar.
Start →

  1. Editorial
  2. Styleguide
  3. Random Composition
  4. Dust and Dirt
  5. Painting with Light
  6. Square Circle Triangle
  7. Wave Figures
  8. Moiré Patterns
  9. Material Studies
  10. Geometric Typography
  11. Formal Contrasts
  12. Generative Photograms
  13. Make the Fake
  14. Wrapping Up

Text and Images

Typemachines

Typemachines

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

  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
Images and Pixels

Images and Pixels

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

  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
Copy and Paste

Copy and Paste

Exploring the copy-function in Processing and p5.js
Start →

  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
ASCII Adventures

ASCII Adventures

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

  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

Space and 3D

The Third Dimension

The Third Dimension

A brief introduction to 3D enviroments in Processing
Start →

  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
Generative Sculptures

Generative Sculptures

Learn to transform image data into three-dimensional structures.
Start →

  1. Preparing the Material
  2. Setting up the Foundation
  3. Calculate the width and the height of a single tile
  4. Creating the nested for-loop
  5. Pixelization
  6. Centering the visual
  7. Voxelization
  8. Adding depth
  9. Motion Patterns
  10. Interlude: The lerpColor() Function
  11. Lerping between Pixels
  12. Wrapping Up

Data and Information

Basic Datastructures

Basic Datastructures

Fundamental principles of Arrays in Processing and p5.js
Start →

  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
Grid Systems

Grid Systems

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

  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
Modulo Mixtape

Modulo Mixtape

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

  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
Form follows Music

Form follows Music

An exemplary introduction to generative design and data visualization.
Start →

  1. Preparing the data
  2. Linear Distribution
  3. Two-dimensional distribution of one-dimensional data
  4. Addon: Circular distribution
  5. Example: Bach Mechanics
  6. Example: 3D Whirl
  7. Example: Digital Mobilé
  8. Wrapping up
TextMode (WIP)

TextMode (WIP)

Explorations in String Manipulation.
Start →

  1. Intro
  2. Strings and Chars
  3. String Concatenation
  4. Getting a Character from a Word
  5. Getting a Word from a Sentence
  6. Getting a Sentence from a Text
  7. A whole book, Word by Word
  8. Loading a Text from an external File
  9. Split Flap Mechanics
  10. Generative Poetry
  11. Low Tech Newsticker
  12. Newsticker 2
  13. Text Slider
  14. Word Cloud
  15. Render Text to an external File
  16. Wrapping up

Layouts

PGraphics

PGraphics

A deep dive into PGraphics
Start →

  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
Generative Collages

Generative Collages

Learn to merge photos and graphics into expressive collages.
Start →

  1. Intro
  2. Creating the Cutout Shapes
  3. Masking an Image
  4. Layering the Cutout Images
  5. Curation
  6. Animation
  7. Programmatically load all Images from a Folder
  8. Example Generator 1
  9. Example Generator 2
  10. Example Generator 3
  11. Wrapping Up

Toolmaking

Building Tools

Building Tools

Up to this point, you have changed all the parameters in your sketches directly in the code. This will get […]
Start →

  1. Intro
  2. Sliders
  3. Text input
  4. Buttons
  5. Number Input
  6. Color Picker
  7. Select
  8. Checkboxes
  9. Labels
  10. Text Area
  11. Application Layout
  12. Styling the UI Elements (Part 1)
  13. Styling the UI Elements (Part 2)
  14. File Upload
  15. Group UI Components with Accordions
  16. Template Collection
  17. Example – Book Cover Generator
  18. Example – Coding Systems Announcement Machine
  19. Wrapping Up