Skip to Navigation | Skip to Content

MAT 175 - Web Design - JavaScript + jQuery

Menu

Class Schedule

Week 1 (8/21)

Topics + Learning Objectives

  • Overview/Introduction to the Class and Syllabus
  • Introductions to Processing and p5.js
  • Review of Animate CC
  • The Animate Environment: Tools, Panels, Menus
  • Drawing Basics
  • Keyframes and Frames
  • Step Animation/Animation Basics
  • Symbols and Instances
  • Motion Tweening - Classic
  • Motion Tweening - The New Way
  • Shape Tweening
  • Working with Text
  • Adding Actions/Code
  • Programming simple interactivity
  • Introduction to CreateJS

Required Assignments + Tasks

Recommended or optional Tasks

VIDEOS + TUTORIALS

Welcome and Introduction

  1. Welcome and Introduction to the Class and Syllabus (22:20)

Hello Processing + p5.js - Introduction to Creative Code

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

Animate CC Review and Demo for Exercise #1 (from the instructor)

  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)

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)

Introduction to CreateJS - The Code Powering HTML5 Canvas in Animate (optional, if you want to explore the CreateJS framework)

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

Exercise #1: Kinetic + interactive typography (Due 9/4)

Engage or re-engage with the Animate CC software, timeline animation, and scripting tools by creating a 'click to reveal' animated text message of some kind that publishes to the HTML5 Canvas.

Start by writing or choosing some text to animate. This text can be a short, simple passage or message derived from a quote, poem, song lyrics, title sequence, or other source. Use motion tweening, shape tweening, or step animation to animate the phrases, words, and/or individual letters of the message.

Enable some simple interactivity within your animation by scripting it to respond (at minimum) to mouse click events such that the animation/progression of your message is triggered by the user clicking the stage. Feel free to use the sample code below (and demonstrated in the tutorials).

Be sure that your choices for color, font, style, and most importantly motion/animation are thematically consistent and help symbolically communicate the meanings and/or ideas in your text. In other words, use motion as metaphor. Your animation and interactive design should function to communicate the theme(s) of the text.

You may choose to animate properties such as position, scale, rotation, color, alpha and transparency. Consider contrasting these properties in your animation (such as very small to very big; very slow to very fast; completely transparent to completely opaque, etc). You may consider how to use animation principles such as acceleration and deceleration, squash and stretch, and anticipation and follow-through.

Use any stage size you wish, provided it will fit on a 1280x720 screen. Use of imagery or other media (other than typography) is optional, but not required.

Create a folder named "exercise1" and save your .fla file into this folder. Publish it (for HTML5 Canvas) to create the .html, .js, images needed for upload. Upload your "exercise1" folder (with your .fla, .html and all dependent files in it) to your Lastname_First name folder on the MAT server. See FTP Info for the MAT Server for detailed instructions and video tutorials. Submit the URL/link to your file through Canvas (via the Submit Assignment option).

 

  • Sample code:

// stop your timeline

this.stop();

//listen for mouse clicks then call the "onNext" function

this.on('click', onNext);

//when called play the timeline

function onNext() { this.play(); }

Links + Resources

> Go to Top

Week 2 (8/28)

Topics + Learning Objectives

  • Introduction to p5.js for creative coding
  • What is code?
  • p5.js basics
  • Shapes and drawing
  • Color

Required Assignments + Tasks

VIDEOS + TUTORIALS

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

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

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

Exercise #2 and P5.js Demo Videos (required, 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)

Overview of JavaScript and Programming (optional, recommended)

Exercise #2: Generative Painting (DUE 9/11)

Explore drawing, parametric design, and coding using p5.js. If you haven't done so yet, Sign up for an account to use the p5.js editor (to save/store your files online). Then, use the editor to create the 3 files required for this exercise as per below.

  • Create 3 drawings/sketches in p5.js:
    1. One of the drawings should represent your basic coding exploration of of creating 2D primitive shapes (lines, rectangles, ellipses, triangles, arcs, quads, points, etc.) with varied fills, strokes, colors, and weights. It does not need to be particularly artistic, but should provide you with coding samples for drawing a variety of shapes.
    2. After exploring as per above, draw something original with code. Strive to create something artistic, compositionally interesting, and well-balanced, but comprised of relatively simple/primitive shapes (rectangles, lines, circles, etc.). Perhaps, take inspiration from modernists such as Piet Mondrian, Wassily Kandinsky, or artists and designers from the Bauhaus who creatively utilized primitive shapes within their artwork. Feel free to sketch on paper first before translating your work to code.
    3. Lastly, create one sketch that involves the user. In other words, using algorithmic/parametric design and coding, create a simple interactive drawing application using p5.js. This might be a generative 'paintbrush' of some kind (allowing the user to paint) or it might a generative drawing that is affected by user interaction in some way (i.e. such that it changes with the mouse position or when the user clicks a mouse button).
  • Design at minimum size of 300 x 300 and a maximum size of 1920 x 1080. Each drawing/sketch does not need to be the same size.
  • Be creative and have fun!

