Week 2

Sep 4

Reminders and Notes

All posts (looking outward, projects) need to have 2 categories: one for the assignment, and one for your section.

Variables and Assignment Review

A variable is a container that holds a value.

When you write a variable in an expression, JavaScript pulls the value out of the container and uses it. Example: mouseX < (width / 2) uses the values of 2 variables.

You can set the value saved in the container when you create the variable:
var boxWidth = 50;

You can change the value saved in the container with assignment:
boxWidth = 60;

Note that here, “=” does not mean “equals” — it means “compute the value of the expression on the right and store it in the variable on the left.”

Exercise: Rewrite the following to make the location of the box boxX and boxY by making and initializing variables boxX and boxY at the top of your program (before setup);
sketch

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

function draw() {
    background(0);
    rect(50, 50, 60, 60);
}

Motion

What does boxX = boxX + 1; mean?

Exercise: Add the code line above to your box program (from above) and see what happens.

Exercise: Add a conditional (if) with an assignment to boxX so that when boxX goes off the screen (compare boxX to width), the box is moved back to the left side of the screen.

Examples to Study

Explain the following. When does the ball change direction? What is the initial value of dir? What is the value of dir after the first bounce? What is the value of dir after the second bounce? What would you do to make the ball go faster or slower? Why does the code multiply dir * speed?
sketch

var x = 300;
var dir = 1;
var speed = 5;

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

function draw() {
  background(0);
  ellipse(x, height/2, 50, 50);

  x += dir * speed;
  if (x > width - 25 || x < 25) {
    dir = -dir;
  }
}

Explain the following. When does the ball change size? What variable controls the size?
sketch
Note about this code: Why does the code set diam to 400 or 0 when the direction changes? You would think if the diameter is > 400 and you change direction, then on the next iteration, the diameter will have to be <= 400. But math is not always exact in JavaScript. This example did not work on Chrome until I explicitly set the diam variable when the direction reverses.

var dir = 1;
var speed = 5;
var diam = 50;

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

function draw() {
    background(0);
    ellipse(width/2, height/2, diam, diam);

    diam += dir * speed;
    if (diam > 400) {
        dir = -dir;
        diam = 400;
    } else if (diam < 0) {
        dir = -dir;
        diam = 0;
    }
}

Explain the following. What happens (in the code) when the ball reaches the right edge? How is this different from the previous examples? How would you make the ball go right-to-left instead of left-to-right?
sketch

var x = 0;
var speed = 1;

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

function draw() {
  background(0);
  ellipse(x, height/2, 50, 50);

  x += speed;
  if (x > width + 25) {
    x = -25;
  }
}

Sep 6

Global Variables

Do not call p5js functions to initialize global variables!

min, max, constrain

In this program, we have taken our simple program that moves an ellipse to the mouse position and used min() and max() in order to cap off the movement of the ellipse. Here’s an example using the min function to limit how high x can be, i.e. how far to the right we can drag the circle.
usemin

function setup() {
    createCanvas(200, 200);
    frameRate(10);
}

function draw() {
    background(200);
    fill(255); // white
    rect(50, 50, 100, 100); // just for reference
    fill(0); // black
    var x = min(mouseX, 150); // upper limit of x is 150
    ellipse(x, mouseY, 30, 30);
    print(mouseX.toString() + " " + mouseY.toString());
}

Exercise: Modify the code so that the entire ball stays inside the box right edge.

Exercise: Modify the code so that the entire ball stays inside the box bottom edge.

Exercise: Modify the code using max(mouseX, ???) to keep the entire ball inside the left edge of the box.

Finally, we replace min and max with constrain, a handy function that limits a value between lower and upper bounds. In this example, we constrained the Y motion as well as the X motion. Notice the two different styles. For the X axis, we make a variable x, compute a value in terms of mouseX, and then pass x as a parameter to ellipse. For the Y axis, we take advantage of the fact that function calls can be nested. We pass the result of the constrain function directly as the Y parameter to ellipse.

constrain

function setup() {
    createCanvas(200, 200);
    frameRate(10);
}

function draw() {
    background(200);
    fill(255); // white
    rect(50, 50, 100, 100); // just for reference
    fill(0); // black
    var x = constrain(mouseX, 50, 150);
    ellipse(x, constrain(mouseY, 50, 150), 30, 30);
    print(mouseX.toString() + " " + mouseY.toString());
}

Using print()

We may not have talked about this much but print statements are an essential tool for debugging your code. You can print any message or value that you want to the browser console in order to make sure the values you are generating are correct or checking where in your code that an error might appear.

Just as a reminder, this is how you see your console in the browser (works on Firefox, Chrome, Safari):

1. Right click and select “Inspect Element”
2. Navigate to the “Console” tab

In the min() example, we have a print function call at the bottom to display the values of the ellipse position.

Exercise: Use the command print("Hello, world!") to print the message “Hello, world!” to the console.

Exercise: Print mouseX using print(mouseX.toString()).

Exercise: Use the + operator for string concatenation to print mouseX in the form “mouseX is 120”.

Random Lines

Explain this program. What are the basic cells? How does the program draw a row? How does the program advance from row to row? How does the program “know” when to redraw a new screen. How does it make a “blank canvas” to get a clean start?
sketch

var x = 0;
var y = 0;

function setup() {
  createCanvas(400, 400);
  background(255);
}

function draw() {

  if (random(1) > 0.5) {
    line(x, y, x+20, y+20);
  } 
  else {
    line(x, y+20, x+20, y);
  }


  x += 20;
  if (x > width) {
    x = 0;
    y += 20;
  }

  if (y > height) {
    background(255);
    x = 0;
    y = 0;
  }
}

Fadeout

Click below in the canvas to see this program in action. Explain this program. What variable controls the color of the canvas? If you do not click for a long time, what color or grayscale value is used? Is there something odd about this?
sketch

var bright = 0;

function setup() { 
  createCanvas(640,360); 
} 

function draw() { 
    if (mouseIsPressed) {
        bright = 0;
    }
    background(bright);
    bright = bright + 1;
}