courses Archive • tim rodenbröker creative coding
Courses

Basics

Intro
Under construction

Intro

In this course, we will clarify a few basic questions about the curriculum. Would you rather start coding right away? […] (3 Lessons)

Processing and p5.js Essentials

Processing and p5.js Essentials

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

Sketching with Code

Sketching with Code

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

Mastering the For-Loop

Mastering the For-Loop

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

Waves

Waves

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

Random Compositions

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 1

Vera Molnar Reconstructed

Vera Molnar Reconstructed

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

Bauhaus Coding Workshop

Bauhaus Coding Workshop

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

Interlude 1

The Four Pillars
Under construction

The Four Pillars

(7 Lessons)

The Art of Fixing Problems
Under construction

The Art of Fixing Problems

Click here to login or connect!To view this content, you must be a member of Tim's Patreon at €8 or […] (9 Lessons)

Creative Coding in the Age of Automation
Under construction

Text and Images

Typemachines

Typemachines

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

Images and Pixels

Images and Pixels

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

Copy and Paste

Copy and Paste

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

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 […] (10 Lessons)

Space and 3D

The Third Dimension

The Third Dimension

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

Generative Sculptures

Generative Sculptures

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

Data and Information

Basic Datastructures

Basic Datastructures

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

Grid Systems

Grid Systems

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

Modulo Mixtape

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

Form follows Music

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

TextMode
Under construction

TextMode

Explorations in String Manipulation. (16 Lessons)

meditations.json
Under construction

meditations.json

Breathing life into an ancient text with Creative Coding. (16 Lessons)

Layouts

PGraphics

PGraphics

A deep dive into PGraphics (13 Lessons)

Generative Collages

Generative Collages

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

Exercises 2

Programming Posters
Under construction

Programming Posters

Creative Coding in the realms of Graphic Design (13 Lessons)

Browser-Based

Building Tools

Building Tools

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

Creative Coding within Limits

The 128KB Challenge
Under construction

The 128KB Challenge

In the beginning of the 21st century, we are used to streaming and downloading huge amounts of data from the […] (17 Lessons)

Terminal Alchemy

Command Line Basics
Under construction
Media Conversion with FFMPEG
Under construction
Using Processing from the Command Line
Under construction

Basics

Intro
Under construction

Intro

In this course, we will clarify a few basic questions about the curriculum. Would you rather start coding right away? […]

Start →
  1. How to use the Curriculum
  2. Why and when Processing and p5.js
  3. This book could save you
Processing and p5.js Essentials

Processing and p5.js Essentials

The starting point of the curriculum, made for beginners.

Start →
  1. Processing and p5.js
  2. Processing: Installation and quick walkthrough
  3. Three Ways to use p5.js
  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

Exercises 1

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

Interlude 1

The Four Pillars
Under construction

The Four Pillars


Start →
  1. Intro
  2. Functions
  3. Variables
  4. Loops
  5. Conditionals
  6. Systems
  7. Wrapping Up
The Art of Fixing Problems
Under construction

The Art of Fixing Problems

Click here to login or connect!To view this content, you must be a member of Tim's Patreon at €8 or […]

Start →
  1. Intro
  2. How to get unstuck
  3. Rubberduck Debugging
  4. Isolating a problem
  5. println()
  6. Search Engines
  7. Still struggling? Ask your question!
  8. Excourse: Stoicism
  9. Wrapping Up
Creative Coding in the Age of Automation
Under construction

Creative Coding in the Age of Automation


Start →
  1. Creative Coding and AI
  2. Computational Thinking
  3. Creative Coding to Demystify Technology
  4. Learning to Prompt by Learning to Code
  5. Creative Coding as a School of Thought
  6. A Mindset beyond Coding
  7. 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
Under construction

TextMode

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
meditations.json
Under construction

meditations.json

Breathing life into an ancient text with Creative Coding.

Start →
  1. About the book
  2. The brief
  3. How i prepared the data
  4. Downloads
  5. Boilerplates
  6. Using a specific verse
  7. Loading the text as an array of strings
  8. Extracting words
  9. Loading the JSON-file
  10. Example 1
  11. Example 2
  12. Example 3
  13. Inspiration
  14. Wrapping Up
  15. Appendix
  16. Gallery

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

Exercises 2

Programming Posters
Under construction

Programming Posters

Creative Coding in the realms of Graphic Design

Start →
  1. Intro
  2. Simple model
  3. Intermediate model
  4. Advanced model
  5. Set your project framework
  6. Find words
  7. Find fonts
  8. Find images
  9. Find inspiration
  10. Example project
  11. Make the Fake
  12. Wrapping up
  13. Appendix

Browser-Based

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

Creative Coding within Limits

The 128KB Challenge
Under construction

The 128KB Challenge

In the beginning of the 21st century, we are used to streaming and downloading huge amounts of data from the […]

Start →
  1. Intro
  2. Guidelines
  3. Characteristics of a great submission
  4. Understand the .gif format
  5. Anti-Aliasing with noSmooth()
  6. p5.js Boilerplates
  7. Processing Boilerplates
  8. gif Conversion and Compression
  9. gif editing tools
  10. Low Fidelity Typefaces Collection
  11. 128kb Illustrations
  12. Using FFMPEG to render a gif from PNGs
  13. Convert your gif to a high-resolution mp4
  14. Upscaling with CSS
  15. Perfect Loops
  16. Submit your Work!
  17. Wrapping Up

Terminal Alchemy

Command Line Basics
Under construction

Command Line Basics


Start →
  1. Intro
  2. Navigating your File System
  3. Create an empty File
  4. Move or Rename a File
  5. Copy a File
  6. Wrapping Up
Media Conversion with FFMPEG
Under construction

Media Conversion with FFMPEG


Start →
  1. What is FFMPEG?
  2. Using the Command Line
  3. Installing FFMPEG
  4. Simple Conversion
  5. Cut a video
  6. Extract images from a video
  7. Concatenate videos
  8. Letterbox
  9. Scale video
  10. Convert video to gif
  11. Convert to Black and White
  12. Generate Video from Images
Using Processing from the Command Line
Under construction

Using Processing from the Command Line


Start →
  1. Intro
  2. What is the Command Line?
  3. Installing the Processing Binary
  4. Say hello to Vim
  5. Setting up Vim
  6. Running a Sketch
  7. Basic Animation with ffmpeg
  8. Wrapping Up