Name your code files/sketches with the prefix "exercise2_" so that that they are easily identifiable (for example "exercise2_sketch3"). Turn in your sketches by providing the instructor with your p5.js account name/link to your sketch library. In other words, email me your user name and/or the link to your sketches from the p5.js editor (for example, https://editor.p5js.org/YourUserName/sketches). Also, submit the URL/link to your sketches through Canvas (via the Submit Assignment option).

Lastly, participate in the Exercise #2 Review and Reflection discussion on Canvas.

Links + Resources

> Go to Top

Week 3 (9/4)

Topics + Learning Objectives

  • p5.js basics
  • Variables
  • Randomization
  • Simple mouse interactions
  • Animate (continued)
  • Working with buttons, movieclips
  • Graphic Production for Animation
  • Working with sound
  • Interactive navigation and Create JS scripting

Required Assignments + Tasks

VIDEOS + TUTORIALS (REQUIRED)

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))

Exercise #3 Demo Videos (from the instructor)

Introduction, Graphic Production

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

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

SUPpleMENTAL VIDEOS + TUTORIALS (OPTIONAL)

Variables, Math, and Randomizatin in JavaScript (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: Button Drama (DUE 9/25)

Explore interactive animation by creating a dramatic "button"/scene using HTML5 Canvas in Animate and/or using p5.js (I will provide tutorials demonstrating both methodologies; bonus points if you try to produce it both ways).

Using a stage/canvas size of 500 x 300, create a "button" of any size that fits on the stage. Your button should include some kind of mouse interaction on rollover/mouseover and should also do something/animate when user clicks on it.

Don't think about boring, traditional buttons, such as the links and call to action buttons on most websites. These buttons emphasize 'usabilty design' whereas your exercise should emphasize 'experience design.' Even a button can tell a story or have a dramatic structure with a beginning, middle, and end. A button can setup a scene, build intrigue (on mouseover), and offer a climax/resolution (on click). Thus, your button may not look like a button in the traditional sense. Rather, using the examples presented as inspiration, think in dramatic terms... the rollover state should build intrigue, inviting the user to click on it. When they do click, they should be rewarded with an interesting animation/climax.

You should develop your imagery in Photoshop or Illustrator first, and then import your PSD, PNG, GIF, or JPG images into Animate and/or use the loadImage() method in p5.js to import your imagery into a sketch.

Create a folder named "exercise3" and save your files into this folder. If using Animate, include the .fla file into this folder and publish it (for HTML5 Canvas) to create the .html and other dependent files needed for upload. If using the P5.js editor, then use the File > Download option to get a .zip file with all of your dependent files in it. Upzip that into your exercise3 folder. Lastly, upload your "exercise3" folder to your Lastname_First name folder on the MAT server. See FTP Info for the MAT Server for detailed instructions and video tutorials. Submit the URL/link to your file through Canvas (via the Submit Assignment option).

Finally, participate in the Exercise #3 Review and Reflection discussion on Canvas.

Links + Resources

p5.js Resources and Reference

JavaScript Resources and Reference

> Go to Top

Week 4 (9/11)

Topics + Learning Objectives

  • p5.js Basics (continued)
  • Working with images
  • Working with sound
  • Conditional logic, decision making, and program flow
  • Mouse events and interactivity

Required Assignments + Tasks

VIDEOS + TUTORIALS (REQUIRED)

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))

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)

Exercise #3 Demos Using Animate

  1. See Last Week's Tutorials

SUPpleMENTAL VIDEOS + TUTORIALS (OPTIONAL)

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

On Computational Thinking and Problem Solving (from the instructor)

Links + Resources

p5.js Resources and Reference

Animate Resources and Reference

> Go to Top

Week 5 (9/18)

