Welcome and Introduction to the Class

1. Welcome and Introduction (27:19)

Hello Processing + p5.js - Introduction to Creative Code

1. Hour of Code - Introducing Processing (about 1 Hour)
2. Hello p5.js (about 5 minutes)
   

MAT 150 Tutorials (optional, if new to Animate or want to review)

1. Index of MAT 150 Tutorials (the tutorials in weeks 1 - 3 are most relevant for the exercise)

Animate CC Review and Demo for Exercise #1

1. Introduction to Animation, Animate CC, and Exercise #1 (16:12)
2. Step Animation and Animate CC Basics (26:20)
3. Working with Symbols, Classic Tweening, and Motion Tweening (23:07)
4. Animatable Properties (position, scale, rotation, alpha, filters +) (12:47)
5. Working with Easing (10:01)
6. Shape Tweening (10:15)
7. Images and Masks (10:57)
8. Coding for Interactivity and Exercise Demo (32:31)
9. Publishing and FTP to Upload Your Exercise (13:58)

Introduction to CreateJS - The Code Powering HTML5 Canvas in Animate

1. Understanding the CreateJS libraries and basic capabilities (22:52)
2. Using CreateJS External to Animate CC (17:16)

---

Introduction to the p5.js Editor and p5.js Basics (required)

1. Introduction to p5.js and the p5.js Editor

Overview of JavaScript and Programming (optional, recommended)

• The Language of Programming (8:56)
  What is a program? The JavaScript language versus the English language
• What is JavaScript? (7:00)
  What is JavaScript? Where did it come from? What can you do with it?

Introduction to p5.js and Drawing with Code (required)

1. Code! Programming with p5.js (from Dan Shiffman)
   Complete Chapters 1:1 - 1:6 (Introduction (20:53) + Drawing (56:04))
2. Introduction to Programming for the Visual Arts with p5.js (from Kadenze)
   Complete Session 1 : Hello (6 Videos - 37:34 )

---

Exercise #2 and P5.js Demo Videos (from the instructor)

1. Introduction to the Generative Painting Exercise (3:10)
2. P5.js Basics, Drawing, Fills/Strokes, Variables, Animation (37:32)
3. p5.js Drawing, Color Palettes, Randomness, and Interactivity (33:45)
4. Deeper into Interactive Painting and Interactivity + Exporting Images and Centering the Canvas (31:58)

p5.js Variables, Randomization, and More

1. Code! Programming with p5.js (from Dan Shiffman)
   Complete Chapters 2:1 - 2:6 (Animation (1:03:07))
2. Introduction to Programming for the Visual Arts with p5.js (from Kadenze)
   Complete Session 2 : Variables and Loops (Videos 1 - 4 + 7 (~ 34:00) )

Variables, Math, and Randomizatin in JavaScript (recommended, from the instructor)

Variables and Values

1. Variables and Values, Part 1 (10:29)
   Variable declaration, initialization, and naming
2. Variables and Values, Part 2 (15:32)
   Data types, variable scope, constants
3. Variables and Values: let vs. var (16:18)
   The let statement vs. the var statement

Numbers and Math

1. Numbers and Math, Part 1 (15:13)
   The Number data type, arithmetic operators, modulus, increment/decrement
2. Numbers and Math, Part 2 (25:20)
   Operator precedence, Number methods, NaN, converting between strings and numbers
3. Numbers and Math, Part 3 (24:32)
   Math object methods, Math.random(), simulating dice rolling

---

Exercise #3 Demo Videos (from the instructor)

1. Introduction To and Samples of the Button Drama Exercise (12:35)
2. Graphic Production and Integration for the Button Drama Exercise (33:24)

p5.js Conditional Statements, Operators, and More

1. Code! Programming with p5.js (from Dan Shiffman)
   Complete Chapters 3:1 - 3:4 (Interaction (~55:00))
2. Introduction to Programming for the Visual Arts with p5.js (from Kadenze)
   Complete Session 3: Flow and Response (Videos 1-3 + 5-6 (~ 27:00) )

Conditional Logic and Decision Making in Javascript (recommended, from the instructor)

• Conditionals - If Else Statements, Part 1 (21:00)
  If, else if, else conditional statements, program flow, comparison operators
• Conditionals - If Else Statements, Part 2 (15:50)
  Logical operators, compound/complex logic, what evaluates to true and false

---

Exercise #3 Demo Videos (from the instructor)

Exercise #3 Demos Using Animate CC

