function preload() {

  nanum = loadFont("nanum.ttf");

  quicksand = loadFont("quicksand.ttf");

  rounded = loadFont('rounded.ttf');

}

​

var c1,c3, c4;

function setup() {

  createCanvas(800, 800);

  background(255, 200, 200);

  c1 = new Glyph1();

  c3 = new Glyph3();

  c4 = new Glyph4();

  for (var i = 1; i < 11; i++) {

    textAlign(CENTER);

    c1.display2(50,i * 70);

    c1.display2(140,i * 70);

    c3.display2(230, i * 70);

    c4.display2(320, i * 70);

    c1.display1(50,i * 70);

    c1.display1(140,i * 70);

    c3.display1(230, i * 70);

    c4.display1(320, i * 70);

    c1.display2(490,i * 70);

    c1.display2(570,i * 70);

    c3.display2(650, i * 70);

    c4.display2(740, i * 70);

    c1.display1(490,i * 70);

    c1.display1(570,i * 70);

    c3.display1(650, i * 70);

    c4.display1(740, i * 70);

  }

}

​

function draw() {

}

​

function Glyph1() {

  this.glyphs = ['心', '심', '심', '마음', 'heart', 'feeling', 'sense'];

  this.display2 = function(x,y) {

    fill(255,255,255,200);

      textFont(rounded);

      textSize(60);

      y = y-10

      text(this.glyphs[0], x, y);

  }

  this.display1 = function(x,y) {

    this.pos = round(random(0,this.glyphs.length-1));

    if (this.pos == 0) {

      //textAlign(CENTER, CENTER);

      fill(0);

      textFont(rounded);

      textSize(60);

      y = y-10

    } else if (this.pos == 2 || this.pos == 1) {

      fill(255, 0,0, 200);

      textFont(nanum);

      textSize(40);

    } else if (this.pos == 3) {

      fill(130, 130,255);

      textFont(nanum);

      textSize(30);

    } else {

      fill(130, 130,255);

      textAlign(CENTER,CENTER);

      textFont(quicksand);

      textSize(25);

    }

    text(this.glyphs[this.pos], x, y);

  }

}

​

​

function Glyph3() {

  this.glyphs = ['消', '소', '소', '사라질', 'disappear'];

  this.display2 = function(x,y) {

    fill(255,255,255,200);

      textFont(rounded);

      textSize(60);

      y = y-10

      text(this.glyphs[0], x, y);

  }

  this.display1 = function(x,y) {

    this.pos = round(random(0,this.glyphs.length-1));

    if (this.pos == 0) {

      fill(0);

      //textAlign(CENTER, CENTER);

      textFont(rounded);

      textSize(60);

      y = y-10

    } else if (this.pos == 2 || this.pos == 1) {

      fill(255, 0,0, 200);

      textFont(nanum);

      textSize(40);

    } else if (this.pos == 3) {

      fill(130, 130,255);

      textFont(nanum);

      textSize(30);

    } else {

      fill(130, 130,255);

      textAlign(CENTER,CENTER);

      textFont(quicksand);

      textSize(20);

    }

    text(this.glyphs[this.pos], x, y);

  }

}

​

​

function Glyph4() {

  this.glyphs = ['日', '일', '일', '날', 'day'];

  this.display2 = function(x,y) {

    fill(255,255,255,200);

      textFont(rounded);

      textSize(60);

      y = y-10

      text(this.glyphs[0], x, y);

  }

  this.display1 = function(x,y) {

    this.pos = round(random(0,this.glyphs.length-1));

    if (this.pos == 0 ) {

      //textAlign(CENTER, CENTER);

      fill(0);

      textFont(rounded);

      textSize(60);

      y = y-10

    } else if (this.pos == 2 || this.pos == 1) {

      fill(255, 0,0, 200);

      textFont(nanum);

      textSize(40);

    } else if (this.pos == 3) {

      fill(130, 130,255);

      textFont(nanum);

      textSize(30);

    } else {

      fill(130, 130,255);

      textAlign(CENTER,CENTER);

      textFont(quicksand);

      textSize(30);

    }

    text(this.glyphs[this.pos], x, y);

  }

}