야금야금 프로세싱 - day 01

프로세싱이 아무래도 디지털 이미징에 특화 되어있다보니 작업하는 공간을 스케치 라고 부름;

이 스케치에 있는 편집창에 코드를 작성해서 재생( ctrl + R ) 하면 결과물이 새창으로 나타나게 됨;

야금야금 프로세싱 이라는 책을 보면서 하나하나 아주 기초부터 알아가려고 메모를 하기 시작함; // 초등생을 위한 책 같음

우선적으로 알아둬야 할건 

첫째 좌표 개념.

에펙과 동일하다.

우측으로 갈수록 +X 이고 아래로 내려갈수록 +Y 이다.

100 X 100 의 사이즈 창에서 

( 0,0 ) 은 왼쪽 상단 모서리가 되고

( 50,50 ) 은 창의 중간이 되고

( 100,100 ) 은 오른쪽 하단 모서리가 된다.

둘째 우선순위?개념

코드가 아래로 내려갈수록 화면에서는 최상단에 표시된다. 아래에 있을수록 위에 쌓이는 것 같다.

라인 만들기

line( x 시작좌표 , y 시작좌표 , x 시작좌표 , y 시작좌표  );

라인의 두께

strokeWeight(숫자); // 스트록 컬러는 모르겠음

사각형 만들기

rect( 사각형이 시작될 x 좌표 , y 좌표 , 넓이 , 높이 ); // rectangle

원형 만들기

ellipse( 원형의 중심이 될 x 좌표 , y 좌표 , 넓이 , 높이 );

사각형에 색 채우기

fill(); // 괄호에는 (0)~(255) 까지의 한가지 숫자 또는 (0,0,0) 과 같은 R,G,B 값 또는 ( 컬러 코드 ) 를 넣을 수 있다.

배경 색 채우기

background(); // fill(); 과 동일함.

이 상태를 가지고 텔레비젼을 그릴 수 있음.

편집창에 다음과 같은 코드를 입력함.

size(300,300); // 출력되는 창의 크기를 결정함

background(#744486); // 배경색을 지정함.

strokeWeight(8); // 스트록의 두께를 지정

line(80,230,70,280); // 지정된 스트로크의 두께로 라인을 그림

line(200,230,210,280); // 지정된 스트로크의 두께로 라인을 그림

strokeWeight(4); // 스트록의 두께를 지정. 이렇게 되면 이후 만들어 지는 도형의 스트로크에 대해서는 지금 지정한 값을 따름.

line(100,40,140,80); // 새로 지정된 스트로크의 두께로 라인을 그림

line(150,40,140,80); // 새로 지정된 스트로크의 두께로 라인을 그림

fill(#11DCF5); // 아래 닫힌 도형에 대해서 색을 채운다는 뜻 같음

  rect(50,80,180,150); // 위에 fill(); 로 지정한 색으로 사각형 박스를 만듦

fill(#1190F5); // 아래 박스에 대해 색을 지정.

  rect(60,90,160,100); // 위에 fill(); 로 지정한 색으로 사각형 박스를 만듦. 

fill(#11F55F); // 아래 원에 대해 색을 지정.

  ellipse(160,210,10,10); // 위에 fill(); 로 지정한 색으로 사각형 박스를 만듦. 

fill(#F5EE11); // 아래 원에 대해 색을 지정.

  ellipse(190,210,10,10); // 위에 fill(); 로 지정한 색으로 사각형 박스를 만듦. 

아래쪽에 있을 수록 레이어가 위에 얹어지게 되는것같으므로 다음과 같은 결과를 얻을 수 있다.