Week 04

Conditional Statements, Repeat Loops

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

Was there IoT in 2009??

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

Boolean Expression (George Boole) : True / False

Relational Operator

5 > 8 : False

7 < 210 : True

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 

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

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

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 

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

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 

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

PreviousWeek 03NextWeek 05

Last updated