Day2

Transcript

1. 코드 시 쓰기
   SeMA 비엔날래 미디어시티서울 2016 / 불확실한 학교
   

   View Slide

2. ৬੉౵੉:Mediacityseoul_2016
   ࠺޻ߣഐ: mcs123456789
   IUUQVODFSUBJOUZTDIPPMPSHEBZ
   

   View Slide

3. 코드? 시
   Code? Poem
   

   View Slide

4. 1. 개발 환경
   Developing environment
   

   View Slide

5. ࢲ࠳ۄ੐ ఫझ౟
   https://sublimetext.com
   

   View Slide

6. ࢲ࠳ۄ੐ ߓ҃ ࢝ ߄Բӝ
   

   View Slide

7. empty-example
   

   View Slide

8. P5 ۄ੉࠳۞ܻ ׮਍۽٘
   

   View Slide

9. ౵ੌ ҳઑ
   스케치
   웹 페이지
   

   View Slide

10. 개발자 도구
    ౵੉য಩झ۽ झா஖ ࠁӝ
    

    View Slide

11. ѐߊ ജ҃
    ѐߊ ೒۽਋
    1.௏٘ ߸҃
    2.ࢲ࠳ۄ੐ীࢲ ੷੢ (Ctrl + S, Command + S)
    3. ౵੉য಩झীࢲ ܻ೐ېद (Ctrl + R, Command + R)
    ࢲ࠶ۄ੐ ౵੉য಩झ
    

    View Slide

12. 2. 글자와 숫자
    letters and numbers
    

    View Slide

13. Edward Ruscha. OOF. 1962
    

    View Slide

14. function setup(){
    createCanvas(windowWidth,windowHeight);
    }
    브라우저 윈도우의 너비와 높이
    

    View Slide

15. “Ӗ ղਊ”
    큰따옴표 사용
    

    View Slide

16. function draw() {
    textAlign(CENTER);
    textSize(150);
    textStyle(BOLD);
    text(“OOF", windowWidth / 2,windowHeight / 2);
    }
    윈도우 너비의 절반
    윈도우의 높이의 절반
    중심
    스타일
    “ 글 ”
    

    View Slide

17. View Slide

18. 3. 코드 시
    Code poems
    

    View Slide

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
    

    View Slide

20. / ੑ۱ ߑߨ
    

    View Slide

21. View Slide

22. String 스트링 = 문자열
    

    View Slide

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
    

    View Slide

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
    

    View Slide

25. \n ੑ۱ ߑߨ:
    PCח ₩ ః
    

    View Slide

26. җઁ: ૑Әө૑ ߓ਍ ղਊਸ ഝਊ೧ࢲ
    Ӗ੗৬ بഋਵ۽ ੉ܖয૓ ௏٘ दܳ ॳࣁਃ
    

    View Slide

27. 4. 변수
    variable
    

    View Slide

28. 변수 variable i
    

    View Slide

29. var = variable의 약자
    var i = 0;
    변수의 이름 값 지정 i
    

    View Slide

30. ৡ ஠৬ۄ On Kawara
    

    View Slide

31. function draw() {
    textAlign(CENTER);
    textSize(150);
    textStyle(BOLD);
    text("OOF", windowWidth / 2, windowHeight / 2);
    }
    윈도우 너비의 절반 윈도우의 높이의 절반
    글자 중앙정렬
    글자의 스타일(굵게)
    “ 글 ”
    

    View Slide

32. function draw() {
    background(0);
    fill(255);
    textSize(200);
    var ਘ = month();
    var ੌ = day();
    var ֙ = year();
    text(ਘ + “ ” + ੌ + “,” + ֙, 250, windowHeight/2);
    }
    월
    일
    년
    스페이스
    

    View Slide

33. View Slide

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

    View Slide

35. View Slide

36. 5. 입력
    Input
    

    View Slide

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 값
    

    View Slide

38. 키보드 입력 해보세요
    

    View Slide

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
    

    View Slide

40. 4. 연산자
    operators
    

    View Slide

41. View Slide

42. < ୡҗ Greater than
    <= ੉࢚ Greater or equal
    >= ੉ೞ less or equal
    > ޷݅ less than
    == э׮ equal to
    != ׮ܰ׮ not equal to
    

    View Slide

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);
    }
    }
    만약에 마우스
    위치가 캔버스
    크기의 절반보
    다 크다면…
    

    View Slide

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 가 높이
    의 절반보다 크거
    나
    

    View Slide

45. | ੑ۱ ߑߨ:
    Shift + \ ഑਷ ₩
    

    View Slide

46. ࠛഛपೠ ೟Ү ࣁ޷ա/ ੹द ࣗѐ
    

    View Slide