29. Muspekare i fyrkant

Under den här lektionen ska vi lära oss hur man ser om muspekaren är inuti en fyrkant.

29.1. Första if sats

Skriv denna kod över:

void setup()
{
  size(300, 200);
}

void draw()
{
  fill(255, 255, 255);
  if (mouseX > 25)
  {
    fill(255, 0, 0);  
  }
  rect(25, 50, 75, 100);  
}

Vad ser du? När blir fyrkanten röd?

29.1. Svar

Fyrkanten blir röd när du flyttar muspekaren mer än 25 pixlar åt höger.

29.2. Andra if sats

Ändra koden så att fyrkanten blir röd när du flyttar muspekaren till vänster om den högra sidan av fyrkanten.

if (x < 200) { }	'Bästa dator, om x är mindre än 200, gör vad som står mellan klammerparenteser.'

29.2. Svar

void setup()
{
  size(300, 200);
}

void draw()
{
  fill(255, 255, 255);
  if (mouseX < 100)
  {
    fill(255, 0, 0);  
  }
  rect(25, 50, 75, 100);  
}

29.3. Att skriva 'och'

Vi kommer nu att kombinera if-satserna!

Ersätt if-satsen du har nu med detta:

  if (mouseX > 25 && mouseX < 100)
  {
    fill(255, 0, 0);  
  }

	&& läses som 'och'

29.3. Svar

void setup()
{
  size(300, 200);
}

void draw()
{
  fill(255, 255, 255);
  if (mouseX > 25 && mouseX < 100)
  {
    fill(255, 0, 0);  
  }
  rect(25, 50, 75, 100);  
}

29.4. if sats om höjden av muspekaren

Gör nu fyrkanten röd när muspekaren är under toppen av kvadraten.

29.4. Svar

void setup()
{
  size(300, 200);
}

void draw()
{
  fill(255, 255, 255);
  if (mouseY > 50)
  {
    fill(255, 0, 0);  
  }
  rect(25, 50, 75, 100);  
}

29.5. Muspekare i fyrkant: slutuppgift

Gör rutan röd när muspekaren är i rutan.