Topics + Learning Objectives

  • p5.js (continued)
  • Working with images
  • Working with typography
  • Working with loops
  • Working with functions
  • Parameterizing your code

Required Assignments + Tasks

VIDEOS + TUTORIALS (REQUIRED)

p5.js Loops

  1. Code! Programming with p5.js (from Dan Shiffman)
    Complete Chapters 4:1 - 4:2 (2 videos in Interaction module (~23:00))

Week #5 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)
  6. More demo videos specific to Exercise #4 will be provided next week

SUPpleMENTAL VIDEOS + TUTORIALS (OPTIONAL)

Looping and Iteration in JavaScript (from the instructor)

Exercise #4: DYNAMIC POSTER / interactive collage (DUE 10/9)

Explore computational media, interactivity, and animation using p5.js by creating a dynamic digital poster or interactive collage around a theme of your choice. Your theme should be inspired by the kinds of topics you might find on a Public Service Announcement (PSA) poster or by social, environmental, or cultural issues of importance to you. If you wish, you may choose to create a PSA to encourage voter participation, such as in the demo videos and similar to the Get Out the Vote campaign sponsored by AIGA. For inspiration, see the AGIA 2020 posters amd 2022 posters and 2024 posters here. For inspiration on dynamic posters, see these p5.js examples.

Your dynamic poster or interactive collage should combine the use of typography and imagery (either loaded images, generated graphics, or both). Your poster/collage should also be interactive in some way, responding to mouse or keyboard events. For example, each time the user clicks the mouse the poster/collage might generate new output and/or graphic elements within your poster/collage might respond to mouse position.

Your program should use conditional statements, variables, and loops. Consider ways to engage in the assignment that take advantage of the digital/computational nature of the medium.

As a 'digital poster,' we will target the canvas size of a standard 1080p monitor or TV in portait mode (but you may use a landscape layout if you prefer). Therefore, you should use a canvas size of 1080x1920 (or 1920x1080). However, at this scale, you may have to scroll to see the whole canvas when in development. So, if you prefer, you can use a canvas size that reflects this aspect ratio such as 360x640 or add the following to your CSS file to scale your canvas to appropriately fit your screen size:

canvas {
/* 1080 / 1920 = .5625; this is the aspect ratio */
height: 100vh !important;
width: 56.25vh !important;
}

Create a folder named "exercise4" and save your files into this folder. From the p5.js editor, use the File > Download option to get a .zip file with all of your dependent files in it. Upzip that into your exercise4 folder. Lastly, upload your "exercise4" folder to your Lastname_First name folder on the MAT server. See FTP Info for the MAT Server for detailed instructions and video tutorials.

Finally, participate in the Exercise #4 Review and Reflection discussion on Canvas.

Links + Resources

p5.js Resources and Reference

JavaScript Resources and Reference

> Go to Top

Week 6 (9/25)

Topics + Learning Objectives

  • p5.js (continued)
  • Working with functions (continued)
  • Working with images and type
  • Exploring animation in p5.js
  • Mouse following and animate to target

Required Assignments + Tasks

VIDEOS + TUTORIALS (REQUIRED)

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))

Week #6 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. More demos related to Exercise #4 will be provided next week including a live Generative Poster Design Zoom session next Thursday, 10/3 at 6:00 p.m. via Zoom (see my Zoom link on Canvas)

SUPpleMENTAL VIDEOS + TUTORIALS (OPTIONAL)

Working with Functions in JavaScript (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.

Links + Resources

p5.js Resources and Reference

JavaScript Resources and Reference

> Go to Top

Week 7 (10/2)

Topics + Learning Objectives

  • Simulating Animate CC features in P5.js
  • Simulating "layers" with layered canvases/graphics
  • Simulating "scenes" with functions
  • Simulating "timelines" with counters and timers
  • Exploring animation in p5.js

Required Assignments + Tasks

LIVE Zoom workshop - 6:00 p.m. Thursday, 10/3 - Generative poster design (Recommended)

Join me for a special live zoom session where we review generative design techniques to make a dynamic poster. This session is not required but recommended and will be a good supplement to the video tutorials you've been watching related to p5.js animation and the Exercise #4 poster project.

When: 6:00 - 7:00 p.m. on Thursday, 10/3
Where: Via Zoom (see my zoom link on Canvas)

VIDEOS + TUTORIALS (REQUIRED)

Week #7 and Exercise #4 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)

Simulating Animate features like Scenes, Timing, and Layers within p5.js

  1. Simulating Animate in p5.js - Scenes (27:42)
  2. Simulating Animate in p5.js - Timing (18:13)
  3. Simulating Animate in p5.js - Layers (23:41)
  4. Dynamic Poster Wrap Up and Examples (8:24)

Code! Programming with p5.js (from Dan Shiffman)

  1. Code! Programming with p5.js (from Dan Shiffman)
    No new videos assigned. Catch up on any you may have missed already.

SUPpleMENTAL VIDEOS + TUTORIALS (OPTIONAL)

Strings and String Methods in JavaScript (from the instructor)

Links + Resources

p5.js Resources and Reference

JavaScript Resources and Reference

> Go to Top

Week 8 (10/9)

Topics + Learning Objectives

  • p5.js (continued)
  • Exploring animation in p5.js
  • Objects and Classes
  • Thinking about character design

Required Assignments + Tasks

VIDEOS + TUTORIALS (REQUIRED)

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

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))

