letterspel                       terug naar de inleiding                      ga naar het letterspel in fullscreen

Met de "s"of "S"   toets stopt, en met elke andere toets start de animatie. >Met de "d" of "D" toets kan je een afbeelding downloaden.

toetsfuncties:  Met toets "1" = animatie met de letters I, N en G,  met toets "2" = de letters A,B en N en  met toets "3" = de letters K,P en N

toets "4" = Helvetia font,  toets "5" = Areal font
 

 De schets maakt gebruik van de class   "Text"   ,met stroke() en strokeWeight() in de constructor,  en  de superclass    "Vormen"

 

  //argumenten van de constructor: 1) tekst string, 2) lettergrootte, 3) draaipunt, 
  //4) x  positie, 5) y positie, 6) hoek, 7) font met 1)Areal en 2) Helvetica, 8) letterkleur 
  //9) lijn dikte, 10) lijnkleur 
  let vorm0, vorm1, vorm2; 
 
  function setup() { 
  createCanvas(windowWidth, windowHeight); 
  const x = width/2; 
  const y = height/2; 
  const n = height/25; 
  //constructor  1       2    3   4,    5,      6,  7     8                 9   10 
  vorm0 = new Text("K", 14*n, 1, x-2*n, y-2*n,  40, 1, color(0,0,250,100),  n, color(255,0,0,100)); 
  vorm1 = new Text("P", 14*n, 1, x,     y,       0, 1, color(0,0,250,100),  n, color(255,255,0,100)); 
  vorm2 = new Text("N", 14*n, 1, x+2*n, y+2*n, -40, 1, color(200,0,250,100),n, color(-0,255,255,100)); 
} 
 
function draw() { 
  background(230,251,255); 
     vorm0.display(); 
     vorm1.display(); 
     vorm2.display(); 
  if (key == 's' || key == 'D') { 
 
     } 
     else 
     { 
     vorm0. dpRotRe(vorm0); 
     vorm1. dpRotLi(vorm1); 
     vorm2. dpRotRe(vorm2); 
   } 
} 
 
function windowResized() { 
  resizeCanvas(windowWidth, windowHeight); 
} 
 
 function keyPressed() { 
  if (key == 'd' ||  key == 'D') { 
   save('letters.png'); 
    } 
 
  if (key == '1') { 
     vorm0.text = "I"; 
     vorm1.text = "N"; 
     vorm2.text = "G"; 
  } 
 
  if (key == '2') { 
     vorm0.text = "A"; 
     vorm1.text = "B"; 
     vorm2.text = "N"; 
  } 
 
  if (key == '3')  { 
     vorm0.text = "K"; 
     vorm1.text = "P"; 
     vorm2.text = "N"; 
  } 
 
  if (key == '4')  { 
      vorm0.f = 2; 
      vorm1.f = 2; 
      vorm2.f = 2; 
  } 
 
  if (key == '5')  { 
      vorm0.f = 1; 
      vorm1.f = 1; 
      vorm2.f = 1; 
    } 
 }