반응형

https://youtu.be/Mm2eYfj0SgA

예에에에전에 3Blue1Brown분의 푸리에 급수 영상을 보고

갑자기 저런건 도데체 어떻게 만들까.. 라는 생각이 들었다.

 

그래서 여러 곳을 찾아보다가 일단 제일 기본적인 것을 해보고 싶어서 해보았었다.

그래서 위 영상을 찾았고 JS로 되어있어서 C++로 변경을 하고 작동을 하게 새로 만들어서 결국엔 성공했다.

예전에 작게 테스트로 작성해본거라 잘 작성하진 못해서 오래 계산하면 느려지기도 하고 그렇지만.. 어쨌든 된다!

 

언젠간 코드를 다시 짜봐야지

 

https://github.com/cheongpark/Fourier-Series_CPP

 

GitHub - cheongpark/Fourier-Series_CPP: graphics.h

graphics.h. Contribute to cheongpark/Fourier-Series_CPP development by creating an account on GitHub.

github.com

https://youtube.com/shorts/pZXLSCzHu3I?feature=share 

 

 

반응형
반응형

밤 11시쯤에 할꺼 없어서 그냥 프로그래머스 보다가

예전부터 스킬체크를 봤었는데..

다른 공개 문제의 1단계가.. 어렵다 보니 하다가 못 풀까봐 걱정했는데..

이 참에 할꺼 없어서 한번 도전해봤다.

 

결과

!통과!

해본 소감

1단계에 있던 공개문제보다.. 훨씬 쉬웠다.

문제도 별로 안되고 약간의 지식만 있으면 아주 쉽게 풀 수 있는 문제였다.

 

단순한 방법만 생각하면 풀 수 있는 문제였다.

그리고 시간은 40분이였는데.. 너무나도 충분했었다.

15분? 걸렸나? 이것보다도 빠르게 풀 수 있었는데 주석도 달고 오류도 좀 해결하느라.. 좀 걸리긴 했다.

 

다음에 다른 문제도 도전해야지~

반응형
반응형

이 글은 그냥 제가 했던 것을 올리는 것 입니다! 튜토리얼 X

아마 이건 튜토리얼로 언젠간 올라갈 것 입니다!

 

2022년 08월 03일 학교 선생님이 일러스트 프로그램 있냐구 물었다. 이 날 밖에 있었는데.. 나중에 부탁한대서 일단 안심했다..

2022년 8월 05일 갑자기 일러스트 프로그램으로 이미지 업스케일링을 부탁했다.. 난 이날 3시에 나가야하는데.. 02시 03분에 부탁했다.. 일단 나가는건 좀 늦추고 20분에 컴퓨터를 키고 찾아보긴 했었다..

일단 비워져있는건 이미지이다. 근데 생각해보니 일러스트는 벡터로 이미지를 수정할 수 있고 업스케일을 해야한다면 벡터 방식의 이미지여야 한다.. 근데 준건 jpg이거나 png이다.. 업스케일은 가능하겠으나.. 그냥 해상도만 업될꺼다.. 그래서 말했더니 찾아보라 했다..

 

바로 난 찾아봤다. 여러 유튜브를 보다가 포토샵도 보고 웹도 보고 했지만 딱히 잘 된게 없어보여서 시간도 짧아야하고.. 그래서 예전에 어느 유튜브에서 봤던게 생각나서 그걸 검색해서 깃허브를 찾아봤다.

 

https://github.com/cszn/BSRGAN

 

GitHub - cszn/BSRGAN: Designing a Practical Degradation Model for Deep Blind Image Super-Resolution (ICCV, 2021) (PyTorch) - We

Designing a Practical Degradation Model for Deep Blind Image Super-Resolution (ICCV, 2021) (PyTorch) - We released the training code! - GitHub - cszn/BSRGAN: Designing a Practical Degradation Model...

github.com

바로 이것이다. 2시 20분에 바로 다운을 할려다가 좀 할게 많을 것 같아서 무슨 툴 찾아서 해봤는데.. 하하 에러..

 

그래서 바로 다시 이걸로 다운받아서 아나콘다로 가상환경 만들고 pytorch 필요한 것 같아서 내 쿠다에 맞춰서 파이토치를 깔고 다른 패키지도 깔아서 실행했는데..

 

갑자기 안된다는 것이다.. 오류를 보니깐  잘 몰라서 검색해봤더니 conda로 파이토치를 설치하지말고 wheel로 설치해봐라 해서 해봤다. 

 

됬다!

 

그래서 나는 바로 다시 실행했는데.. 뭔가 진행되었었다. 그래서 이건 된다 생각되서 더 도전하니깐 계속 오류가 뜨긴 하는데 폴더가 지정이 제대로 안되서 그런 것 같다. 폴더 위치도 제대로 잡고 어디서 다운로드 하라는 것도 다운을 해서 했더니! 성공!

 

그래서 바로 예제파일을 지우고 내가 변환할껄 바로 변환해서 보낸게 02시 58분이다.. ㄷㄷ

 

다행히 성공해서 기뻐하고 보냈는데..

 

