Who I really am
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. 전체 컬러톤을 비비드로 정해놓고, 추후에 흑백이 더 좋아보이는 경우 등.. 바꿀까 고민하는 데 시간을 많이 쓴다) 전체적인 레이아..
파티클 시스템이란 수많은 입자들이 모여 형체가 뚜렷하지 않은 물체를 구현하는 방법이다. 시간이 경과하면 파티클 시스템 내부에서 새로운 입자가 생성되기도 하고 움직이며 변화하고 소멸되기도 한다. 파티클 시스템을 사용하는 이유 자연 현상을 프로그램으로 옮기는 행위를 하고 있다면, 많은 물체들이 함께 구성된 체계를 다뤄야 하는 경우가 있다 (ex. 튕기는 공, 군집을 이루는 새, 진화하는 생태계 등) 예제 4-1. 입자 하나 Particle p; void setup(){ size(640, 320); p = new Particle(new PVector(width/2, 10)); } void draw(){ background(177); //입자 하나를 움직이고 출력 p.run(); if(p.isDead()){ p..
녹사평역 3분정도 거리, 노트북이나 개인 작업하기 좋은 카페 커피도가 헤리티지! 큰 길에서 구석으로 살짝 빠져있어서 적당히 숨어있는 느낌이다. 주말엔 방문 안해봤는데, 평일 기준 사람이 적어서 쾌적하게 이용 가능하다. 1~3층 전체 건물을 사용하고 있고, 꼭대기 층 테라스에는 흡연구역이 있다. 아쉬운 점이라면.. 와이파이가 너무 썩었음.. (공유기가 어디 있는지는 모르겠지만.. 3층에선 매우 느리고, 2층에선 거의 못쓸 정도...) - 접근성 : 별 5개 ⭐️⭐️⭐️⭐️⭐️ (버스, 지하철 모두) - 인테리어 : 별 5개 ⭐️⭐️⭐️⭐️⭐️ (블랙을 베이스로 해서 어둑하고 차분함. 식물이나 노란조명으로 포인트를 주어 편안) - 손님 분위기 : 별 5개 ⭐️⭐️⭐️⭐️⭐️ (조용하고 사람이 적음) - 콘센..
- 파동 패턴은 물 같은 매끄러운 표면은 물론이고, 인체 또는 생명체의 기관을 디자인하는 데도 사용된다. - 파동을 만들 때에도 진폭과 주기를 생각해야 한다. float startAngle = 0; float angleVel = 0.1; void setup(){ size(400,200); } void draw(){ background(150); startAngle += angleVel; //진동을 움직이게 하려면 각 프레임마다 세타 값을 변경해줘야 한다. //(startAngle += 0.02) float angle = startAngle; for(int x=0; x
왼쪽 끝과 오른쪽 끝을 왔다갔다하는 운동을 단순 조화 운동이라고 한다. 진폭 : 움직임의 중심과 가장 멀리 이동했을 때의 거리 주기 : 한 번 완전히 진동하는 데 걸리는 시간 진동수 : 단위 시간마다 진동한 횟수 예제 3-5. 단순 조화 운동 1 void setup() { size(400, 200); } void draw() { background(177); float period = 120; float amplitude = 100; //단순 조화 운동의 기본 공식으로 x축 위치를 구한다. float x = amplitude * cos(TWO_PI * frameCount / period); stroke(0); translate(width / 2, height / 2); line(0,0,x,0); elli..