tadkim
8/26/2016 - 6:04 AM

for jaso compute

for jaso compute


//coded font에 사용한 계산 변수들

/*** 크기 지정 부분 ************************************** */

var fontSize = 1; //폰트 크기 단계화

var letterWidth = fontSize * 250 ; // 변형 전 글자 기본 공간 - 가로
var letterHeight = fontSize * 500; // 변형 전 글자 기본 공간 - 세로
// var letterSpacing = letterWidth / 5; //자간
var letterSpacing = letterWidth; //자간
var lineHeight = letterHeight/4; //줄간격

var w1 = letterWidth * 3 / 5 ; // 닿자 기본 공간 - 가로
var w2 = letterWidth * 2 / 5 ; // 종적 모음 기본 공간 - 가로
var w3 = letterWidth * 4 / 5 ; // 횡적 모음 기본 공간 - 가로
var w4 = letterWidth * 3 / 5 ; // 받침 기본 공간 - 가로

var h1 = letterHeight * 3 / 10 ; // 닿자 기본 공간 - 세로
var h2 = letterHeight * 3 / 5 ; // 종적 모음 기본 공간 - 세로
var h3 = letterHeight * 1 / 5 ; // 횡적 모음 기본 공간 - 세로
var h4 = letterHeight * 3 / 10 ; // 받침 기본 공간 - 세로

var m1 = letterHeight / 10 ; // 닿자 윗쪽 패딩 - 세로
var m2 = w1; // 종적 모음 왼쪽 패딩
var m3 = m1 + h1; // 횡적 모음 윗쪽 패딩
var m4 = m1 + h1 + h3; // 받침 윗쪽 패딩
var m5 = letterWidth / 5 ; // 받침 왼쪽 패딩

var mw0 = letterWidth / 25; // 단위 여백 - 가로 : 10
var mh0 = letterHeight / 50; // 단위 여백 - 세로 : 10


/*** 스타일 지정 부분 ************************************** */

var frameColor = (60,90,70); //이상하다......
var frameStrokeWeight = 1;

var fontColor = 0;
var fontStrokeWeight = 3;


/*** 글자 형태 변경을 위한 각 포인트 위치 지정 변수  **************** */
/********************************************************* */






/*** 자음 관련 변수 *****************************************
 * p : 기본 자음자 관련 변수
 * bp : 복합 자음자 관련 변수
 * bm : 복합 자음자 위치
 * circleWidth, circleWidth2, circleHeight, circleHeight2 : 기본 자음자 - 동그라미 변수 
*/


/* P : 기본 자음자 관련 변수 *** */

var p1 = { x: w1 / 3 + mw0, y: h1 / 3 + mh0 };
var p2 = { x: w1 - mw0, y: h1 / 3 + mh0 };
var p3 = { x: w1 / 3 + mw0, y: h1 - mh0 };
var p4 = {x: w1 - mw0, y:h1 - mh0 };
var p5 = {x: w1 - mw0, y:h1 * 4 / 6 };
var p6 = {x: w1 / 3 + mw0, y: h1 * 4 / 6 };
var p7 = {x: (p5.x + p6.x) / 2, y: (p2.y + p4.y) * 4.2 / 10 };
var p8 = {x: (p1.x + p2.x) / 2, y: p1.y };
var p9 = {x: p1.x, y: p1.y - 2 * mh0 };
var p10 = {x: p2.x, y: p2.y - 2 * mh0};
var p11 = {x: (p9.x + p10.x) / 2, y: p10.y };
var p12 = {x: p11.x, y: p11.y - 3 * mh0};
var p13 = {x: (p1.x + p8.x) / 2, y: p8.y};
var p14 = { x: (p2.x + p8.x) / 2, y: p8.y };
var p17 = {x: (p3.x + p4.x) /2, y: p3.y};
var p15 = {x: (p3.x + p17.x) / 2  , y: p3.y};
var p16 = { x: (p4.x + p17.x) / 2 , y: p3.y};
 



