【 프로세싱 기초#19 】 그림 이동하며 그리기 2
앞선 과제에 이어, 움직이는 도형(라인)을 구현해 보려한다. 이번에는 배열이라는 요소를 사용하는데, 간단하고 효과적인 방법이므로, 잘 기억하면 좋다.
[ 프로세싱에서의 좌표 ]
▶ 문제 1 : 선 움직이기 2
조건 : 1. 화면 사이즈(가로x세로 픽셀) : 400 x 400) .
2. 배경색 및 라인: background(0) .
3. 10개의 세로 라인을 배열을 이용하여 위치값을 주면서 그릴 것. (세로라인 그리기 : y1=0, y2=height 고정)
4. 배열에 선의 처음 위치값을 초기 값으로 지정 해줌 (0, 40, 80, ... 360)
5. 선의 이동할 범위를 -10~+10 사이값으로 랜덤생성시켜 적용할 것.
6. 랜덤 값이 화면 사이즈를 벗어 나지 않도록 함(constrain (a, b, c) : a변수의 값을 b이상 c이하 값으로 함)
7. 이동되는 느낌을 주기위해 draw() 반복 루프에, 배경을 검은색으로 줄 것 ( 'background(0)' )
▶ 실행결과 1 (동작확인):
(전체 보기, 고화질 보기로 보세요)
▶ 프로그램(code) 1:
(이미지를 클릭하면 확대 됩니다)
float[] arrayOfPositions; // 배열 변수의 선언
void setup() {
size(400, 400);
background(0);
stroke(255); // 라인을 흰색으로
arrayOfPositions = new float[10]; //'10'자리 배열변수 메모리할당
// 배열변수를 초기화하는 루틴
for (int i=0; i<10; i+=1) {
arrayOfPositions[i] = width/10 * i; //"0, 40, 80, ... 360" 초기 위치값 주기
}
}
void draw() {
background(0); // 배경을 검은색으로 매번 지우지(매우지) 않으면 잔상이 남는다.
for(int i=0; i<10; i+=1) {
arrayOfPositions[i] += int(random(-10,10));//'±10' 범위 랜덤값 적용
arrayOfPositions[i] = constrain(arrayOfPositions[i], 0, width);//0~width까지 한정
}
for(int i=0; i<10; i+=1) {
line(arrayOfPositions[i], 0, arrayOfPositions[i], height); //line(x1, y1, x2, y2)
}
delay(300);
}
▶ 프로그램(code) 다운로드 1:
(압축 파일을 풀어서 사용하세요)
'Language > 프로세싱' 카테고리의 다른 글
| 【 Processing Basic#2 】 'The Circle grows' by Processing! (0) | 2019.05.21 |
|---|---|
| 【 프로세싱 기초#20 】 점점 커지는 원 그리기 (0) | 2019.05.21 |
| 【 프로세싱 기초#18 】 그림 이동하며 그리기 (0) | 2019.05.20 |
| 【 프로세싱 기초#17 】 극좌표로 원 그리기 (0) | 2019.05.17 |
| 【 프로세싱 기초#16 】 박스로 그림 그리기 #2 (0) | 2019.05.17 |
RandomLine.zip
sketch__12_line_width_slash.pde
