$30 off During Our Annual Pro Sale. View Details »

Day2

Taeyoon Choi
August 20, 2016
400

 Day2

Taeyoon Choi

August 20, 2016
Tweet

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