Gagnvirkni - mousePressed og keyPressed

Föllin mousePressed() og keyPressed() er hægt að nota til þess að búa til gagnvirk forrit. Það er kallað á mousePressed ef músinni er smellt, en það er kallað á keyPressed ef ýtt er á lykil á lyklaborðinu.

Í forritinu hér fyrir neðan er ætlunin að búa til hnapp. Hnappurinn er hringur, staðsettur á miðjum skjánum. Bakgrunnsliturinn breytist ef að notandinn smellir innan hringsins, en ekki ef hann smellir utan hans. Liturinn á hnappnum fer líka eftir því hvort músin er yfir hnappnum.

Í p5 er innbyggt fall sem heitir dist . Eins og nafnið gefur til kynna, reiknar dist fjarlægðina(distance) á milli tveggja punkta. Við byrjum á að reikna fjarlægðina á milli músarinnar sem er í mouseX, mouseY og miðju hringsins sem er í circleX og circleY:

   var distance = dist(mouseX, mouseY, circleX, circleY);

Þegar fjarlægðin hefur verið reiknuð er hægt að skoða hvort að hún er minni en circleR sem er radíus hringsins:

   if(distance < circleR) { ... }

Hér fyrir neðan sést allur kóðinn.

//circleX, circleY og circleR eru breytur sem tilheyra hnappnum
var circleX;
var circleY;
var circleR;
// R segir til um hversu mikið rautt er í bakgrunninum.
var R;

function setup() 
{
  createCanvas(400, 400);
  background(255,255,255);
  //hnappurinn er á miðjum skjánum
  circleX = width/2;
  circleY = height/2;
  circleR = width/8;
  //í upphafi ekkert rautt í bakgrunninum 
  R = 0;
}
 
function draw() 
{
  background(R, 100,40);
  var distance = dist(mouseX, mouseY, circleX, circleY); 
  if(distance < circleR){
    fill(100);
  } else {
    fill(200); 
  }
  ellipse(200, 200, 100, 100);
}
 
 
function mousePressed()
{
  var distance = dist(mouseX, mouseY, circleX, circleY);
  if(distance < circleR){
    R = R+50;
  }
}

Hér eru leiðbeiningar og sýnidæmi um gagnvirkni(kóðinn hér fyrir neðan er tekinn þaðan):

interactivity, John Kuiphoff

Hér má sjá kassalaga hnapp.

var backgroundColor;
var isOverCircle;
 
function setup() 
{
  // set canvas size
  createCanvas(400, 400);
  
  // default background color
  backgroundColor = color(255, 255, 255);
}
 
function draw() 
{
  background(backgroundColor);
 
  var distance = dist(mouseX, mouseY, circleX, circleY); 
  
  if(distance < 50)
  {
    isOverCircle = true;
  } else {
    isOverCircle = false;
  }
  
  // draw a circle
  ellipseMode(CENTER);
  stroke(0);
  strokeWeight(5);
  if(isOverCircle == true)
  {
    fill(100);
    cursor(HAND);
  } else {
    fill(200); 
    cursor(ARROW); 
  }
  ellipse(200, 200, 100, 100);
  
}
 
function mousePressed()
{
  if(isOverCircle == true)
  {
    backgroundColor = color(random(255), random(255), random(255));
  }
}

Hér fyrir neðan er dæmi um hnapp sem að notar skilyrðissetningu. Þetta dæmi er flóknara en það sem ég sýndi í tímanum.