하하하하ㅏ하하하하하하 나가야하는데.. 이런 메세지가 와서 일단 해봤다

pdf를 변환하는거라서 난 처음에 이게 이미지로 되어있을 것 같아서 인터넷에 로고가 있지 않을까? (학교 로고다) 찾아봤더니.. 없다 대충 뭐 나와있는거 다운에서 크롭 하고난 후에 늘렸더니 음.. 실패!

 

그래서 말해보니 pdf 자체를 키워서 해보라고 해서 보니깐.. 벡터 방식으로 저장되어 있었다.

그래서 일러스트 켜서 그 부분만 복사해서 새 파일에 넣고 나는 바로 나가야 해서 충분히 필요한 만큼 (더 이상 부탁하지 않게..) (8000 x 8000)px로 보냈다. ㅎ 

 

그러다가 내가 변환하는 과정을 보여줬는데 visual studio code 화면을 보여주니

난 기뻤다..

 

어쨌든 시간이 촉박해도 하고 싶다는 생각만 있으면 된다는걸 알 수 있었다.

뭐 이제 다 썼고.. 결과화면을 보여줘야되는데.. 학교에서 보내준건 올리면 안될 것 같아서 대충 다른걸로;;

근데 하다가 얘가 글카를 얼마나 많이 쓰는진 모르겠지만.. 내 글카가 3080TI인데 GPU 램을 최대로 써서 중간에 꺼지기도 했었다.

둘다 구글에서 이미지 아무거나 다운받아서 한거다.. 근데 신기하게 진짜 잘된다 ㄷㄷ

https://imgsli.com/MTE5NjE5

 

https://www.khan.co.kr/culture/book/article/201409192048535 - Imgsli

https://www.khan.co.kr/culture/book/article/201409192048535

imgsli.com

 

https://imgsli.com/MTE5NjIw

 

https://post.naver.com/viewer/postView.nhn?volumeNo=7635057&memberNo=34220424 - Imgsli

https://post.naver.com/viewer/postView.nhn?volumeNo=7635057&memberNo=34220424

imgsli.com

 

반응형
반응형

이 글은 그냥 제가 했던 것을 올리는 것 입니다! 튜토리얼 X

(언젠간 도움이 되지 않을까..)

시간이 있거나 누군가 이 게시글에 강좌글 좀 이라 하면 시간날 때 해보겠습니다! (근데 보는 사람이 있나?)

 

일단 YOLO V5가 C++에서 돌아갈까? 라는 생각은 그냥 학교 가다가 생각난 것..

그래서 검색해보니 YOLO V5가 Pytorch로 모델을 저장하는데, 이 Pytorch가 C++에서 돌릴 수 있는 모델로 변환할 수 있다는 말에 잠시 글을 좀 찾고 해볼 다짐을 했었습니다!

 

정확히는.. (2022-7-18-월) 생각해보니 방학 전이네

 

처음에 찾은 글은 Pytorch를 C++에서 돌리는 방법을 찾아봤더니 LibTorch라는게 있어 그것 부터 해볼려고 해서

먼저 C++로 돌릴 수 있는 파일을 찾아보기로 했습니다.

 

https://chowdera.com/2021/04/20210410171748944y.html

 

Libtorch 6: deployment of C + + version yolov5.4 - 文章整合

