[Lottie] JSON 애니메이션 파일 공유 커뮤니티 - LottieFiles



애펙 애니메이션을 JSON으로 바꾸어 여러가지 플랫폼에 적용할 수 있게 해주는 Lottie 플러그인의 웹사이트 LottieFiles

요기 가면 애니메이션 테스트 뿐만 아니라 유저들이 올린 파일을 마음껏 다운 받을 수 있다.

실제 업무에서는 새로운 애니메이션 이펙트가 필요할 경우, 

개발자님이 이 사이트에서 대략 비슷한 느낌 혹은 그냥 본인이 자주 보기에 좋은 (맘에 드는) 이펙트를 다운받아 적용해 놓으시면

나는 그 화면 내에 적용된 더미를 보고 새로운 애니메이션 파일을 만들어 드리는 식으로 작업한다

여러모로 도움을 많이 받는 사이트라 나도 연습도 할 겸, 누군가에게 도움이 되고 싶기도 하고, 또 은근히 우리 앱 키워드를 끼워넣어서 홍보도 할겸 로티파일 커뮤니티에 파일을 올리기 시작했다. 


https://www.lottiefiles.com/

파일을 업로드하면 몇시간~ 몇일 내로 관리자의 승인이 나게 되고, 로티파일 웹사이트와 로티 앱이 애니메이션 리스트에 보이게 된다

기본적으로는 JSON 파일을 올리게 되어있고, Aep 애프터 이펙트 파일을 같이 올리면 맘껏 수정해서 쓰시오! 라는 뜻이 된다

만들기 귀찮은 자잘한 이펙트는 Aep 파일로 받아두었다가 참고해서 만들기에 좋다



일단은 UFO 모양 때문에 범용적으로 쓰이기엔 적합하지 않을 거라는건 알지만 당분간은 앱 내에서 쓰인 디자인 위주로만 업로드하고,

 일반적인 디자인들은 나중에 개인 작업으로 따로 진행할 예정 

그래도 오늘 올린 애니메이션은 애펙 파일도 같이 업로드 해보았음


아직 미개척(?) 분야의 커뮤니티여서 그런지 벌써 top contributors에 올랐다..오..


프로필에는 회사 아트웍전용 인스타 계정만 올려두었는데 프로필뷰도 조금 나오는듯 

나는 그냥 다운로드만 하고 남꺼는 잘 안열어봤는데 .. 반성중(?)

본문에 마크다운 사용 가능하다고 해서 난생처음 써보기도 하고.

한땀한땀 만든 2018 새해 맞이 애니메이션이 나름 반응이 좋아서 다행이다





[Sketch] 스케치 이미지를 일러스트로 불러오는 옵션들 테스트



일러스트레이터에서 제작한 이미지를 스케치로 불러오거나, 스케치에서 제작한 이미지를 일러스트로 불러올때

그리고 이런 이미지들을 애프터 이펙트로 다시 불러와 사용할 때 몇가지 불편한 일들이 생긴다 ㅠㅠ

매번 나를가장 번거롭게 하는게 스케치에서 만든 이미지를 다른데서 사용할때 오브젝트를 감싸는 빈 사각형이 클리핑 마스크로 씌워지면서 그 사각형들을 일일히 제거하는 것.

사각형을 걷어내다보면 오브젝트가 하나씩 떨어져나가기도 하고 내가 원하는 그룹핑이 깨지기도 한다. 

때로는 스케치 상에서 회전값을 가지고 있는 오브젝트의 경우 애펙에서 열어보면 회전값이 0으로 되어있어서 일일히 패스를 열어 다시 수정해줘야 한다.

오늘 스케치 이미지를 일러스트로 불러와서 이미지를 수정한 다음에 (스케치는 아직도 자유로운 & 미세한 작업 하기에는 넘 불편하다) 애펙으로 불러가는 프로세스를 거치면서 몇가지 테스트를 해봄


방법 1 : 원하는 오브젝트를 선택하여 EPS로 Export 

방법 2: SVG 로 Export

방법 3 : PDF로 Export

방법 4 : 스케치에서 복사하여 일러스트 새 파일에서 붙여넣기


익스포트 해보면 세 가지 방식이 캔버스 크기도 다르게 잡히는걸 알 수 있다



첫번째, EPS로