Character Development For Upcoming Game Exercises (Recommended)

In the second half of our class, we will create a series of exercises that explore game programming techniques. These will include a shooting game and a flying, running, or jumping game. Most students extend upon these exercises for the final project. This week, we don't have any new assigned exercises, but you may wish to get a jump on your character/graphic development for the final exercise in the class (as creating graphics and animations can easily take as much time as the programming). Below are some character design details for the final exercise in the class. Consider doing some creative research and investigation, such as image/character research, sprite sheet research, thumbnails, sketches, graphic development, animation ideas, or mood boards. Use this research and creative investigation to explore ideas and jump-start the creative process for a character design that may become the basis of your final exercise and/or final project. Beyond the character, you may also consider the scene, setting, or background that the character will inhabit (as ultimately you will have background graphics within your game canvas).

Create/design graphics for a character/object that can fly, swim, or run and jump and that is animated to show the source of its propulsion (such as animated wings, moving legs, fins, fire out of a rocket engine, or bubbles out of a bubble jet pack, etc.). The size of the character is up to you but it is recommended that you make it no larger than 200 x 200 pixels (so that it has room to move around). Generate a spritesheet for your animated character (by using Animate and/or Photoshop) that includes a neutral state (not moving) and animated frames (when in motion).

Optionally, you may wish to review this article about character design principles and/or watch my short playlist about generating spritesheets.

Links + Resources

p5.js Resources and Reference

JavaScript Resources and Reference

> Go to Top

Week 9 (10/16)

Topics + Learning Objectives

  • p5.js (continued)
  • Working with Arrays
  • Exploring Game Programming and Animation
  • The Game of Pong

Required Assignments + Tasks

VIDEOS + TUTORIALS (REQUIRED)

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 Arrays and Objects

  1. Code! Programming with p5.js (from Dan Shiffman)
    Complete Chapters 7:1 - 7:3 (3 videos (~36:00))

SUPpleMENTAL VIDEOS + TUTORIALS (OPTIONAL)

Working with Arrays in JavaScript (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(), reverse(), concat(), and slice().
  • Arrays, Part 5 - Methods (16:37)
    Array methods including push(), pop(), shift(), unshift(), and splice().

Exercise #5: Game Exploration - PONG (DUE 10/30)

Using p5.js, explore creating the classic game of pong (or your own variation of it). As demonstrated in the video tutorials (which you can follow along with to complete the basics of this exercise), create a paddle (controlled by the user) and a ball/puck. Animate the ball to bounce off of the environment/walls and paddle. Consider ways to reinforce the user if they successfully hit the ball ('win') or penalize the user for missing the ball ('lose') through keeping track of a score and/or adding sounds and/or changing the visuals.

You are required to create a basic playable game of pong in p5.js. But, beyond that you are welcome to extend on the game with enhanced visuals/unique graphics and/or sounds, through adding additional controls (such as keyboard versus mouse), adding an additional player, adding additional balls (more than one or some that you are supposed to avoid), taking the game in new directions (such as turning it into a game of 'breakout'), and/or any other ideas you may have.

Create a folder named "exercise5" and save your files into this folder. From the p5.js editor, use the File > Download option to get a .zip file with all of your dependent files in it. Upzip that into your exercise5 folder. Lastly, upload your "exercise5" folder to your Lastname_First name folder on the MAT server. See FTP Info for the MAT Server for detailed instructions and video tutorials.

Finally, once complete, participate in the Exercise #5 Review and Reflection discussion on Canvas.

Links + Resources

p5.js Resources and Reference

JavaScript Resources and Reference

> Go to Top

Week 10 (10/23)

Topics + Learning Objectives

  • p5.js (continued)
  • Working with Arrays
  • Data Visualization
  • Exploring Programming with Objects and Arrays

Required Assignments + Tasks

VIDEOS + TUTORIALS (REQUIRED)

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))

