반복문 실습: 도형에 응용해보기

1. 실습: 반복문을 활용해서 도형에 응용하자.

• 새로운 openprocessing 스케치를 만들거나 week3-for.js 파일 생성

• index.html에 새로 추가한 파일 이름 추가

• 안쓰는 스케치는 컨트롤or커맨드 + / 키로 가려두기

	<!--- 위 생략 --->
	<script src="utils.js"></script>
	<script src="myAlphabets.js"></script>
<!-- 	<script src="week2-mouse.js"></script> -->
	<script src="week3-for.js"></script>

기본 템플릿 코드

/** 글로벌 변수는 function {} 밖에서 써준다.
변수 적는 곳
ellipse()나 rect()같이 p5js가 만들어준 함수는 여기에 적으면 작동안함.
**/

function setup() {
  createCanvas(400, 400);
  background(0);
  angleMode(DEGREES);
  rectMode(CENTER);
}

// 각자 알파벳 도형 함수 이름들을 잘 찾아서 사용하자. 
function draw() {
    background(0);
    drawGrid(20);         // 모눈종이표
    showCoordinateNum();  // 마우스 현재 위치 좌표값
    
    // 가로 반복
    for(let x = 0; x < width; x = x + 100) {
        push();
        translate();
        // 기본 도형 함수 혹은 내가 만든 알파벳 도형 함수 적기
        pop();
    }
    
    // 세로 반복
    for(let y = 0; y < height; y = y + 100) {
    
    }
    
    // 대각선 반복
    for(let y = 0; y < height; y = y + 100) {
    
    }
    
    // 가로, 세로 모두 반복
    for(let x = 0; x < width; x = x + 100) {
        for(let y = 0; y < height; y = y + 100) {
        	push();
        	translate(x, y);
        	moonM();
        	pop();
        }
    }
}

2. 실습: 도형 1개 반복해보기

• 캔버스 좌표 어느 지점부터 어느 지점까지만 반복할 것인지.

• 반복문을 통해 달라지는 변수를 도형 파라미터의 위치, 사이즈 등 여러 군데 적용해보자.

1번 방법.

• A 혹은 O처럼 반복되는 도형이 있는 알파벳을 고르자.

• 내가 고른 도형 모양 안에서 규칙을 발견하고, 숫자로 변환할 수 있는 규칙인지 보자.

function myRectA() {
   push();
   rect(50, 20 * 1, 25 * 0.5, 10);
   rect(50, 20 * 2, 25 * 1, 10);
   rect(50, 20 * 3, 25 * 2, 10);
   rect(50, 20 * 4, 25 * 3, 10);
   rect(50, 20 * 5, 25 * 4, 10);
   pop();
}

2번 방법.

• 알파벳이 딱히 생각이 안난다면, 기본 도형 혹은 내가 만든 도형 함수들 아무거나 사용해서 반복해보자.

for( /* 규칙 작성하기 */  ) {
    push();
    rect(50, 20 * ?, 25 * ?, 10);
    pop();
}

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

• 과정

  1. 패턴별로 각 함수를 만든다.

  2. 패턴 함수에 반지름 파라미터를 준다.

  3. 원하는 곳에 translate()로 이동시킨다.

  4. 가로 혹은 세로로 반복한다.

  5. 가운데에서 회전하게끔 응용해 본다.

  6. 마우스를 따라다니게 응용한다.

  7. 애니메이션을 가미한다: 사이즈 혹은 가로, 세로 위치.

  8. 마우스를 클릭했을 때, 색깔이 바뀐다.

• 샘플

  • https://openprocessing.org/sketch/1614406

  • https://openprocessing.org/sketch/1613012