Starting Interaction
Starting Interaction
We've looked at how to animate using variables.
Let's see how we can change the values
through interaction with the user.
Completed
Basics of HTML & CSS
Block-based Programming
Code Comments
Basics of Animation
Today
More P5.js
Starting interactivity; responding to mouse position
Upcoming
More P5.js
More JavaScript
Part 1: Setup for MouseX
We'll start by going over some of the basics, including how to use MouseX. We will start with how to gradually lighten or darken the value of the background in relation to where your mouse cursor is on the x-axis of the canvas.
Part 2: Adding MouseY
There's also a MouseY built-in variable. Let's make things more interesting by using it too.
Here's a short snippet from one of the professor's at UCLA, showing how you can add conditional statements to make drastic changes, instead of gradual. He also show's how to add interaction based on mouse clicks, not just movement. We'll use some of these concepts later this week too.
On your slide for today, add a video showing experiments with the mouseX and mouseY built-in variables.