search

youngsangcho / generativedesign2_2021

서울시립대 Generative Design 수업
8 stars 0 forks source link

질문드립니다! #35

Open SeyounJung01 opened 2 years ago

SeyounJung01 commented 2 years ago

블로그에 질문을남겨놓았습니다. https://blog.naver.com/seyounjj2001/222573373589

youngsangcho commented 2 years ago

https://editor.p5js.org/youngsangcho/sketches/BXT9hgc9y 이 예제는 현재 캐릭터 A 에만 작동합니다.

  1. 컬러 문제 정세윤 학생 코드와 josn 파일에서 한 타입(Type)은 여러개의 도형(Shape)을 갖고, 한 도형(Shape)이 여러개의 곡선(arc)을 갖습니다. 색깔은 arc마다 다른 게 아니라, shape마다 다르겠지요? 정세윤 학생의 코드와 json을 보니, arc마다 다른 색 정보를 넣고 읽으려고 한 것 같습니다. arc가 아니라 shape마다 다른 색 정보를 넣는 것이 정세윤 학생이 원하는 방향인 것 같습니다. 원래 json 파일과 위 예제의 json 파일을 비교해보기 바랍니다. 그리고 sketch.js 코드에서 코멘트로 // <- 수정 이라고 되어있는 부분들을 살펴보기 바랍니다.

  2. rotation 위 코드 132번 ~ 136번줄

Screen Shot 2021-11-19 at 11 54 52 PM copy Screen Shot 2021-11-19 at 11 54 52 PM copy 2 Screen Shot 2021-11-19 at 11 54 52 PM copy 3

SeyounJung01 commented 2 years ago
  1. 방향성을 잘못잡았었군요, 잘 분석해보고 공부하겠습니다. 감사합니다.
  2. 트랜슬래이트를 중첩시키는 방법이 있었군요,,, 생각지도 못한 방법이였어요,,감사합니다!
SeyounJung01 commented 2 years ago

교수님 현재 마우스 상하키-사이즈,간격조절, 휠- 로테이션 범위 크기 조절, 클릭으로 로테이션,사이즈 조절 esc로 초기화 등등의 기능을 완성시켰는데, 뭔가 확실한 시각적인 재미가 없는 것 같아 다른 애니메이션도 추가하고 싶은 욕심이 생겼습니다. 혹시 https://openprocessing.org/sketch/950082 처럼 파도같은 효과나,https://editor.p5js.org/jsypaul2001/sketches/vJhdO-SIG 처럼 카메라와 연동하여 사이즈,로테이션 조절하는 방식 중 어떤 방법이 쉬울지 질문을 드려도 될까요? 에딧 링크입니다. https://editor.p5js.org/jsypaul2001/sketches/p1nRkVYFe

youngsangcho commented 2 years ago

저 두 코드와 현재 타입코드를 이해한다면 크게 어렵지 않을 거 같습니다.

Type 클래스에 scale이나 rotation 속성을 추가하고, (this.scale.. this.rotation..처럼) setPosition처럼 setScale이나 setRotation이라는 함수도 추가해보세요.

현재 function draw() 에서 typeList[i].setPosition(tx, ty); 의 앞이나 뒤에서 tx, ty 위치에 맞게 (mouseX, mouseY와 거리를 계산하든, 아니면 비디오 픽셀값과 비교하든) setScale() 이나 setRotation() 함수를 호출하면 될 거 같습니다.

한번 시도해보시고 또 질문 주세요~