Rektangel

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

Eksemplet her tager udgangspunkt i Coordinatsystemer og objekter[1], og i [2].

Et meget anvendeligt element til at tegne spilobjekter med er rektangler.

Optegning af rektangel med forskellig stroke

Rektangel

Det første eksempel illustrerer hvordan man kan bruge strokeWeight() til at ændre stregen omkring rektanglet.

int aktuel = 0;

void setup() {
  size(140, 140);
  strokeWeight(aktuel);
}

void draw() {
  background(255);
  strokeWeight(aktuel);
  fill(180);
  rect(20, 20, 100, 100);
}

void mouseClicked() {
  aktuel++;
  if (aktuel == 10) {
    aktuel = 0;
  }
}

Rotation af rektanglet

Rektangel

Eksemplet her tager udgangspunkt i rotate()[3].

Her illustreres hvordan rotate() anvendes.

Der anvendes translate(), som skubber (0, 0) af koordinatsystemet med (110, 110) der i dette tilfælde er ud midt i vinduet.

Med rotate() drejes koordinatsystemet så i takker af 15 grader (museklik), og der tegnes et kvadrat der er 70 x 70 pixel, med start i (0, 0) så det roteres om det ene hjørne.

int aktuel = 0;

void setup() {
  size(220, 220);
  strokeWeight(aktuel);
  strokeWeight(3);
  fill(180);
}

void draw() {
  background(255);
  translate(110, 110);
  rotate(radians(aktuel));
  rect(0, 0, 70, 70);
}

void mouseClicked() {
  aktuel+= 15;
  if (aktuel == 360) {
    aktuel = 0;
  }
}

Tegne-mode rectMode()

rectMode()

Eksemplet her tager udgangspunkt i rectMode()[4].

Dette eksempel viser hvordan et rektangel tegnes i 4 forskellige modes, som giver forskelligt resultat.

int aktuel = 0;
String tekst = "CORNER";

void setup() {
  size(220, 220);
  strokeWeight(3);
  textSize(20);
}

void draw() {
  background(255);
  fill(180);
  rect(50, 50, 70, 70);
  fill(0);
  text(tekst, 20, 150);
}

void mousePressed() {
  aktuel++;
  if (aktuel == 4) {
    aktuel = 0;
  }
  if (aktuel == 0) { 
    rectMode(CORNER);
    tekst = "CORNER";
  }
  if (aktuel == 1) { 
    rectMode(CORNERS); 
    tekst = "CORNERS";
  }
  if (aktuel == 2) { 
    rectMode(RADIUS);
    tekst = "RADIUS";
  }
  if (aktuel == 3) { 
    rectMode(CENTER); 
    tekst = "CENTER";
  }
}

Referencer

  1. Coordinatsystemer og objekter på Processing.org
  2. rect() på Processing
  3. rotate() på Processing.org
  4. rectMode() på Processing