1. Symbols in Animate: Graphic, Movieclip, Buttton (23:09)
2. Addding User Interactivity (20:12)
3. Deeper into Scripting Interactive Navigation (20:15)
4. Button Drama: Eye Example (20:17)
5. Button Drama : Window Example (34:06)
6. Adding Sound to Animate HTML5 Canvas Projects (17:50)

Exercise #3 Demos Using p5.js

1. See Next Week's Tutorials

p5.js Working with Media

1. Introduction to Programming for the Visual Arts with p5.js (from Kadenze)
   Complete Session 4: Media (Videos 1-2 + 5-7 (~ 20:00) )

On Computational Thinking and Problem Solving (recommended, from the instructor)

• Problem Solving and Computational Thinking (18:09)
  Discussion of programming process, problem solving, pseudocode, and flowcharts.
• Review - An Introduction to Computational Thinking - BBC
• Watch - Solving Problems at Google Using Computational Thinking (3:43)

---

Exercise #3 Button Drama Demos Using p5.js (from the instructor)

1. Preloading and Adding Images in p5.js (18:04)
2. Interactive Control of GIF Animations (8:57)
3. Roll Overs and If/Then Conditional Logic in p5.js (21:19)
4. Swapping GIF Animations and More Logic (27:55)
5. Finishing the Graphics and Adding the Cursor (8:41)
6. Adding and Controlling Sounds in p5.js(19:03)
7. Downloading Your Sketch Files (4:13)

p5.js Loops and Nonlinear Narratives

1. Code! Programming with p5.js (from Dan Shiffman)
   Complete Chapters 4:1 - 4:2 (2 videos in Interaction module (~23:00))
2. Introduction to Programming for the Visual Arts with p5.js (from Kadenze)
   Complete Session 5: Nonlinear Narrative (Videos 1-3(~ 21:00) )

Looping and Iteration in JavaScript (recommended, from the instructor)

• Loops, Part 1 - While Loops (16:10)
  Introduction to looping and iteration. The while loop.
• Loops, Part 2 - Do While Loops (10:42)
  Do while loops.
• Loops, Part 3 - For Loops, Break and Continue (23:45)
  The for loop. The break and continue keywords. Infinite loops.
• Loops - Code Challenge/Example (18:54)
  Using a nested loop to create a times table.

---

Week #6 and Exercise #4 Demos Using p5.js (from the instructor)

1. Working with Functions and Paramaters (17:34)
2. Functions and Parameters - Patterns, Randomization, Erasing + (19:35)
3. Working with Loops - For Loops (25:30)
4. Working with Typography in p5.js (25:26)
5. Type and Loops (and scaling your Canvas with CSS) (33:22)

p5.js Functions and Reusable Code

1. Code! Programming with p5.js (from Dan Shiffman)
   Complete Chapters 5:1 - 5:3 (3 videos in Modularity and Reusabiity module (~30:00))
2. Introduction to Programming for the Visual Arts with p5.js (from Kadenze)
   Complete Session 7: Functions (Videos 1-5(~ 22:00) )

Working with Functions in JavaScript (recommended, from the instructor)

• Functions, Part 1 (11:12)
  Introduction to functions. Declaring and calling functions.
• Functions, Part 2 (12:23)
  Using parameters and passing arguments. Working with multiple arguments (examples including a keepScore() function and a madLibs() generator)
• Functions, Part 3 (17:06)
  Returning values from functions (examples including functions for inserting copyright dates and Celsius to Fahrenheit converters)
• Functions, Part 4 (19:39)
  Function expressions, immediately invoked function expressions (iife), recursive functions.

---

Week #7 and Exercise #4 Demos Using p5.js (from the instructor)

1. p5.js Animation - The Bouncing Ball (5:36)
2. p5.js Animation - The Bouncing Ball with Gravity and Friction (15:03)
3. p5.js Animation - Mouse Following (6:45)
4. p5.js Animation - Animate to Target with Easing and Randomization (15:03)
5. p5.js Animation - Text, Arrays, and Random Color(21:01)
6. Simulating Animate in p5.js - Scenes (27:42)
7. Simulating Animate in p5.js - Timing (18:13)
8. Simulating Animate in p5.js - Layers (23:41)
9. Dynamic Poster Wrap Up and Examples (8:24)

p5.js Motion and Choreography

1. Introduction to Programming for the Visual Arts with p5.js (from Kadenze)
   Complete Session 6: Motion (Videos 1-5 + 7(~ 37:00))
