Who I really am
type과 interface는 객체의 타입의 이름을 지정하는 것이다. 둘의 쓰임새는 거의 비슷하지만, 몇 가지 차이점이 있다. 공식문서에서 안내하는 타입과 인터페이스 차이점 (링크) 타입 별칭과 인터페이스는 매우 유사하며, 대부분의 경우 둘 중 하나를 자유롭게 선택하여 사용할 수 있습니다. interface가 가지는 대부분의 기능은 type에서도 동일하게 사용 가능합니다. 이 둘의 가장 핵심적인 차이는, 타입은 새 프로퍼티를 추가하도록 개방될 수 없는 반면, 인터페이스의 경우 항상 확장될 수 있다는 점입니다. 기본 사용법 type MyType = { name: string; age: number; } interface IMyInterface { name: string; age: number; } 확장 t..
rotate() 함수는 도형을 회전시키는 역할을 하는데, 우리가 일반적으로 사용하는 각도법이 아닌 호도법에 기반하므로 rotate(45)를 입력하면 45도가 아닌 애매한(?) 각도로 돌아가게 된다. 각도법을 적용하기 위해선 angleMode(DEGREES) 를 써준다. function setup() { createCanvas(400, 400); background("#ececec"); angleMode(DEGREES); // 각도법 적용 } function draw(){ push(); translate(200, 200); rotate(45); rectMode(CENTER); rect(0, 0, 100, 100); pop(); } arc는 부채꼴을 만들어주는 함수 (아래 예시는 90도 부채꼴) arc(0,..
random 함수를 이용해서 x, y 좌표에 랜덤한 값을 넣어줄 수 있다. random(400) // 400 이하의 값 중 랜덤 random(100, 400) // 100~400 사이의 값 중 랜덤 function setup() { createCanvas(400, 400); background("#ececec"); } function mousePressed() { // 기존 동그라미를 가려주기 위해 백그라운드를 다시 그려준다 background("#ececec"); // 400 이하 값 중 랜덤 let x = random(400); let y = random(400); fill("pink"); ellipse(x, y, 100, 100); } 만약 위 코드의 mousePressed 함수 중 backgrou..
결과물을 영상으로 내보내기(저장하기) 1. 결과물이 될 오퍼레이터 오른쪽에 스크롤바처럼 생긴 부분 우클릭 > Top 섹션의 movie file out 2. movie file out의 type을 movie로 설정하면 영상으로, image로 설정하면 낱장의 이미지로 출력된다. 3. record 토글을 켜면 녹화가 시작되고, record 토글을 끄면 파일로 저장된다. (저장되는 경로는 해당 touchDesigner 파일의 위치와 같으니, 터치디자이너를 꼭 save 해주어야 한다) 깔끔한 인터페이스로 결과물 보여주기(코딩화면을 숨긴 상태 - 전시 등에 활용) 1. 빈 공간 더블클릭 > comp 섹션의 window 컴포넌트 불러오기 2. 결과물을 띄울 오퍼레이터를 드래그해서, window 오퍼레이터 우측상단의 ..
p5.js는 vscode와 같은 에디터가 없어도 기본적으로 웹에서 활용할 수 있는 에디터를 제공한다. https://editor.p5js.org/ p5.js Web Editor editor.p5js.org 위 페이지에서 코드를 작성할 수 있고, 이렇게 작성한 코드를 외부로 export하거나 아니면 다운로드 받아서 자신의 로컬환경에 설치된 vscode와 같은 에디터에서 열어볼 수도 있다. 상단의 File > Share를 선택하면 위와 같은 창이 나오는데, iframe으로 html에 바로 삽입할 수도 있고, 주소를 연결해서 full screen으로 볼 수도 있다. 다만 위와 같이 상단바는 없앨 수 없으므로, 저 바가 보기 싫다면 소스코드 자체를 직접 배포하면 된다. 점, 선, 면 등 여러 도형 만들어보기 H..
첫 번째 노드 video device in으로 웹캠 화면 가져오기 두 번째 노드 top 오퍼레이터 중 Luma blur (루마맵은 두 개의 인풋을 받는다. 하나는 웹캠영상, 다른 하나는 luma map) 세 번째 노드 top 오퍼레이터 중 circle 내 웹캠 영상 해상도와 맞춰준다 (방법은 이전 포스팅 참고) 백그라운드 알파를 1로 올려서 뒷 배경 색을 채워준다 첫 번째 노드와 세 번째 노드를 두번째노드(luma blur)에 선으로 연결해준다. (루마맵에서 기본값으로 제공하는 효과의 강도가 그다지 강하지 않기 때문에 별 차이 없는 걸로 보인다) 루마맵을 선택 한 후, 우측상단 UI에서 white filter width의 값을 조절하면, 루마맵에서 흰색에 해당하는 부분에 효과가 적용되는 것을 확인할 수 ..
1. 합성할 영상 2개를 불러온다. (빈 공간을 더블 클릭해서 Movie file in을 선택하거나, 바탕화면에서 드래그앤드롭으로 가져올 수 있음) 2. 빈 공간 더블클릭 > Top 섹션의 composite를 클릭한다. 그리고 1번에서 불러온 영상 소스들을 선으로 연결해준다. *소스파일 2개를 가져올 때 따로 설정값이 없으면 두 번째 소스파일의 비율에 맞춰지게 된다. (ex. 첫번째 소스는 1:1, 두번째 소스는 3:4 비율이라면 composite된 영상은 3:4 비율로 만들어짐) 3. 영상의 비율을 맞춰주고 싶다면, 우측 상단에 있는 UI 중 transform을 클릭해서 조정할 수 있다. - Fixed layer : 이 탭에 표시된 영상의 비율에 맞춰진다. - Pre-fit overlay -fill :..
터치디자이너는 캡쳐를 막아놓은 것 같다... 그림이랑 같이 설명하고 싶은데ㅠㅠ 나는 집에있는 데스크탑은 윈도우, 노트북으로는 맥북을 쓰는데 이 맥북이 좀 오래됐다... 2013 mid... ㅎㅎ 현재 터치디자이너는 mac 2015년 모델부터 지원한다고 해서 노트북엔 설치할 수가 없었다.. 데스크탑도 2017년도에 산 거라 실행이 간당간당하지만 어떻게 돌아는 간다... (터치디자이너 켤 때마다 그래픽카드 업그레이드하라는 창 뜨면서 겁줌..) 처음으로 만들 예제는 웹캠으로 내 얼굴을 띄워놓고 여기에다 이것저것 효과를 줘보는 건데, 데스크탑엔 웹캠이 없어서.. 핸드폰 카메라와 데스크탑 pc를 연결하는 어플을 사용했다! https://www.e2esoft.com/ivcam/ iVCam - Use mobile p..
내 소개나 작업물들을 올릴 사이트가 하나 필요할 것 같아서 만들어보기로 했다. 사실 블로그 포스팅과 동시에 진행하는 건 '나 감시'를 위한 것이기도 하다. 1) 이렇게 순차적으로 기록을 남기면서 진행하지 않으면 내가 지금 전체 프로세스 중 얼만큼 와 있고, 어디를 향해 가고 있는지 흐릿해져서 진행이 더디다 (ex. 중간에 샛길로 새서 핀터레스트 이미지만 며칠동안 찾기도 하고) 2) 내가 결정한 것에 대한 근거를 텍스트로 정리함으로써 스스로 확신을 가질 수 있다. (ex. React를 쓸까, next.js를 쓸까?) 3) 이미 결정된 사항에 대해 번복하는 일이 적어진다 (ex. 전체 컬러톤을 비비드로 정해놓고, 추후에 흑백이 더 좋아보이는 경우 등.. 바꿀까 고민하는 데 시간을 많이 쓴다) 전체적인 레이아..
