ga naar de roterende dingbats in fullscreen

"r"  reset de animatie

De schets maakt gebruik van de class   "Text",  met stroke() en strokeWeight() en fontkeuze 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) fonts 8) letterkleur
  //9) lijn dikte, 10) lijnkleur
  let font0, font1, font2;
  fontarrayRosetta = []; fontarraySpiralus = []; fontarrayKlats = [];
  function setup() {
  createCanvas(windowWidth, windowHeight);
  buttonD = createButton('downloaden');
  buttonD.position(20,40);buttonD.style('width','110px');
  buttonD.mouseClicked(buttonDAction);
  const x = width/2; const y = height/2; const n = height/25;
  const ld = n //ld = lijndikte
fontarrayRosetta =["!",'"',"#","$","%","&","'","(",")","*","+",",","-",".","/","0","1","2","3","4",
                   "5","6","7","8","9",":",";","<","=",">","?","@","A","B","C","D","E","F","G","H",
                   "I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","[","]",
                   "^","_","`","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q",
                   "r","s","r","s","t","u","v","w","x","y","z","{","|","}","~","¡","¢","£","¥","§",
                   "¨","©","ª","«","¬","®","±","²","³","´","µ","¶","º","»","¿","À","Á","Â","Ã","Ä",
                   "Å","Æ","Ç","É","Ê","Ë","Ì","Í","Ð","Ñ","Õ","Ö","Ø","Ü","ß","à","á","â","ã","ä",
                   "å","æ","ç","è","é","ê","ë","ì","í","î","ï","ñ","ò","ó","ô","õ","ö","ø","ù","ú",
                   "û","ü"];
 
fontarraySpiralus =["!",'"',"#","$","%","&","'","(",")","*","+",",","-",".","/","0","1","2","3","4",
                    "5","6","7","8","9",":",";","<","=",">","?","@","A","B","C","D","E","F","G","H",
                    "I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","[","]",
                    "^","_","`","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q",
                    "r","s","r","s","t","u","v","w","x","y","z","{","|","}","~","¡","¢","£","¥","§",
                    "¨","©","ª","«","¬","®","¯","°","±","´","µ","¶","·","¸","º","»","½","¿","À","Á",
                    "Â","Ã","Ä","Å","Æ","Ç","È","É","Ê","Ë","Ì","Í","Î","Ï","Ñ","Ò","Ó","Õ","Ö","Ø",
                    "Ù","Ú","Û","Ü","Ý","ß","à","á","â","ã","ä","å","æ","ç","è","é","ê","ë","ì","í",
                    "î","ï","ñ","ò","ó","ô","õ","ö","ö","÷","ø","ù","ú","û","ü"];
 
   fontarrayKlats = ['"',"#","$","%","&","'","(",")","*","+",",","-",".","/","0","1","2","3","4","5",
                    "6","7","8","9",":",";","<","=",">","@","A","B","C","D","E","F","G","H","I","J",
                    "K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","[","]","^","_",
                    "`","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s",
                    "r","s","t","u","v","w","x","y","z","{","|","}","~","¡","¢","£","¤","¥","§","¨",
                    "©","ª","«","¬","®","°","±","²","³","´","µ","¶","º","»","¿","À","Á","Â","Ã","Ä",
                    "Å","Æ","Ç","È","É","Ê","Ë","Ì","Í","Î","Ï","Ñ","Ò","Ó","Õ","Ö","Ü","ß","à","á",
                    "â","ã","ä","å","æ","ç","è","é","ê","ë","ì","í","î","ï","ñ","ò","ó","ô","õ","ö",
                    "ö","ø","ù","û","ü","ÿ"];
  //constructor                 1                     2    3   4,   5,6,  7
  font0 = new Text(fontarrayRosetta[int(random(161))],13*n,0,x-14*n,y,40, 5,
     color(random(0, 225), random(0, 200), random(0, 200),250),  //letterkleur
  ld,color(random(0, 150), random(50, 150), random(50, 200),100)); //lijnkleur
 
  font1 = new Text(fontarraySpiralus[int(random(174))],14*n, 0,x,y,0, 6,
     color(random(0, 225), random(0, 200), random(0, 200),250),  //letterkleur
  ld,color(random(0, 100), random(0, 250), random(0, 100),100)); //lijnkleur
 
  font2 = new Text(fontarrayKlats[int(random(165))],    14*n, 0,x+14*n,y,-40, 7,
     color(random(0, 225), random(0, 200), random(0, 200),250),  //letterkleur
  ld,color(random(0, 100), random(0, 250), random(0, 100),100)); //lijnkleur
}
 
function draw() {
//  background(230,251,255);
  clear();
  background('rgba(255,255,255, 0)');
  if (frameCount == 100) {
    font0.text = fontarrayRosetta[int(random(161))];
    font1.text = fontarraySpiralus[int(random(174))];
    font2.text = fontarrayKlats[int(random(165))];
    font0.c = color(random(0, 200), random(0, 100),random(0, 200),250);
    font1.c = color(random(0, 200), random(0, 10), random(0, 100),250);
    font2.c = color(random(0, 10),  random(0, 200),random(0, 200),250);
    font0.c2 = color(random(0, 200),random(50,100), random(0, 100),100);
    font1.c2 = color(random(0, 10), random(0, 200),random(0, 100),100);
    font2.c2 = color(random(0, 200),random(0, 200),random(0, 50),100);
  frameCount = 0;
  }
     font0.display(); font1.display(); font2.display();
  if (key == 's' || key == 'S') {
 
   }
     else
   {
     font0.dpRotRe(font0); font1.dpRotLi(font1); font2.dpRotLi(font2);
  }
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
 
function buttonDAction(){save('dingbats.png');}
function keyPressed() {if (key == "r") { setup();}}