# Week 2

## Sep 5

### Reminders and Notes

From now on, 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 7

### 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`.

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

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