Android App 개발/chordbreaker

프렛에 도수 표시하기

시샐 2022. 10. 12. 15:40

 

 

기타는 개방현까지 생각하면 총 12 프렛이 표시되어야 하는데,

한 프렛을 빼먹은 것을 이제야 알아채고 급히 수정했다.

 

이제 각 프렛의 동그라미에 표시될 내용을 정리 해보기로했다.

 

위의 그림에는 테스트를 위해서 모든 프렛에 동그라미를 그렸지만,

key 버튼을 누르면 해당 키에 포함되는 프렛만 동그라미가 표시되어야 한다.

일단 키를 선택하면 상단의 텍스트로 현재의 key가 표시되는 것이 좋을 것 같다.

 

각 프렛의 노트는 글자 말고 음정의 도수(degree)로 표시하려고 한다.

알파벳 키를 사용하려하니 sharp과 flat 처리가 필요해서 쓸데없이 복잡해 질것 같다.

 

여기서 도수란 C 키의 경우

C,D,E,F,G,A,B 대신 1,2,3,4,5,6,7로 표시하는 것을 말한다.

(장 3도, 완전 5도 할 때 그 도수)

 

기타 같은 악기는 note 대신 도수를 쓰는 경우가 많다.

알파벳 표시는 혹시 나중에 필요해지면 그때가서 생각해보기로 하겠다.


일단 여기까지 작업을 하기로 했다.

이 작업 후에는 장조와 단조는 물론 Mode 선택도 가능하도록 할 생각이다.

 

C,C#,D,D#,E,F,F#,G,G#,A,A#,B 장조에서 지판에 도수를 표현하기 위한 데이터를 먼저 정의해보았다.

key 별로 각 줄, 그리고 줄 별로 프렛에 따라 도수를 주어야해서 3차원 배열이 필요했다.

 

정리하다보니 데이터는 각 조에 따라 같은 값이 뱅뱅 도는 것에 불과해서,

머리를 조금만 굴리면 데이터를 대폭 줄일 수 있을 것으로 보인다.

 

