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).

sketch

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” (&&)?

sketch

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?

sketch

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?

sketch

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?

sketch

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?

sketch

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.

sketch

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);
}