Links + Resources

p5.js Resources and Reference

JavaScript Resources and Reference

> Go to Top

Week 11 (10/30)

Topics + Learning Objectives

  • p5.js (continued)
  • Exploring Game Programming with Objects and Arrays
  • Working with Images and Video (and Web Cam)
  • Adding Interface Elements
  • A Puzzle Game

Required Assignments + Tasks

VIDEOS + TUTORIALS (REQUIRED)

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

If you haven't, you should start by watching my videos about Arrays and Objects

  1. Week #10 Videos

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)

Exercise #6: Game Exploration - PUZZLE (DUE 11/13)

Using p5.js, explore creating a simple puzzle game or other application using dragable objects. As demonstrated in the video tutorials (which you can follow along with to complete the basics of this exercise), create a variety of objects that display the parts(pieces) of an image (or video/camera feed). Randomize the intial placement of these images/objects and allow the user to drag them into different positions. Use conditional logic to test if the user placed the puzzle piece in the right place. Use variables to keep track of correctly placed puzzle pieces, and give the user a payoff (animation or congratulations screen) if they solve the puzzle and win the game.

While the class examples focus on a draggables puzzle game, if you wish you are welcome to explore other ideas involving draggable objects instead of a puzzle. For example, an alternative exercise could be a 'build a snowman' game and involve dragging a carrot nose, coal eyes, scarf, etc. to the right places on the snowman.

Create a folder named "exercise6" and save your files into this folder. From the p5.js editor, use the File > Download option to get a .zip file with all of your dependent files in it. Upzip that into your exercise6 folder. Lastly, upload your "exercise6" folder to your Lastname_First name folder on the MAT server. See FTP Info for the MAT Server for detailed instructions and video tutorials.

Links + Resources

p5.js Resources and Reference

JavaScript Resources and Reference

> Go to Top

Week 12 (11/6)

Topics + Learning Objectives

  • Exploring Game Programming with p5.js (continued)
  • The Puzzle Game (continued)
  • Browsing for Files or Adding Files via Drag and Drop
  • Creating a Shooting Game
  • Objects, Arrays, Animation, Collision Detection, Gabage Collection+
  • Introducing the p5.play library

Required Assignments + Tasks

VIDEOS + TUTORIALS (REQUIRED)

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

Exploring Game Programming - Making a Puzzle - Parts 1 - 13

  1. Week #11 Videos

Exploring Game Programming - Making a Puzzle - 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

  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)
  5. Parts 5 - 11 are assigned for next week

VIDEOS + TUTORIALS (OPTIONAL)

p5.js, HTML, CSS, and the DOM

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

Exercise #7: Game Exploration - SHooter (DUE 11/22)

Using p5.js, explore creating a simple clicking or shooting game. As demonstrated in the video tutorials (which you can follow along with to complete the basics of this exercise), create objects that display the "gun", the "target(s)", and the "bullets." Note, I put these in quotes to emphasize that your shooter game does not need to have a violent or militaristic theme. The "gun" could be a hand or a player, the "bullets" could be tomatoes or a hockey puck, and the "target" could be my face or goal posts to create a throw tomatoes at the teacher game or a hockey game (as examples).

Use keyboard or mouse input to allow the user to dynamically add "bullets" that animate in some way. Test for collisions against the target. While the class examples focus on a simple shooting game, you are welcome to fork the concept and/or add elements to enhance the game (score, graphics, sounds, timers, animations, ?).

Create a folder named "exercise7" and save your files into this folder. From the p5.js editor, use the File > Download option to get a .zip file with all of your dependent files in it. Upzip that into your exercise7 folder. Lastly, upload your "exercise7" folder to your Lastname_First name folder on the MAT server. See FTP Info for the MAT Server for detailed instructions and video tutorials.

Links + Resources

p5.js Resources and Reference

Collision Detection and Game/Play Libraries

  • P5 Play (2D Game Engine for p5.js with sprites, physics, collisions, + more)
  • Collide 2D (Collision Detection library)

> Go to Top

Week 13 (11/13)

