Upgrade to Pro — share decks privately, control downloads, hide ads and more …

daum

Taeyoon Choi
September 30, 2016
480

 daum

Taeyoon Choi

September 30, 2016
Tweet

Transcript

  1. 코딩. 0부터 1까지
    Coding 0 to 1
    최태윤, 정유미, 김태경

    View Slide

  2. 코드? 지시어
    Code? Instruction

    View Slide


  3. View Slide

  4. झಕ੉झ ੋ߬੉؊

    View Slide

  5. 1ࠗ Ӓܻ٘

    View Slide

  6. x୷
    y୷

    View Slide

  7. 0,0, 색칠

    View Slide

  8. 0,0, 색칠
    x୷
    y୷

    View Slide

  9. 0,0, 색칠
    2,1, 색칠

    View Slide

  10. 0,0, 색칠
    2,1, 색칠
    4,0 색칠

    View Slide

  11. 0,0, 색칠
    2,1, 색칠
    4,0 색칠
    1,3, 색칠

    View Slide

  12. 0,0, 색칠
    2,1, 색칠
    4,0 색칠
    1,3, 색칠
    4,4, 색칠

    View Slide

  13. View Slide

  14. 파이어폭스, 오픈소스 브라우저 

    자바스크립트

    View Slide

  15. function setup() {
    createCanvas(500,500);
    }
    function draw() {
    rect(100,100,100,100);
    }

    View Slide

  16. View Slide

  17. sketch.js
    ਢಕ੉૑
    ࢜۽Ҋஜ
    ௏٘ ੘ࢿ
    ੷੢
    index.html

    View Slide

  18. 1. 함수: 函數
    2. 숫자가 들어있는 상자
    function ಔ࣌

    View Slide

  19. function setup()
    셋업
    프로그램 설정
    펑션: 함수

    View Slide

  20. function setup() 소괄호
    퍼렌터시스 parenthesis

    View Slide

  21. 전달인수, 아규먼트 argument
    ( )

    View Slide

  22. 소괄호 입력

    View Slide

  23. 중괄호
    컬리 브레이스 Curly brace
    function setup(){
    }

    View Slide

  24. 두개의 중괄호 사이에 지시문statement이 들어간다
    { }

    View Slide

  25. 중괄호 입력

    View Slide

  26. function setup(){
    createCanvas(500,500);
    }
    캔버스를 만든다 세미콜론
    대문자
    x축, y축

    View Slide

  27. 쎄미콜론
    하나의 지시문이 끝남을 표시
    ;

    View Slide

  28. 여러개의 지시문을 포함하기도 한다.
    }
    지시문 ;
    {
    지시문 ;
    지시문 ;

    View Slide

  29. function setup(){
    createCanvas(500,500);
    } x축
    y축
    0
    0
    500
    500

    View Slide

  30. View Slide

  31. 셋업
    드로우

    View Slide

  32. 햄스터 휠같이 반복 재생
    function draw( )

    View Slide

  33. rect(100,100,100,100);
    너비, 높이
    사각형
    rectangle X축, Y축

    View Slide

  34. View Slide

  35. ࢸޙઑࢎೞӝ

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. एחदр
    ࢸޙઑࢎೞӝ

    View Slide


  44. View Slide

  45. ইөߓ਍Ѫٜҗ
    ࣻ૘ೠ੿ࠁ۽
    ੉۠Ѫਸٜ݅যࠅѢ৘ਃ

    View Slide

  46. ٜ݅ӝਤ೧ࢲח
    ੉۠Ѫٜਸ೧ঠ೤פ׮
    Ӗ੗
    ৈ۞ѐ੄
    بഋ

    View Slide

  47. Ӗ੗֍ӝ

    View Slide

  48. Ӗ੗֍ӝ
    text(“ղਊ”, xઝ಴, yઝ಴);

    View Slide

  49. Ӗ੗֍ӝ
    text(“উ֞ೞࣁਃ”, 50, 50);
    ղਊ Yઝ಴ Zઝ಴

    View Slide

  50. ੉ۧѱӖ੗оաఋժפ׮


    ଵҊ
    ೐ܽ౟

    View Slide

  51. ੉ઁபߡझਤীӖ੗ܳ֍যࠅѱਃ
    ଵҊ
    ೐ܽ౟

    View Slide

  52. ୐ߣ૩Ӗ੗ੋtѐҳܻuܳ

    ੄ਤ஖ী֍যࠁѷणפ׮
    text(“ѐҳܻ”, 50, 100);

    View Slide

  53. Ӗ੗ܳ֍যࠇद׮


    ଵҊ
    ೐ܽ౟

    View Slide

  54. Ӗ੗ܳৈ۞ѐ֍যࠇद׮
    text(“ѐҳܻ”, 50, 100);
    text(“ѐҳܻ”, 50, 200);
    text(“ѐҳܻ”, 50, 300);
    text(“ѐҳܻ”, 50, 400);

    View Slide

  55. ଵҊ
    ೐ܽ౟
    Ӗ੗ܳৈ۞ѐ֍যࠇद׮

    View Slide

  56. ղоઑࢎೠ೦ݾਵ۽߄Լࠇद׮
    text(“࣠ಞ”, 50, 100);
    text(“ੋ੺޷”, 50, 200);
    text(“ಀदܖڂ”, 50, 300);
    text(“х੗ڂ”, 50, 400);

    View Slide

  57. ղоઑࢎೠ೦ݾਸ֍যࠇद׮
    ଵҊ
    ೐ܽ౟

    View Slide

  58. بഋ֍ӝ

    View Slide

  59. ੉ۧѱٜ݅Ѫੑפ׮

    View Slide

  60. ੉ࢎпഋਸݢ੷ٜ݅যࠁѷणפ׮
    ଵҊ
    ೐ܽ౟

    View Slide

  61. ࢎпഋਸ݅٘חߑߨӝরաࣁਃ
    rect(xઝ಴, yઝ಴, ց࠺, ֫੉);

    View Slide

  62. ࢎпഋೞաܳ֍যࠇद׮
    rect(50, 100, 50, 50);

    View Slide

  63. ࢎпഋ੉ೞաٜযщणפ׮
    ଵҊ
    ೐ܽ౟

    View Slide

  64. ੉ߣীח୐ߣ૩ࢎпഋয়ܲଃী
    ࢎпഋೞա؊ٜ݅যࠅѤؘਃ
    ଵҊ
    ೐ܽ౟

    View Slide

  65. rect(150, 50, 50, 50);
    rect(200, 50, 50, 50);
    ୐ߣ૩ࢎпഋ
    فߣ૩ࢎпഋ

    View Slide

  66. ୐ߣ૩ࢎпഋয়ܲଃী
    ࢎпഋ੉ٜ݅য઎णפ׮
    ଵҊ
    ೐ܽ౟

    View Slide

  67. فߣ૩ࢎпഋয়ܲଃী
    ࢎпഋਸೠߣ؊୶о೤פ׮
    rect(150, 50, 50, 50);
    rect(200, 50, 50, 50);
    rect(250, 50, 50, 50);
    ୐ߣ૩ࢎпഋ
    فߣ૩ࢎпഋ
    ࣁߣ૩ࢎпഋ

    View Slide

  68. فߣ૩ࢎпഋয়ܲଃী
    ࢎпഋ੉ٜ݅য઎णפ׮
    ଵҊ
    ೐ܽ౟

    View Slide

  69. ੉ઁل૩઴ਸٜ݅যࠅѱਃ
    ଵҊ
    ೐ܽ౟

    View Slide

  70. ل૩઴੄୐ߣ૩֎ݽٟܳ݅פ׮
    rect(150,50,50,50);
    rect(200,50,50,50);
    rect(150,150,50,50);
    rect(250,50,50,50);

    View Slide

  71. ل૩઴୐ߣ૩ࢎпഋ੉
    ٜ݅য઎णפ׮
    ଵҊ
    ೐ܽ౟

    View Slide

  72. ࢎпഋց࠺۽ઑ੺ೞחߑߨ
    ଵҊ
    ೐ܽ౟

    View Slide

  73. ࢎпഋ੄ց࠺чਸ
    ߉਷झ౭ழѐࣻ݅ఀғ೧સפ׮



    ଵҊ
    ೐ܽ౟

    View Slide

  74. ࢎпഋ੄ց࠺чਸ
    ߉਷झ౭ழѐࣻ݅ఀғ೧સפ׮
    rect(150, 150, 50*झ౭ழѐࣻ, 50);
    ࢎпഋ੄о۽ց࠺

    View Slide

  75. ࢎпഋց࠺ܳઑ੺೧઱חߑߨਵ۽
    ੉੹௏٘ب߸҃೧ࠇפ׮
    ଵҊ
    ೐ܽ౟

    View Slide

  76. पण
    ଵҊ
    ೐ܽ౟

    View Slide

  77. ࢝ӭ߄Բӝ

    View Slide

  78. ੉ۧѱٜ݅ѩפ׮

    View Slide

  79. അ੤࢚࢝਷ഥ࢝ਵ۽غয੓חؘਃ
    fill(‘grey’);

    View Slide

  80. ٮ১಴উ੄Ӗ੗ܳ߄Լࠇद׮
    fill(‘red’);

    View Slide

  81. Ӗ੗࢝җبഋ੄࢝੉߄Շ঻णפ׮
    ଵҊ
    ೐ܽ౟

    View Slide

  82. ׮࢚ٜܲ࢝ਸ੸ਊ೧ࠇद׮
    fill(‘red’);
    fill(‘yellow’);
    fill(‘blue’);
    ࡈр࢝
    ֢ۆ࢝
    ౵ۆ࢝
    fill(‘navy’); թ࢝

    View Slide

  83. Ӗ੗࢝җبഋ੄࢝੉߄Շ঻णפ׮
    ଵҊ
    ೐ܽ౟

    View Slide

  84. Ӗ੗࢝җبഋ੄࢝੉߄Շ঻णפ׮
    ଵҊ
    ೐ܽ౟

    View Slide

  85. ઁݾਸ୶о೤פ׮
    ଵҊ
    ೐ܽ౟

    View Slide

  86. ellipse(100,100,100,100);

    View Slide

  87. ellipse(100,100,10,10);
    폭, 높이
    엘립스,

    X축, Y축

    100
    100
    10
    10

    View Slide

  88. 입력

    View Slide

  89. function setup(){
    createCanvas(500,500);
    }
    function draw(){
    ellipse(mouseX,mouseY,10,10);

    }
    마우스 위치 입력
    x축 마우스 위치, y축 마우스 위치

    View Slide

  90. 만약에
    거짓

    지시어

    View Slide

  91. if(mouseIsPressed){
    }
    5-2 조건문
    햄버거를 먹자;
    마우스를 클릭하면

    View Slide

  92. function draw(){
    if(mouseIsPressed){
    ellipse(mouseX,mouseY,10,10);
    }
    }
    조건 성립시에만 반복
    5-2 마우스를 클릭하면

    View Slide