One 、 Environment configuration win10 vs2017 libtorch-win-shared-with-deps-debug-1.8.1+cpu opencv349    because yolov5 Code , The author is still updating ( When I write this blog , What's the latest 5.4), The structure of the model may change , So w

chowdera.com

처음엔 이걸 찾았었습니다.

 

그러다가 방학 한 후에 (드론을 날리자 였나?) 이거 프로그램에 신청해서 방학 한 후에 갔다오기도 하고

2022-7-25에, 저어어번에 신청했던 한국데이터산업진흥원 체험하러 갈려 했는데.. 갑자기 아침에 몸이 심각하게 않좋았어서 (아파도 참고 가는 성격) 그냥 쉬었다.. (긴장해서 그런 듯..)

 

그 다음 날 가서 데이터에 대한거 설명 듣고 쓰는 법 배우고 pandas도 해보고 대회(전날 안와서 pandas도 모르는데 선생님이.. 동아리 학생이라고 혼자 팀으로.. (뭐 다른 애들도지만, 3등 안에 못들면 방학 끝나고 발표라던데.. 뭐 하라는 말은 안하셨습니다~)) 도 했었는데 3등도 못들고 시간 안에 한 문제도 못풀고.. 뭐 암튼 그렇게 해서 그 다음 날 다시 드론 가고

 

드론이 다 끝난 수요일에 본격적인 시작을 했습니다.

 

일단 처음에 한 작업은 Visual Studio에서 Pytorch를 해보기 위해 Pytorch로 변환하거나 하는 파이토치 한국 문서(공식 문서 같던데..)를 찾아서 해볼려 했는데 그 전에 그냥 유튜브에 치면 되지 않을까? 해서 봤더니

https://youtu.be/6eTVqYGIWx0

이런 영상이 있어서 바로 해봤지만.. OpenCV를 넣어야 하는데 넣지 못해서(하는 방법을 몰름..) 그래서 바로 포기하고 일반 빈 프로젝트를 만들어서 아까 그 문서대로 따라했는데도.. 안됬습니다.. 보니깐 리눅스에서 돌린 것 같길래..

 

이리저리 해보다가 일단 먼저 변환부터 해보자 해서..

Visual Studio Code 켜서 내가 학습한 것 보단 이미 학습된거 사용할려고 detect.py 실행해서 파일 다운받고 (yolov5x.pt) export.py 로 pt -> torchscript로 변환했습니다. (둘다 pt로 끝나네 우연이겠지?)

 

그리고 실행해볼려는데 계속 안되서.. 그냥 포기하자 하고 포기했습니다.. 하하하 그러다가 낮잠이라도 잘까 할려다가

잠시 누웠더니 누군가 이미 다 파일까지 올려놓지 않았을까? 하는 마음에 구글에 검색해보니

 

https://github.com/yasenh/libtorch-yolov5

 

GitHub - yasenh/libtorch-yolov5: A LibTorch inference implementation of the yolov5

A LibTorch inference implementation of the yolov5. Contribute to yasenh/libtorch-yolov5 development by creating an account on GitHub.

github.com

이걸 찾았습니다.. ㄷㄷ

 

ㄱㅇㄷ이라는 생각을 하고 바로 해보자 해서 Visual Studio Code에서 돌릴려고 CMake 파일도 있어서 CMake로 해보자 라는 생각에 도전했는데 쉽게 안됬습니다.. 하하하 (뭐 당연하지만)

 

CMake도 제대로 해본건 이번이 처음이였고.. 해서 CMake로 Libtorch도 새로 빌드하고 OpenCV도 새로 빌드 하면서 해봤지만.. 실패.. (빌드하다가 알게 됬는데 vcpkg를 사용하면 C++에서 사용가능한 걸로 빌드 해주는걸 찾아서 신기하고 여기서 포기해도 되겠다 라는 생각이 들 정도로.. 좋았다)

 

계속 실패를 하다가 (대략 4시간 이상)

바로 GitBash로 해봤는데도 당연히 실패다..

패키지도 새로 깔고 하다가.. cmake 파일에서 Makefile이 생성되어야 하는데.. 계속 안되더니 보니깐..

대충 윈도에선 Makefile이 생성 안되고 리눅스에선 되는 것 같아보였다.

 

그러다가 리눅스니깐.. 저어어번에 깔았던 Cygwin이 생각나서 바로 몇시간 동안 했었는데.. 음! 당연한 결과 실패

그래서 여기에서의 문제도 Makefile이 생성이 안되는 문제였어서..

 

진짜 리눅스로 돌려야 되는군아.. 생각해서 윈도우에서 우분투를 까는 법을 찾아보니 WSL을 사용하면 된다고 해서 바로 블로그 찾고 해서 깔아서 했습니다. 음 (예전에 Windows 10을 처음에 살 때 Home 버전이 진짜고 Pro는 짝퉁이라고 누가 유튜브에서 유명한 누군가가 그래서 Home 버전을 샀었는데.. 나중에 Pro로 살껄이라는 후회를..) 그래서 Windows Home이여서 WSL를 깔거나 했는데도 안되서 그냥 포기하자 하고.. VR을 새벽까지 하다가 자고 12시에 일어나서 다시 해보자라는 생각으로.. 바이오스에서 SVM모드를 활성화를 하고 좀더 찾아보고 해봤는데도.. 안되서 문제점을 확인하고 Hyper-V가 윈도우 기능에 없어서 안된다는 문제점을 알고 인터넷을 찾아보니 https://forbes.tistory.com/542

 

윈도우10 Home Hyper-V 설치 및 활성화 (Docker Desktop 설치)

HowTo - Windows 10 Home Hyper-V 활성화 방법  Hyper-V는 x64 시스템을 위한 하이퍼바이저 기반의 가상화 시스템으로 Linux, FreeBSD 등 다양한 운영체제를 Windows에서 가상 머신을 이용해 실행할 수 있습니다..

forbes.tistory.com

이런 글이 있길래 바로 해서 결국 까는데에 성공했다..

 

그리고 계속 도전했다. 뭐 45분 정도 게임을 하거나 낮잠을 자긴 했는데 그 시간 빼고는 전부다 이걸 해내는 일에만 계속 도전했다.

 

약 8시간 이상은 쓴듯? 6시간인가? 뭐 암튼

 

우분투 기본 설정도 좀 하고 (리눅스 쓸 줄은 잘 모른다..)

하다가 위에 올린 LibTorch YoloV5 깃헙 그걸 가져와서

설정하는데.. 진짜 짜증나게도 cmake가 없다고 해서 cmake 다시 빌드하고.. 1시간 이상.. 찾아보고 하면서 설치..

cuda도 깔고 하는데도.. 이미 깔려있는데 계속 안된다고 했다..

 

대충 이런느낌..? 사진은 못 찍었는데..

대충 cudnn이 설치 안되어있다고 하거나 뭐가 없다고 하거나..

 

계속 빨간줄이 보였다..

계속 안되다가 좀더 검색하면서 번역도 해가면서 뭐가 문제인지 찾고

경로 설정이 제대로 안되어 있는 것 같아서.. 조금만 바꿔보니.. 뚜둔

뭐가 안되던게 넘어가졌다.. 포기할 까 생각했었지만.. 이 때부터 더 해보는 걸로 했다.

 

된다고 하더라도 그 뒤에 오류도 있어서 대충 찾은건 CUDA_TOOLKIT_ROOT_DIR, CMAKE_CUDA_COMPILER 이 2개가 경로 설정이 안되어서 생긴 오류 였던 것 같다.

 

어찌저찌 해서 했는데 갑자기 Makefile이 생기면서 진행이 되었고

깃헙에 있던 GPU 명령어로 돌렸더니.. 처음엔 안됬다... torchscript도 넣고 다 해보니 안됬는데..

이유가 이건 터미널 창이고 GUI도 없는데 사진 창이 나올리 없었다... (main.cpp코드 Demo 함수에서 저장이 아닌 보여주는걸 확인했었음) 그래서 imwrite를 찾아서 해볼려다가 (이건 왜 안되는지 지금도 잘 모르겠다.) 이것도 안되서 GUI로 변경해볼려 했지만 안되서 그러다가 XLaunch라는걸 찾아서 깔고 하다가 또 안되서.. 또 계속 하다가 블로그 찾아서 또 하고..

그러면서 다 되었다... 테스트로 텍스트 파일을 여니 성공했고...

 

그 후에 돌려보니 정상적으로 작동!

처음에 돌려졌을 때 찍은 사진이다...

와.. 신기하긴 하다.. 이게 파이썬이 아닌 C++로 돌아가다니..

 

그래서 바로 다른 사진도 해보았다.

그냥 구글에서 street 검색해서 나오는거 아무거나 다운받아서 시도!

 

진짜 잘된다.. 너무나도 신기했다..

 

그래서 뭔가 좀 박스 때문에 잘 안보여서..

코드를 좀 수정했다. 뭐 if문 한개만 바꿨지만..

 

분석을 대충 해보니 

옵션에서 view-img를 넣으면 원래는 비활성화 였던거가 활성화로 변경되어서 Demo 함수를 실행

Demo 함수에서는 이렇게 나오는데 대충 보니 

cv::rectangle(img, box, cv::Scalar(204, 243, 238), 2);

이 코드는 박스 색을 지정하는거여서 내가 원하는 색으로 지정했다. (원래는 0, 0, 255 로 빨간색 이였음)

그리고 또 보니 나는 그 위에 Person 상자를 없애고 싶어서 더 확인해보니 putText가 보여서 텍스트 박스를 띄우는거라 생각하고 그 코드를 보니 if문으로 되어있었다. 그리고 label의 bool로 실행되거나 안되는 거였는데 

2번째 위에 올렸던 사진을 보면 Demo 함수를 호출할 때 class_names 값으로 결정한다. (그 곳엔 Demo함수에서 label에 대한걸 확인 후)

그걸 보고 그 위를 보니

대충 코드를 보니 ../weights/coco.names 파일이 비어있다면 -1로 꺼버리는 것 같았다.

뭐 그래서 if문으로 작동하는 것 같아서 0으로 바꿨다.

 

그리고 해보니 아주 이쁘게 나왔다.

어쨌든 성공해서 기뻐서 이 글을 쓰는데.. 지금 4시 11분이네.. 새벽.. (분명 여기까지 끝냈을 때가.. 2022-07-28 새벽 2시 39분 이였다..) 2일 동안 겁나 빡센거 했었네.. 3~4일은 지난 줄 알았는데.. 암막커튼 때문에 시간 개념도 약간 사라졌었고..

 

뭐 어쨌든 글도 다 썼으니.. 오늘 바로 10시에 약속 있어서 자야겠다.. (VR 할려 했는데...)

 

난 파이썬을 잘 몰라서 C++로 해보고 싶어서 시작한건데.. 안해본 것 까지 다 해봐서 좋았다.. 그리고 C++이 파이썬보다 분석이 난 익숙해서 코드 분석이 좀더 쉬웠던 것 같다.

 

이번 걸로 처음 도전해보거나 예전에 해봤지만 제대로 이번에 해본건 : VCPKG, WSL, Ubuntu, CMake, Makefile, LibTorch, (Cuda, Cudnn 우분투 설치), 등등

뭐.. 이 것도 내일되면 거의 다 까먹는다.. 그래도 했다는게 중요한거니 다음에 다시 할때 안되도 오늘 했던 마음을 생각하며 다시 계속 다시 해봐야겠다.. 언젠간 CMakeLists 파일도 만들고 빌드도 다 직접하고 블로그를 최대한 안 찾아보고 할 수 있을 날이 올려나..

 

어쨌든 이번 작업은 예전에 몇주 동안 하던 것 보다 빡쌔서 중간에 포기할까? 포기할까? 생각했지만.. 계속 시도해보고 하니.. 되는걸 보니 간단한 것도 나한테 알려달라 하는 그런 반애들은.. 도데체 뭘까하는 생각이 든다.. 나 처럼 계속 찾아보지도 않고 열심히 해보지도 않고 안된다고.. 나한테 계속 말하는게 좀 짜증나기도 한다..

 

나도 하고 싶어도 안되면 어떻게든 찾아보고 하는데 그런 마음을 다른 애들도 가지면 좋겠다 생각된다..

 

난 안되면 밤새서라도 엄청 계속 하는데 왜 다른 애들은 계속 안해보고 포기해서 나한테 묻는걸까.. (다른 애한테 묻기도 하겠지만..) 뭐 내가 수학을 엄청 모르는거 때문에 대충 마음은 알지만.. 자신의 끈기로 누가 시키지도 않고 도전해보는건데.. 실패하고 포기해서 남을 짜증나게까지 해서 알려달라고 하는게 정말.. 지금도 잘 이해는 안된다.. (나중에는 되겠지..?)

 

싫었던 것

알려주기 싫다고, 혼자 한번 해보라고, 계속 검색해보라고, 난 되는데 넌 왜 안되냐고, 난 엄청 힘들게 했는데 넌 왜 그렇게 안할려하는건데, 여기까지만 알려주고 나머지 자잘한건 직접 찾아보라고 해도

나한테 돌아오는 답변은 안돼, 그냥 좀 알려주라, 너가 재능이 있잖아, 넌 해봤잖아, 넌 알고 있잖아 이미 되잖아, 귀찮으니깐 알려줘 이런 것이다..

내가 진짜 짜증나는 말들은 난 잘 못하는데 계속 남한테 소개하거나 나한테 알려달라 할 때 넌 이거 잘하잖아 하거나 그게 너 재능이라고 하면 짜증난다..

난 분명 못하는데 계속 그렇게 말하니.. 

 

내가 최대한 알려줄 수 있는데까지도 알려주지만.. 알려주기 힘들거나 못 알려주겠거나 안알려주고 싶을 때는 나에게 근처 애들은 점점 사라져간다.. 내가 들은 말 중에 어떤 말은 "내가 얘와 친구 하는건 나중에 도움되거나, 얘가 알려주겠지" 라 내 앞에서 했었다. 내가 앞에 있는데도 그 말을 듣는 순간.. 그 애와 친하게 대화하던 것들이 생각나면서 싫어졌다.. 그 이후로는 대화를 만히 하진 않았다..

 

그래서 그러한 생각들 때문이거나 다른 것들로 난 친구들을 만들지 않거나 회피하기로 했었다. 뭐 지금도 비슷하거나 다르기도 하지만.. 도와달라는 걸로 계속 싸움이 몇십번 일어났었다.. 계속 해보라고 하는데도.. 어떤 애와는 완전 말을 끊기도 했다.. 우xx 난 계속 이러한 생각을 하면서 내가 생각하던 친구들은 내가 제일 잘한다고 생각해서 친구로 있는걸까..? 하고..

요즘에 진행하는 다른 애들의 프로젝트에서도.. 그런 것 때문에 나하고 같이 하자는건가..? 계속 그러다보니.. 현재는 대화는 해도 친구라는 말은 안쓴다.. 그래서 누군하 한테 말할 때도 친구라 하진 않고 친구라 말한다. 

 

그래도 하지만 정xx 같은 그런걸로 만난 친구가 아닌 진짜 서로 잘 맞아서 친구로 있는 친구는 진짜 친구라고 생각된다. 코딩도 딱히 관심없고 해서 나는 그런 친구와는 진짜로 친구라고 한다. 그래서 나에게 진짜 친구는 2022년 7월 29일로 오프라인 친구는 2명이다. (현재와 계속 통화하거나 만나는 친구)

 

뭐 어쨌든 난 그게 싫었고 뭐 이 글을 읽어주셔서 감사합니다!

분명 검색한건 YOLO V5나 C++때문에 검색했겠지만.. 이상한 글이 있어서 의아하셨겠지만..

뭐 나중에 YOLO V5를 C++로 돌리는걸 시간이 되면 올려보겠습니다!

 

교훈 : 안된다 생각하지 말고 어떻게든 방법을 찾아서 끝까지 도전해보자! 

몇 주씩 진짜 해보다가 안되면 그 때 누군가에게 물어보고 도움을 받아보자!

반응형
반응형

 

유튜브

어느 날 알고리즘에 이 영상이 올라왔다.

수학을 못하는 나.. 코딩은 자신 있으니 엑셀이 아닌 C++로 만들어보고 싶었다.

(근데 수업 때 이런걸로 수업해주셨으면.. 수학에 관심 있었을텐데..)

 

준비

일단 제작 방법을 생각해보자!

2중 포문으로 100 * 100의 블럭을 출력하면 될 것 같다.

2중 포문에선 먼저 계산을 해서 배열에 저장하고 나중에 출력하면 될 것 같다.

 

그리고 색까지 넣어서 이쁘게 꾸미는 것을 목표로 한다.

 

제작

#include <iostream>
#include <math.h>
#include <windows.h>
#include <algorithm>

#define x 101 //가로 캔버스 크기
#define y 101 //세로 캔버스 크기
#define outline 15 //아웃라인 색깔

using namespace std;

void textcolor(int color); //텍스트 컬러 지정
void top_bottom_block(int color); //위쪽 아래쪽 아웃라인 블럭 지정
void left_right_blck(int color); //왼쪽 오른쪽 아웃라인 블럭 지정

double a[x][y] = {};

int main() {
	ios::sync_with_stdio(false);
	cout.tie(NULL);

	for (int i = 0; i < x; i++)
		for (int j = 0; j < y; j++)
			a[i][j] = sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2)); //식 입력

	top_bottom_block(outline); //15는 흰색

	for (int i = 0; i < x; i++) {
		left_right_blck(15); //15는 흰색
		for (int j = 0; j < y; j++) {
			textcolor(a[i][j]);
			cout << "■";
		}
		left_right_blck(15); //15는 흰색
		cout << endl;
	}

	top_bottom_block(outline); //15는 흰색
}