캔버스에서 원래 있던 위치는 무시하고 크기도 무시하고 클리핑마스크 사각형 있음

스케치 크기 300 300 이었을때 일러스트 400 400으로 나오고, 스케치 50 50 인데 일러스트 300 300 으로 나온다. 기준이 뭔지 모르겠음



두번째 PDF, 

오브젝트 사이즈 만큼만 캔버스 사이즈가 맞춰서 들어온다.

그런데 외곽선 모드로 들어가보면 원래 스케치 캔버스 사이즈와 위치를 가늠할수는 있게 되어있음

클리핑 마스크 사각형 있음




세번째,  SVG

딱 오브젝트만 깔끔하게 뽑아오려면 SVG로 익스포트 하는게 가장 좋은 것 같다

오브젝트 사이즈만큼만 캔버스 사이즈 리사이징 되고, 클리핑 마스크 사각형 없음



네번째, 스케치에서 복사하여 일러스트 새 파일에서 붙여넣기

의외로 급할때 가장 자주 하는 방식인데, 더럽게 사각형들이 따라온다



추가 테스트 

SVG로 스케치 캔버스 전체를 익스포트 해보니, 스케치 내에서 그룹핑한대로 그대로 export 된다

이건 나중에 애펙에서 작업할때도 꼭 남아있는게 좋다



결론 : 급하더라도 SVG로 저장한 다음 불러오는 습관을 들여야겠다








[BodyMovin] 애펙을 JSON으로 바꿔주는 플러그인 업데이트 소식


Bodymovin

New version of Bodymovin

Version 5.1.1 (January 2018)


Big performance improvement for all web renderers. Very recommended to upgrade.
Some bug fixes.
Happy New Gregorian Calendar Cycle :)

Changes in this version:

## V 5.1.1
- Text Layer keyframed fix

Upgrade instructions:

To upgrade please refer to this FAQ: How to upgrade "Name Your Own Price" products.


이메일로 Bodymovin 플러그인 업데이트 소식이 날아왔다!

Lottie 와 Bodymovin 덕에 안드로이드, iOS, 웹에 쓰이는 애니메이션과 이펙트 작업에 여러모로 많은 도움을 받는 중이다

이번에는 전반적인 웹 렌더링쪽 퍼포먼스 향상과, 텍스트 레이어 관련 버그를 수정했다고 한다

실제로 돌려봤는데 이전과 어떤 점이 다른지는 정확히 모르겠으나 그냥 감사함


https://aescripts.com/bodymovin/

애프터 이펙트 플러그인이나 스크립트를 다운받을수 있는 aescripts로 가서 

좌측에 20달러라고 적힌 곳에 원하는 금액을 넣고, (0이라고 넣어도 된다) 장바구니에 넣은 후,

결제프로세스를 거치면 된다

유료로 구매하지 않고 원하는 금액을 지불하는 방식을 "Name Your Own Price" 제품이라고 하는데,

이런 제품은 모두 업그레이드시 새로 구매를 하는 프로세스를 거치는것이 규정이다.

업그레이드시 감사의 뜻으로 후원을 더 할수도 있으니까? 0ㅁ0


다운받은 후 ZXP Installer 로 설치하고 애펙을 재실행하면

Extensions 패널에 잘 들어감






스터디/UX, HCI, Interaction 2017. 12. 19. 15:43

[Sketch] 스케치 파일의 레이어를 애프터 이펙트로 Sketch2AE


맥에서 스케치 파일의 레이어를 애프터 이펙트로 옮겨주는 플러그인 Sketch2AE

https://google.github.io/sketch2ae/

이런 훌륭한건 도대체 누가 만드나 봤더니 역시 구글이었다..

디자이너들의 암을 깨끗히 낫게 하여주시는 감사한 존재








1. 다운받아서 스케치 플러그인 설치 - 새로운 파일에 아트보드에 원하는 스케치 레이어 넣고 플러그인 메뉴에서 세이브 






2. jsx 파일을 응용프로그램 내부에 애펙 ScriptUI Panels 폴더에 넣기! - 아까 저장한 sketchae 파일 불러오기

근데 여기서 json parse 에 에러가 뜬다 

........


여러 시도를 해봤는데

안보이게 가려둔 안쓰는 레이어는 다 지우고.. 

