Blog

Processing Tekst

Tags: ,
  • Bericht auteur:
  • Berichtcategorie:Code / Lessen VMBO

In het kort

In deze opdracht leer je:

  • tekst afbeelden met text()
  • tekst printen in de console – buiten het hoofdvenster
  • van lettertype veranderen
  • werken met for-loops: een manier om code te  herhalen
  • werken met array: een genummerde verzameling variabelen.

Opdracht 1: een fontlijst opvragen

Gebruik deze code in setup() om in de console een lijst van honderden lettertypes te krijgen: alle lettertypes die je op je computer hebt staan.


String[] fontList = PFont.list();
  printArray(fontList);

Ik koos om verder te gaan met AlTarikh. Daarvoor moet je wel OSX Mavericks hebben.

Maak een globale variabele (helemaal bovenaan in de code, nog buiten setup():

PFont AlTarikh;

Voeg toe aan setup:

AlTarikh=createFont("AlTarikh",48);
textFont(AlTarikh);
fill(0);

en zet in draw() :

text("ja", 100,100);

Sla op met als naam fonts1. Als je de code runt, maakt ie als het goed is ook deze map aan:
Documents/Processing/fonts1/data en in die map komt een bestand Altarikh-48.vlw. Check dat!

Opdracht 2. Tekst in een loop knallen

Gebruik nu eerst even  het font AlTarikh in maat 26. Gebruik en bestudeer deze draw()

void draw() {
  String s = "Knallen";
  for (int line=1;line<500;line+=20) {
    text(s,10,line);
  } 
}

De for-loop

De for-loop zit zo in elkaar: knallen-tekst

  • int line=1. De start. In dit geval maken we een nieuwe int met als naam line en die krijgt de waarde 1.
  • line<500. De herhalings-conditie. De loop loopt door totdat deze conditie ongeldig is. Dus als line 500 of hoger is geworden.
  • line+=20. De ophoging. Elke loop wordt line opgehoogd. In de meeste for-loops doen ze met 1, maar wij doen nu even 20. Anders leest het zo klein.

Opdracht:

  • Speel met de tekst
  • Speel met de for-loop.
  • Zorg dat je hem minstens 2x sloopt en weer aan de gang krijgt 😉

Opdracht 3. Show wat je typt

  • Maak nu 2 globale variabelen (bovenaan de code):

String letters = "";
int  y = 50;
  • Zeg in draw() dat text()  de tekst moet afbeelden op regel y.
  • Maak deze functie keyPressed():

void keyPressed() {
    if(key == ENTER || key == RETURN) {
      print(letters);
      letters="";
      y+=50;  
    }
    if(key > 31 && key != CODED) {
      letters = letters + key;
    } 
}

Hier overloaden we de bestaande functie keyPressed(). Dat betekent: hij wordt vanzelf aangeroepen als je ergens op het toetsenbord drukt. Het trucje zit in de laatste regel, waar we de getypte toets aan de String letters toevoegen.

Opdracht 4. Meer regels in beeld.

De code krijg je kado.


PFont AlTarikh;
String[] letters = new String[100];
int  line = 1 ;

void setup()  {
  size(600,600);
  background(0,50,200);
  AlTarikh=createFont("AlTarikh",48);
  textFont(AlTarikh);
  fill(0);
  for (int n=0; n<100; n=n+1) {
     letters[n] = "";
  }
}
void draw() {
    text(letters[line],50,50*line); 
    print(letters[line], "\n");
}
void keyPressed() {
    if(key == ENTER || key == RETURN) {
      print("klaar met" , letters[line], "\n" );
      line=line + 1;
     }
    if(key > 31 && key != CODED) {
      letters[line] = letters[line] + key;
    } 
}

Opdracht: zoekplaatje.

Zoek alle plaatsen in de code waar de array letters[] wordt gebruikt. We gebruiken telkens een nieuw “nummer” om elke regel tekst in op te slaan. Dus de eerste regel die je intypt komt in letters[0]. De volgende in letters[1].

De vraag is nu:

  • Op welke plaats wordt de array zelf gedefinieerd?
  • Waar worden alle letters gevuld met de “” lege string?
  • Waar wordt er een letter toegevoegd aan de “huidige” string letters?
  • Waar wordt de teller van het regelnummer opgehoogd?

Extra opdrachten

  • voeg toe aan keyPressed() – na het geven van een enter: saveStrings(“letters.txt”,letters);