# Week 04

{% embed url="<https://youtu.be/YsIHQkeZy1Q>" %}

### Back Then Schematic  >>>  Now Faster to Prototype!  >>> Real World!

### Was there IoT in 2009??

{% embed url="<https://youtu.be/M66ZU2PCIcM>" %}

### Conditional Statements

How does computer language make different decision? So far we learned **setup() : something happens at the start, draw(): something same event happens over and over.** Also we  learned event function like : **mousepressed.** &#x20;

### Something changes over time.

Today we want to learn something that happens different from previous event. For example, the color of the ellipse changes after one draw, the position of the rectangle change over based on the position of the user's mouse.&#x20;

## Conditional Logic/ Control Structure

if something is true : Do this code&#x20;

if something is  not true : Don't do this code&#x20;

### Boolean Expression ([George Boole](https://en.wikipedia.org/wiki/George_Boole)) : True / False

![](/files/-LNhaZQYVyil7Vsot0jT)

![](/files/-LNhaksWJ153WjETCWdR)

| TRUE | FALSE |
| ---- | ----- |
| 1    | 0     |

### Relational Operator

5 > 8 : False

7 < 210 : True

| <            | >         | =        |
| ------------ | --------- | -------- |
| Greater Than | Less Than | Equal To |

## if statement

```
if (boolean expresssion here is true){
    this code here exectutes
};
```

```
if (1 < 8){
   fill(255,0,0);
}; 
```

```
if (mouseX > 100){
    fill(255,0,0);
}       
```

#### <https://editor.p5js.org/kdoodoo/sketches/HJ-xqZyc7>

### Computer Language != Mathematical Expression&#x20;

```
var x = 90; // Assignment
if (x == 90); // Conditional Expression
```

| Greater Than | Less Than | Equal To | Not Equal To | <p>Greater Than </p><p>or Equal To</p> | <p>Less Than or </p><p>Equal To</p> |
| ------------ | --------- | -------- | ------------ | -------------------------------------- | ----------------------------------- |
| <            | >         | =        | ≠            | ≤                                      | ≥                                   |
| <            | >         | ==       | !=           | <=                                     | >=                                  |

| + | ‒ | ×  | ÷ |
| - | - | -- | - |
| + | - | \* | / |

### In-class

#### Let's make it bouncing!     Console.log()

#### <https://editor.p5js.org/kdoodoo/sketches/SJ17zE19Q>

#### Working Great!

## if-else statement

```
if( something is true){
    execute this code
}
else{
 execute this code
}
```

```
if (mouseX > 100){
 fill(255,0,0);
 }
 else
 {
 fill(0,0,255);
 }
```

#### <https://editor.p5js.org/kdoodoo/sketches/H1Ybrsk9X>

### if - else if - else if statement

```
if (mouseX > 150){
 fill(255,0,0);
 }
 else if(mouseX >120) // 1 else if
 {
 fill(255,0,255);
 }
 else if(mouseX >50) // 2 else if
 {
 fill(0,0,0);
 }
 else
 {
 fill(255,255,255);
 }
```

#### <https://editor.p5js.org/kdoodoo/sketches/Bk3fDjycm>

### if - if - if statement

```
if (mouseX > 150){
 fill(255,0,0);
 }
 if(mouseX >120) // 1 else if
 {
 fill(255,0,255);
 }
 if(mouseX >50) // 2 else if
 {
 fill(0,0,0);
 }
```

### AND&#x20;

#### <https://editor.p5js.org/kdoodoo/sketches/By4q0tx5X>

```
if (100 < mouseX AND mouseX < 200){ }
if (100 < mouseX && mouseX <200){ }
```

#### 100 < mouseX AND mouseX < 200

```
var x,y;

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


function draw() {
  background(255,255,255);
  stroke(50);
  noFill();
  
  if(100 < mouseX && mouseX < 200 ){  
    
  fill(255,0,210);
  ellipse(200, 200, 50, 50);

  }

}
```

### OR

```
if (100 < mouseX OR mouseX < 200){ }
if (100 < mouseX || mouseX <200){ }
```

#### x < 0  OR  x > height  &#x20;

```
var x = 0;
var y = 0;
var speed = 3;

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

function draw() {  
  background(255,255,255);  
  stroke(50);  noFill();    
  fill(255,0,210);  
  ellipse(200, y, 50, 50); 
  
  if(y < 0 || y > height ){      
    speed = speed * -1  
  }  
   y = y + speed; }
```

#### <https://editor.p5js.org/kdoodoo/sketches/H1Y3DjJ5X>

## Repeat Loops

```
if(something is ture){
   Do this code
}
// Happened ONCE and Move On!!
```

### While ...하는 동안

```
while(something is true){
  Do this code
}
//Continue this code over, over, onv and over...
```

#### Ellipses one by one....&#x20;

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

function draw() {
  background(220);
  
  var x = 0; //local variable
  
  ellipse(x,50,25,25);
  x = x + 50;
  
  ellipse(x,50,25,25);
  x = x + 50;

  ellipse(x,50,25,25);
  x = x + 50;

  ellipse(x,50,25,25);
  x = x + 50;

}
```

### While loop

#### <https://editor.p5js.org/kdoodoo/sketches/Bk90PLeq7>

```
var x = 0; 
while(x < width){
    ellipse(x,50,25,25);
    x = x + 50;
}
```

#### While loop has 3 components:

* Initial Variable&#x20;

```
var x = 0; 
```

* Boolean Condition Test

```
while(x < width)
```

* Incremental  Function

```
 x = x + 50;
```

### For Loop

```
for( var x = 0 ; x < width ; x = x + 50){ 
}
```

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

function draw() {
  background(220);
  
for( var x = 0 ; x < width ; x = x + 50){
  ellipse(x,50,25,25);    
  }
}
```

#### <https://editor.p5js.org/kdoodoo/sketches/B1EHdUlqX>

#### Incremental Methods

```
x = x + 50
x += 50
```

```
x = x + 1
x++
```

### For - For Loops

#### <https://editor.p5js.org/kdoodoo/sketches/HJnQTLeq7>

```
for( var x = 20 ; x < width ; x = x + 50){
  for( var y = 20; y < height; y += 50){
    ellipse(x,y,20,20);    
  }
 }
```

####

## Assignment

Make a sketch using both **Conditional Statements** and **Repeat Loops.**

#### <https://goo.gl/forms/PcRNuwlkt3quGLng2>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://icl.doyoki.com/week-04.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.