텍스트는 왠만하면 create outline (그럼 텍스트 애니메이션은 애펙에서 못해보는건가)


레이어를 한꺼번에 다 옮기는것보다는 그룹별로 따로 옮겨서 콤포지션을 만들고 그걸 합쳐서 하나의 파일로 만드는걸 추천!



-- 

지금 가장 확실한 방법은 텍스트 레이어를 깨는건데

홈페이지 샘플 영상을 보면 텍스트가 그대로 살아있다. 폰트와 텍스트를 영어로 바꾸었는데도 효과 없음

그냥 create outline 이 답인듯 

어차피 bodymovin - lottie 로 가려면 텍스트를 깨서 하는게 낫겠다 싶기도 하다.

아래는 깃허브에 로그인데 이번 버젼에서 따옴표 안에 텍스트 에러나는거랑 빈 오브젝트 에러가 고쳐지긴 했다고 한다




스터디/Unity 2017. 3. 26. 21:21

[유니티] Unity create a game series (sebastian lague)



Unity Create a Game Series

https://www.youtube.com/watch?v=SviIeTt2_Lc&list=PLFt_AvWsXl0ctd4dgE1F8g3uec4zKNRV0

https://github.com/SebLague/Create-a-Game-Source


와 한글 번역 해주신분 감사합니다.

튜토리얼도 알차고 매 에피소드마다 코드 히스토리도 github에 올라와있고 이 튜토리얼로 공부한 한글 블로거들도 있어서 뭔가 문제에 부딪혔을때 검색해보거나 물어볼수도 있지 않을까 하는 기대감(?)



영상 러닝타임 약 5시간, 실제 따라 만들려면 하루 이틀이면 되려나. 생각좀 해보자.

00 Intro 1:31

01 Player controller 15:09

02 Gun system 14:43

03 Enemies 12:59

04 Damage system 10:06

05 Spawn system 10:41

06 Enemy Attacks 16:19

07 Some loose ends 10:37

08 Tile map 12:04

09 Obstacle placement 15:03

10 Map connectivity 17:04

11 Map navigation 14:40

12 Finishing the map generator 18:42

13 Random spawning 20:24

14 Game over 14:43

15 Particle death effect 13:24

16 Weapon effects 20:38

17 Weapon variation 12:41

18 Wave difficulty 16:04

19 Crosshairs 14:20

20 Recoil and reloading 22:12

21 Guns and UI 22:16

22 Audio pt1 17:30

23 Audio pt2 17:22

24 Menu 31:20

25 finishing up 31:12

스터디/Processing 2016. 10. 21. 22:35

[Processing] openCV를 활용한 트래킹 영역 설정 및 왜곡 보정


위쪽은 일단 포토샵으로 만든거긴한데 레고패널 위에 양 모서리에 흰색 동그라미 하나씩 두면 웹캠 영상 중에 그 영역 안의 부분만 캡쳐해서 쓰는 코드 작성.

일단 처리 순서는 뭐가 더 효율적인지는 잘 모르겠지만 내가 만든 방법은

1) openCV로 받은 이미지 중 흰색 부분을 다 contour 추출 

2) contour들을 bounding box 씌워주고 중심점 추출 

3) 그 중심점들과 전체화면의 각 모서리들간의 거리를 구해서 4개의 점에서 젤 가까운 상하좌우 obeject를 찾는다

4) 그 4개점을 연결해주는 사각형안에 있는 부분만 Warpperspective 로 다시 픽셀 재배열 하여 우측 타겟사각형 안에 구겨넣음 


이렇게 해두면 나중에 웹캠 위치나 각도 보정도 되고, 프로젝션이랑 카메라인풋이랑 싱크시키기도 좀더 수월해지고, 

아래 판의 크기에 따라서 프로젝션되는 영역 자체도 작고 커지는 scalablity가 생겨서 다른 데모만들떄 좀 유용하지 않을까 기대중


맥에 기본 카메라인 facetime 말고 외부 웹캠으로 불러오게하는 방법

http://www.codingcolor.com/2014/01/21/processing-2-1-webcam-basics/


오브젝트 거리 구하는것도 좀더 정교한 방식도 있다

http://www.pyimagesearch.com/2016/04/04/measuring-distance-between-objects-in-an-image-with-opencv/


