기본 형태 만들기
지금까지 작성한 코드와 같은 방식을 정적 스케치(Static Sketch)라고 합니다.
화면의 그림이 변하지 않는다는 의미입니다.
이제 화면의 그림이 시간에 따라 변하도록 해봅시다.
코드의 기본 형태는 다음과 같습니다.
void setup() {
}
void draw() {
}
- draw() 함수는 내용이 비어 있는 경우에도 반드시 있어야 합니다.
- setup() 함수는 코드가 실행될 때 처음 한 번만 호출됩니다. 초기 설정과 관련된 코드를 작성하기 위한 함수입니다.
- draw() 함수는 실행이 종료될 때까지 일정한 주기로 반복하여 호출됩니다. 화면에 그림을 그리는 코드를 작성하기 위한 함수입니다.
색상 애니메이션
프로세싱의 frameCount 변수는 현재 프레임 번호를 나타냅니다.
1부터 시작하여 draw() 함수가 호출될 때마다 1씩 증가합니다.
frameCount를 256으로 나눈 나머지는 0부터 255까지의 값을 가지는데
도형을 채우는 색상의 빨간색 성분으로 사용하도록 합시다.
void setup() {
size(600, 400);
stroke(0, 0, 255);
strokeWeight(4);
}
void draw() {
background(255, 122, 0);
text("frame: " + frameCount, 20, 20);
fill(frameCount % 256, 0, 0);
rect(50, 50, 300, 200);
}
fill() 함수에 의해 글자 색도 변하게 되는데
글자 색은 그대로 두고 도형의 내부 색상만 변하도록 해봅시다.
pushStyle() 함수는 현재 스타일(색상, 선의 두께, 글자 크기 등)을 저장합니다.
popStyle() 함수는 저장된 스타일로 되돌아 갑니다.
void setup() {
size(600, 400);
stroke(0, 0, 255);
strokeWeight(4);
}
void draw() {
background(255, 122, 0);
text("frame: " + frameCount, 20, 20);
pushStyle();
fill(frameCount % 256, 0, 0);
rect(50, 50, 300, 200);
popStyle();
}
직선 예술
random(low, high) 함수는 low부터 high까지(high는 포함되지 않음)의 무작위 수를 float형으로 반환합니다.
random(high)와 같이 값을 하나만 입력하면 0부터 high까지(high는 포함되지 않음)의 무작위 수를 float형으로 반환합니다.
- random(high)
- random(low, high)
프로세싱의 width 변수는 현재 창의 폭, height 변수는 현재 창의 높이를 나타냅니다.
random(255)를 호출하면 0부터 255까지(255는 제외)의 무작위 수가 반환되기 때문에 색상 값으로 사용합시다.
선의 좌표는 창의 폭과 높이를 벗어나지 않도록 random(width)와 random(height)로 설정합시다.
void setup() {
size(600, 400);
background(255);
}
void draw() {
stroke(random(255), random(255), random(255)); // R, G, B
line(random(width), random(height), random(width), random(height)); // x1, y1, x2, y2
}
사각형 이동하기
주황색 사각형을 이동시켜 봅시다.
void setup() {
size(600, 400);
fill(255, 122, 0);
noStroke();
}
void draw() {
background(255);
rect(frameCount % width, 50, 100, 100);
}
frameRate() 함수는 draw() 함수를 초당 몇 번(fps) 호출할지 설정합니다.
초기값은 60 fps입니다. 즉, 초당 60번 호출합니다.
사각형을 천천히 움직여 봅시다.
void setup() {
size(600, 400);
fill(255, 122, 0);
noStroke();
frameRate(10);
}
void draw() {
background(255);
rect(frameCount % width, 50, 100, 100);
}
이번에는 빠르게 움직여 봅시다.
void setup() {
size(600, 400);
fill(255, 122, 0);
noStroke();
frameRate(120);
}
void draw() {
background(255);
rect(frameCount % width, 50, 100, 100);
}
목차
수업 자료 내려 받기
- 원본 그림 2017.01.16 버전 (34.7 MB)
햄스터 고급
- 행위 기반의 로봇 제어
- 경로 탐색
- 자리 바꾸기
Copyright 로봇SW교육원 All rights reserved.
어려운 일이 있으면 광운대학교 로봇학부 박광현 교수(
akaii@kw.ac.kr)에게 연락하세요.
PDF · PPT