🚂 Beginner's Guide to Creative Coding w/ Processing 🌈

Choo choo! Welcome aboard to the world of creative coding! Join me in this beginner-friendly video series and choo-choo-choose to embark on an exciting journey with Processing, a versatile and artist-friendly programming language and environment. Whether you're an absolute beginner or have some experience already, my goal is to inspire and empower you to unleash your creativity through coding. Processing is your gateway to making art, animations, and interactive experiences. No prior experience is required—just curiosity and a desire to create!

Below, you'll find a detailed itinerary that includes links to all of the coding destinations: code examples, interactive exercises, and other reference material. Found a mechanical issue? Open an issue in this repo or call the conductor at [email protected].

For passengers looking to chat in the cafe car, say hello in this reddit thread or hop onto the Discord. There's always room for one more on the Coding Train!

How to Watch

This video is available right now as a Nebula first! Want to support The Coding Train and have access to even more coding adventures? Buy your train tickets for a Nebula journey with the Coding Train!

Introduction [0:00]

Reference

• Processing Website
• Link to Dan's first Processing Forum post
• Introduction to Computation Media Syllabus
• Processing Download
• Nature of Code
• ITP Website
• Lingo bouncing ball code example image
• Macromedia Director launch image
• Macromedia Director Lingo Workshop image
• John Henry Thompson Coding Train video
• What was Coding like 40 Years Ago?
• Procedural Painting Syllabus
• The Coding Train Youtube Channel
• Casey Reas and Ben Fry Image
• John Maeda Image
• Design By Numbers IDE Image
• LOGO Image
• BASIC Image
• Rhizome Interview with Casey Reas and Ben Fry
• Design by Numbers Example Image
• Java Website
• Processing Original IDE Image
• Processing original libraries page
• Processing 1.0 Image
• Processing Foundation Website
• Python Mode for Processing Website
• Processing for Android Website
• p5.js Website
• Coding Challenges Link
• p5.js Web Editor
• Processing Libraries Link
• Coding Train Tracks Link
• Nebula Website
• The Coding Train Website
• The Coding Train Discord
• Processing Forum

Drawing with Code [17:30]

Reference

• Rectangle reference page
• Triangle reference page
• Quad reference page
• Arc reference page
• Programming Design Systems Website

Code Examples

In-Video Examples:

• Basic Shapes
• Shapes with Color
• Zoog

Do-It-Yourself Solutions:

• Abstract
• Alien
• Alien with Color
• Flower
• Flower with Color
• Self Portrait
• Spaceship
• Spaceship with Color

Flow [1:04:39]

Reference

• Space Invaders Clip

Code Examples

• Alien Antennas
• Alien Frown

Variables [1:29:31]

Code Examples

• Circle Grow
• Circle y only
• Circles fade out
• Mouse with variables
• Paintbrush mouse random
• Paintbrush plain
• Paintbrush random
• Random house
• Random lines

Conditionals [2:02:46]

Reference

• Distance reference page
• Bouncing DVD logo
• Mouse press reference page

Code Examples

• Ball turn around
• Bouncing ball button interface
• Bouncing ball changing color
• Bouncing ball changing size
• Bouncing ball changing speed
• Bouncing ball gravity
• Circle rollover
• Four sections
• Paintbrush conditional
• Rows conditional

Loops [2:50:01]

Reference

• C64 running 10PRINT
• 10PRINT Website
• 10PRINT Coding Challenge and Passenger Showcase
• Passenger Showcase Submission Form
• Commodore 64 image

Code Examples

• Checkerboard
• Concentric circles
• Grid changing size
• Grid circles
• Horizontal stripes
• Vertical stripes

Arrays [3:12:29]

Reference

• Text reference page
• Stroke cap reference page

Code Examples

• Color palette array
• Fruit array index 1
• Fruit array index 2
• Fruit data visualization
• Fuit data viz average
• Fruit data viz sum

Functions [3:40:29]

Code Examples

• Conversion function
• Lollipops
• Lollipops animated
• Rainbow, unicorn, puppy
• Unicorn only

Classes and Objects [4:02:30]

Reference

• Distance reference page
• Pixel array video

Code Examples

• Bubble
• Bubble with arguments
• Bubble mouse interaction
• Bubbles and rain
• Bubbles and rain pop
• Flower class

Confetti Project [4:56:20]

Reference

• Coding challenges
• Nature of Code (Processing)
• Nature of Code (p5.js)

Code Examples

• Confetti party
• Confetti party arrayList
• Confetti party rotate

Conclusion [5:03:15]

Reference

• Images and Pixels (Processing playlist)
• 3D Renderer coding challenge
• Transformations
• Text and Data
• Data and API's
• Loading and playing with sound (p5.js
• Capture and live video
• Physics engine
• The Coding Train Discord
• Twitter
• Instagram