2. Code! Programming with p5.js (from Dan Shiffman)
   No new videos assigned. Catch up on any you may have missed already.

Strings and String Methods in JavaScript (recommended, from the instructor)

• Strings, Part 1 - Basics (22:33)
  String basics, escaping, concatenation, type conversion.
• Strings, Part 2 - Properties and Methods (20:51)
  Length, toUpperCase(), toLowerCase(), charAt(), indexOf(), and replace().
• Strings, Part 3 - Methods (18:18)
  splice(), substr(), trim(), search(), split(), and other string manipulation methods.

---

Week #8 Demos Using p5.js (from the instructor)

Animation Basics, The Bouncing Ball and Physics

1. p5.js - Animation Playlist (from last week, watch if you haven't yet)

Object Oriented Programming in JavaSccript and p5.js

1. JavaScript and p5.js - Functional v. Object Oriented Programming (31:39)
2. JavaScript and p5.js - Introduction to Objects and Classes (18:42)
3. JavaScript and p5.js - Applying Objects and Classes (29:25)

p5.js Objects and Classes

1. Code! Programming with p5.js (from Dan Shiffman)
   Complete Chapters 6:1 - 6:4 (4 videos (~34:00))
2. Introduction to Programming for the Visual Arts with p5.js (from Kadenze)
   Complete Session 8: Objects (Videos 1 -2 + 4 - 5 (~ 20:00))

---

Week #9 Demos Using p5.js (from the instructor)

Exploring Game Programming with Pong

1. Pong Part 1 - Introduction and Basics (24:03)
2. Pong Part 2 - Bouncing Off the Walls, Keeping Score, Adding Graphics (20:18)
3. Pong Part 3 - Adding Logic and Randomness to Ball Strikes (19:12)
4. Pong Part 4 - Object Oriented Programming and Image Graphics (30:18)
5. Pong Part 5 - Adding Keyboard Controls (19:07)
6. Pong Part 6 - Finishing the OOP (30:10)
7. Pong Part 7 - Adding Sound and Final Review (10:21)

p5.js Objects and Classes

1. Code! Programming with p5.js (from Dan Shiffman)
   Complete Chapters 7:1 - 7:3 (3 videos (~36:00))
2. Introduction to Programming for the Visual Arts with p5.js (from Kadenze)
   Complete Session 9: Arrays (Videos 1 -4 (~ 33:00))

Working with Arrays in JavaScript (recommended, from the instructor)

• Arrays, Part 1 - Introduction (12:13)
  Introduction to arrays. Accessing array data. Arrays with values of varying types. Short intro to multidimensional arrays.
• Arrays, Part 2 - Creating (11:26)
  Creating arrays. Array Constructors and Array Literals. Accessing array elements by their index.
• Arrays, Part 3 - Looping (14:38)
  The array length property. Looping through arrays with the for loop and for in loop.
• Arrays, Part 4 - Methods (16:41)
  Array methods including toString(), join(), sort(), reversw(), concat(), and slice().
• Arrays, Part 5 - Methods (16:37)
  Array methods including push(), pop(), shift(), unshift(), and splice().

---

Week #10 Demos Using p5.js (from the instructor)

Working with Arrays and Data Visualization

1. Introduction to Arrays, Creating and Accessing Array Data (13:30)
2. Looping Through Arrays and Array Methods (20:31)
3. Arrays of Objects (23:45)
4. Arrays and Data Visualization + the Map Function (29:55)

p5.js Arrays and Objects

1. Code! Programming with p5.js (from Dan Shiffman)
   Complete Chapters 7:4 - 7:8 (5 videos (~1:25))
2. Introduction to Programming for the Visual Arts with p5.js (from Kadenze)
   Complete Session 10: Synthesis B, Game (Videos 1 -4 (~ 34:00))

---

Week #11 Demos Using p5.js (from the instructor)

Exploring Game Programming - Making a Puzzle

1. Introduction to the p5.js Puzzle Game (2:23)
2. Puzzle Game in p5.js - Image Pieces (14:23)
3. Introduction to Sprite Sheets and Animated Sprites (16:13)
4. Puzzle Game in p5.js - Using a Loop to Make the Image Pieces (15:49)
5. Puzzle Game in p5.js - Creating a Puzzle Piece Class and Objects (13:20)
6. Puzzle Game in p5.js - Using an Array of Objects (14:00)
7. Puzzle Game in p5.js - Adding Modularity and Creativity (15:08)
   
8. Puzzle Game in p5.js - Making the Object Pieces Draggable (20:00)
9. Puzzle Game in p5.js - Depth, Drop Shadow, and Custom Cursors (18:38)
10. Puzzle Game in p5.js - Testing for Correct Placement (16:58)
    
11. Puzzle Game in p5.js - Keeping Score (21:05)
12. Puzzle Game in p5.js - Video and Web Cam Video Pieces (11:52)
13. Puzzle Game in p5.js - Interface Elements (24:53)

• Download sample files used in the videos (.zip)

---

Week #12 Demos Using p5.js (from the instructor)

Exploring Game Programming - Making a Puzzle - New Bonus Video

1. Enabling Users to Add Their Own Images/Files Using DOM Methods to Browse for Files and Drag and Drop Files into a p5 Canvas Sketch (11:52)

Exploring Game Programming - Making a Shooting Game - Parts 1 - 4

1. Shooting Game in p5.js - Intro + Objects and Classes (18:10)
2. Shooting Game in p5.js - Adding and Moving Target and Bullet Objects (24:42)
3. Shooting Game in p5.js - Garbage Collection (13:00)
4. Shooting Game in p5.js - Collision Detection and Scoring (24:09)

p5.js, HTML, CSS, and the DOM

1. Code! Programming with p5.js (from Dan Shiffman)
   Chapters 8:1 - 8:16 (optional videos)

---

Week #13 Demos Using p5.js (from the instructor)

Exploring Game Programming - Making a Shooting Game - Parts 5 - 11

1. Shooting Game in p5.js - Part 5 - Moving and Randomizing Targets (18:03)
2. Shooting Game in p5.js - Part 6 - Multiple Targets + A Targets Array (18:30)
3. Shooting Game in p5.js - Part 7 - Using Image Graphics for Targets (17:30)
4. Shooting Game in p5.js - Part 8 - Using A Sprite Sheet for the Gun/Ship (25:16)
5. Shooting Game in p5.js - Part 9 - Better Bullets (23:41)
6. Shooting Game in p5.js - Part 10 - Animating A Sprite Sheet to Make the Targets Explode (29:02)
7. Shooting Game in p5.js - Part 11 - Lives and Game Over (26:41)

Bonus Videos (optional)

8. Working with Game Controllers (20:14)
9. Flying Game in P5.js - Part 12 - Adding a Game Controller (13:17)

---

Week #14 Demos Using p5.js (from the instructor)

Creating a sprite sheet (for animation)

• Generating a Sprite Sheet with Photoshop (9:34)
  Generating a .png sprite sheet from Photoshop layers.
• Generating a Sprite Sheet with Animate/Flash (15:29)
  Generating a sprite sheet from a movieclip animation.

Exploring Game Programming - Making a Flying Game

1. Flying Game in p5.js - Part 1 - Creating a Flying Object, Initial Methods (21:47)
2. Flying Game in p5.js - Part 2 - User Interface and Keyboard Controls (19:54)
3. Flying Game in p5.js - Part 3 - Physics for Better Movement (22:51)
4. Flying Game in p5.js - Part 4 - Creating and Animating Spritesheets (22:04)
5. Flying Game in p5.js - Part 5 - Controlling Spritesheet Animations (18:02)
   

• Download Game/Image Assets from the Flying Game Tutorials (.zip)

---

Week #15 Demos Using p5.js (from the instructor)

Exploring Game Programming - Extending Upon the Flying Game

1. Flying Game in p5.js - Part 6 - Animating Background Graphics and Creating Parallax Scrolling Effects (37:18)
   
2. Flying Game in p5.js - Part 7 - Slowing Down and Controlling Spritesheet Animations (32:27)
3. Flying Game in p5.js - Part 8 - Adding Additional Animations to the Spritesheet (for Jumping) and Game Goals (18:49)
4. Flying Game in p5.js - Part 9 - Adding Animated Obstacles and Collision Detection (44:21)
5. Flying Game in p5.js - Part 10 - Adding a User Interface and Scoring (23:33)
6. Flying Game in p5.js - Part 11 - Timers, Game Over, and Replay (42:44)

• Download Game/Image Assets from the Flying Game Tutorials (.zip)

---

Week #16 Demos Using p5.js (from the instructor)

Extending p5.js with libraries and using the p5.play library

1. Extending p5.js with libraries and using the p5.play library (21:10)

p5.Play Interactive Learning Documentation and Tutorials (optional)

1. Learn p5.play

p5.Play Library Demos (optional)

1. Making Games with p5.play (from Allison Parrish)