lou@blog $ _

만들게 된 계기 회사에서 안드로이드 앱을 만들때 Lottie 애니메이션을 많이 쓰면서 개발하고 있다. 벡터기반의 Lottie 애니메이션이라면 용량걱정은 없겠지만, 3D 렌더링된 이미지를 프레임별로 재생하는 형식의 Lottie 애니메이션이기 때문에 용량 부담이 컸다. 애니메이션을 줄이고 줄여서 14mb가 되었는데, 이건 좀 아니다 싶어서 결국 시작시에 인터넷 여건이 좋으면 다운로드 받아두는 걸로 구현을 해두긴 했다. 애니메이션이 나에게 처음오면 zip으로 압축했을때 1~2MB 정도의 사이즈다. 보통 이게 3개정도 넣어달라고 우르르 몰려오는데...순식간에 6MB가 앱 용량에 추가되는거다. 디자이너분들도 PINGoo같은 툴을 써서 압축해서 주시지만, TinyPNG만큼은 압축률이 좋지않다. PINGoo가 평균 ..

바탕화면에 현재 bat이 위치하는 디렉토리의 TinyDoge.exe에 대한 바로가기를 만드는 스크립트이다. @echo off set SCRIPT="%TEMP%\%RANDOM%-%RANDOM%-%RANDOM%-%RANDOM%.vbs" echo Set oWS = WScript.CreateObject("WScript.Shell") >> %SCRIPT% echo sLinkFile = "%USERPROFILE%\Desktop\TinyDoge.lnk" >> %SCRIPT% echo Set oLink = oWS.CreateShortcut(sLinkFile) >> %SCRIPT% echo oLink.TargetPath = "%cd%\TinyDoge.exe" >> %SCRIPT% echo oLink.Save >> %SC..

움직이는 물체는 위치, 속도, 가속도 벡터를 가진다. 가속도는 속도에 영향을 미치고, 속도는 위치에 영향을 미치는 관계다. 프레임마다 물체가 움직인다는 것은 accX가 가속도, velocityX가 속도라고 하면 위치 (x,y)는 대략적으로 다음과 같이 쓸 수 있다. function move() { this.velocityX += this.accX this.velocityY += this.accY this.x += this.velocityX this.y += this.velocityY } 힘(Force)은 뭘까? 여기서 말하는 힘은 물리학에서 말하는 힘이다. "힘은 질량을 지닌 물체를 가속하는 벡터"이다. 단순히 한 프레임이 지나면 특정 거리만큼 이동하는 물체가 아니라 "자연"스럽게 이동하는 물체를 구현하..

Git Bash는 설치되어 있다고 가정하도록 하겠다. 먼저 MSYS2를 설치해야하는데, 윈도우에서 사용할 수 있는 GCC 지원 프로그램은 MINGW, MSYS2, CYGWIN 3가지가 있다. Git Bash는 MINGW에 해당한다. MSYS2 설치 https://www.msys2.org/ 에들어가서 Installer를 다운받아서 설치한다. 아래 링크를 이용해도 되지만, 최신버전을 원한다면 홈페이지에 들어가기~! https://github.com/msys2/msys2-installer/releases/download/2022-06-03/msys2-x86_64-20220603.exe MSYS2 관리자 권한으로 실행 설치가 완료되었다면, MSYS2 터미널을 관리자 권한으로 실행한다. TMUX 설치 이제 pac..

벡터 벡터는 “크기와 방향을 모두 가지는 어떤 양”으로 정의된다. 각 프레임마다 객체는 특정 수 픽셀만큼 가로 및 세로로 움직이도록 프로그래밍하게된다. 객체의 새로운 위치는 현 위치에 속도를 적용한 값이 된다. 위 그림을 코드로 옮기면 아래와 같다. // location = (this.x, this.y) this.x += this.vx // horizontal steps this.y += this.vy // vertical steps // new_location = (this.x, this.y) 벡터의 덧셈 두 벡터 u = (5, 2), v = (3, 4)가 있다고하면 u + v = (8, 6)이다. 두 벡터를 더한다는 것은 단순히 벡터의 성분 x와 y 값을 더하는 것이다. 코드상에서 중력을 표현할때도 ..

마우스로 찍은 점을 기준으로 야구공이 회전하는 기능을 만들 것이라고 가정 해보자. 그림은...벡터로 되어있지만 어쨌든 검은색 화살표 끝이 가리키는 방향이 유저가 찍은 좌표 x, y라고 하겠다. 야구공은 얼마만큼 회전해야할까? 위에서 본 그림을 우리에게 익숙한 직각 삼각형으로 나타내면 사이각 θ에대해 이렇게 정리할 수 있다. 우리는 V에대해 모르기때문에, 탄젠트 식으로 θ값을 구할 것이다. 양변에 역탄젠트(Arctangent)를 취해주면 식은 θ에 대하여 정리된다. 구글에 Math.atan2를 쳐서 가장 위에나온 javascript atan2 메소드의 설명을 가져와 보았다. The Math. atan2() method returns a numeric value between -π and π represen..

이번에 만들어볼 것은 사용자의 터치 입력에따라 회전하는 핸들뷰다. 다양하게 활용할 수 있는데, 회사에서 뽑기 기계를 만들어보자는 아이디어에서 삼각함수로 뽀리면 되겠는데?! 라는 생각에서 만들어서 검증해보았다. xml은 터치 입력을 받을 view_touch와 ImageView인 handle 단 두개로 이루어져있다. center에는 touch view의 가운데 지점을 저장하고, handle 이미지 뷰를 정 중앙으로 옮긴다. val viewTouch = findViewById(R.id.view_touch) val handle = findViewById(R.id.handle) val center = PointF() viewTouch.viewTreeObserver.addOnGlobalLayoutListener(o..

1. PackageManager인 Homebrew 설치 echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile eval "$(opt/homebrew/bin/brew shellenv)" 2. Rosetta (인텔 CPU 호환용) 설치 softwareupdate --install-rosetta 3. python 설치 brew install python 이 글은 파이썬 3.7을 기준으로 하고 있다. 3. ~/.zshrc를 만들어서shell 설정 파일을 추가한다. vi ~/.zshrc export LDFLAGS="-L/opt/homebrew-x86_64/opt/mysql-client/lib" export CPPFLAGS="-I/opt/homebrew-x..

다크모드가 대응이 안되있는 상태에서 브라우저 마음대로 색상을 반전시켜서 곤란해질때가 있다. 이럴때는 다크모드를 막아버려야하는데, 다음과 같이 막을 수 있다. :root { color-scheme: light only; }

export default function isDarkColor(color: string) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color); if (result == null) { return false; } var rgb = { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } let hsp = Math.sqrt( 0.299 * (rgb.r * rgb.r) + 0.587 * (rgb.g * rgb.g) + 0.114 * (rgb.b * rgb.b) ); return hsp