void textcolor(int color) {
	SetConsoleTextAttribute(GetStdHandle(STD_OUTPUT_HANDLE), color);
}

void top_bottom_block(int color) {
	textcolor(color);

	for (int i = 0; i < x + 2; i++)
		cout << "■";
	cout << endl;
}

void left_right_blck(int color) {
	textcolor(color);
	cout << "■";
}

일단 기본 적인 구조는 만들어 보았다.

캔버스의 크기가 101로 되어있는 이유는 100으로 하게 되면 원의 중심점이 제대로 잡혀지지 않기 때문에 101 홀수로 맞춰서 잡아주었다.

 

 

sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))

식 입력 부분에 위 코드를 집어넣으니 원이 출력되었다.

어떤 원리인진 자세하게는 모르겠지만 어쨌든 신기하다!

 

그 다음은 영상에서 나온 원과 배경을 구분하여 출력하는 것이다.

min((double)1, max((double)0, 25 - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))))

나는 일단 색은 그대로 두었다. 만약 이 색이 마음에 안들면 출력 2중 포문 안쪽 textcolor(a[i][j]); 에서 a[i][j] 뒤에 + 5 이런걸로 해서 색을 지정하든지 일정 값마다 색을 다르게 하는 코드를 추가해서 해보면 될 것 같다.

 

