(응용) 기하학적인 도형 패턴

삼각함수, 모션 응용하는 여러가지 방법 살펴보기.

poster1.js

multiple_arcs() - rotate()함수에 적용하기.
anim_ellipses(): 반지름에다가 삼각함수 적용
anim_squares(): 세로 위치 파라미터에다가 삼각함수 적용.

poster2.js

anim_cross_squares(): x, y 위치 파라미터에다가 삼각함수 변수 적용

poster3.js

세로반복_template(): rotate()로 패턴 함수 자체를 회전시킨다.

연습.

I.V.C 수업(trig, slider) - sosunnyprojectopenprocessing

삼각함수로 모션이 반복되는 도형

function anim_squares(반지름) {
  
  push()
  // 큰 사각형
  fill("#2ec4b6")	
  rect(-반지름/2 , -반지름/2, 반지름, 반지름) // 우측 하단 (3사분면)
  rect(반지름/2, 반지름/2, 반지름, 반지름) // 좌측 상단 (1사분면)
  // 작은 사각형
  fill("#cbf3f0")
  rect(-반지름/2 , -반지름/2, 반지름/2, 반지름/2)
  rect(반지름/2, 반지름/2, 반지름/2, 반지름/2)
  pop()
}

삼각함수로 계속 바뀌는 숫자값은 사각형의 위치 파라미터에 더하거나 뺀다.

function anim_squares(반지름) {
  let m = 반지름/2+(반지름/2*sin(frameCount*2));
  
  push()
  // 큰 사각형
  fill("#2ec4b6")	
  rect(-반지름/2 , -반지름/2+ m, 반지름, 반지름) // 우측 하단 (3사분면)
  rect(반지름/2, 반지름/2 - m, 반지름, 반지름) // 좌측 상단 (1사분면)
  // 작은 사각형
  fill("#cbf3f0")
  rect(-반지름/2 , -반지름/2+ m, 반지름/2, 반지름/2)
  rect(반지름/2, 반지름/2 - m, 반지름/2, 반지름/2)
  pop()
}

2. 원형으로 회전하면서 크기가 변형되는 도형

시작 코드: 가운데를 중심으로 4방으로 도형 배치하기

function draw() {

        let 반지름 = 100;
        push()
        translate(-반지름/2, -반지름/2)
        // Math.abs()는 ()안의 파라미터 값을 절대값(양수)으로 바꿔준다.
        ellipse(0, 0, 반지름, 반지름 )
        pop()
        
        push()
        translate(반지름/2, -반지름/2)
        ellipse(0, 0, 반지름, 반지름)
        pop()
        
}

원형의 너비와 높이 크기에 삼각함수에 따라 변하는 변수 넣기.
원형을 자체적으로 비스듬히 회전시키기.
ellipse 의 높이/너비 값에 r을 자유롭게 변형해서 더하거나 빼기. (ellipse의 크기가 애니메이션처럼 계속 바뀌도록)

function draw() {

        let 반지름 = 100;
        // d은 diameter의 줄임말.
        // 반지름 를 곱했으니, -1 ~ 1 사이의 값이 아닌, -반지름 ~ +반지름 값
        let d = sin(frameCount) * 반지름;
        push()
        translate(-반지름/2, -반지름/2)
        rotate(-45);
        // Math.abs()는 ()안의 파라미터 값을 절대값(양수)으로 바꿔준다.
        ellipse(0, 0, 반지름/2 + d, 반지름 - Math.abs(d) )
        pop()
        
        push()
        translate(반지름/2, -반지름/2)
        rotate(45)
        ellipse(0, 0, 반지름/2 + d, 반지름 - Math.abs(d) )
        pop()
        
}

최종 코드

만든 코드가 길어졌으니 anim_ellipse() 라는 함수 이름을 만들어서 따로 분리하기.
반지름을 함수의 파라미터로 넘겨주기.

function draw() {
 //생략
 push();
 translate(mouseX, mouseY) // 마우스를 따라다니게. 혹은 자신이 원하는 픽셀 좌표에 고정하기.
 anim_ellipse(100);
 pop();
}

