ICL
Search…
Week 04
Conditional Statements, Repeat Loops
https://youtu.be/YsIHQkeZy1Q
youtu.be

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

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

# Conditional Logic/ Control Structure

if something is true : Do this code
if something is not true : Don't do this code

TRUE
FALSE
1
0

5 > 8 : False
7 < 210 : True
<
>
=
Greater Than
Less Than
Equal To

# if statement

1
if (boolean expresssion here is true){
2
this code here exectutes
3
};
Copied!
1
if (1 < 8){
2
fill(255,0,0);
3
};
Copied!
1
if (mouseX > 100){
2
fill(255,0,0);
3
}
Copied!

## Computer Language != Mathematical Expression

1
var x = 90; // Assignment
2
if (x == 90); // Conditional Expression
Copied!
Greater Than
Less Than
Equal To
Not Equal To
Greater Than
or Equal To
Less Than or
Equal To
<
>
=
<
>
==
!=
<=
>=
+
×
÷
+
-
*
/

# if-else statement

1
if( something is true){
2
execute this code
3
}
4
else{
5
execute this code
6
}
Copied!
1
if (mouseX > 100){
2
fill(255,0,0);
3
}
4
else
5
{
6
fill(0,0,255);
7
}
Copied!

## if - else if - else if statement

1
if (mouseX > 150){
2
fill(255,0,0);
3
}
4
else if(mouseX >120) // 1 else if
5
{
6
fill(255,0,255);
7
}
8
else if(mouseX >50) // 2 else if
9
{
10
fill(0,0,0);
11
}
12
else
13
{
14
fill(255,255,255);
15
}
Copied!

## if - if - if statement

1
if (mouseX > 150){
2
fill(255,0,0);
3
}
4
if(mouseX >120) // 1 else if
5
{
6
fill(255,0,255);
7
}
8
if(mouseX >50) // 2 else if
9
{
10
fill(0,0,0);
11
}
Copied!

## AND

### ​https://editor.p5js.org/kdoodoo/sketches/By4q0tx5X​

1
if (100 < mouseX AND mouseX < 200){ }
2
if (100 < mouseX && mouseX <200){ }
Copied!

### 100 < mouseX AND mouseX < 200

1
var x,y;
2
3
function setup() {
4
createCanvas(400, 400);
5
6
}
7
8
9
function draw() {
10
background(255,255,255);
11
stroke(50);
12
noFill();
13
14
if(100 < mouseX && mouseX < 200 ){
15
16
fill(255,0,210);
17
ellipse(200, 200, 50, 50);
18
19
}
20
21
}
Copied!

## OR

1
if (100 < mouseX OR mouseX < 200){ }
2
if (100 < mouseX || mouseX <200){ }
Copied!

### x < 0 OR x > height

1
var x = 0;
2
var y = 0;
3
var speed = 3;
4
5
function setup() {
6
createCanvas(400, 400); }
7
8
function draw() {
9
background(255,255,255);
10
stroke(50); noFill();
11
fill(255,0,210);
12
ellipse(200, y, 50, 50);
13
14
if(y < 0 || y > height ){
15
speed = speed * -1
16
}
17
y = y + speed; }
Copied!

# Repeat Loops

1
if(something is ture){
2
Do this code
3
}
4
// Happened ONCE and Move On!!
Copied!

## While ...하는 동안

1
while(something is true){
2
Do this code
3
}
4
//Continue this code over, over, onv and over...
Copied!

### Ellipses one by one....

1
function setup() {
2
createCanvas(400, 400);
3
}
4
5
function draw() {
6
background(220);
7
8
var x = 0; //local variable
9
10
ellipse(x,50,25,25);
11
x = x + 50;
12
13
ellipse(x,50,25,25);
14
x = x + 50;
15
16
ellipse(x,50,25,25);
17
x = x + 50;
18
19
ellipse(x,50,25,25);
20
x = x + 50;
21
22
}
Copied!

## While loop

### ​https://editor.p5js.org/kdoodoo/sketches/Bk90PLeq7​

1
var x = 0;
2
while(x < width){
3
ellipse(x,50,25,25);
4
x = x + 50;
5
}
Copied!

### While loop has 3 components:

• Initial Variable
1
var x = 0;
Copied!
• Boolean Condition Test
1
while(x < width)
Copied!
• Incremental Function
1
x = x + 50;
Copied!

## For Loop

1
for( var x = 0 ; x < width ; x = x + 50){
2
}
Copied!
1
function setup() {
2
createCanvas(400, 400);
3
}
4
5
function draw() {
6
background(220);
7
8
for( var x = 0 ; x < width ; x = x + 50){
9
ellipse(x,50,25,25);
10
}
11
}
Copied!

1
x = x + 50
2
x += 50
Copied!
1
x = x + 1
2
x++
Copied!

## For - For Loops

### ​https://editor.p5js.org/kdoodoo/sketches/HJnQTLeq7​

1
for( var x = 20 ; x < width ; x = x + 50){
2
for( var y = 20; y < height; y += 50){
3
ellipse(x,y,20,20);
4
}
5
}
Copied!

# Assignment

Make a sketch using both Conditional Statements and Repeat Loops.