【 프로세싱 기초#20 】 점점 커지는 원 그리기
지난시간 10개의 선을 랜덤생성시켜 움직이는 것처럼 구현해 보았다.
이번 시간은 직경 10픽셀의 원이 점점 커지도록 구현해보려 한다. 실제로 하나의 원이 커지는 것은 아니지만 시각적으로 그렇게 보이도록 프로세싱으로 처리할 수 있다. 내용이 길지 않으므로 차근 차근 따라해보면 어렵지 않게 이해 할 수 있을 것이다.
[ 프로세싱의 화면 좌표 ] - 100 x 100 pixel 예시
▶ 문제 : 화면 가운데 10픽셀의 원이 화면 사이즈 까지 점점 커지도록 구현 하라.
[ 조건 : 1. 화면 사이즈(가로x세로 픽셀) : 500 x 500) ,
2. 배경색 및 라인: background(180), stroke(0), strokeWeight(5), fill(255, 20)
3. 원 그리기는 ellipse(x, y, diam, diam) 함수 사용 ]
▶ 문제 (실행결과)
아래처럼 동작되도록 코딩하라.
▶ 프로그램(code) :
(이미지를 클릭하면 확대 됩니다)
int diam = 10; // 원의 직경 변수 선언(초기값 10 pixel)
float centerX, centerY; // 원의 중심점 좌표 변수 선언
void setup() {
size(500, 500);
centerX = width/2; // 화면 가운데 중심점 잡기(폭)
centerY = height/2; // 화면 가운데 중심점 잡기(높이)
stroke(0);
strokeWeight(5); // 선의 굵기
fill(255, 20); // 원의 테두리 색(255)과 내부 채움의 투명도(Alpha:20)
}
void draw() {
background(180); // 잔상이 남지 않도록 루프를 반복할 때 마다 배경을 새로 입힌다
ellipse(centerX, centerY, diam, diam);
diam += 10; // 직경을 10pixel 씩 증가 시킨다
if (diam == width) diam = 0; // 원의 최대크기가 화면 사이즈를 벗어나지 않도록 리셋 시켜준다
// diam %= width; // 원의 최대크기 = 화면 사이즈가 되면 나머지 값(%)이 0이 된다.
delay(50); // 원이 커지는 시간지연 값
}
▶ 프로그램(code) 다운로드:
(압축 파일을 풀어서 사용하세요)
▶ 내용설명&실행결과(영상) :
(영상을 확대하고 고화질로 보세요)
(유튜브에서 보기 : 1080p 지원)
( 카카오 : 720P 화질 지원)
'Language > 프로세싱' 카테고리의 다른 글
| 【 프로세싱 기초#21 】 빗방울 효과 내기 (0) | 2019.05.23 |
|---|---|
| 【 Processing Basic#2 】 'The Circle grows' by Processing! (0) | 2019.05.21 |
| 【 프로세싱 기초#19 】 그림 이동하며 그리기 2 (2) | 2019.05.20 |
| 【 프로세싱 기초#18 】 그림 이동하며 그리기 (0) | 2019.05.20 |
| 【 프로세싱 기초#17 】 극좌표로 원 그리기 (0) | 2019.05.17 |
