WPF Korea +

'쿠루'에 해당되는 글 3건

2010/07/06 김쿠루의 치명적 매력
2009/07/28 WPF ASCII Art(Character Art) (1)
2009/06/12 쿠루를 소개합니다 ~!~!

김쿠루의 치명적 매력

입흐다...

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 곡스

TAG Kuru, 김쿠루, 쿠루

Trackback 0 Comment 0

안녕하세요. 김대욱입니다. 자기전에 포스팅 하나 하고자야겠다 싶어 새벽 포스팅 시작합니다. ㅎㅎ

이번시간에 소개해 드릴 내용은 WPF를 이용해 아래와 같이 문자열로 이루어진 이미지를 만드는 방법입니다. 제목은 조금 거창하게 ASCII Art라고 소개했지만 일정 공백을 두고 픽셀 정보를 가져와 이를 문자열로 바꾸기만하면되는.. 매우 간단한 예제가 되겠습니다...(낚시 제목.. ㅈㅅ) 아래 사진속 고양이는 저희집에서 저와 함께 살고 있는 쿠루 입니다 +_+

위 그림에서 보시다 시피 이미지를 입력하면 해당이미지를 문자로만 이루어진 이미지로 변환 하기 때문에 폰트 크기가 작으면 작을 수록 원본이미지와 유사한 이미지로 나타나는 것을 확인 하실 수 있습니다. 구현 방법 소개에 앞서 동영상을 보면서 어떻게 동작하는지 한번 생각해보시기 바랍니다~!! 동영상 캡쳐할때 화질이 좋지 못해서 색상이 이상하게 표현되네요 ㅠㅠ ㅋ 화질좋고 빠른 동영상 캡쳐 툴 있으면 추천해주세요~!~!

사실 이번시간에서의 중요한 대부분의 코드는 XAML보다는 C#코드로 되어있습니다. 설명은 주석에 적어놨으니 참고하시길 바라며 아래는 이미지의 경로를 입력하면 임의의 문자열과 적합한 색상값을 갖는 객체를 추출 하는 작업에 대한 코드입니다.

public static List<ASCIIArtElement> Make(string Path, int ResultWidth, int ResultHeight)
{

// 생성 결과가 저장될 공간
    List<ASCIIArtElement> Result = new List<ASCIIArtElement>();
    
    int BitmapHeaderSize = 54;

// Step #1. 입력받은 Path로부터 BitmapImage를 생성
    BitmapImage Image = new BitmapImage(new Uri(Path));

// Step #3. BmpBitmapEncoder를 사용하여 Image를 Bmp형식으로 변환   
    BmpBitmapEncoder Encoder = new BmpBitmapEncoder();
    Encoder.Frames.Add(BitmapFrame.Create(Image));

// Step #4. Encoder에 저장된 내용을 MemoryStream에 저장
    MemoryStream MemoryStream = new MemoryStream();
    Encoder.Save(MemoryStream);

// Step #5. 헤더를 부분을 건너 뜀,Bitmap Fileformat과 관련된 내용은 
    //          http://en.wikipedia.org/wiki/BMP_file_format 를 참고하세요.
    MemoryStream.Seek(BitmapHeaderSize, SeekOrigin.Begin);

// Step #6. 출력 Size에 맞게 공백크기 지정, 만약 출력크기가 원본보다 크면 공백은 1
    int XSpace = Image.PixelWidth > ResultWidth ? Image.PixelWidth / ResultWidth : 1;
    int YSpace = Image.PixelHeight > ResultHeight ? Image.PixelHeight / ResultHeight : 1;

int Offset = 0; // MemoryStream에서 사용할 Offset

// 임의의 ASCII값을 추출하기 위한 Random Class정의
    Random Rand = new Random((int)DateTime.Now.TimeOfDay.TotalMilliseconds);

// Step #7. 공백만큼의 간격을두고 루프를 돌면서 순차적으로 픽셀정보 및 아스키값을 기록
    //          ※ BMP Format에는 Y가 거꾸로 저장되어 있으므로 Y가 끝에서 부터 시작
    for (int Y = Image.PixelHeight - 1; Y > 0; Y -= YSpace)
    {
        for (int X = 0; X < Image.PixelWidth; X += XSpace)
        {
            Offset = (Image.PixelWidth * 4) * Y + (X * 4) + BitmapHeaderSize;
            MemoryStream.Seek(Offset, SeekOrigin.Begin);

Color Color = new Color();
            Color.A = 255;
            Color.B = (byte)MemoryStream.ReadByte();
            Color.G = (byte)MemoryStream.ReadByte();
            Color.R = (byte)MemoryStream.ReadByte();

ASCIIArtElement Element = new ASCIIArtElement();
            Element.Color = Color;

// ASCII Art에 사용할 임의의 문자열 지정
            // 특정 문자열로 반복하게 하고싶다면 이부분 수정
            Element.ASCII = ((char)(Rand.Next('A', 'Z'))).ToString();

Result.Add(Element);

}

// Y값이 변하면 줄바꿈이 발생한 것이므로 Br!!
        Result.Add(new ASCIIArtElement() { ASCII = "<br>" });

}

// Step #8. 결과 리턴
    return Result;

}