하지만 여기까지 오는데도 내 머리가 먼저 뱅뱅 돌아서 일단은 그냥 가기로 했다.

 

    private final static int [][][] degreeMajorArray = new int[][][] {
            // 1 to 6th string
            {{4,0,5,0,6,0,7,1,0,2,0,3},{1,0,2,0,3,4,0,5,0,6,0,7},{0,6,0,7,1,0,2,0,3,4,0,5},
                    {0,3,4,0,5,0,6,0,7,1,0,2}, {0,7,1,0,2,0,3,4,0,5,0,6}, {4,0,5,0,6,0,7,1,0,2,0,3}}, //C
            {{3,4,0,5,0,6,0,7,1,0,2,0},{7,1,0,2,0,3,4,0,5,0,6,0},{5,0,6,0,7,1,0,2,0,3,4,0},
                    {2,0,3,4,0,5,0,6,0,7,1,0}, {6,0,7,1,0,2,0,3,4,0,5,0}, {3,4,0,5,0,6,0,7,1,0,2,0}}, // C#(Db)
            {{0,3,4,0,5,0,6,0,7,1,0,2},{0,7,1,0,2,0,3,4,0,5,0,6},{0,5,0,6,0,7,1,0,2,0,3,4},
                    {0,2,0,3,4,0,5,0,6,0,7,1}, {0,6,0,7,1,0,2,0,3,4,0,5}, {0,3,4,0,5,0,6,0,7,1,0,2}}, // D
            {{2,0,3,4,0,5,0,6,0,7,1,0},{6,0,7,1,0,2,0,3,4,0,5,0},{4,0,5,0,6,0,7,1,0,2,0,3},
                    {1,0,2,0,3,4,0,5,0,6,0,7}, {5,0,6,0,7,1,0,2,0,3,4,0}, {2,0,3,4,0,5,0,6,0,7,1,0}}, // D#(Eb)
            {{0,2,0,3,4,0,5,0,6,0,7,1},{0,6,0,7,1,0,2,0,3,4,0,5},{3,4,0,5,0,6,0,7,1,0,2,0},
                    {7,1,0,2,0,3,4,0,5,0,6,0}, {0,5,0,6,0,7,1,0,2,0,3,4}, {0,2,0,3,4,0,5,0,6,0,7,1}}, // E
            {{1,0,2,0,3,4,0,5,0,6,0,7},{5,0,6,0,7,1,0,2,0,3,4,0},{0,3,4,0,5,0,6,0,7,1,0,2},
                    {0,7,1,0,2,0,3,4,0,5,0,6}, {4,0,5,0,6,0,7,1,0,2,0,3}, {1,0,2,0,3,4,0,5,0,6,0,7}}, // F
            {{7,1,0,2,0,3,4,0,5,0,6,0},{0,5,0,6,0,7,1,0,2,0,3,4},{2,0,3,4,0,5,0,6,0,7,1,0},
                    {6,0,7,1,0,2,0,3,4,0,5,0}, {3,4,0,5,0,6,0,7,1,0,2,0}, {7,1,0,2,0,3,4,0,5,0,6,0}}, // F#(Gb)
            {{0,7,1,0,2,0,3,4,0,5,0,6},{4,0,5,0,6,0,7,1,0,2,0,3},{0,2,0,3,4,0,5,0,6,0,7,1},
                    {0,6,0,7,1,0,2,0,3,4,0,5}, {0,3,4,0,5,0,6,0,7,1,0,2}, {0,7,1,0,2,0,3,4,0,5,0,6}}, // G
            {{6,0,7,1,0,2,0,3,4,0,5,0},{3,4,0,5,0,6,0,7,1,0,2,0},{1,0,2,0,3,4,0,5,0,6,0,7},
                    {5,0,6,0,7,1,0,2,0,3,4,0}, {2,0,3,4,0,5,0,6,0,7,1,0}, {6,0,7,1,0,2,0,3,4,0,5,0}}, // G#(Ab)
            {{0,6,0,7,1,0,2,0,3,4,0,5},{0,3,4,0,5,0,6,0,7,1,0,2},{7,1,0,2,0,3,4,0,5,0,6,0},
                    {0,5,0,6,0,7,1,0,2,0,3,4}, {0,2,0,3,4,0,5,0,6,0,7,1}, {0,6,0,7,1,0,2,0,3,4,0,5}}, // A
            {{5,0,6,0,7,1,0,2,0,3,4,0},{2,0,3,4,0,5,0,6,0,7,1,0},{0,7,1,0,2,0,3,4,0,5,0,6},
                    {4,0,5,0,6,0,7,1,0,2,0,3}, {1,0,2,0,3,4,0,5,0,6,0,7}, {5,0,6,0,7,1,0,2,0,3,4,0}}, // A#(Bb)
            {{0,5,0,6,0,7,1,0,2,0,3,4},{0,2,0,3,4,0,5,0,6,0,7,1},{6,0,7,1,0,2,0,3,4,0,5,0},
                    {3,4,0,5,0,6,0,7,1,0,2,0}, {7,1,0,2,0,3,4,0,5,0,6,0}, {0,5,0,6,0,7,1,0,2,0,3,4}}  // B
    };
 

프렛에 도수를 표현하는 것은 동그라미를 그린 것 위에 숫자를 쓰는 방식으로 구현했다.

Root는 잘 보이도록 빨간색으로 동그라미를 그렸다.

 

        paint.setTypeface(Typeface.create(Typeface.DEFAULT_BOLD, Typeface.NORMAL));
        paint.setAntiAlias(true);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setTextSize(38);

        for(int fret=0;fret<12;fret++)
            for(int line=0;line<6;line++)
                if (degreeMajorArray[key][line][fret] != 0){
                    if (degreeMajorArray[key][line][fret] == 1)
                        paint.setColor(Color.parseColor(("#F00000")));
                    else
                        paint.setColor(Color.parseColor(("#D5D5D5")));
                    canvas.drawCircle(FRET_START_X + FRET_DISTANCE_X * fret + FRET_DISTANCE_X / 2,
                            IMAGE_START_Y + LINE_DISTANCE_Y * line , 22, paint);
                    if (degreeMajorArray[key][line][fret] == 1)
                        paint.setColor(Color.parseColor(("#F0F0F0")));
                    else
                        paint.setColor(Color.parseColor(("#101010")));
                    String degree = String.valueOf(degreeMajorArray[key][line][fret] );
                    canvas.drawText(degree,
                            FRET_START_X + FRET_DISTANCE_X * fret + FRET_DISTANCE_X / 2,
                            IMAGE_START_Y + LINE_DISTANCE_Y * line + 14, paint);
                }
 

 

아래는 여기까지 구현된 내용이다.

 

뭔가 아쉬움이 남지만, 디자인은 모른체하고 차차 개선하기로 하고, 일단 기능 구현에 중심을 두기로 했다.

이미지 사이즈를 블로그 가로에 맞춰 줄이다보니 너무 흐리다. 

 

 

 

 

반응형