# Signing Coders #2

The second day of Signing Coders:)
Today, Claire, Yeseul, Michael will be teaching with me. Renata will be documenting the class, and Adrienne Kearney will be interpreting the workshop into ASL. Review on last week‘s class. We will be using P5.JS, a JavaScript toolkit very similar to Processing. Browse the P5.JS website to find more information.

First, let’s play a game! wooo wooo wooo
Relational Operators This game is about logical and comparison operators. Game play video. I designed the game with help of Michael and Yeseul specifically for the Signing Coders workshop.

How to play Operators

Number of Players: 2

Length of Single Game: ~10 Minutes

What you need:

1 Six-Sided Operator Die

20 Playing Cards

• 4 ‘Zero’ Cards
• 4 ‘One’ Cards
• 4 ‘Two’ Cards
• 4 ‘Three’ Cards
• 4 ‘Four’ Cards Process:

1. Shuffle Deck
2. Each player is dealt 5 cards from the top of the deck.
3. One player flips a coin while the coin is in the air the second player guesses which face the coin will land on. The winner becomes Player 1, the other player is Player 2.
4. Player 1 begins the game by rolling the die.
5. Player 2 responds to Player 1’s roll by choosing a card from their hand that they feel will make the equation most difficult for the other player to make TRUE.
6. Player 1 then responds to Player 2’s play by trying to make the equation a TRUE statement.
7. If the result of Player 1’s play is a TRUE equation, Player 1 wins the round and takes both cards.
8. If Player 1 is unable to make the equation true, they must select a card from their hand that they will forfeit to the other player.
9. This process is repeated until one of the players has collected all the cards.
10. The player holding all the cards is declared the winner for this round.

Relational operators can be very useful for coding complex behaviors. If, Else, and If/Else Statements! If, else and else if are used to make conditionals. Think of them like a road sign.

If StatementsIf the test is true, you can get a cheese burger. If the test is false, you don’t get anything.

If the test is true, do this. If the test is false, don’t do this. In this example, if mouseX is greater than 200, the fill will be changed to 0. If x is less than 200, the statement will test false and the fill will not change to 0.

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

function draw() {
background(255);
ellipse(100, 100, 100, 100);
if (mouseX > 50) {
fill(0);
ellipse(100, 100, 100, 100);
}
}
```

If / else, you can get a veggie burger.

If the test is true do this. Otherwise do this.

This means the sketch will carry out the else statement while the if statement is false. When the if statement tests true the if statement will be carried out.

In this case, if mouseX is greater than 200, the rectangle will be changed to an ellipse. Otherwise, the rectangle will remain the same because of the else statement. ```
function setup() {
createCanvas(200, 200);
}

function draw() {
background(255);
if (mouseX > 50) {
ellipse(100, 100, 100, 100);
} else {
rect(100, 100, 50, 50);
}
}
```

If and else if. You get a burger and also fries.

If the first test is false, test another condition. Now let’s use the conditionals to draw an image that changes colors and shapes according to your mouse’s position.

```
function setup() {
createCanvas(400, 400);
strokeWeight(4);
}

function draw() {
background(255);
if (mouseX > 300) {
ellipse(200, 200, 100, 100);
} else if (mouseX > 200) {
rect(200, 200, 100, 100);
} else if (mouseX > 100) {
line(0, 0, width, height);
} else {
point(200, 200);
}
}
```

Arithmetic operators Most basic and important math.

= Assignment: Assigns a value to variable. For instance, when we type var i = 0 we are saying “assign the value of 0 to variable i.”

– Subtraction: Subtract one value from another.

In this example, we are using addition and subtraction to change the location of a line(). The green line (100, 100, 300, 300) is created by simply entering values. The purple line uses addition and subtraction to alter the locations of the points. Experiment by adding and subtracting values to change the direction and slope of the lines!

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

function draw() {
stroke(0, 255, 0);
line(100, 100, 200, 200);
stroke(255, 0, 200);
line(150 + 50, 100 + 50, 100 - 50, 100 - 50);
}
```

