random roterende dingbats van Manfred Klein. terug naar de inleiding
met de "s" toets stoppen de rotaties met iedere andere toets starten de rotaties weer
ga naar de roterende dingbats in fullscreen
toetsfunctie
"r" reset de animatie
De gebruikte dingbat fonts
1) OhRosettaDiscus.ttf
2) SpiralusKrux.ttf
3) Klats.ttf
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();}}