// 함수에서 파라미터 이름의 정의할때 '반지름' 같이 한글로 적어도 됨. 
// 다른 플랫폼이나 언어에 따라 한글이 지원 안 될 수도 있으니, 보통은 영어로 적는 것을 추천.
function anim_ellipses(반지름) {

    let d = sin(frameCount*5)*반지름/2
    
    push()
    noStroke()
    fill("#2ec4b6")
    
        push()
        translate(-반지름/2, -반지름/2)
        rotate(-45)
        // Math.abs()는 ()안의 파라미터 값을 절대값(양수)으로 바꿔준다.
        ellipse(0, 0, 반지름/2 + d, 반지름 - Math.abs(d) )
        pop()
        
        push()
        translate(반지름/2, -반지름/2)
        rotate(45)
        ellipse(0, 0, 반지름/2 + d, 반지름 - Math.abs(d) )
        pop()
        
        push()
        translate(-반지름/2, 반지름/2)
        rotate(45)
        ellipse(0, 0, 반지름/2 + d, 반지름 - Math.abs(d) )
        pop()
        
        push()
        translate(반지름/2, 반지름/2)
        rotate(-45)
        ellipse(0, 0, 반지름/2 + d, 반지름 - Math.abs(d) )
        pop()
     pop()
}

고려사항

캔버스 크기: (windowWidth, windowHeight) 화면 전체 크기 or 직사각형 세로로 긴 전형적인 포스터?
- 제너레이터
알파벳을 어떻게 배치할 것인지?
따로 패턴을 만들어서 반복할 것인지? 알파벳을 반복해서 그릴 것인지?
마우스와 연동했을 때, 효과가 좋은 인터렉션은 무엇일지?
마우스를 따라다니는 게 도형? 혹은 텍스트?
삼각함수를 이용한 (자동) 애니메이션을 어느 곳에 적용하고 싶은지?
실험을 자유롭게 하면서, 어떤 곳에 어떤 인터렉션이 잘 어울리는지 관찰하기.

참고: 기하학적인 도형 패턴 스케치

과정
1. 패턴별로 각 함수를 만든다.
2. 패턴 함수에 반지름 파라미터를 준다.
3. 원하는 곳에 translate()로 이동시킨다.
4. 가로 혹은 세로로 반복한다.
5. 가운데에서 회전하게끔 응용해 본다.
6. 마우스를 따라다니게 응용한다.
7. 애니메이션을 가미한다: 사이즈 혹은 가로, 세로 위치.
8. 마우스를 클릭했을 때, 색깔이 바뀐다.

응용: 도형으로 만든 패턴 코드 살펴보기.

https://openprocessing.org/sketch/1614406
https://openprocessing.org/sketch/1613012
cross-ellipse(), multiple_arcs(), squares()

응용: 이 구조를 기존 코드에 적용해보기.

trig-adv.js의 3, 4번.
animTriM() 함수, animCrossDoubleTriM() 함수를 새로 만듬.
두 개가 서로 교차하는 애니메이션을 만들고 싶다면,
- 도형 함수 안에 두 묶음의 M을 그리고
- 각기 다른 push translate pop 으로 묶어주고
- translate() 에서 sin, -sin 혹은 cos, -cos 값을 준다.

참고: `sample.js` 파일에서 `anim` 으로 시작하는 함수들.

삼각함수를 다양한 곳에 적용해보기: rotate(), translate(), 도형() 함수들
마우스 값을 삼각함수의 파라미터에 넣어보기. sin(mouseX), cos(mouseY)
가능하면, 반복문을 활용해보기.
내 알파벳 도형에 더 적용해보기.
참고: 절대값/양수가 필요하면 Math.abs() 함수를 아래와 같이 작성하기. 아래 예제 코드는 보기 편하도록 띄어쓰기를 많이 넣은 것입니다.

 Math.abs( sin(frameCount) );
 Math.abs( cos(mouseX) );

Previous애니메이션과 삼각함수 Next이미지

Last updated 11 months ago

삼각함수, 모션 응용하는 여러가지 방법 살펴보기.

연습.

2. 원형으로 회전하면서 크기가 변형되는 도형

최종 코드

고려사항

참고: 기하학적인 도형 패턴 스케치

응용: 도형으로 만든 패턴 코드 살펴보기.

응용: 이 구조를 기존 코드에 적용해보기.

참고: sample.js 파일에서 anim 으로 시작하는 함수들.

참고: `sample.js` 파일에서 `anim` 으로 시작하는 함수들.