* Multiplication: Multiply a value by another.
/ Division: Divide a value by another.

In this example, we are using multiplication and division to change the location of a line(). Change the values to explore multiplying and dividing values!

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

function draw() {
stroke(0, 255, 0);
line(100, 100, 200, 200);
stroke(255, 0, 200);
line(3 * 50, 1 * 50, 100 / 5, 100 / 2);
}
```

Shortcuts!
i= i+1
is the same as
i +=1
i ++

Let’s use the conditionals and arithmetic operators to make a drawing that draws automatically.

# Variables

Variables could be thought of as a small box where numbers live. A variable can hold different values. This allows parts of our code to change dynamically. In the above illustration, we can think of a variable as a paint bucket. A bucket and a variable are both capable of holding different amoutns or values! The illustration depicts a statement, which is a standalone instruction to the computer!

Statements are separated by semicolons.

We can break down the statement into three parts…

Part 1

`for var i=0;`
This is just setting up a for loop and assigning the value of zero to the variable i.

Part 2
`i <10;`
All this is saying is that while variable i is less than 10, the for loop will be carried out.

Part 3
`i+=1;`
This may seem tricky but it’s really not so difficult.. The syntax +=1 means to add 1 to the variable i until Part 2 (the for loop) is no longer true. In this case we are adding 1 to i until it reaches the value of 10!

A post shared by Taeyoon Choi (@drwngdrwng) on

In this example we will create a variable i that equals 0. In setup() we will add 100 to i. In draw() the ellipse’s x position will be set to i (which is now 100.) You can see that the y position of the ellipse is i-20. This shows that you can use addition and subtraction with a variable in setup or draw. Also note that you can print the value of a variable in the console using the println() Try adjusting the values below to place the ellipse in different locations on the canvas!

```
var i = 0;

function setup() {
createCanvas(200, 200);
i = i + 100;
println(i);
}

function draw() {
ellipse(i, i - 20, 10, 10);
}
```

Just like the addition/subtraction example above, multiplication and division can be used with values, variables, and even built-in functions such as height and width. In this case we are assigning the value of 10 to i and then multiplying it by 10 to get a value of 100. We are assigning the x location of an ellipse to i and the y location to the canvas width divided by 2!

```
var i = 10;

function setup() {
createCanvas(200, 200);
i = i * 10;
println(i);
println(width / 2);
}

function draw() {
ellipse(i, width / 2, 10, 10);
}
```

For Loops

A post shared by Taeyoon Choi (@drwngdrwng) on

Hamster wheel demo!

function draw() and a for loop are different.
function draw() loops forever until stopped, and for loop runs while conditional statements are true. Loops are handy, if you want to run the same code over and over again, each time with a different value. We can use a for loop to draw many things at once. This is an image of Spots, a painting by Damien Hirst. Let’s make it by using code…

```
function setup() {
createCanvas(400, 400);
noLoop();
}

function draw() {
noStroke();
for (var i = 0; i < width; i += 20) {
for (var j = 0; j < height; j += 20) {
fill(random(0, 255), random(0, 255), random(0, 255));
ellipse(i, j, 10, 10)
}
}
}
```

Notice there's noLoop(); in the setup. It helps us to draw the spots only once. Try commenting out the noLoop() to see what happens.

Now, let's get crazy and make our own galaxy. Try writing this code on your desktop editor.

```
function setup() {
createCanvas(400, 400)
frameRate(10)
}

function draw() {
background(0);
noStroke();
for (var i = 0; i < width; i += random(100, 120)) {
for (var t = 0; t < height; t += random(100, 120)) {
fill(random(0, 250), random(0, 250), random(0, 250));
ellipse(i - t / 5, t - i / 5, 5 - i / random(1, 100), 4 - i / random(1, 100));
}
}
}
```