Hamster School

창 나타내기

size() 함수는 창의 크기를 설정합니다. width는 창의 폭, height는 창의 높이입니다.

size(width, height)

프로세싱을 실행하고 아래의 코드를 입력합니다.

size(600, 400); // width, height

실행 버튼을 누르거나, 스케치 메뉴에서 실행하기 메뉴를 선택하거나, 키보드의 콘트롤(Ctrl) 키와 알파벳 R 키를 동시에 눌러 작성한 코드를 실행합니다.

창을 닫으면 실행이 종료됩니다.

배경 칠하기

background() 함수는 창 전체를 입력한 색상으로 칠합니다. 창 전체를 칠하기 때문에 그림이 그려져 있다면 다 지워집니다. R은 색상의 빨간색 성분, G는 초록색 성분, B는 파란색 성분입니다. 각 성분은 0부터 255까지의 값을 가질수 있습니다. RGB의 조합으로 색상이 결정됩니다.

background(R, G, B)

하얀색을 칠해봅시다.

size(600, 400);
background(255, 255, 255);

빨간색을 칠해봅시다.

size(600, 400);
background(255, 0, 0);

주황색을 칠해봅시다.

size(600, 400);
background(255, 122, 0);

값을 하나만 입력하면 같은 값으로 세 개의 값을 모두 입력한 것과 같습니다. 다음의 두 가지는 같은 명령을 나타냅니다.

background(value)
background(value, value, value)

size(600, 400);
background(100);

선 그리기

stroke() 함수는 이후에 그릴 선의 색상을 설정합니다. 선을 그리기 전에 호출해야 설정한 색상으로 선을 그릴 수 있습니다. 값을 하나만 입력하면 같은 값으로 세 개의 값을 모두 입력한 것과 같습니다.

stroke(R, G, B)
stroke(value)

line() 함수는 선을 그립니다. x1과 y1은 선의 한 쪽 끝에 대한 X, Y 좌표이고, x2와 y2는 다른 한 쪽 끝에 대한 X, Y 좌표입니다. 즉, (x1, y1) 위치에서 (x2, y2) 위치까지 선을 그립니다.

line(x1, y1, x2, y2)

창의 좌표계는 원점이 창의 제일 왼쪽 위에 있고, 오른쪽 방향이 X축의 양수 방향, 아래쪽 방향이 Y축의 양수 방향입니다.

(10, 20)에서 (300, 200)까지 파란색 선을 그려 봅시다.

size(600, 400);
background(255, 122, 0);
stroke(0, 0, 255);
line(10, 20, 300, 200); // x1, y1, x2, y2

strokeWeight() 함수는 이후에 그릴 선의 두께를 픽셀 값으로 설정합니다. 선을 그리기 전에 호출해야 설정한 두께로 선을 그릴 수 있습니다.

strokeWeight(pixel)

4 픽셀의 두께로 선을 그려 봅시다.

size(600, 400);
background(255, 122, 0);
stroke(0, 0, 255);
strokeWeight(4);
line(10, 20, 300, 200);

직사각형 그리기

rect() 함수는 직사각형을 그립니다. x와 y는 직사각형의 왼쪽 위 꼭지점에 대한 X, Y 좌표이고, width와 height는 직사각형의 폭과 높이입니다. 즉, (x, y) 위치에 폭 width, 높이 height의 직사각형을 그립니다.

rect(x, y, width, height)

(10, 20) 위치에 폭 300, 높이 200의 직사각형을 그려 봅시다.

size(600, 400);
background(255, 122, 0);
stroke(0, 0, 255);
strokeWeight(4);
rect(10, 20, 300, 200); // x, y, width, height

fill() 함수는 이후에 그릴 도형의 내부를 채우는 색상을 설정합니다. 도형을 그리기 전에 호출해야 설정한 색상으로 도형의 내부를 채울 수 있습니다. 값을 하나만 입력하면 같은 값으로 세 개의 값을 모두 입력한 것과 같습니다.

fill(R, G, B)
fill(value)

직사각형의 내부를 초록색으로 채워 봅시다.

size(600, 400);
background(255, 122, 0);
stroke(0, 0, 255);
strokeWeight(4);
fill(0, 255, 0);
rect(10, 20, 300, 200);

투명색으로 칠하기

noStroke() 함수는 이후에 그릴 선이나 도형의 테두리를 투명색으로 설정합니다. 즉, 선이나 테두리가 눈에 보이지 않습니다.

noStroke()

size(600, 400);
background(255, 122, 0);
stroke(0, 0, 255);
strokeWeight(4);
fill(0, 255, 0);
noStroke();
rect(10, 20, 300, 200);

noFill() 함수는 이후에 그릴 도형의 내부를 투명색으로 설정합니다.

noFill()

size(600, 400);
background(255, 122, 0);
stroke(0, 0, 255);
strokeWeight(4);
fill(0, 255, 0);
noFill();
rect(10, 20, 300, 200);

둥근 사각형 그리기

rect() 함수에 값을 하나 더 입력하면 둥근 정도(corner)를 픽셀 값으로 설정할 수 있습니다. 값이 클수록 더 둥근 사각형이 됩니다.

rect(x, y, width, height, corner)

size(600, 400);
background(255, 122, 0);
stroke(0, 0, 255);
strokeWeight(4);
fill(0, 255, 0);
rect(10, 20, 300, 200, 10); // x, y, width, height, corner

