1. 코딩 작문의 개념
출처: Casey Reas, Ben Fry (2014). Processing. (MIT)를 재구성함.
2. 코드를 복사해서 실행 해보세요
무엇이 나올까요?
int x = 0;
int y = 55;
void setup(){
size(100, 100);
}
void draw(){
background(204);
line(x, y, x+20, y-40);
line(x+10, y, x+30, y-40);
line(x+20, y, x+40, y-40);
x = x + 1;
if(x > 100){
x = -40;
}
}
3. (x, y)좌표로 도형 그리기
출처: Casey Reas, Ben Fry (2014). Processing. (MIT)를 재구성함.
4. 수치로 나타낸 색상
출처: Casey Reas, Ben Fry (2014). Processing. (MIT)를 재구성함.
background(116, 193, 206);
noStroke();
fill(129, 130, 87, 102);
rect(20, 20, 30, 60);
fill(129, 130, 87, 204);
rect(50, 20, 30, 60);
background(56, 90, 94);
strokeWeight(12);
stroke(242, 204, 47, 102);
line(30, 20, 50, 80);
stroke(242, 204, 47, 204);
line(50, 20, 70, 80);
background(0);
noStroke();
fill(232, 204, 47, 160);
ellipse(47, 36, 64, 64);
fill(174, 221, 60, 160);
ellipse(90, 47, 64, 64);
fill(116, 193, 206, 160);
ellipse(57, 79, 74, 64);
background(255);
noStroke();
fill(232, 204, 47, 160);
ellipse(47, 36, 64, 64);
fill(174, 221, 60, 160);
ellipse(90, 47, 64, 64);
fill(116, 193, 206, 160);
ellipse(57, 79, 74, 64);
5. 코드를 복사해서 실행 해보세요
무엇이 나올까요?
void setup(){
size(600, 600);
}
void draw(){
background(0, 255, 0);
ellipse(mouseX, mouseY, 150, 150);
}
void setup(){
size(600, 600);
background(0, 255, 0);
}
void draw(){
ellipse(mouseX, mouseY, 150, 150);
}
void setup(){
size(600, 600);
background(255);
noLoop();
}
void draw(){
strokeWeight(20);
fill(255, 255, 0);
rect(10, 10, 180, 300);
fill(255);
rect(10, 310, 180, 170);
fill(0, 0, 255);
rect(10, 480, 180, 110);
fill(255, 0, 0);
rect(190, 10, 400, 470);
fill(255);
rect(190, 480, 290, 110);
rect(480, 480, 110, 110);
}
6. 디지털 드로잉 하기
< 루핑 looping >
애니메이션을 만들거나 마우스나 키보드를 입력에 반응해야 하는 스케치의 경우, 코드가 지속적으로 반복 실행되어야 한다. 이 기능은 draw( ) 함수를 통해 수행할 수 있다.
출처: Casey Reas, Ben Fry (2014). Processing. (MIT)를 재구성함.
void setup : 스케치를 실행했을 때 최초 한 번만 그 내용이 실행된다.
void draw : 매 프레임마다 함수 내의 내용이 계속해서 실행이 된다.
아래의 코드를 복사하고 실행 해보세요.
int brushSize;
color brushCol;
void setup() {
size(500, 500);
background(255);
brushSize = 40;
}
void draw() {
if (mousePressed){
stroke (brushCol);
//fill(0);
//ellipse(mouseX, mouseY, brushSize, brushSize);
strokeWeight(brushSize);
line(pmouseX, pmouseY, mouseX, mouseY);
}
}
void keyPressed(){
if (key == '-'){ // decrease brush size
brushSize -= 5;
} else if (key == '=') { // increse brush size
brushSize += 5;
} else if (key == 'r') { // refresh screen
background(255);
} else if (key == ' ') {
brushCol = color ( random(255), random(255), random(255));
saveFrame("frame_01/####.png");
}
brushSize = constrain(brushSize, 5, 100);
}