코드자체가 어렵진 않기때문에 이해하시는 데에는 큰 무리가 없을것으로 생각되며, 제가 이번시간에 ASCII ART예제를 준비하면서 말씀드리고 싶은 중요한 내용은 BmpBitmapEncoder를 이용해서 간단하게 PixelData를 가져올수 있다~!~! 라는것입니다. 예전에 System.Drawing.Bitmap객체를 활용해서 Pixel Data를 접근 방법에 대해 소개해 드린적이있지만, Bitmap Class는 WPF에서 기본적으로 사용하는 Class가 아니기때문에 Reference를 추가하는 등에 작업이 필요합니다, 하지만BmpBitmapEncoder와 MemoryStream을 사용하면 위 작업을 하지 않아도 PixelData에 접근이 가능하기 때문에 이번 예제와 같은 내용을 개발하실 때 상당히 유용할것 같습니다. (단, 위 방법을 사용하실 경우 수정시 원본이미지에 반영 되지는 않습니다..)

나머지 위 코드를 호출하는 부분등은 아래 첨부한 소스코드를 보시면 확인하실수 있습니다. 기타 질문이나 문의 요청사항은 이메일이나 리플 오른쪽 포스팅 소제 제공을 통해 문의 하시면 되겠습니다 ^^

PS. 제작할때 폰트를 굴림체, 돋움체, 궁서체 등 모든 문자의 크기가 동일한 폰트를 활용하면 굳~~~~ 입니다.

WPFASCIIART.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 곡스

TAG c#, WPF, XAML, 쿠루

Trackback 0 Comment 1

쿠루를 소개합니다 ~!~!

오랜만에 쓰는 개인적인 글이네요..ㅎㅎ -_-ㅋ
작년 10월경부터 저와 함께 동거(?)하고 있는 고양이 쿠루를 소개합니다!!
포스팅하고 있는 쿠루가 자꾸 책상위로 올라와서 모니터를 보고 있길래 자기껏도 써달라는 소리인가.해서 쓰게 됬습니다ㅎㅎ
아비시니안이라는 종의 고양이 이구요. 네이버에 아비시니안으로 검색을 해보니

발끝으로 살그머니 걷는 걸음걸이에 매우 우아한 분위기가 감돈다. 털색은 이글이글 불타는 듯 빛나 보인다.

라고 어떤분이 설명해주셨네요... 이글을 보니 하루종일 잠만자고 하루종일 뛰어다니는 쿠루가 아비시니안이 맞나.... 하는 생각이 드네요 ㅎㅎ 보통 고양이 하면 무뚝뚝하고 혼자서 생활하기 좋아하고 주인을 아래것(?)으로 생각하는.. 그런 동물로 이야기 되는데 쿠루를 보면 이녀석이 개인지 고양이 인지 구분을 못할정도로 애교많고 활발한 성격때문에 하루하루 너무너무너무 행복하답니다 하하하 .. ㅋㅋ

얼마전에는 쿠루야 사진찍자~ 하고 카메라를 들이 댓더니 아래와 같은 요상한 포즈를 취하더군요.. 얼핏보면 셀카찍는 고양이 같습니다. ㅎㅎ 특히 오른쪽사진은 얼짱각도까지 ...

사랑스러운 쿠루야!!!
앞으로도 쭉~~~~~ 아프지말고 건강하게 아빠와 함께 알콩달콩 자아아알 지내보자!! 그럼 이만!! 야옹~ㅋ

P.S 요즘 쿠루가 애태게 여자친구를 구하고 있습니다 혹시 주변에 쿠루의 여자친구가 되어줄 아비시니안 여아가 있다면 소개좀 시켜주세요 ㅎㅎ

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 곡스

TAG 고양이, 아비시니안, 쿠루

Trackback 0 Comment 0