/* BP : 복합 자음자 관련 변수 *** */

 var bp1 = { x: mw0, y: 0 };
 var bp5 = { x: w4 / 3, y: 0 };
 var bp13 = { x: bp1.x, y: bp1.y + h4 * 5 / 9 };
 var bp17 = { x: bp5.x, y: bp13.y };
 var bp3 = { x: (bp1.x + bp5.x) / 2, y: bp1.y };
 var bp2 = { x: (bp1.x + bp3.x) / 2, y: bp1.y };
 var bp4 = { x: (bp3.x + bp5.x) / 2, y: bp1.y };
 var bp15 = { x: (bp13.x + bp17.x) / 2, y: bp13.y };
 var bp14 = { x: (bp13.x + bp15.x) / 2, y: bp13.y };
 var bp16 = { x: (bp15.x + bp17.x) / 2, y: bp13.y };
 var bp6 = { x: bp1.x, y: (bp1.y + bp13.y) / 3 };
 var bp7 = { x: bp3.x, y: bp6.y };
 var bp8 = { x: bp5.x, y: bp6.y };
 var bp9 = { x: bp6.x, y: (bp1.y + bp13.y) / 2 };
 var bp10 = { x: bp7.x, y: bp9.y };
 var bp11 = { x: bp8.x, y: bp9.y };
 var bp12 = { x: bp10.x, y: (bp7.y + bp15.y) / 2 };
 
/* 복합 자음자 위치 *** */
var bm1 = w4/9+mw0; // 복합자음 첫번째 날씬자음 왼쪽 패딩
var bm2 = h4/3+mh0; // 복합자음 위쪽 패딩
var bm3 = w4*4/9; // 복합자음 두번째 날씬자음 왼쪽 패딩

/* 기본 자음자 - 동그라미 지름변수 *** */
var circleWidth = (p6.x-p5.x)*4 / 5; //기본 자음 동그라미 가로지름
var circleHeight = (p4.y-p8.y)*4/ 5; // 기본 자음 동그라미 세로지름
var circleWidth2 = bp11.x - bp9.x ; // 복합 자음 동그라미 가로 지름
var circleHeight2 = circleWidth2; // 복합 자음 동그라미 세로 지름


/*** 모음 관련 변수 *****************************************
 * cp : 횡적 모음 위치
 * dp : 종적 모음 위치
*/

/* CP : 횡적 모음 위치 *** */
var cp1 = { x: mw0, y: h3 / 2 };
var cp2 = { x: w3 - mw0, y: cp1.y };
var cp3 = { x: (cp1.x + cp2.x) / 2, y: cp1.y };
var cp4 = { x: cp3.x - 2 * mw0, y: cp1.y };
var cp5 = { x: cp3.x + 2 * mw0, y: cp1.y };
var cp6 = { x: cp3.x, y: mh0 };
var cp7 = { x: cp6.x, y: h3 - mh0 };
var cp8 = { x: cp4.x, y: cp6.y };
var cp9 = { x: cp5.x, y: cp6.y };
var cp10 = { x: cp4.x, y: cp7.y };
var cp11 = { x: cp5.x, y: cp7.y };


/* DP : 종적 모음 위치 *** */
var dp1 = { x: w2 / 2, y: mh0 };
var dp2 = { x: dp1.x, y: h2 - mh0 };
var dp3 = { x: w2 - mw0, y: dp1.y };
var dp4 = { x: dp3.x, y: dp2.y };
var dp5 = { x: dp1.x, y: (dp1.y + dp2.y) / 2 };
var dp6 = { x: dp3.x, y: dp5.y };
var dp7 = { x: mw0, y: dp5.y };
var dp8 = { x: dp5.x, y: dp5.y - 2 * h1 / 3 };
var dp9 = { x: dp3.x, y: dp8.y };
var dp10 = { x: dp5.x, y: dp5.y - h1 / 3 };
var dp11 = { x: dp6.x, y: dp10.y };
var dp12 = { x: dp5.x, y: dp5.y + h1 / 3, };
var dp13 = { x: dp6.x, y: dp6.y + h1 / 3 };
var dp14 = { x: dp5.x, y: dp5.y - h1 / 6 };
var dp15 = { x: dp6.x, y: dp6.y - h1 / 6 };
var dp16 = { x: dp7.x, y: dp14.y };
var dp17 = { x: dp5.x, y: dp5.y + h1 / 6 };
var dp18 = { x: dp6.x, y: dp6.y + h1 / 6 };
var dp19 = { x: dp7.x, y: dp17.y };