어쨌든 다음!

min((double)1, max((double)0, 25 + 15 * cos(5 * atan2(j - (x / 2), i - (y / 2))) - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))))

신기한건 수학의 식은 한줄이며 이 식만 길어지는 것 뿐인데 그냥 코딩으로 하나씩 포문 여러번 돌리면서 문제를 해결하는 것보다 짧게 되서 수학에 약간 관심이 있어지는 것 같기도..??

 

또 다음!

min((double)1, max((double)0, 20 + 20 * pow((0.5 + 0.5 * cos(5 * atan2(j - (x / 2), i - (y / 2)))), 0.3) - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))))

계속 식을 적으면서 불편한 것은.. 영상에서 나온 엑셀의 식을 C++에 적용을 하기 위해 제곱을 pow로 하고 하는 과정들이 조금 불편하지만.. 오우 너무 근데.. 신기하다..

 

다음!

min((double)1, max((double)0, 20 + 20 * pow((0.5 + 0.5 * cos(5 * atan2(j - (x / 2), i - (y / 2)))), 0.3) - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2)))) + min((double)1, max((double)0, 19 - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))))

으어어어... 길다..

 

다음!

min((double)1, max((double)0, 20 + 20 * pow((0.5 + 0.5 * cos(5 * atan2(j - (x / 2), i - (y / 2)))), 0.3) - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2)))) + min((double)1, max((double)0, 19 - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2)))) - 2 * min((double)1, max((double)0, 2 - abs(4 - sqrt(pow(abs(j - 50) - 6, 2) + pow(i - 45, 2)) * min((double)1, max((double)0, 46 - i))))) - 2 * min((double)1, max((double)0, 2 - abs(8 - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))))) * min(max(i - 50, 0), 1)

