var span;

var offsetX;

var kanji;

var kanjis;

var k;

function setup() {

  createCanvas(windowWidth, windowHeight);

  //createCanvas(900, 900);

  frameRate(30);

  pg = createGraphics(width,height);

  span = 10;

  offsetX = 0;

  textAlign(CENTER, CENTER);

  textSize(width/8);

  textFont('Roboto');

  noFill();

  kanji = "漢字";

  kanjis = ["甘辞","冠辞","官寺","官事","幹事","寒じ","閑事","監事","勘事","閑事","感じ","莞爾","漢字"];

  k = 0;

}

​

function draw() {

  background(255);

  stroke(0);

  strokeWeight(span/4);

  stripe();

  pg.background(0);

  pg.textSize(width/3);

  pg.textFont('Noto Serif JP');

  pg.textAlign(CENTER, CENTER);

  pg.erase();

  pg.noStroke();

  pg.fill(0);

  pg.text(kanji,width/2,height/2);

  pg.rect(width/6,height/2+width/6+65,width*2/3*((frameCount%60)/60),10);

  pg.noErase();

  if(frameCount%60==0) resetCharacter();

  pg.stroke(255);

  pg.strokeWeight(3);

  pg.noFill();

  pg.text(kanji,width/2,height/2);

  pg.noStroke();

  pg.fill(255);

  pg.textSize(width/32);

  pg.textFont('Roboto');

  pg.textAlign(LEFT, BOTTOM);

  pg.text("Kanji",width/6,height/2+width/6+60);

  image(pg,0,0);

}

​

function resetCharacter(){

  k++;

  kanji = kanjis[k%kanjis.length];

}

​

function stripe(){

  offsetX++;

  if(offsetX>span) offsetX=0;

  for(var i=offsetX;i<width*2;i+=span){

    line(i,0,0,i);

  }

}