/* 곁받침 자소 선언 : code로 인식하지 못하는 문제 해결방안 *** */ 
var 자소ㄱㅅ = Hangul.assemble(['ㄱ', 'ㅅ']), 자소ㄴㅈ = Hangul.assemble(['ㄴ', 'ㅈ']), 자소ㄴㅎ = Hangul.assemble(['ㄴ', 'ㅎ']), 자소ㄹㄱ = Hangul.assemble(['ㄹ', 'ㄱ']), 자소ㄹㅁ = Hangul.assemble(['ㄹ', 'ㅁ']), 자소ㄹㅂ = Hangul.assemble(['ㄹ', 'ㅂ']), 자소ㄹㅅ = Hangul.assemble(['ㄹ', 'ㅅ']), 자소ㄹㅌ = Hangul.assemble(['ㄹ', 'ㅌ']), 자소ㄹㅍ = Hangul.assemble(['ㄹ', 'ㅍ']), 자소ㄹㅎ = Hangul.assemble(['ㄹ', 'ㅎ']), 자소ㅂㅅ = Hangul.assemble(['ㅂ', 'ㅅ']), 자소우 = Hangul.disassemble('우')[1];



/* ****** 초기화시 글자데이터구조 계산하는 영역 *********/

function 글자구조데이터(사잇점개수) {
  console.log("start 글자구조데이터()");

  /* 글자구조데이터
    * 클래스에서 계산하는 것이아니라, setup함수에서 객체 생성시 활용하기 위함.
    * 자소별 기준점을 통해 글자데이터객체를 구한다.
  */


  var 자소기준점리스트 = [
    [[p1, p2], [p2, p4]],
    [[p1, p3], [p3, p4]],
    [[p1, p2], [p1, p3], [p3, p4]],
    [[p1,p2], [p2,p6], [p6,p5], [p5,p3], [p3,p4]], //ㄹ
    [[p1, p2], [p2, p4], [p1, p3], [p3, p4]],
    [[p1, p3], [p3, p4], [p2, p4], [p5, p6]],
    [[p8, p7], [p7, p3], [p7, p4]],
    [[p8,p5], [p5, p17], [p17,p6], [p6,p8]], //ㅇ
    [[p1, p2], [p8, p7], [p7, p3], [p7, p4]],
    [[p12, p8], [p1, p2], [p8, p7], [p7, p3], [p7, p4]],
    [[p1, p2], [p5, p6], [p2, p4]],
    [[p1, p2], [p1, p3], [p5, p6], [p3, p4]],
    [[p1, p2], [p13, p15], [p14, p16], [p3, p4]],
    [[p9, p10], [p12, p11], [p8,p5], [p5, p17], [p17,p6], [p6,p8]], //ㅎ

    [[bp1, bp5], [bp5, bp17]],
    [[bp1, bp13], [bp13, bp17]],
    [[bp1, bp13], [bp5, bp17], [bp13, bp17], [bp9, bp11]],
    [[bp1, bp5], [bp5, bp11], [bp9, bp11], [bp9, bp13], [bp13, bp17]],
    [[bp1, bp5], [bp1, bp13], [bp13, bp17], [bp5, bp17]],
          
          
    [[bp1, bp13], [bp5, bp17], [bp13, bp17], [bp9, bp11],],
    [[bp3, bp10], [bp10, bp13], [bp10, bp17]],
    [[bp1, bp5], [bp3, bp10], [bp10, bp13], [bp10, bp17]],
    [[bp1, bp5], [bp1, bp13], [bp13, bp17], [bp9, bp11]],
    [[bp1, bp5], [bp2, bp14], [bp4, bp16], [bp13, bp17]],
    [[bp3, bp7], [bp6, bp8], [bp10, bp9],[bp9, bp15], [bp15, bp11], [bp11, bp10]], //얇은ㅎ
          
    [[cp1, cp2], [cp6, cp3]],
    [[cp1, cp2], [cp8, cp4], [cp9, cp5]],
    [[cp1, cp2], [cp3, cp7]],
    [[cp1, cp2], [cp4, cp10], [cp5, cp11]],
    [[cp1, cp2]],
          
    [[dp1, dp10], [dp10, dp12], [dp12, dp2], [dp6, dp5]],
    [[dp1, dp10], [dp10, dp12], [dp12, dp2], [dp14, dp15], [dp17, dp18]],
    [[dp1, dp10], [dp10, dp12], [dp12, dp2], [dp7, dp5]],
    [[dp1, dp10], [dp10, dp12], [dp12, dp2], [dp14, dp16], [dp17, dp19]],
    [[dp1, dp10], [dp10, dp12], [dp12, dp2]],
    [[dp1, dp10], [dp10, dp12], [dp12, dp2], [dp6, dp5], [dp3, dp11], [dp11, dp13], [dp13, dp4]],
    [[dp1, dp10], [dp10, dp12], [dp12, dp2], [dp14, dp15], [dp17, dp18], [dp3, dp11], [dp11, dp13], [dp13, dp4]],
    [[dp1, dp10], [dp10, dp12], [dp12, dp2], [dp7, dp5], [dp3, dp11], [dp11, dp13], [dp13, dp4]],
    [[dp1, dp10], [dp10, dp12], [dp12, dp2], [dp14, dp16], [dp17, dp19], [dp3, dp11], [dp11, dp13], [dp13, dp4]]
  ];


  //자소클래스 정보 업데이트        
  console.log("자소기준점리스트 목록 수 : " + 자소기준점리스트.length);
  console.log("자소줄기ㄱ의 목록 수 : " + 자소기준점리스트[0].length);




  /** 사잇점 구하고 '글자데이터배열'에 추가 ************************** */

  

  var ouputTestCount = 0;
  var ouetputTestArray;

  for (var i = 0; i < 자소기준점리스트.length; i++) {
    var 자소 = 자소기준점리스트[i];
    
    var 자소객체 = { 자소이름: 모델.자소이름[i], 자소인덱스: i, 자소배열: [] };
    
    for (var j = 0; j < 자소.length; j++) {
      var 손자소 = 자소[j];
      var 손자소사이점배열 = makePointByLerp(손자소[0], 손자소[1], 사잇점개수);
      if (i === 0) {
        console.log("손자소 : " + 손자소 + "자소객체이름: " + 자소객체.자소이름 + ", " +손자소사이점배열);
        
      }

      var 자소사이점배열 = 손자소사이점배열.valueOf();
      자소객체.자소배열.push(자소사이점배열);
    }
    
    //계산완료된 자소사이점 배열을 글자데이터배열에 추가한다. 
    글자데이터배열.push(자소객체);
  }
}


