p5.js 변형 함수 (2) 썸네일형 리스트형 p5.js 애니메이션을 위한 변형(transform) 함수 2 - 객체 크기 조정 scale() p5.js 애니메이션을 위한 변형(transform) 함수 2 - 객체 크기 조정 scale() p5.js 애니메이션을 위한 변형(transform) 함수에는 translate(), scale(), rotate()가 있다. 지난 포스팅의 translate 함수에 이어 이번에는 scale 함수에 대해 알아보자. scale() - 객체 크기 조정 scale 함수의 기본 문법은 scale(s, [y], [z])이다. S : 객체 크기를 조정하는 백분율. 여러 인수 지정 시에는 x축(가로축)에서의 객체 크기 배율을 조정하는 백분율 예) scale(1.0) 함수를 호출하면 100% 그대로이기 때문에 도형의 크기에 변화가 없음 예) scale(2.0) 함수를 호출하면 도형의 크기를 가로 세로 배율 200% 증가 시.. p5.js 애니메이션을 위한 변형(transform) 함수 1 - 객체 위치 이동 translate() p5.js 애니메이션을 위한 변형(transform) 함수 1 - 객체 위치 이동 translate() p5.js 애니메이션을 위한 변형(transform) 함수에는 translate(), scale(), rotate()가 있다. 이미 css를 다룰 줄 안다면 이들 함수가 어떤 역할을 하는지 대략 짐작이 갈 것이다. x, y, z 축으로 객체의 위치를 이동시킬 수 있는 translate, 객체의 크기를 확대 및 축소시킬 수 있는 scale, 객체를 회전시키는 rotate 이 세 가지 변형 함수들에 대해서 알아보자. translate() - 객체 위치 이동 translate 함수의 기본 문법은 translate(x, y, [z])이다. X축 : 좌우 이동 Y축 : 상하 이동 Z축 : 앞뒤 이동 (WebGL.. 이전 1 다음