WarpPerspecvie 샘플 (여기서는 detection된 contour 네개중에 몇번째거만 오른쪽으로 띄우라는 예제이므로 변형해서 사용)

https://github.com/atduskgreg/opencv-processing#warpperspective-in-progress


Contour간의 위계도 지정하기

http://docs.opencv.org/trunk/d9/d8b/tutorial_py_contours_hierarchy.html


contour 간의 sorting 순서 

http://www.pyimagesearch.com/2015/04/20/sorting-contours-using-python-and-opencv/




스터디/Processing 2016. 10. 21. 22:12

[Processing] OpenCV를 활용한 Shape Detection

급히 정리하는 opencv

프로세싱에서 Import library 해보면  openCV가 두개가 뜬다.


위에 openCV는 좀 예전 버젼이고 http://ubaa.net/shared/processing/opencv/

아래 openCV for processing이 비교적 최근 버젼이며 예제도 더 많다.  (레퍼런스 페이지 http://atduskgreg.github.io/opencv-processing/reference/gab/opencv/OpenCV.html  Github https://github.com/atduskgreg/opencv-processing) 

그리고 이 둘다 openCV for java로 이루어져있기때문에 포함되어있지않은  예제나 설명부분은 java 레퍼런스 페이지에 가면 좀더 응용할여지를 찾아볼수있는듯. 

물론 openCV 오리지널 레퍼런스 페이지로 가게되면 C++기반이긴하지만 원래 어떤 기능들이 더 지원가능한지도 가늠하는데 도움이 되고 있음 (그래도 C++은 몰라서 나에겐 해독이 잘안되는편..)

두가지가 지원 버젼 및 윈도우용 64비트 문제가 뒤엉켜있는데 환경에 맞게 잘 선택해야할듯.

특히 2에서 3로 바뀌면서 setup()에서 캔버스 사이즈를 변수로 받아오는 기능이 없어져서 오로지 픽스된 숫자로만 캔버스 사이즈 기능을 저장할수있게 되었기 떄문에 기존 예제들 중에 플렉서블하게 만들어둔것들은 고정 숫자로 바꿔줘야함. 그래서 지금 테스트는 주로 2로 하는중~



아래 세가지 소스를 조합해서 실시간 비디오로 shape detection + Identification + motion detection까지 되는 데모를 만들었다

지금은 그냥 일반 카메라로 블랙배경 + 흰 물체로만 하고 손은.. 까만 장갑끼고 ㅋㅋㅋ 

요 다음 단계로는 적외선 카메라로 흰색으로 반사된 오브젝트만 트랙킹하는걸로 바꿀거라 손은 사라짐



opencv for processing 예제 중에 find countors + polygon vertex 그려주는 예제 

https://github.com/atduskgreg/opencv-processing/blob/master/examples/FindContours/FindContours.pde


트랙킹된 오브젝트 contour를 둘러싸는 bounding box 만들기 

http://docs.opencv.org/2.4/doc/tutorials/imgproc/shapedescriptors/bounding_rects_circles/bounding_rects_circles.html


Daniel Shiffman의 페이스 디텍션되는 숫자에 boudning box만들어주고 consistent한 ID부여하기 코드

http://shiffman.net/general/2011/04/26/opencv-matching-faces-over-time/


이 다음에는 각 shape들이 사전에 등록된 id와 매칭이 되게 하는 template matching 기능과 결합할 예정 

http://www.prodigyproductionsllc.com/articles/programming/template-matching-with-opencv-and-c/




스터디/Processing 2016. 10. 4. 23:34

[Processing] Computer vision for processing (Daniel Shiffman)

명불허전 다니엘 쉬프만 (http://shiffman.net/) 님의 컴퓨터 비전 기초 강의

유투브 재생목록 클릭 

11.4: Introduction to Computer Vision

11.5: Computer Vision: Color Tracking

11.6: Computer Vision: Motion Detection

11.7: Computer Vision: Blob Detection

11.8: Computer Vision: Improved Blob Detection

11.9: Computer Vision: Blob Tracking with Persistence

11.10: Computer Vision: Adding Lifespan to Blobs


졸업 프로젝트에서 뷰포리아 마커 트랙킹 쓰려했는데 환경도 너무 어둡고 마커위에 프로젝션이 되서 색상 트랙킹이 잘안되서 OpenCV로 갈아탈까 생각중

요 강의 목록에서는 간단하게 컬러트랙킹, 이전프레임과의 픽셀 차이값을 비교한 모션 디텍션, 그리고 Bulb 여러 점들을 디텍션하는 세가지 주제로 이루어져있다. 

뒤로갈수록 슨생님도 헷갈리고 나도 헷갈리고..........

shape detection이랑 bult detection이 혼합된 플로우를 만들어야되는데 과연 내가 할수있는 일인걸까

이거 다음엔 키넥트 강좌인데 일단은 키넥트는 빼기로 했다.

아무튼 또 굿럭



스터디/Data visualization 2016. 10. 4. 22:56

Moves API 활용 서비스 : moveoscope

몇년전 이동 데이터 모아서 아름다운 시각화와 인터페이스로 우리를 혹하게했던 모바일 어플리케이션 Moves https://www.moves-app.com/
얼마전에 갑자기 기억이 나서 찾아보니 이 API를 활용하는 앱이 엄청 많아졌다

그 당시엔 라이프로깅 자체에도 관심이 많고, 환경센서 데이터 시각화 과제도 있었기 때문에 참고하느라 애용했었는데 최근 다시 시각화때문에 리서치 하다가 찾아서 깔아봤더니 2013-4년 데이터가 고스란히 남아있어서 진짜 반가웠다. 그땐 쌓아서 뭐하나 싶어도 지나고 보면 데이터도 추억처럼 어쩐지 애틋하네.


iphone, android, web 용으로 110개쯤. 유사한 서비스 컨셉도 많고, 특수한 용도의 플러그인 정도로 나온 것도 있고. 


랭킹 1위 moveoscope. 기간 설정, 이동 유형, 많이 방문한 장소 표시 뿐만 아니라 특정 장소를 선택하면 어디에서 그 장소로 왔고 그 장소에서 어디로 갔는지 앞뒤 맥락이 나오는점도 재밌다 (우린 어디에서 와서 어디로 가는가.. 꽤나 사색적인 컨셉이랄까) 



큰 동그라미가 강남역 회사인데 클릭해보니 데이터는 거짓말을 하지 않아서 좀 슬픔 .....

평균 9-10시에출근해서 1-2시에 퇴근 ..주말출근도 잦았고 

더 슬픈건 회사에 있다가 자주 가는 장소가 집 다음으로 한의원..........(그위에 점 두개도 사실 병원...)
최근 방문이 2014년 5월인건 퇴사하면서 앱도 지워버려서이고..



좌하단은 사당역, 그 우측은 회사, 그리고 강건너 우 상단은 한남동으로 이사가고 이태원 열심히 돌아다녔던거. 

맨 좌측 상단에 하늘색 찔끔있는건 현장리서치하느라 여의도에서 자전거타고 돌아다닌 흔적까지 정말 깨알같네..

중간에 삐죽삐죽 끊기는 부분은 보통 지하철이나 한강다리위에서 일시적으로 통신이 잘 안되서 놓쳐지는 부분인듯. 

저것도 뭔가 보완해줄수 있으면 좋을거 같은데 




일주일 정도 모아본 카이스트 라이프




스터디/연구 2016. 10. 2. 01:54

[APP] Papers 3 및 Mac Bundle


Back to the Mac에서 소개된 대학생을 위한 할인 패키지에 Paper 3와 devonthink가 포함되어있어서 구매했다 (49.99)

http://macnews.tistory.com/4975

사실 이번 방학때 Papers 사려고 학생인증까지 받았는데 막상 결제를 하려고하니 약간 고민이 됐었다

마지막 학기인데 이제와서 다른 앱으로 갈아타기엔 너무 늦지 않았나 싶어서 그냥 쓰던 에버노트에나 잘 정리하자며 스킵했는데 (에버노트에 저장해둔 논문만 벌써 500개라 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ )

아무튼 에버노트도 PDF 내부 검색과 annotation도 워낙에 훌륭하긴하지만 나중에 논문쓰느라 바쁠땐 citation 도와주는것만도 큰 도움이 될것 같은거랑,

그중에 이제 진짜 중요한것만 골라서 어서어서 정리해야지.....

테스트 스크린샷.

맥이랑 윈도우 모바일 다 지원되서 다행.