발표 챕터
95p Image 1: Display, Tint
101p Data 2: Text
105p Data 3: Conversion, Objects
111p Typography 1: Display
117p Math 3: Trigonometry
- Image 파일을 불러와서 processing의 실행 창에 보이도록 하는 여러가지 테크닉 설명
- char, String 타입의 변수를 이용하여, 낱글자나 단어, 문장등을 사용하는 방법
- 서로 다른 타입의 데이터를 변환하는 방법
- 컴퓨터에 저장된 폰트를 불러와서 텍스트에 적용하기
- procssing에 내장된 삼각함수 관련 함수들
Image 1: Display, Tint
-주요 syntax
PImage, loadImage(), image()
tint(), noTint()
- processing은 기본적으로 GIF, PNG, JPG 타입의 이미지 파일을 지원한다.
- 이미지 파일을 사용하기 위해선 먼저 사용하려는 이미지 파일을 현재 스케치 폴더 내의 data폴더에 반드시 저장해야 한다.
기본적으로 procssing을 설치하면 Window의 경우 내문서 폴더에 processing 폴더가 생기고 그 안에 모든 스케치들이
저장되며, Mac역시 Document 폴더에 위와 동일한 폴더가 생성된다.
이미지를 data폴더에 저장하는 방법은 아래 세가지와 같다.
* 이미지 파일을 드래그 하여 processing에 끌어다 놓는다
* Sketch 메뉴에서 Add File을 클릭한 후 해당 파일을 선택한다.
* Sketch 메뉴에서 Show Sketch Folder를 선택한 후, data 폴더에 해당 파일을 가져다 놓는다.
- Pimage는 이미지를 데이타로 받는 데이타 타입이며, loadImage는 data폴더에 저장된 이미지를 사용할 수 있도록 불러오는
기능을 한다. image()함수로 이렇게 불러온 이미지를 화면에 표시할 수 있다.
- tint() 함수는 이미지에 지정한 색상을 입히거나, 투명도를 조절할 수 있다.
- 중요 pages
96p : GIF, PNG, JPG 파일의 차이 설명
96-97p : 이미지를 화면에 불러오는 방법
98p : tint()함수를 사용하면 색상 및 투명도 조절이 가능
Data 2: Text
-주요 syntax
char, String
- char(character의 줄임말)는 낱글자를 저장할 수 있는 데이타 타입이다.
데이타를 char 타입의 변수에 저장할 때는 반드시 작은 따옴표를 사용한다.
ex)
char a = 'n';
- String은 단어나 문장을 저장할 수 있는 데이타 타입이다.
데이타를 String 타입의 변수에 저장할 때는 반드시 큰 따옴표를 사용한다.
ex)
String a = "Eponymous";
String c = "E";
- 중요 pages
102p : char 타입 설명 및 ASCII 코드 설명
103p : String 타입 설명
Data 3: Conversion, Objects
-주요 syntax
boolean(), byte(), char(), int(), float(), str()
“.” (dot operator)
PImage.width, PImage.height
String.length(), String.startsWidth(), String.endsWidth(),
String.charAt(), String.toCharArray(), String.subString(),
String.toLowerCase(), String.toUpperCase()
String.equals()
- 다른 타입의 데이타를 사용하기 위해선 데이타의 변환이 필요하다.
boolean(), byte(), char(), int(), float(), str() 은 각각의 데이타 타입으로 괄호안의 데이타를 변환한다.
- PImage나 PFont, String의 경우 다른 데이타 타입과 다르게 object 개념을 갖는다.
Object 안의 변수를 procssing에선 filed라고 하며, Object 안의 함수를 method라 한다.
field와 method는 ". (dot operator)" 를 이용하여 사용할 수 있다.
ex) "ohio.jpg"가 320 x 240 pixel의 이미지라고 가정
PImage img = loadImage("ohio.jpg"); // 320 x 240 pixel의 이미지
int w = img.width; // "ohio.jpg"의 너비를 w에 저장
int h = img.height; // "ohio.jpg"의 높이를 h에 저장
println(w); // Prints "320"
println(h); // Prints "240"
- 중요 pages
106p : 데이타간 변환을 보여주는 예시문
107p : Object에 대한 간단한 설명 및 데이터 접근 방법
108p : String 타입에 사용되는 method소개 및 사용방법
Typography 1: Display
-주요 syntax
PFont, loadFont(), textFont(), text()
textSize(), textLeading(), textAlign(), textWidth()
- processing에선 컴퓨터에 저장된 font를 사용할 수 있으며 사용방법은 아래와 같다.
Tools 메뉴에서 Creat Font 선택
사용하려는 font와 사이즈를 결정한다.
이렇게 지정된 font는 현재 sketch의 data폴더에 저장되며, 여러개의 font를 불러오는 것도 가능하다.
- 이렇게 저장된 font를 loadFont()로 불러온뒤, textFont()로 loadFont()로 불러온 font중 실제 text()에 적용될
font를 선택한다. 그 후 text()함수로 원하는 단어나 문장을 화면에 표시할 수 있다.
ex)
PFont font; // PFont 타입의 변수인 font를 선언
font = loadFont("SansSerif-32.vlw"); // 저장된 폰트를 불러온다.
textFont(font); // 사용할 폰트를 지정한다.
fill(0);
text("SADI", 0, 40); // (0,40) 에 "SADI" 표시
text("DIP", 0, 70); // (0,70) 에 "DIP" 표시
text("2009", 0, 100); // (0,100) 에 "2009" 표시
- textSize(), textLeading(), textAlign() 는 각각, text의 크기, 줄간격, 정렬방법을 설정할 수 있으며,
textWidth()는 표시된 텍스트의 너비 값을 알 수 있다.
- 중요 pages
112p : font를 불러오는 방법을 설명
114p : text 사이즈나 정렬방법등을 설정하는 방법
Math 3: Trigonometry
-주요 syntax
PI, QUARTER_PI, HALF_PI, TWO_PI, radians(), degrees()
sin(), cos(), arc()
- processing에서는 sin(), cos()같은 삼각함수를 사용할 수 있으며, 입력 값으로 degree와 radian값을 사용한다.
- degree는 일반적으로 사용하는 각도를 말하며, radian은 각도를 π(3.14) 로 치환한 값이며 360도는 2π 이다.
- PI -> π
QUARTER_PI -> π / 4
HALF_PI -> π / 2
TWO_PI -> 2π
- sin()과 cos() 함수를 사용하면, 일정한 주기를 같는 곡선이나 색상 같은 그래픽 요소를 만들 수 있으며,
원의 좌표를 두 함수로 나타낼 수 있다.
- 중요 pages
117p : degree와 radian에 대한 개념 설명
118p : sin()과 cos()함수 및 이를 이용한 주기적인 이미지 그리기
123p : sin()과 cos()함수를 이용하여 원의 좌표 표현
124p : arc() 함수로 곡선 그리기
95p Image 1: Display, Tint
101p Data 2: Text
105p Data 3: Conversion, Objects
111p Typography 1: Display
117p Math 3: Trigonometry
- Image 파일을 불러와서 processing의 실행 창에 보이도록 하는 여러가지 테크닉 설명
- char, String 타입의 변수를 이용하여, 낱글자나 단어, 문장등을 사용하는 방법
- 서로 다른 타입의 데이터를 변환하는 방법
- 컴퓨터에 저장된 폰트를 불러와서 텍스트에 적용하기
- procssing에 내장된 삼각함수 관련 함수들
Image 1: Display, Tint
-주요 syntax
PImage, loadImage(), image()
tint(), noTint()
- processing은 기본적으로 GIF, PNG, JPG 타입의 이미지 파일을 지원한다.
- 이미지 파일을 사용하기 위해선 먼저 사용하려는 이미지 파일을 현재 스케치 폴더 내의 data폴더에 반드시 저장해야 한다.
기본적으로 procssing을 설치하면 Window의 경우 내문서 폴더에 processing 폴더가 생기고 그 안에 모든 스케치들이
저장되며, Mac역시 Document 폴더에 위와 동일한 폴더가 생성된다.
이미지를 data폴더에 저장하는 방법은 아래 세가지와 같다.
* 이미지 파일을 드래그 하여 processing에 끌어다 놓는다
* Sketch 메뉴에서 Add File을 클릭한 후 해당 파일을 선택한다.
* Sketch 메뉴에서 Show Sketch Folder를 선택한 후, data 폴더에 해당 파일을 가져다 놓는다.
- Pimage는 이미지를 데이타로 받는 데이타 타입이며, loadImage는 data폴더에 저장된 이미지를 사용할 수 있도록 불러오는
기능을 한다. image()함수로 이렇게 불러온 이미지를 화면에 표시할 수 있다.
- tint() 함수는 이미지에 지정한 색상을 입히거나, 투명도를 조절할 수 있다.
- 중요 pages
96p : GIF, PNG, JPG 파일의 차이 설명
96-97p : 이미지를 화면에 불러오는 방법
98p : tint()함수를 사용하면 색상 및 투명도 조절이 가능
Data 2: Text
-주요 syntax
char, String
- char(character의 줄임말)는 낱글자를 저장할 수 있는 데이타 타입이다.
데이타를 char 타입의 변수에 저장할 때는 반드시 작은 따옴표를 사용한다.
ex)
char a = 'n';
- String은 단어나 문장을 저장할 수 있는 데이타 타입이다.
데이타를 String 타입의 변수에 저장할 때는 반드시 큰 따옴표를 사용한다.
ex)
String a = "Eponymous";
String c = "E";
- 중요 pages
102p : char 타입 설명 및 ASCII 코드 설명
103p : String 타입 설명
Data 3: Conversion, Objects
-주요 syntax
boolean(), byte(), char(), int(), float(), str()
“.” (dot operator)
PImage.width, PImage.height
String.length(), String.startsWidth(), String.endsWidth(),
String.charAt(), String.toCharArray(), String.subString(),
String.toLowerCase(), String.toUpperCase()
String.equals()
- 다른 타입의 데이타를 사용하기 위해선 데이타의 변환이 필요하다.
boolean(), byte(), char(), int(), float(), str() 은 각각의 데이타 타입으로 괄호안의 데이타를 변환한다.
- PImage나 PFont, String의 경우 다른 데이타 타입과 다르게 object 개념을 갖는다.
Object 안의 변수를 procssing에선 filed라고 하며, Object 안의 함수를 method라 한다.
field와 method는 ". (dot operator)" 를 이용하여 사용할 수 있다.
ex) "ohio.jpg"가 320 x 240 pixel의 이미지라고 가정
PImage img = loadImage("ohio.jpg"); // 320 x 240 pixel의 이미지
int w = img.width; // "ohio.jpg"의 너비를 w에 저장
int h = img.height; // "ohio.jpg"의 높이를 h에 저장
println(w); // Prints "320"
println(h); // Prints "240"
- 중요 pages
106p : 데이타간 변환을 보여주는 예시문
107p : Object에 대한 간단한 설명 및 데이터 접근 방법
108p : String 타입에 사용되는 method소개 및 사용방법
Typography 1: Display
-주요 syntax
PFont, loadFont(), textFont(), text()
textSize(), textLeading(), textAlign(), textWidth()
- processing에선 컴퓨터에 저장된 font를 사용할 수 있으며 사용방법은 아래와 같다.
Tools 메뉴에서 Creat Font 선택
사용하려는 font와 사이즈를 결정한다.
이렇게 지정된 font는 현재 sketch의 data폴더에 저장되며, 여러개의 font를 불러오는 것도 가능하다.
- 이렇게 저장된 font를 loadFont()로 불러온뒤, textFont()로 loadFont()로 불러온 font중 실제 text()에 적용될
font를 선택한다. 그 후 text()함수로 원하는 단어나 문장을 화면에 표시할 수 있다.
ex)
PFont font; // PFont 타입의 변수인 font를 선언
font = loadFont("SansSerif-32.vlw"); // 저장된 폰트를 불러온다.
textFont(font); // 사용할 폰트를 지정한다.
fill(0);
text("SADI", 0, 40); // (0,40) 에 "SADI" 표시
text("DIP", 0, 70); // (0,70) 에 "DIP" 표시
text("2009", 0, 100); // (0,100) 에 "2009" 표시
- textSize(), textLeading(), textAlign() 는 각각, text의 크기, 줄간격, 정렬방법을 설정할 수 있으며,
textWidth()는 표시된 텍스트의 너비 값을 알 수 있다.
- 중요 pages
112p : font를 불러오는 방법을 설명
114p : text 사이즈나 정렬방법등을 설정하는 방법
Math 3: Trigonometry
-주요 syntax
PI, QUARTER_PI, HALF_PI, TWO_PI, radians(), degrees()
sin(), cos(), arc()
- processing에서는 sin(), cos()같은 삼각함수를 사용할 수 있으며, 입력 값으로 degree와 radian값을 사용한다.
- degree는 일반적으로 사용하는 각도를 말하며, radian은 각도를 π(3.14) 로 치환한 값이며 360도는 2π 이다.
- PI -> π
QUARTER_PI -> π / 4
HALF_PI -> π / 2
TWO_PI -> 2π
- sin()과 cos() 함수를 사용하면, 일정한 주기를 같는 곡선이나 색상 같은 그래픽 요소를 만들 수 있으며,
원의 좌표를 두 함수로 나타낼 수 있다.
- 중요 pages
117p : degree와 radian에 대한 개념 설명
118p : sin()과 cos()함수 및 이를 이용한 주기적인 이미지 그리기
123p : sin()과 cos()함수를 이용하여 원의 좌표 표현
124p : arc() 함수로 곡선 그리기
