Day 1

Transcript

1. 코드란 무엇인가?
   1. 창문과 들판
   2. 구두점과 여백
   3. 좌표
   4. 점과 선
   5. 반복과 조건
   SeMA 비엔날래 미디어시티서울 2016 / 불확실한 학교
   

   View Slide

2. 코드? 지시어
   Code? Instruction
   

   View Slide

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

   View Slide

4. 1. 창문과 들판
   window and field
   

   View Slide

5. View Slide

6. HTML, CSS, JavaScript
   에이치티엠엘, 씨에스에스, 자바스크립트
   

   View Slide

7. View Slide

8. 파이어폭스
   * 오픈소스 브라우저 

   Opensource browser
   

   View Slide

9. p5.js: 피파이브 제이에스
   자바스크립트
   

   View Slide

10. 실행 버튼 play
    p5.js 에디터
    

    View Slide

11. 실행 정지 무효 다시 처음부터
    p5.js 웹 에디터
    

    View Slide

12. 1. 함수: 상자 函 + 숫자 數
    2. 숫자가 들어있는 상자
    function
    

    View Slide

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

    View Slide

14. 2. 구두점과 여백
    punctuation and blank space
    

    View Slide

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

    View Slide

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

    View Slide

17. 소괄호 입력
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. 중괄호 입력
    

    View Slide

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

    View Slide

23. 쎄미콜론
    한줄의 지시문이 끝남을 표시
    ;
    

    View Slide

24. function setup(){
    createCanvas(250,250);
    background(0);
    }
    백그라운드: 배경색 0~255 사이의 수로 바꿔보세요
    

    View Slide

25. 3. 좌표
    coordinates
    

    View Slide

26. 일반적인 좌표
    

    View Slide

27. x축
    0 10
    y축
    좌표
    0
    10
    

    View Slide

28. 캔버스 canvas x축
    y축
    0
    0
    250
    250
    

    View Slide

29. View Slide

30. 그림 그리는 로봇
    몸 동작으로 파트너에게 지시한다.
    ← 왼쪽,↑ 위로, → 오른쪽, ↓ 아래로
    ⇊ 점프 fill
    두명이 짝을 지어 번갈아 하는 놀이
    

    View Slide

31. 4. 점과 선
    dot and line
    

    View Slide

32. 셋업
    드로우
    

    View Slide

33. 햄스터 휠
    function draw()
    

    View Slide

34. function draw(){
    point(10,10);
    }
    포인트:점
    (X축 좌표, Y축 좌표)
    4-1 점
    

    View Slide

35. function setup(){
    createCanvas(250,250);
    }
    function draw(){
    point(10,10);

    point(200,200);
    }
    4-2 점 두개
    

    View Slide

36. function draw(){
    line(10,10,170,20);
    

    }
    라인 = 선 (x1, y1, x2, y2)
    x1, y1
    x2, y2
    4-3 선
    

    View Slide

37. strokeWeight(3);
    굵기 값
    획 굵기 대문자
    4-4 선의 굵기
    

    View Slide

38. function setup(){
    createCanvas(250,250);
    }
    function draw(){
    strokeWeight(2);
    line(10,10,240,230);
    }
    4-5 선의 굵기
    값을 바꿔보세요
    

    View Slide

39. stroke(255,0,0);
    (Red, Green, Blue)
    스트로크, 획
    4-5 선의 색
    

    View Slide

40. function draw(){
    stroke(255,0,0);
    strokeWeight(2);
    line(10,10,300,300);
    

    }
    (Red, Green, Blue)
    4-5 선의 색
    

    View Slide

41. ellipse(100,100,100,100);
    4-6 원
    

    View Slide

42. ellipse(100,100,10,10);
    폭, 높이
    엘립스,
    원
    X축, Y축
    4-6 원
    100
    100
    10
    10
    

    View Slide

43. rect(100,100,100,100);
    rectangle: 직사각형
    4-7 사각형
    

    View Slide

44. rect(100,100,100,100);
    폭, 높이
    사각형
    rectangle X축, Y축
    

    View Slide

45. fill(0);
    fill(255,0,0);
    색 칠하기
    흑백
    컬러
    4-5 색
    

    View Slide

46. function draw() {
    fill(255,0,0);
    ellipse(100,100,100,100);
    }
    원에 색 칠하기
    4-5 색
    

    View Slide

47. function draw() {
    fill(255,0,0);
    noStroke();
    ellipse(100,100,100,100);
    }
    노 스트로크
    4-5 색
    

    View Slide

48. 5. 반복과 조건
    repetition and condition
    

    View Slide

49. 입력
    

    View Slide

50. function setup(){
    createCanvas(600,600);
    }
    function draw(){
    ellipse(mouseX,mouseY,10,10);
    

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

    View Slide

51. 만약에
    거짓
    참
    지시어
    

    View Slide

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

    View Slide

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

    View Slide

54. 6. 과제
    자신이 직접 만든 그림판으로 그림 그리기
    참가자 게시판에 질문/후기 올리기
    

    View Slide