function viewPosData() {
  var allStrings = "";
  for (var i = 0; i < 글자데이터배열.length; i++){
    var rowPosData = makePosData(i); //JSON화된 자소별 배열
    allStrings += rowPosData; //전체 글자객체에 JSON화된 자소별 배열 추가
  }
  console.log(allStrings); //계산한 결과를 콘솔에 출력


  function makePosData(nums) {
    var arrayName = 모델.자소이름[nums];
      var result = "" + arrayName + ": [";
      var 대상자소배열 = 글자데이터배열[nums].자소배열;
      for (var i = 0; i < 대상자소배열.length; i++) {
        var 자소획 = 대상자소배열[i];
        for (var j = 0; j < 자소획.length; j++) {
          result += JSON.stringify(자소획[j]) + ", ";
        }
      }
      result += "],";
      return result.replace(/"/gi, '');
  }
  


  function makePos() {
    var 현재카운트 = 0;
      for (var t = 0; t < 글자데이터배열.length; t++) {
        var rowtest = 글자데이터배열[t].자소배열;
        console.log(t);
        for (var tj = 0; tj < rowtest.length; tj++){
          var rows = rowtest[tj];
          // println(rows);
          현재카운트++;
          console.log(현재카운트);
          
          for (var tjj = 0; tjj < rows.length; tjj++){
            var 사잇점 = rows[tjj];
            console.log(JSON.stringify(사잇점));
            // ellipse(rows[tjj].x, rows[tjj].y, 10, 10);
            //사잇점단위
          }
          
          //획단위
        }
        //자소단위
        translate(10, 60);
      }
  }
}




//시작점과 끝점 사이의 사잇점들을 생성한다. 
function makePointByLerp(start, end, len){

    var resultArray = [];
    var eachPos = (1.0 / len);
    
    resultArray.push(start);//시작점을 가장먼저 추가
    
    //시작점과 끝 점을 제외한 가운데 점들을 생성한다.
    for (var i = 0; i < len; i++){
        //사잇점 위치 계산
        var currentX = lerp(start.x, end.x, eachPos);
        var currentY = lerp(start.y, end.y, eachPos);
        
        var pos = { x: currentX, y: currentY };
        //리턴할 배열에 추가
        resultArray.push(pos);
        eachPos += 1.0/len;
    }
    resultArray.push(end); //끝점을 마지막에 추가
    // console.log(resultArray.length);
    
    return resultArray;
}

console.log("sketch.js");
var wokrname = "스투키스튜디오_CodedFont_딴짓"; //작업기록위함


//로딩 후 가장 처음에 보일 글자들
var letterArray = ["헤", "쳐", "모", "여", "모", "여", "헤", "쳐"]; 
var state = { currentX: 0, currentY: 0 };
var textAreaX, textAreaY = 0; //글자 영역 결정 전역변수
var rowX, rowY = 0;  //글자 위치 결정 전역변수
var input, button, greeting, div;

 

// default values
var xpos = 200, ypos = 200, 알파 = 0, 베타 = 0, 감마 = 0;

/* SET : P5 DOM Element *** */
var 요소위치 = {
    canvasX: 0, canvasY: 140,
    inputX: 50, inputY: 55,
    btnX: 255, btnY: 55
};


var letterPos = { x: 60, y: 150 };
var 글자위치 = { x: 60, y: 150 };


//데이터 모델
var 모델 = {
자소이름 : ['ㄱ','ㄴ','ㄷ','ㄹ','ㅁ','ㅂ','ㅅ','ㅇ','ㅈ','ㅊ','ㅋ','ㅌ','ㅍ','ㅎ','얇은ㄱ','얇은ㄴ','얇은ㄷ','얇은ㄹ','얇은ㅁ','얇은ㅂ','얇은ㅅ','얇은ㅈ','얇은ㅌ','얇은ㅍ','얇은ㅎ','오','요','우','유','으','아','야','어','여','이','애','얘','에','예']
};
var 글자데이터객체 = {}; //자소별 사잇점 배열을 저장하는 객체
var 글자데이터배열 = []; //자소별 사잇점 배열을 저장하는 배열리스트. 39개(현재 자소 수)
var 딴짓객체배열 = [];




function setup() {
  console.log("start setup()");
    
    //캔버스 생성 및 변수에 할당
    var mainCanvas = createCanvas(1000, 5000);
    mainCanvas.position(요소위치.canvasX, 요소위치.canvasY); //캔버스 기준점 변경
    background(204);
    //글자구조데이터를 계산하고 전역변수로 저장
    글자구조데이터();
  


    //Canvas default style
    setStyle(); 
  

    //User Interface
    makeDomElement('input'); 
    makeDomElement('button');
  
    글자데이터생성(8); //글자사잇점정보를 생성한다.
    딴짓객체추가(letterArray);
    console.log(딴짓객체배열[0]);
    console.log(딴짓객체배열.length);
  
    
    
    // 객체보여주기();

  
    // noLoop();
}


function draw() {
  // 캔버스영역체크();
  background(10,1);
  fill(0);
  push();
  translate(0, 30);

  for (var i = 0; i < 딴짓객체배열.length; i++){
    var d = 딴짓객체배열[i];
    d.display();
    d.move();
  }
  pop();
}




/* **** 딴짓글자레이아웃, 글자 ****************************** */



//딴짓객체추가
function 딴짓객체추가(letterArrayEl) {
  console.log("딴짓객체추가()");
  딴짓객체배열 = [];
    //글자 위치 결정하는 for문    
    for (var i = 0; i < letterArrayEl.length; i++) {
        textAreaX = i % 4;
        rowX = textAreaX * (글자위치.x + letterSpacing);
      
        딴짓글자레이아웃(letterArrayEl[i], rowX, rowY, 감마); //2차
        
        //글자수에 따라 줄 변경 : 현재 3글자에 변경
        if (textAreaX === 3) { rowY += (글자위치.y + lineHeight); }
    }
  rowX = 0;
  rowY = 0;
}




// 딴짓글자 레이아웃 생성
function 딴짓글자레이아웃(letter, tx, ty, g) {  
  
  // console.log(letter);
  var 자소배열추출 = Hangul.disassemble(letter); //글자2자소단위 분리
  
  //겹받침 체크후 자소배열을 곁받침형태로 변환
  var 겹받침인가 = 겹받침체크(자소배열추출);
  if (겹받침인가 === true) {
      var pushEl = 겹받침변환(자소배열추출);
      자소배열추출.push(pushEl);
  }
  // 글자(자소배열추출, tx, ty, g); //글자함수에 자소배열과 파라미터를 넘겨준다.
  딴짓글자(자소배열추출, tx, ty, g); //글자함수에 자소배열과 파라미터를 넘겨준다.
   console.log("자소배열추출 : " + 자소배열추출.length);
  console.log(딴짓객체배열.length);
}



function 객체생성(배열이름, 이동위치) {
  console.log("객체생성");
  console.log(이동위치);

  for (var i = 0; i < 배열이름.length; i++){
    var ror = 배열이름[i];
    push();
    translate(이동위치.x, 이동위치.y);
    ellipse(ror.x, ror.y, 4, 4);
    pop();
    var randomValue = Math.round(random(0, 1));
    var eachObject = (randomValue === 0)? new 딴짓1(ror, 이동위치) : new 딴짓2(ror, 이동위치);
    딴짓객체배열.push(eachObject);
  }
}



function 객체보여주기() {
  background(204);
  console.log(딴짓객체배열);

}






// 글자 생성
function 딴짓글자(자소배열, tx, ty, g) {
  //각 자소타입별 위치
  var 닿자위치 = {
          x: tx + g,
          y: ty + m1
      },
      종적모음위치 = {
          x: tx + m2,
          y: ty
      },
      횡적모음위치 = {
          x: tx,
          y: ty + m3
      },
      받침위치 = {
          x: tx + g,
          y: ty + m4
      };
  
  for (var j = 0; j < 자소배열.length; j++) {
    var 자소 = 자소배열[j];
    if (자소 === 자소우) { 자소 = '우'; }
    
    switch (자소) {
      
      case 'ㄱ':
        if (j === 0) {
          
          객체생성(글자데이터.ㄱ, 닿자위치);
        } else {
          
          객체생성(글자데이터.ㄱ, 받침위치);
        }
        break;
      case 'ㄴ':
        if (j === 0) {
          객체생성(글자데이터.ㄴ, 닿자위치);
        } else {
          객체생성(글자데이터.ㄴ, 받침위치);
        }
        break;
      case 'ㄷ':
        if (j === 0) {
          객체생성(글자데이터.ㄷ, 닿자위치);
        } else {
          객체생성(글자데이터.ㄷ, 받침위치);
        }
        break;
      case 'ㄹ':
        if (j === 0) {
          객체생성(글자데이터.ㄹ, 닿자위치);
        } else {
          객체생성(글자데이터.ㄹ, 받침위치);
        }
        break;
      case 'ㅁ':
        if (j === 0) {
          객체생성(글자데이터.ㅁ, 닿자위치);
        } else {
          객체생성(글자데이터.ㅁ, 받침위치);
        }
        break;
      case 'ㅂ':
        if (j === 0) {
          객체생성(글자데이터.ㅂ, 닿자위치);
        } else {
          객체생성(글자데이터.ㅂ, 받침위치);
        }
        break;
      case 'ㅅ':
        if (j === 0) {
          객체생성(글자데이터.ㅅ, 닿자위치);
        } else {
          객체생성(글자데이터.ㅅ, 받침위치);
        }
        break;
      case 'ㅇ':
        if (j === 0) {
          객체생성(글자데이터.ㅇ, 닿자위치);
        } else {
          객체생성(글자데이터.ㅇ, 받침위치);
        }
        break;
      case 'ㅈ':
        if (j === 0) {
          객체생성(글자데이터.ㅈ, 닿자위치);
        } else {
          객체생성(글자데이터.ㅈ, 받침위치);
        }
        break;
      case 'ㅊ':
        if (j === 0) {
          객체생성(글자데이터.ㅊ, 닿자위치);
        } else {
          객체생성(글자데이터.ㅊ, 받침위치);
        }
        break;
      case 'ㅋ':
        if (j === 0) {
          객체생성(글자데이터.ㅋ, 닿자위치);
        } else {
          객체생성(글자데이터.ㅋ, 받침위치);
        }
        break;
      case 'ㅌ':
        if (j === 0) {
          객체생성(글자데이터.ㅌ, 닿자위치);
        } else {
          객체생성(글자데이터.ㅌ, 받침위치);
        }
        break;
      case 'ㅍ':
        if (j === 0) {
          객체생성(글자데이터.ㅍ, 닿자위치);
        } else {
          객체생성(글자데이터.ㅍ, 받침위치);
        }
        break;
      case 'ㅎ':
       if (j === 0) {
          객체생성(글자데이터.ㅎ, 닿자위치);
        } else {
          객체생성(글자데이터.ㅎ, 받침위치);
        }
        break;
      case 'bottom15':
        push();
        translate(받침위치.x, 받침위치.y);
        한글['bottom15']();
        pop();
        break;
      case 'bottom16':
        push();
        translate(받침위치.x, 받침위치.y);
        한글['bottom16']();
        pop();
        break;
      case 'bottom17':
        push();
        translate(받침위치.x, 받침위치.y);
        한글['bottom17']();
        pop();
        break;
      case 'bottom18':
        push();
        translate(받침위치.x, 받침위치.y);
        한글['bottom18']();
        pop();
        break;
      case 'bottom19':
        push();
        translate(받침위치.x, 받침위치.y);
        한글['bottom19']();
        pop();
        break;
      case 'bottom20':
        push();
        translate(받침위치.x, 받침위치.y);
        한글['bottom20']();
        pop();
        break;
      case 'bottom21':
        push();
        translate(받침위치.x, 받침위치.y);
        한글['bottom21']();
        pop();
        break;
      case 'bottom22':
        push();
        translate(받침위치.x, 받침위치.y);
        한글['bottom22']();
        pop();
        break;
      case 'bottom23':
        push();
        translate(받침위치.x, 받침위치.y);
        한글['bottom23']();
        pop();
        break;
      case 'bottom24':
        push();
        translate(받침위치.x, 받침위치.y);
        한글['bottom24']();
        pop();
        break;
      case 'bottom25':
        push();
        translate(받침위치.x, 받침위치.y);
        한글['bottom25']();
        pop();
        break;
      case 'ㄲ':
         if (j === 0) {
          객체생성(글자데이터.ㄲ, 닿자위치);
        } else {
          객체생성(글자데이터.ㄲ, 받침위치);
        }
         break;
      case 'ㄸ':
         if (j === 0) {
          객체생성(글자데이터.ㄸ, 닿자위치);
        } else {
          객체생성(글자데이터.ㄸ, 받침위치);
        }
         break;
      case 'ㄸ':
         if (j === 0) {
          push();
          translate(닿자위치.x, 닿자위치.y);
          한글['ㄸ']();
          pop();
        } else {
          push();
          translate(받침위치.x, 받침위치.y);
          한글['ㄸ']();
          pop();
        }
        break;
      case 'ㅆ':
        if (j === 0) {
          객체생성(글자데이터.ㅆ, 닿자위치);
        } else {
          객체생성(글자데이터.ㅆ, 받침위치);
        }
        break;
      case 'ㅏ':
        객체생성(글자데이터.아, 종적모음위치);
        break;
      case 'ㅑ':
        객체생성(글자데이터.야, 종적모음위치);
        break;
      case 'ㅓ':
        객체생성(글자데이터.어, 종적모음위치);
        break;
      case 'ㅕ':
        객체생성(글자데이터.여, 종적모음위치);
        break;
      case 'ㅗ':
        객체생성(글자데이터.오, 횡적모음위치);
        break;
      case 'ㅛ':
        객체생성(글자데이터.요, 횡적모음위치);
        break;
      case '우':
        객체생성(글자데이터.우, 횡적모음위치);
        break;
      case 'ㅠ':
        객체생성(글자데이터.유, 횡적모음위치);
        break;
      case 'ㅡ':
        객체생성(글자데이터.으, 횡적모음위치);
      case 'ㅣ':
        객체생성(글자데이터.이, 종적모음위치);
        break;
      case 'ㅐ':
        객체생성(글자데이터.애, 종적모음위치);
        break;
      case 'ㅒ':
        객체생성(글자데이터.얘, 종적모음위치);
        break;
      case 'ㅔ':
       객체생성(글자데이터.에, 종적모음위치);
        break;
      case 'ㅖ':
        객체생성(글자데이터.예, 종적모음위치);
        break;
      default:
        push();
        // translate(횡적모음위치.x, 횡적모음위치.y);
        // 한글['우']();
        pop();
        console.log("글자기본값출력");
        break;
    }  //end switch    
  } //end for()
  
  // pop();
}





//곁받침 체크 함수
function 겹받침체크(arrayname) {
    var lastest = arrayname[arrayname.length - 1];
    var last = arrayname[arrayname.length - 2];
    var t_lastest = Hangul.isConsonant(lastest);
    var t_last = Hangul.isConsonant(last);
    var result = false;
    if (t_lastest === true && t_last === true) {
        // console.log("곁밭침을 포함하는 문자 : " + arrayname);
        result = true;
    }
    return result;
}

//곁받침을 홑낱자로 변환
function 겹받침변환(arrayname) {

    var lastest = arrayname.pop();
    var last = arrayname.pop();
    var newEl = Hangul.assemble([last, lastest]);
    var result = '';
    if (newEl === 자소ㄱㅅ) {
        result = 'bottom15';
    } else if (newEl === 자소ㄴㅈ) {
        result = 'bottom16'
    } else if (newEl === 자소ㄴㅎ) {
        result = 'bottom17'
    } else if (newEl === 자소ㄹㄱ) {
        result = 'bottom18'
    } else if (newEl === 자소ㄹㅁ) {
        result = 'bottom19'
    } else if (newEl === 자소ㄹㅂ) {
        result = 'bottom20'
    } else if (newEl === 자소ㄹㅅ) {
        result = 'bottom21'
    } else if (newEl === 자소ㄹㅌ) {
        result = 'bottom22'
    } else if (newEl === 자소ㄹㅍ) {
        result = 'bottom23'
    } else if (newEl === 자소ㄹㅎ) {
        result = 'bottom24'
    } else if (newEl === 자소ㅂㅅ) {
        result = 'bottom25'
    }
    return result;           
}










/* **** 스타일, DOM Elment 생성 ****************************** */

function setStyle() {
    //캔버스 기본 스타일 설정
    colorMode(HSL);
    strokeJoin(ROUND);
    // strokeWeight(10);
    // noFill();
}
//P5로 DOM Element를 생성
function makeDomElement(elName) {

  switch (elName) {
    case 'input':
      makeInput();
      break;
    case 'button':
      makeButton();
      break;
    default:
      console.log("none dom element.");
      break;
  }

  function makeInput() {
    //Input 설정    
    input = createInput(); //생성
    input.addClass('form-control'); //클래스 부여
    input.size(200, 40); //크기
    input.position(요소위치.inputX, 요소위치.inputY); //위치
    //   input.hide();
  }

  function makeButton() {
    //Button 설정 
    button = createButton('글자생성'); //생성
    button.position(요소위치.btnX, 요소위치.btnY); //위치
    button.mousePressed(redrawing); //마우스 클릭시 이벤트함수 호출
    button.addClass('btn btn-default'); //클래스 부여
  }
}


//버튼 클릭 이벤트 : 클릭할때마다 현재 Input값을 바탕으로 다시 loop를 실행시킨다.
function redrawing() {
  var inputall = input.value();
  var inputSplit = inputall.split('');
  letterArray = inputSplit;
  background(255,30); //다시 그릴때 이전의 글자를 지움(덮어쓰기)
  
  딴짓객체추가(letterArray);
  // loop();
}


//개발함수 : 루프정지
function keyPressed() {
  var worktime = "" + year() + ". " + month() + ". " + day() + ". ";
  //67 is c
  if (keyCode === 67) {
    noLoop();
    console.log("noLoop");
  } else if (keyCode === 83) {
    save(wokrname + " " + worktime);
  }
}

//콘솔에 사잇점을 구하여 출력한다.
function 글자데이터생성(num) {
  글자구조데이터(num);
  viewPosData();
}


function 캔버스영역체크() {
  push();
  
  stroke(0);
  strokeWeight(2);
  rect(0, 0, width, height);
  pop();
}

// 스마트폰 가속도계 데이터 accelerometer Data
window.addEventListener('deviceorientation', function(e) {
  알파 = e.alpha;
  베타 = e.beta;
  감마 = e.gamma;
});