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); } 윈도우 너비의 절반 윈도우의 높이의 절반 중심 스타일 “ 글 ”
17. None

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. / ੑ۱ ߑߨ

21. None

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); } 월 일 년 스페이스
33. None

34. var द = hour(); var ࠙ = minute(); var ୡ

    = second(); text(द + " : " + ࠙ + " : " + ୡ, 250,windowHeight/2+100); 시 분 초 시계 만들기
35. None

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

41. None

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. ࠛഛपೠ ೟Ү ࣁ޷ա/ ੹द ࣗѐ