드디어 완성!!

영상과는 꽃잎의 회전이 조금 다르지만.. 어쨌든! 성공했다..

으어ㅓㅓㅓ 코드가 너무 길어..!!

 

글을 쓰면서 코드를 적는데 너무 보기도 힘들고 어렵지만.. 다행히 식은 나와있어서.. 다행이였던 것 같다..

내가 혼자 식 만들어서 하라하면.. 절대 못할 듯..

 

어쨌든 추가로 테스트를 더 해봤다.

아래 것 들은 수학을 잘 모르는 상태에서 아무 값이나 이리저리 넣어보면서 테스트 한 것이니.. 뭐라하지 마시길...

 

sqrt(i * j)
tan(i * j)

 

tan(i + j)
20 + 20 * pow((0.5 + 0.5 * cos(5 * atan2(j - (x / 2), i - (y / 2)))), 0.3) - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))
cos(i * j)
cos(i + j) * sin(i * j)

내가 테스트로 해본 식들은 그냥 내가 아무거나 식을 적어서 넣어서 출력해본 것이다.

굳이 따지진 말기~

 

근데 진짜 수업시간에 매번 어떻게 쓰는지도 잘 모르는 수학 식으로 수업하는 것보다.. 이렇게 눈으로 그려보면서 수업하는 것도 재밌을 것 같다..