Topics + Learning Objectives

  • Exploring Game Programming with p5.js (continued)
  • Creating a Shooting Game (continued)

Required Assignments + Tasks

VIDEOS + TUTORIALS (REQUIRED)

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

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

  1. Shooting Game in p5.js - Parts 1 - 4 in Week #12

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)

  1. Working with Game Controllers (20:14)
  2. Shooting Game in P5.js - Part 12 - Adding a Game Controller (13:17)

Links + Resources

p5.js Resources and Reference

Collision Detection and Game/Play Libraries

  • P5 Play (2D Game Engine for p5.js with sprites, physics, collisions, + more)
  • Collide 2D (Collision Detection library)

JavaScript Resources and Reference

> Go to Top

Week 14 (11/20)

Topics + Learning Objectives

  • Exploring Game Programming with p5.js (continued)
  • Creating a Flying Game
  • Animated Spritesheets

Required Assignments + Tasks

VIDEOS + TUTORIALS (REQUIRED)

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

Creating a sprite sheet (for 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)
  6. Parts 6 - 11 on the agenda for next week

Exercise #8: Game Exploration - FLYER (DUE 12/4)

Using p5.js, explore creating a simple flying game (or swimming or running game) that uses an animated spritesheet.

As mentioned in Week 8, create/design graphics for a character/object that can fly, swim, or run and jump and that is animated to show the source of its propulsion (such as animated wings, moving legs, fins, fire out of a rocket engine, or bubbles out of a bubble jet pack, etc.). The size of the character is up to you but it is recommended that you make it no larger than 200 x 200 pixels (so that it has room to move around). Generate a spritesheet for your animated character (by using Animate and/or Photoshop) that includes a neutral state (not moving) and animated frames (when in motion).

As demonstrated in the video tutorials (which you can follow along with to complete the basics of this exercise), make your character fly, swim, or run.

Use keyboard input to allow the user to control the movement (x, y position) of the object/character. Add physics (gravity, friction, thrust, wind resistance, etc.) to the movement to make it seem more natural. You may wish to also animate the background in relation to your character's movement.

While the class examples focus on a simple flying game, you are welcome to fork the concept and/or add elements to enhance the game (score, graphics, sounds, timers, challenges/goals, levels, etc.). Additionally, you may wish to use the p5.play library to make working with spritesheets easier.

Create a folder named "exercise8" and save your files into this folder. From the p5.js editor, use the File > Download option to get a .zip file with all of your dependent files in it. Upzip that into your exercise8 folder. Lastly, upload your "exercise8" folder to your Lastname_First name folder on the MAT server. See FTP Info for the MAT Server for detailed instructions and video tutorials.

Links + Resources

p5.js Resources and Reference

Collision Detection and Game/Play Libraries

  • P5 Play (2D Game Engine for p5.js with sprites, physics, collisions, + more)
  • Collide 2D (Collision Detection library)

JavaScript Resources and Reference

> Go to Top

Week 15 (11/27)

Topics + Learning Objectives

  • Exploring Game Programming with p5.js (continued)
  • Animated Backgrounds and Parallax Scrolling
  • Extending Games and Combining Techniques

Required Assignments + Tasks

VIDEOS + TUTORIALS (REQUIRED)

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)

Links + Resources

p5.js Resources and Reference

Collision Detection and Game/Play Libraries

  • P5 Play (2D Game Engine for p5.js with sprites, physics, collisions, + more)
  • Collide 2D (Collision Detection library)

JavaScript Resources and Reference

Index of Video Tutorials from the Class

> Go to Top

Week 16 (12/4)

Topics + Learning Objectives

  • Extending p5.js using libraries
  • The p5.play library
  • Focus on your final project

Required Assignments + Tasks

VIDEOS + TUTORIALS (REQUIRED)

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)

Links + Resources

p5.js Resources and Reference

p5.js Libraries for extending p5.js functionality

Collision Detection and Game/Play Libraries

  • P5 Play (2D Game Engine for p5.js with sprites, physics, collisions, + more)
  • Collide 2D (Collision Detection library)
  • p5 Party (Multiplayer Games)
  • q5.js (like p5.js but focused on a more performant graphics library)

JavaScript Resources and Reference

Index of Video Tutorials from the Class

> Go to Top

Finals Week (12/11)

Topics + Learning Objectives

The final day to turn in any work for grading consideration is Friday, 12/13. I cannot accept any work beyond this date.

> Go to Top