dingbat animatie

dingbat animatie. terug naar de inleiding

naar de dingbat animatie in fullscreen

dingbat animatie met het ShapesA.ttf dingbat font van Manfred Klein

Andere karakters invoeren

1) Klik op "stop/start" 2) klik op "clear'. 3) voer max 3 karakters in. 4) klik op "run", 5) klik weer "stop/start"

door niet op clear te klikken kan je verschillende karakters met elkaar laten overlappen

'stop/start' combineren met "kleur" geeft spannende effecten

 
let input; let tekst = 'UUU'; let start = true; let kleur = false;
function preload(){
  font = loadFont("../assets/ShapesA.ttf");
}
function setup(){
  buttonC = createButton('clear');
  buttonC.position(20,20);buttonC.style('width','70px');
  buttonC.mouseClicked(buttonCAction);
  input = createInput();
  input.position(20,50);input.style('width','40px');
  buttonT = createButton('run');
  buttonT.position(70,50);buttonT.style('width','40px');
  buttonT.mouseClicked(buttonTAction);
  buttonS = createButton('stop/start');
  buttonS.position(20,80);buttonS.style('width','70px');
  buttonS.mouseClicked(buttonSAction);
  buttonK = createButton('kleur');
  buttonK.position(20,110);buttonK.style('width','70px');
  buttonK.mouseClicked(buttonKAction);
  buttonD = createButton('download');
  buttonD.position(20,140);buttonD.style('width','70px');
  buttonD.mouseClicked(buttonDAction);
  createCanvas(windowWidth, windowHeight);
  textFont(font);
  textAlign(CENTER,CENTER);
}
function draw(){
if (start){
  fill(0); stroke(255); strokeWeight(2);textSize(width/4);
  let offset = 180;
  textAlign(CENTER);
  if (kleur) {stroke(random(250),random(200),random(200));
    fill(random(200),random(200),random(200));
    text(tekst,width/2+sin(frameCount*.01)*offset,height/2.4+cos(frameCount*.03)*offset);}
  else
  {text(tekst,width/2+sin(frameCount*.01)*offset,height/2.4+cos(frameCount*.03)*offset);}
 }
 else { }
}
 
function buttonCAction() {setup();}
function buttonTAction() {tekst = input.value();}
function buttonSAction() {if (start) {start = false;} else {start = true;}}
function buttonKAction() {if (kleur) {kleur = false;} else {kleur = true;}}
function buttonDAction() {save('dingbat animatie.png');}

Flevopink