우리 학교는 안해주나...

 

어쨌든 끝입니다!

감사합니다! (2022-05-26 오후 9시 20분 작성완료)

반응형
반응형

주의 전문적인 지식이 없이 진행하기 때문에 이 내용은 확실하지 않을 수 있습니다!

네이버엔 가사를 입력해 음악을 찾을 수 있는 서비스가 있다.

 

 


일단 왜 이것을 하게 되었는지 부터...

저번에 어떤 친구가 네이버 가사 검색 API를 가져와서 쓰고 싶다고 나한테 물어봤다.

 

이때 여러가지 생각이 들었다. 일단 난 고등학생이며 HTML를 고등학교 1학년 때 처음으로 배우고 그 뒤로는 찾아보며 한 것 때문에 기본 지식이 별로 없었고, API에 대한 개념이나 하는 방법을 거의 전혀 모르고 있었다. 

 

학교에선 반 학생들은 나에게 어떤 프로젝트를 진행할 때 많이 물어보곤 한다. 해본 것이 많기 때문에 그리고 나는 그것을 해결해준다. 대부분의 문제들을 해결 할 수 있었다. (분명 난 검색 능력이 좋아서 찾아보고 코드를 이해하고 도와주는 것일 뿐인데.. 왜 거의 다 해결되는거지..)

진짜 신기하긴 하다. 내가 어떤 목표로 잡은 것은 어떻게든 검색하여 찾아서 해볼려고 한다. 그걸로 고 1 6월 달 전엔 몰랐던 파이썬, 헤로쿠, 아나콘다 등등을 12월에 거의 다 사용할 수 있게 되었었다.

 

어쨌든

나는 이 난감에 어떻게든 이 문제를 해결해보고 싶었다.

그가 아닌 나를 위해... (아 물론 다 해결한 후 어떻게 했는진 비밀로 함)


 

1. 어떻게 동작하는지 이해해보며 API를 찾아보자!

일단.. 요즘 내가 듣는 음악.. 잘 된다.

여기서 난 과연 어떻게 동작할 지 생각해 보았다.

분명 API로 가사를 보내서 데이터를 가져올 것 같다.. 라 생각했다.

 

그래서 나는 네이버 디벨로퍼에서 API를 찾아보았다. 음.. 없다!

그래서 여기서 위험한 짓을 했다.. 

소스코드를 뜯어보자..

 

F12 개발자 모드를 열어 하나하나씩 다 확인해보았다 Ctrl + U 키로 전체 소스코드도 확인해보았다.

소스코드를 확인해보다가 가사 검색의 종료 지점에 스크립트 하나가 숨겨져 있었다.

가사 검색이라는 말이 있는 것이 보니.. 이 것이 맞는 것 같았다..!

 

대충 소스코드를 보니 (Visual Studio Code에서 자동 정렬 시켰다.) 참고로 난 이 글을 쓰는 날에도 아직 JS를 잘 사용하지 못한다.

jquery의 ajax를 사용하여 api로 값을 보내서 가져오는 것 같았다.

 

나는 바로 이것을 API 테스트 하는 곳인 POST MAN에서 써보자라는 생각이 떠올랐다.

그래서 바로 시도해보았다.

일단 이렇게 넣어봤다. 그냥 진짜 순서대로 넣은 것이다. Get은 값을 가져와야하기 때문에 저렇게 한 것..

쿼리 파라미터로 일단 모든 값을 보내보았다.

값은 일단 음.. 실패인가..

일단 affordanceLink라는게 보인다.. 내가 생각하기엔 저기서 검색을 하는 것 같다..

직접 주소 창에 치니깐..

잘 나온다..;;

어쨌든 이게 목표가 아니고..

그래서 그 당시 생각했던 방법이.. 왜 가사검색 뒤에 띄어쓰기가 있는지 고민해보았다.

그래서 여기에 가사를 넣어보니.. 뚜둔

신기하게.. 제대로 작동한다..

일단 여기에서 필요없는 파라미터가 있을 테니 일단 하나씩 빼보자.. 

그리고 난 pkid, u1, u2, u3, u4를 모두 뺐다. 그래도 동작해서..

저게 뭔진 나도 잘 모른다.

어쨌든 되는 것을 확인했으므로 이것을 구현해보자 웹에서 쓸 수 있게!

 

2. 구현!

