Creative Coding 독학 제055일 2024년05월21일(화)

2024년 5월 21일

오늘은 새로운 함수 push(), pop()을 자세히 살펴보겠습니다!!!! YEAH!!!

……갑자기????

네~~~^^* 요즘 우리가 공부하고 있는 Angular Motion 동영상 강의 중 후반 내용이 다루고 있는 프로그램 코드 이해를 위해서는 push()와 pop()에 대해 먼저 친숙해 질 필요가 있는 것 같아서요~^*

하나. 아래 동영상을 처음부터 편안하게 시청하시면, 자연스럽게 함수 translate()와 rotate()를 복습하실 수 있어요~^^*

둘. 13:30 ~14:55 구간은 함수 rotate()가 물체의 회전을 지시하는 것이 아니라 캔버스 좌표체계의 회전을 의미한다는 것을 잘 보여주고 있어요. 물체는 회전된 죄표체계에 맞추어 그려진다는 것을 볼 수 있어요~^^*

셋. 20:15부터 드디어, 오늘의 공부내용! 함수 push()와 pop()이 나옵니다.

함수 push()와 pop() 사이의 작업 지시문은 push()—-pop() 구간 밖의 작업 지시문과 영향을 주고받지 않고 독립적으로 일하게 됩니다. 그래서 캔버스 위에 여러 다양한 물체가 다양한 행동을 서로 독립적으로 하게 만들 때, push()—–pop() 구간을 각각 설정하면 되어요~^^*

함수 push()와 pop() 의 용어가 좀 낯설지요? 이 용어는 데이터 구조를 표현하는 용어인데요.

접시를 쌓아서 저장하는 경우를 상상해 볼까요? 맨 나중에 놓은 접시를 가장 먼저 사용하게 되고, 맨 먼저 놓은 접시는 가장 나중에 사용하게 되잖아요?

이 저장법을 “쌓아 놓는다”라고 표현하여 STACK 구조라고 부릅니다. 이 STACK에 정보를 저장하는 것을 push 그리고 정보를 꺼내는 것을 pop 이라고 합니다.

push() 지시문은 이제 나올 지시문들을 컴퓨터에 실행명령어로 저장해서 일을 하자!라는 의미가 되고,

pop() 지시문은 지금까지 저장해서 실행한 지시문들을 컴퓨터에서 제거하여 작업을 종료하자!라는 의미가 되어요~^^*

아래 동영상 강의를 4:12까지 보시면, [STACK 구조 : push와 pop]을 살펴 볼 수 있어요~^^*

그러면, 이제 STACK 구조인 push()와 pop()을 사용해서, 각각 독립적으로 움직이는 다양한 물체를 표현하는 프로그램을 만들어 볼까요~^^*

첫 번째 강의 동영상의 예시 프로그램을 좀더 확장시켜 보았습니다~^^* 다양한 색깔과 다양한 테두리와 다양한 모양과 다양한 중점을 가진 도형들이 캔버스의 다양한 위치를 중심으로 다양한 방향과 다양한 빠르기로 회전하는 모습을 표현해 보았습니다~^^* 자세한 내용은 코드 안의 주석을 참고하셔도 좋겠지요~^^*?

let angle = 0;  

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES); //각도(Dgree)법을 사용하겠습니다. 
}

function draw() {
  background(220,10);  //바탕은 연한 회색~^^*
  
  push();
  translate(100, 100);   //왼쪽&위쪽
  rotate(angle);         //시계방향  
  fill(255, 100, 50);    //주황색 
  noStroke();            //무테
  rect(0,0,100, 50);     //사각형왼쪽위쪽모서리 기준 
  pop();
  
  
  push();
  translate(300, 300);   //오른쪽&아래쪽
  rotate(-angle);        //반시계방향 
  fill(255, 50, 100);    //선홍색 
  noStroke();            //무테
  rect(0,0,50, 50);      //사각형왼쪽위쪽모서리 기준
  pop();
  
  push();
  translate(200, 200);  //중심
  rotate(angle*2);      //시계방향 2배속 
  fill(50, 100, 255);   //파랑색 
  stroke(255);          //흰색 테두리
  ellipse(0,0,50, 25);
  pop();
  
  push();
  translate(100, 300);  //왼쪽&아래쪽
  rotate(-angle*3);     //반시계방향 3배속
  fill(255, 255, 50);   //노랑색
  stroke(0);            //검은색 테두리
  ellipse(0,0,50, 100);
  pop();
  
  push();
  translate(300, 100);  //오른쪽&위쪽
  rotate(angle*4);      //시계방향 4배속 
  fill(50, 255, 255);   //민트색 
  stroke(125);          //회색 테두리
  ellipse(0,0,50, 100);
  pop();
  
  for ( i = 0; i < 5; i++){
    push();
    translate(200, 100*i); //중심 수직선
    rotate(angle*4);       //시계방향 4배속 
    rectMode(CENTER);      //사각형중점 기준
    fill(255, 50, 255);    //핫!핑크
    stroke(50, 255, 50);   //연두색 테두리
    rect(0,0,10, 20);
    pop();
  }
  
  for ( i = 0; i < 5; i++){
    push();
    translate(100*i, 200); //중심 수평선
    rotate(-angle*4);      //반시계방향 4배속 
    rectMode(CENTER);      //사각형중점 기준
    fill(100, 255, 100);   //핫!연두 
    stroke(255, 100, 255); //분홍색 테두리 
    rect(0,0,20, 10);
    pop();
  }
  
  for (i = 0; i <5; i++){
    for ( j = 0; j < 5; j++){
      push();
      translate(100*i, 100*j); //간격 100의 모눈
      rotate(angle/2);         //시계방향 1/2배속 
      rectMode(CENTER);        //사각형중점 기준
      fill(255,0,0);           //심플리 뤠드~
      //stroke 관련 지시문이 없으므로 테두리 색상 디폴트값 블랙
      rect(0,0,3, 5);
      pop();
    }
  }
  
  angle += 5;
  
}