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

Day 1

Taeyoon Choi
August 17, 2016
560

Day 1

Taeyoon Choi

August 17, 2016
Tweet

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