Forritun í p5 - flóknari form og breytur

Flóknari form - beginShape og endShape

Hægt er að búa til ný form með beginShape/endShape skipununum. Allir punktarnir sem að skilgreina formið eru tilgreindir með skipuninni vertex. Hér fyrir neðan er t.d. teiknuð stjarna með miðpunkt í 200,300.

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

function draw() {
  background(209, 255, 45);
  
  //teiknaStjörnu
  beginShape();
  fill(155, 92,0);
  vertex(200-50,300);
  vertex(200-10, 300-10);
  vertex(200,300-50);
  vertex(200+10,300-10);
  vertex(200+50,  300);
  vertex(200+10,300+10);
  vertex(200,300+50);
  vertex(200-10, 300+10);
  endShape();
}
  

Breytur

Ef að við viljum færa stjörnuna til er kóðinn hér fyrir ofan ekki hentugur, því nýja x eða y gildið þarf að skrá á svo mörgum stöðum. Hægt er að búa til breyturnar x og y til þess að ákvarða staðsetninguna:

 var x = 200;
 var y = 200;

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

function draw() {
  background(209, 255, 45);
  
  //teiknaStjörnu
  beginShape();
  fill(155, 92,0);
  vertex(x-50,y);
  vertex(x-10, y-10);
  vertex(x,y-50);
  vertex(x+10,y-10);
  vertex(x+50,  y);
  vertex(x+10,y+10);
  vertex(x,y+50);
  vertex(x-10, y+10);
  endShape();
}
 

Verkefni

Teikna skal fígúru með kóða sem notar breytur sem stýra útliti hennar. Notið kóðabútinn neðst í sýnikóðanum til þess að láta endurstilla breyturnar í hvert sinn sem músinni er smellt. Dæmi um einfalda lausn gæti verið að teikna andlit:

  var eyeSize = 20; 
  var faceWidth = 100; 
  var faceHeight = 150; 
  var x = 150; 
  var y = 150;
 
  function setup(){
    createCanvas (300,300); 
  }
 
  function draw(){
    background(180); 
    ellipse(x, y, faceWidth, faceHeight); 
 
    //.....kóði sem staðsetur augun m.v. x, y, faceWidth og faceHeight
    
  }
  
  function mousePressed(){
    //Í hvert sinn sem músinni er smellt fá breyturnar ný gildi.
    faceWidth  = random(75,  150); 
    faceHeight = random(100, 200); 
    eyeSize    = random(10,  30); 
}
 
face

Þegar einföld andlitsmynd er farin að virka er hægt að bæta við formi með beginShape/endShape t.d. fyrir hárið og jafnvel bæta við kúrvum fyrir nefið, bæta við augabrúnum eða annað slíkt. Hægt er að bæta við breytum til að stýra litum.

Andlitið ætti að hafa að minnsta kosti 4 atriði sem breytast þegar smellt er. Hugmynd og gif tekin héðan: http://cmuems.com/2015c/deliverables/deliverables-02/ .