03_interaction.md

Interaction: Conditionals

The videos in this section were created using a different editor for p5.js. All of the concepts should still apply, however, there are some minor changes. Most notably in JavaScript let is now the preferred way to declare a variable over var. If you would like to learn more about this you can watch this video about let vs var.

Video Tutorials

• 3.1: Introduction to Conditional Statements
  • if statement
  • relational operators (>, <, <=, >=, ==, ===, !==)
• 3.2: Bouncing Ball | Sketch
• 3.3: else, else if, AND (&&), OR (||)
• 3.4: Boolean Variables
• Code Examples for Videos: 3.1-3.4

Getting Started with p5.js book

• Chapter 5 of Getting Started with p5.js book | Ebook (free with NYU Library login) | Code

GUI Interfaces

One way to practice working with conditionals is to try to code a common interface elements in the canvas: e.g. rollover, button, slider, etc. In week 7 we'll compare this technique to using elements the browser provides for free.

• circle rollover
• square rollover
• button hold down
• button switch
• quadrant rollover
• rollover with fade
• draggable
• knob
• slider