값을 더 입력하면 네 모서리의 둥근 정도를 다르게 할 수 있습니다. 사각형 왼쪽 위를 시작으로 시계 방향으로 왼쪽 위(tl), 오른쪽 위(tr), 오른쪽 아래(br), 왼쪽 아래(bl) 순서입니다.

rect(x, y, width, height, tl, tr, br, bl)

size(600, 400);
background(255, 122, 0);
stroke(0, 0, 255);
strokeWeight(4);
fill(0, 255, 0);
rect(10, 20, 300, 200, 10, 20, 30, 40); // x, y, width, height, tl, tr, br, bl

타원 그리기

ellipse() 함수는 타원을 그립니다. cx와 cy는 타원 중심의 X, Y 좌표이고, width와 height는 타원의 폭과 높이입니다. 즉, (cx, cy) 위치를 중심으로 폭 width, 높이 height의 타원을 그립니다.

ellipse(cx, cy, width, height)

(160, 120) 위치를 중심으로 폭 300, 높이 200의 타원을 그려 봅시다.

size(600, 400);
background(255, 122, 0);
stroke(0, 0, 255);
strokeWeight(4);
fill(0, 255, 0);
rect(10, 20, 300, 200);
ellipse(160, 120, 300, 200); // cx, cy, width, height

점 그리기

point() 함수는 점을 그립니다. x와 y는 점의 X, Y 좌표입니다. 즉, (x, y) 위치에 점을 그립니다.

point(x, y)

(160, 120) 위치에 점을 그려 봅시다.

size(600, 400);
background(255, 122, 0);
stroke(0, 0, 255);
strokeWeight(4);
fill(0, 255, 0);
rect(10, 20, 300, 200);
ellipse(160, 120, 300, 200);
point(160, 120); // x, y

삼각형 그리기

triangle() 함수는 삼각형을 그립니다. 삼각형을 그리려면 세 개의 꼭짓점이 필요한데, x1과 y1은 첫 번째 꼭짓점의 X, Y 좌표, x2와 y2는 두 번째 꼭짓점의 X, Y 좌표, x3과 y3은 세 번째 꼭짓점의 X, Y 좌표입니다. 즉, (x1, y1), (x2, y2), (x3, y3)을 세 개의 꼭짓점으로 하는 삼각형을 그립니다.

triangle(x1, y1, x2, y2, x3, y3)

(10, 20), (300, 200), (200, 300)을 세 개의 꼭짓점으로 하는 삼각형을 그려 봅시다.

size(600, 400);
background(255, 122, 0);
stroke(0, 0, 255);
strokeWeight(4);
fill(0, 255, 0);
triangle(10, 20, 300, 200, 200, 300); // x1, y1, x2, y2, x3, y3

일반적인 사각형 그리기

quad() 함수는 일반적인 사각형을 그립니다. 사각형을 그리려면 네 개의 꼭짓점이 필요한데, x1과 y1은 첫 번째 꼭짓점의 X, Y 좌표, x2와 y2는 두 번째 꼭짓점의 X, Y 좌표, x3과 y3은 세 번째 꼭짓점의 X, Y 좌표, x4와 y4는 네 번째 꼭짓점의 X, Y 좌표입니다. 즉, (x1, y1), (x2, y2), (x3, y3), (x4, y4)를 네 개의 꼭짓점으로 하는 사각형을 그립니다.

quad(x1, y1, x2, y2, x3, y3, x4, y4)

(10, 20), (300, 200), (200, 300), (100, 250)을 네 개의 꼭짓점으로 하는 사각형을 그려 봅시다.

size(600, 400);
background(255, 122, 0);
stroke(0, 0, 255);
strokeWeight(4);
fill(0, 255, 0);
quad(10, 20, 300, 200, 200, 300, 100, 250); // x1, y1, x2, y2, x3, y3, x4, y4

글자 표시하기

text() 함수는 글자를 표시합니다. str은 표시할 글자이고, x와 y는 글자의 X, Y 좌표입니다. 글자의 색상은 fill() 함수에 의해 결정됩니다.

text(str, x, y)

(100, 50) 위치에 "Hamster" 글자를 표시해 봅시다.

size(600, 400);
background(255, 122, 0);
fill(0, 255, 0);
text("Hamster", 100, 50); // str, x, y

textSize() 함수는 글자의 크기를 픽셀 값으로 설정합니다.

textSize(pixel)

글자 크기를 20 픽셀로 해봅시다.

size(600, 400);
background(255, 122, 0);
fill(0, 255, 0);
textSize(20);
text("Hamster", 100, 50);

수업 자료 내려 받기

원본 그림 2017.01.16 버전 (34.7 MB)

수업 준비

하드웨어 살펴보기	햄스터 · 햄스터S · USB 동글	PDF · PPT
소프트웨어 설치 (설치 파일을 내려 받은 경우)		PDF · PPT
소프트웨어 설치 (라이브러리 파일을 내려 받은 경우)		PDF · PPT
로봇과 컴퓨터 연결		PDF · PPT
소프트웨어 실행		PDF · PPT
환경 설정		PDF · PPT

프로세싱 기초

햄스터 기초

햄스터 심화

확장 키트

햄스터 고급

행위 기반의 로봇 제어
경로 탐색
자리 바꾸기

교육 자료 : 프로세싱 : 도형 그리기