Skip to Navigation | Skip to Content

MAT 175 - Web Design - JavaScript + jQuery

Menu

Class Schedule

Week 1 (8/19)

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

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, and alpha 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/26)

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

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

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

Week 4 (9/9) - PREVIEW

UPCOMING Topics + Learning Objectives

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

UPCOMING VIDEOS + TUTORIALS (IF YOU WANT TO WORK AHEAD)

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)