03_interaction.md

Interaction: Conditionals

The videos in this section were created ~2 years ago. They use different editors 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.

Conditional Statements

• 3.1: Introduction to Conditional Statements - video tutorial
  • if statement
  • relational operators (>, <, <=, >=, ==, ===, !==)
• 3.2: Bouncing Ball - video tutorial
  • bouncing ball editor example
• 3.3: else, else if, AND (&&), OR (||) - video tutorial
• 3.4: Boolean variables - video tutorial
• Video Examples: 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 6 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