Processing 12. 원과 나선 그리기, 방향

원과 나선

물결 외에도 사인 값과 코사인 값을 이용해 원을 그릴 수 있다. 코사인 값은 ※좌표를, 동일한 각의 사인 값은 ; 좌표를 조 정한다. 다음 예시는 0°~12씩 증가해 360까지 도달하는 각도 값을 사용한다. for 루프를 통한 각 단계에서 cos()와 sin( )값은 원의 x 좌표와 y좌표를 계산하는 데 사용된다. sin()과 cos() 함수는 각각-1.0~1.0의 값을 반환하므로 결과는 반지름 변수에 곱해져 38을 반지름으로 한 원을 그리는 데 사용된다. 50은 x와 y의 위치에 더해져 원의 중심은 좌표 (50,50)에 설정된다.

int radius = 38;
void setup() {
size (100, 100);
fill(0);}

 

만약 각이 원의 전체가 아닌 일부까지만 증가한다면 원 대신 호가 그려진다. 예를 들어 이전 코드의 10번째 줄을 변경해 mouseX에 기반한 변수를 추가하면 다음 결과가 나올 것이다.

int radius = 38;
void setup() {
size(100, 100);
fIl(0);
}

void draw() {
background (204);
int piece = int(map(mouseX, 0, width, 0, 360));
for (int deg = 0; deg <= piece; deg += 12) |
float angle = radians (deg);
float x = 50 + (cos (angle) » radius);
float y = 50 + (sin (angle) " radius);
ellipse(x, y, 4, 4);
}
}

 

'나선을 그리기 위해서는 사인 값과 코사인 값에 증가하거나 감소하는 스칼라scalar 값을 곱한다. 다음 예시에서 나선은 반지름 변수가 증가하면 더 커진다.

 

void setup () | size (100, 100);
fill(0);
noStroke();

void draw() {
background (204);
float scalar = map(mouseX, 0, width, 4, 20);
float radius = 1.0;
for (int deg = 0; deg < 360*6; deg += scalar) (
float angle = radians (deg);
float x = 75 + (cos(angle) * radius);
float y = 42 + (sin(angle) # radius);
ellipselx, y, 4, 4);
radius = radius + 0.34;
}
}

float cx = 33.0; // Center *-coordinate
float cy = 66,0; // Center y-coordinate

void setup () {
size (100, 100);}

void draw() {
background(204);
float radius = 0.15;
float radVal = map (mouseX, 0, width, 1,05, 1.1);
for (int deg = 0; deg < 360*5; deg += 12) {
float angle = radians (deg);
float x = cx + (cos (angle) * radius);
float y = cy + (sin (angle) * radius);
line(x, y, x, y+2);
radius = radius * radVal;
}
}

 

방향

삼각비의 아크탄젠트 함수의 한 버전인 atan2() 함수는 한 점에서 좌표 (0,0)까지의 각을 계산하는 데 사용된다. 이 함수에는 2개의 매개변수가 있다.

 

atan2(y, x)

 

매개변수 >는 각을 도출해야 하는 점의 y좌표이며 매개변수 x는 점의 x좌표이다. 각도 값은 7-1의 범위 내에서 라디안 값으로 반환된다. 다른 함수와 달리 매개변수 와 의 순서는 반대로 반환되는 것을 확인하자. 다음 예시는 마우스가 디스플레이 창의 우측 상단에서 좌측 하단으로 이동하며 각이 증가하는 모습을 보여준다.

 

void setup () {
size (100, 100);
fill (0);
}

void draw() /
float angle = atan2(mouseY, mouse X):
float deg = degrees (angle):
background (204);
text(int(deg), 50, 50):
ellipse(mouseX, mouseY, 8, 8)
rotate (anple);
line(0, 0, 150, 0);}

 

atan2() 함수를 (0.0) 대신 다른 점을 기준으로 계산하기 위해서는 매개변수 5와 조에서 그 지점의 좌표를 빼면 된다.

translate() 함수를 사용해 화면에 요소를 위치시키고 2tan2() 함수의 결과를 이용해 이 요소들을 회전시키거나 지향하면 되 며 pushMatrix()와 pop Matrix()를 사용해 변환군을 격리한다. 이 과정은 변환(175쪽)에 더 자세히 설명되어 있다.

 

int x = 50;
int v1 = 33;
int v2 = 66;

void setup() {
size (100, 100);
noStroke();
}

void draw() {
background(0);
// Top triangle
float angle = atan2 (mouseY-y1, mouseX-x);
pushMatrix();
translate(x, y1);
rotate (angle);
triangle(-20, -8, 20, 0, -20, 8);
popMatrix();
// Bottom triangle
float angle2 = atan2(mouseY-y2, mouseX-x);
pushMatrix();
translate(x, y2);