# Week 3

This week, lectures will be given by Golan Levin (Mon/Wed) and Phil Miller (Fri). These note may or may not be followed.

## Sep 12 – More Interactive Programs

### mousePressed()

Click in the circle (or not).

Explain: How does the program know if you clicked inside the circle? How does clicking change the background color — trace the flow of information in the program. What would happen if `background()` were called in `setup()`?
sketch

``````var x = 150;
var y = 100;
var d = 25;
var g = 0;

function setup() {
createCanvas(300, 200);
}

function draw() {
background(g);
ellipse(x, y, d, d);
}

function mousePressed() {
if (dist(mouseX, mouseY, x, y) < d/2) {
g += 30;
}
}
``````

### Button LEFT and RIGHT

Click with the left and right mouse buttons (on Macs, right click is usually done by holding down the control key while you click.) Whether or not right-clicks are delivered to JavaScript is browser-dependent, so right click may just cause the browser to pop up a menu.

Explain the difference between `mousePressed()` (above) and `mouseIsPressed` (in this example).

``````function setup() {
createCanvas(120, 120);
strokeWeight(30);
}

function draw() {
background(204);
stroke(102);
line(40, 0, 70, height);
if (mouseIsPressed) {
if (mouseButton == LEFT) {
stroke(255);
} else {
stroke(0);
}
line(0, 70, width, 50);
}
}
``````

### Mouse Guide

Explain how this program works. There are basically one binary decision to make: What is it? Explain how `offset` is used.
sketch

``````var x;
var offset = 10;

function setup() {
createCanvas(240, 120);
x = width/2;
}

function draw() {
background(204);
if (mouseX > x) {
x += 0.5;
offset = -10;
}
if (mouseX < x) {
x -= 0.5;
offset = 10;
}
line(x, 0, x, height);
line(mouseX, mouseY, mouseX + offset, mouseY - 10);
line(mouseX, mouseY, mouseX + offset, mouseY + 10);
line(mouseX, mouseY, mouseX + offset*3, mouseY);
}``````

Exercise: Make a “lamp” you can turn on and off with mouse clicks like this (click in the canvas to see it work).
sketch

## Sep 14

### Mouse Inside?

Explain how this example works. There are 4 comparison tests. Why? What would happen if you used “or” (`||`) instead of “and” (`&&`)?

``````var x = 80;
var y = 30;
var w = 80;
var h = 60;

function setup() {
createCanvas(240, 120);
}

function draw() {
background(204);
if ((mouseX > x) & (mouseX < x+w) &&
(mouseY > y) && (mouseY < y+h)) {
fill(0);
} else {
fill(255);
}
rect(x, y, w, h);
}
``````

### keyIsPressed

Try pressing a key after selecting the canvas below. Explain how the key is detected.
sketch

``````function setup() {
createCanvas(240, 120);
}

function draw() {
background(204);
line(20, 20, 220, 100);
if (keyIsPressed) {
line(220, 20, 20, 100);
}
}
``````

### key Input

Try typing a key after selecting the canvas below. What is the value of the variable `key`. What is its type? Is it a number? When does it change? What is the value of `key` immediately after you press a key and then immediately after you release the key?
sketch

``````function setup() {
createCanvas(120, 120);
textSize(64);
textAlign(CENTER);
}

function draw() {
background(255);
text(key, 60, 80);
}
``````

Exercise: Modify the program in keyIsPressed (above) to act differently depending on which key is pressed.

### Counting

Exercise: Make a program to count how many times the canvas has been “clicked.” Depending on whether the answer is 0, 1, or 2, set the background to different colors. Hint: start with the program above from Monday, Sep 12 under mousePressed().

## Sep 16

### Drag and Drop

Try the program below (drag the dot with the mouse). Explain how it works. When does `dragging` get set and reset? What happens when `dragging` is true, and what happens when it is false? How does the program know where to draw the dot? Why doesn’t the program just draw the dot with mouseX and mouseY?

``````var x = 200;
var y = 200;
var diameter = 5;

// this variable keeps track of whether circle should drag or not
var dragging = false;

function setup() {
createCanvas(400, 400);
fill(0);
}

function draw() {
background(255);

// if in dragging state, update x and y to follow mouse
if (dragging) {
x = mouseX;
y = mouseY;
}

// draw the ellipse at x,y position
ellipse(x, y, diameter, diameter);
}

// when mouse is pressed, check if click is inside circle
// if it is, set dragging state to true
function mousePressed() {
if (dist(x, y, mouseX, mouseY) < diameter/2) {
dragging = true;
}
}

// whenever mouse is released, return draging state to false
function mouseReleased() {
dragging = false;
}
``````

### Key is H or N

Type h or H or n or N into the canvas below. Explain how the program works. When does the program “discover” you have typed a letter? Immediately, or when something else happens? Why does the program test `keyIsPressed` as well as the `key` value? How does the program “ignore” whether the key is upper or lower case?

``````function setup() {
createCanvas(120, 120);
}

function draw() {
background(204);
if (keyIsPressed) {
if ((key == 'h') || (key == 'H')) {
line(30, 60, 90, 60);
}
if ((key == 'n') || (key == 'N')) {
line(30, 20, 90, 100);
}
}
line(30, 20, 30, 100);
line(90, 20, 90, 100);
}
``````

### Mouse Lines

Try moving the mouse around in the canvas below. Explain how the gray line depends on the mouse. Explain how the black line depends on the mouse. How far left and right can the black line go?

``````function setup() {
createCanvas(240, 120);
strokeWeight(12);
}

function draw() {
background(204);
stroke(102);
line(mouseX, 0, mouseX, height);  // Gray line
stroke(0);
var mx = mouseX/2 + 60;
line(mx, 0, mx, height);  // Black line
}
``````

### More Mouse Lines

Try moving the mouse around in the canvas below. Explain how the white line depends on the mouse. Read about the `map()` function. Explain how the black line depends on the mouse. What is the range of x (horizontal) values of the endpoint that moves?

``````function setup() {
createCanvas(240, 120);
strokeWeight(12);
}

function draw() {
background(204);
stroke(255);
line(120, 60, mouseX, mouseY); // White line
stroke(0);
var mx = map(mouseX, 0, width, 60, 180);
line(120, 60, mx, mouseY); // Black line
}
``````

Exercise: Explain how the “easing” program below works. Modify the “easing” program below so that the speed of following the mouse is controlled by a variable. Try values of 0.2 (faster) and 0.01 (slower). For speedy workers: Add another ellipse that also follows the mouse, but which has a different rate of convergence.

``````var x = 300;
var y = 300;
var diffx = 0;
var diffy = 0;
var targetX = 300;
var targetY = 300;

function setup() {
createCanvas(600, 400);
}

function draw() {
background(0);
diffx = mouseX - x;
diffy = mouseY - y;
x = x + 0.1*diffx;
y = y + 0.1*diffy;
ellipse(x, y, 50, 50);
}
``````