여러 AJAX 사용법을 찾아보며 테스트로 코드를 만들어봤다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <script
            src="https://code.jquery.com/jquery-3.4.1.js"
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>

        <div id="result"></div>
        <script>
            $
                .ajax({
                    method: "GET",
                    url: "https://m.search.naver.com/p/csearch/content/qapirender.nhn?where=nexearch&key=LyricsSearchResult&",
                    data: {
                        q: "가사검색 화장은 치열하게 머리는"
                    }
                })
                .done(function (msg) {
                    $("#result").text(JSON.stringify(msg));
                });
        </script>
    </body>
</html>

일단 js를 이용하여 ajax를 사용하기 위한 jquery를 불러오고 ajax를 이용하여 API를 가져오는 코드를 만들어봤다.

파라미터는 바뀔 것이 q 뿐이므로 나머지 파라미터는 미리 입력해줬다.

그리고 값이 출력되면 msg에 넣어서  <div id="result"></div> 이 곳의 텍스트로 json을 출력해보았다.

그랬더니..

json 형태로 나오는 건 맞는 것 같은데.. html요소도 보인다.. 네이버에서 이걸 바로 쓸 수 있게 html코드와 함께 보내는 것 같았다.

나는 그래서 여기에서

가사라고 영어로 되어있는 부분쪽의 텍스트만 출력해보기로 했다.

var e = $(msg.current.html).find('.lyrics');
$("#result").text(e[0].innerText);

2줄의 코드만 일단 테스트 해봤다. 클래스 lyrics를 찾고 그 안에서

API 값을 가져와 lyrics 부분을 추출했을 때 json의 값이다. (아마)

0: p.lyrics를 보았고 그 안에는 innerText라는 값이 있고 그 안에 가사가 있었다. 그리고 이 코드를 실행하면

이런식으로 잘도 나오게 된다. 그리고 여기에서 제일 중요한건 가사가 아닌 제목이기 때문에 제목도 뽑아보자.

 

일단.. 당시엔 안해본 것이기 때문에 글을 쓰면서 테스트해보는데 제목이 안뽑힌다.. 

<a nocr onclick=\"return goOtherCR(this, 'a=nco_xfc*1.title&r=1&i=801980af_00000099223C&u=' + urlencode(this.href));\" href=\"https://vibe.naver.com/track/3810383\" target=\"_blank\">Bad Girls</a>

class가 따로 안보였기 때문에.. 난 이것을 어떻게 뽑는지 잘 모른다.. 그래서 보다가보니 music_title에 모든 정보가 담겨있는 것을 보았다.

 

그래서 출력해본 결과

이런식으로 제대로 출력이 되었다.. 나는 여기서 개행을 하거나 그러고 싶지는 않기 때문에 도전할 분들은 직접 js에서 해보시길..

어쨌든 제대로 출력되니 코드를 보자.

var music = $(msg.current.html).find('music_title');
$("#result").text(music.prevObject[0].innerText);

설명은 잘 못하겠지만.. music이라는 변수에 music_title 클래스를 찾아 그 코드에 있는 innerText 값을 div의 아이디 result 값에 텍스트로 넣는 것이다. 이렇게 해보니 저 위의 사진 처럼 나왔다.

 

이제 이 것을 계속 커스텀으로 입력할 수 있어야 했다.

그렇기 때문에 또 계속 해보았다.

 

 

최종결과!

위에서 검색어 창에 입력 후 오른쪽 조그만 박스를 눌르면 바로 아래 여러 텍스트로 뜬다.

나는 여기서 더 이상 진행하지 않으며 여기까지만 만들 것이다. 코드는 아래에 올리고 나머지 작업은 직접 시도해보길!

(근데 이거 보고 과연 따라하는 사람이 있을까?)

 

사실 이 시도 후에 검색하다가 musixmatch 이걸 찾았었다. 그리고.. API를 사용하여 가져오는 방법도 있었고 훨씬 많은 음악을 지원하며 API 지원도 잘 되어있었다..

어쨌든 이 이후에 musix match도 해서 출력했었었다. 이 과정은 나중에 업로드 할 것임!

 

어쨌든 저 처럼 노가다 안하실 분은.. musix match로!

 

코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <script
            src="https://code.jquery.com/jquery-3.4.1.js"
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>

        <input type="text" id="search" placeholder="검색할 가사"/>
        <button id="bt">검색</button>
        <div id="result"></div>
        <script>
            document
                .getElementById("bt")
                .addEventListener('click', getmusic);
            function getmusic() {
                $
                    .ajax({
                        method: "GET",
                        url: "https://m.search.naver.com/p/csearch/content/qapirender.nhn?where=nexearch&key" +
                                "=LyricsSearchResult&",
                        data: {
                            q: "가사검색 " + document
                                .getElementById("search")
                                .value
                        }
                    })
                    .done(function (msg) {
                        var music = $(msg.current.html).find('music_title');
                        $("#result").text(music.prevObject[0].innerText);
                    });
            }
        </script>
    </body>
</html>

직접 해보실 분은 아래에서 테스트 해보세요!

Document

 

음 참고로 줄 이상한건 자동 정렬때문에 그런거..

 

어쨌든 끝! (2022-05-26 오전 12시 42분 작성 완료)

 

 

반응형

+ Recent posts