Day2

Transcript

1. 코드 시 쓰기 SeMA 비엔날래 미디어시티서울 2016 / 불확실한 학교
2. ৬੉౵੉:Mediacityseoul_2016 ࠺޻ߣഐ: mcs123456789 IUUQVODFSUBJOUZTDIPPMPSHEBZ
3. 코드? 시 Code? Poem
4. 1. 개발 환경 Developing environment
5. ࢲ࠳ۄ੐ ఫझ౟ https://sublimetext.com
6. ࢲ࠳ۄ੐ ߓ҃ ࢝ ߄Բӝ
7. empty-example
8. P5 ۄ੉࠳۞ܻ ׮਍۽٘
9. ౵ੌ ҳઑ 스케치 웹 페이지
10. 개발자 도구 ౵੉য಩झ۽ झா஖ ࠁӝ
11. ѐߊ ജ҃ ѐߊ ೒۽਋ 1.௏٘ ߸҃ 2.ࢲ࠳ۄ੐ীࢲ ੷੢ (Ctrl + S, Command + S) 3. ౵੉য಩झীࢲ ܻ೐ېद (Ctrl + R, Command + R) ࢲ࠶ۄ੐ ౵੉য಩झ
12. 2. 글자와 숫자 letters and numbers
13. Edward Ruscha. OOF. 1962
14. function setup(){ createCanvas(windowWidth,windowHeight); } 브라우저 윈도우의 너비와 높이
15. “Ӗ ղਊ” 큰따옴표 사용
16. function draw() { textAlign(CENTER); textSize(150); textStyle(BOLD); text(“OOF", windowWidth / 2,windowHeight / 2); } 윈도우 너비의 절반 윈도우의 높이의 절반 중심 스타일 “ 글 ”
18. 3. 코드 시 Code poems
19. //Ҋ਷ |Ӓ Ԣ} function setup() { createCanvas(windowWidth, windowHeight); } function draw() { background(230,140,140,100); fill(255,255,255,100); textSize(50); text("ղ۰т ٸ ࠁও֎ ৢۄт ٸ ࠁ૑ ޅೠ Ӓ Ԣ", 150, windowHeight/2); } 코멘트 시 내용 Opacity(ైݺب): 1~100
20. / ੑ۱ ߑߨ
22. String 스트링 = 문자열
23. //Ҋ਷ |Ӓ Ԣ} function setup() { createCanvas(windowWidth, windowHeight); } function draw() { background(230,140,140); fill(255,255,255,100); textSize(50); text("ղ۰т ٸ ࠁও֎ ৢۄт ٸ ࠁ૑ ޅೠ Ӓ Ԣ", windowWidth / 2 - 200, windowHeight / 2, 300,300); } Bounding box
24. //Ҋ਷ |Ӓ Ԣ} function setup() { createCanvas(windowWidth, windowHeight); } function draw() { background(230,140,140); fill(255,255,255,70); textSize(50); text("ղ۰т ٸ ࠁও֎ \nৢۄт ٸ ࠁ૑ ޅೠ \nӒ Ԣ, windowWidth / 2 - 200, windowHeight / 2, 600,300); } \ ੑ۱ ߑߨ: ׮਺ ठۄ੉٘ Opacity(ైݺب): 1~100 600 300
25. \n ੑ۱ ߑߨ: PCח ₩ ః
26. җઁ: ૑Әө૑ ߓ਍ ղਊਸ ഝਊ೧ࢲ Ӗ੗৬ بഋਵ۽ ੉ܖয૓ ௏٘ दܳ ॳࣁਃ
27. 4. 변수 variable
28. 변수 variable i
29. var = variable의 약자 var i = 0; 변수의 이름 값 지정 i
30. ৡ ஠৬ۄ On Kawara
31. function draw() { textAlign(CENTER); textSize(150); textStyle(BOLD); text("OOF", windowWidth / 2, windowHeight / 2); } 윈도우 너비의 절반 윈도우의 높이의 절반 글자 중앙정렬 글자의 스타일(굵게) “ 글 ”
32. function draw() { background(0); fill(255); textSize(200); var ਘ = month(); var ੌ = day(); var ֙ = year(); text(ਘ + “ ” + ੌ + “,” + ֙, 250, windowHeight/2); } 월 일 년 스페이스
34. var द = hour(); var ࠙ = minute(); var ୡ = second(); text(द + " : " + ࠙ + " : " + ୡ, 250,windowHeight/2+100); 시 분 초 시계 만들기
36. 5. 입력 Input
37. var ੑ۱ః = 0; function setup() { createCanvas(windowWidth, windowHeight); } function draw() { fill(230); noStroke(); rect(0, 0, width, height); fill(0); textSize(200); text(ੑ۱ః, width / 2, height / 2); } function keyTyped() { ੑ۱ః = key; } 변수 keyTyped 함수: 입력시 작동 key 값
38. 키보드 입력 해보세요
39. var ੑ۱ః = 0; function setup() { createCanvas(windowWidth, windowHeight); } function draw() { fill(230); noStroke(); rect(0, 0, width, height); fill(0); textSize(200); text(ੑ۱ః, width / 2, height / 2); } function keyTyped() { ੑ۱ః = key; } 변수 key 값 이것은 사각형 그리기. 이것은 왜 필요 할까요? 알아보기 위해 서 코드를 코멘 트 아웃 할까요? windowWidth
40. 4. 연산자 operators
42. < ୡҗ Greater than <= ੉࢚ Greater or equal >= ੉ೞ less or equal > ޷݅ less than == э׮ equal to != ׮ܰ׮ not equal to
43. function draw() { background(255); fill(255); ellipse(windowWidth/2, windowHeight/2, 100, 100); if (mouseX > windowWidth/2) { fill(0); ellipse(windowWidth/2, windowHeight/2, 100, 100); } } 만약에 마우스 위치가 캔버스 크기의 절반보 다 크다면…
44. function draw() { background(255); fill(255); ellipse(width/2, height/2, 100, 100); if (mouseX > windowWidth/2 || mouseY > windowHeight/ 2) { fill(0); ellipse(width/2, height/2, 100, 100); } } | 는 Or mouseX가 폭의 절반보다 크거나 , mouseY 가 높이 의 절반보다 크거 나
45. | ੑ۱ ߑߨ: Shift + \ ഑਷ ₩
46. ࠛഛपೠ ೟Ү ࣁ޷ա/ ੹द ࣗѐ