Syntax fyrir skilyrðissetningar

Skilyrðissetning hefur formið:

if(skilyrði){ skipanir }

Ef að skilyrðið innan svigans er satt eru allar skipanir innan slaufusviganna framkvæmdar. Dæmi:

if(mouseX>200){ 
  ellipse( mouseX, mouseY, 50, 50); 
  }

Ef músin er 200 pixla eða lengra til hægri, er teiknaður hringur með miðju í staðsetningu músarinnar.

Hér er myndband frá Daniel Shiffman um skilyrðissetningar.

Bolti á ferð

Draw er í raun lúppa. Í forritinu hér fyrir neðan er bætt við x gildið í hvert skipti sem farið er í gegn um draw. Boltinn er teiknaður í staðsetningunni x og þess vegna er eins og hann færist yfir skjáinn. Smelltu músinni til þess að fá boltann aftur á upphafspunkt.

var x = 0;

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

function draw() {
  background(115);
  fill(0,0,200);
  //hringur teiknaður í x, 100:
  ellipse(x, 100, 50,50);
  //hringur færist um 1 til hægri 
  //í hvert skipti sem farið er í gegn um draw:
  x = x+1;
}

Skilyrðissetning snýr boltanum við

Kóðinn hér fyrir neðan gerir nákvæmlega það sama og kóðinn hér fyrir ofan. Eini munurinn er að nú hefur verið búin til breytan xSpeed sem ákvarðar hversu mikið x eykst í hverju skrefi:

//x og xSpeed eru breytur (variables).
// x byrjar í 0 (vinstra megin á skjánum) en færist um 5 í hverju skrefi
var x = 0;
var xSpeed = 1;

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

function draw() {
  background(115);
  fill(0,0,200);
  ellipse(x, 100, 50,50);
  x = x + xSpeed;
}

Þegar boltinn er á leið til hægri er x að aukast. Þegar boltinn ferðast til vinstri er x að minnka. xSpeed þarf að vera jákvæð tala þegar boltinn er á leið til hægri, en neikvæð tala þegar boltinn er á leið til vinstri. Það getum við gert með því að breyta formerkinu á xSpeed þegar boltinn er kominn út á enda. Bæta þarf eftirfarandi línum við inn í draw fallinu:

  //ef boltinn er kominn út á enda hægra megin á hann að snúa við
  
  if(x > width){
    xSpeed = -1*xSpeed;
  }
  
  //ef boltinn er kominn út á enda vinstra megin á hann líka að snúa við!
  if(x < 0){
    xSpeed = -1*xSpeed;
  }
  
}

Hér er myndbandið "bouncing ball" frá Daniel Shiffman.

Bolti hreyfist í tveimur víddum

Í staðinn fyrir að hafa tvær if setningar, getum við haft eina. Við viljum að boltinn snúi við ef x>width, eða ef x < 0. Þetta má skrifa sem:

  if (x > width || x < 0 ) { 
  	xSpeed = xSpeed * -1; 
  }

Ef við viljum að eitthvað tvennt sé satt skrifum við && (OG) en ef það nægir að annað af tveimur sé satt skrifum við || (EÐA) . Til að boltinn hreyfist í tveimur víddum, þarf að bæta við breytu fyrir y og y-hraða:


var x = 0; 	var y = 0;
var xSpeed = 1; var ySpeed = 2; 

function setup() {createCanvas(500,200);}
 
function draw() { 
  background(115); 
  fill(0, 0,200); 
  ellipse(x, y, 50, 50); 
  x = x + xSpeed;
  y = y +ySpeed;

  if ((x > width) || (x < 0)) { 
  	xSpeed = xSpeed * -1; 
  } 
  
  if ((y > height) || (y < 0)) { 
  	ySpeed = ySpeed * -1; 
  } 
 
}

Boltinn fær hröðun

Þegar hlutur fellur eykst hraði hans stöðugt á meðan hann er að falla, þar til lokahraða hans er náð. Þessu getum við náð fram með því að bæta við xSpeed í hverju skrefi:

   var gravity = 0.15 //þetta fer efst. Passið að hafa punkt en ekki kommu!
   ySpeed = ySpeed + gravity; //þessi lína fer inn í draw.

Þegar hluturinn er á leið niður verður ySpeed alltaf stærri og stærri tala. Þegar hluturinn er á leið upp er xSpeed neikvætt, en gravity er jákvætt þannig að hluturinn hægir á sér á leið upp. Við gætum líka viljað bæta við kóða þannig að hluturinn skoppi alltaf aðeins lægra í hvert sinn. Ef við margföldum með -0.9 í stað -1 mun hluturinn snúa við á endunum en hægja aðeins á sér við hvert "skopp". Þú getur sett hann aftur af stað með því að smella músinni.

var x = 0; 	var y = 0;
var xSpeed = 2; var ySpeed = 0; 
var gravity = 0.15;

function setup() {createCanvas(500,200);}
 
function draw() { 
  background(115); 
  fill(0, 0,200); 
  ellipse(x, y, 50, 50); 
  x = x + xSpeed;
  y = y +ySpeed;
  ySpeed = ySpeed+gravity;
  
  if ((x > width) || (x < 0)) { 
  	xSpeed = xSpeed * -1; 
  } 
  
  //til að láta boltann skoppa þegar neðri rönd snertir
  //skjáinn þarf að draga 25 frá height, því þvermál
  //boltans er 50.
  if (y > (height-25)) { 
  	ySpeed = ySpeed * -0.9;
  	y = height-25; //til að boltinn festist ekki 
  } 
 
}

Skilaverkefni

Teiknið veru sem hreyfist um skjáinn. Fígúran ætti að nýta endShape og beginShape, en má að auki innihalda fleiri form. Fígúran ætti að vera teiknuð um x og y breyturnar, sem svo hreyfast um skjáinn. Upplýsingar um hvernig má nota endShape og beginShape er að finna í hlutanum um flóknari form og breytur .

Aukaverkefni: nota for lúppu til þess að teikna margar verur sem hreyfast um skjáinn.