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

Day 1

248c631ecc5f3fa54d94b3746e7cb52f?s=47 Taeyoon Choi
August 17, 2016
530

Day 1

248c631ecc5f3fa54d94b3746e7cb52f?s=128

Taeyoon Choi

August 17, 2016
Tweet

Transcript

  1. 코드란 무엇인가? 1. 창문과 들판 2. 구두점과 여백 3. 좌표

    4. 점과 선 5. 반복과 조건 SeMA 비엔날래 미디어시티서울 2016 / 불확실한 학교
  2. 코드? 지시어 Code? Instruction

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

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

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

  7. None
  8. 파이어폭스 * 오픈소스 브라우저 
 Opensource browser

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

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

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

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

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

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

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

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

  17. 소괄호 입력

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

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

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

    지시문 ;
  21. 중괄호 입력

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

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

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

    바꿔보세요
  25. 3. 좌표 coordinates

  26. 일반적인 좌표

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

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

  29. None
  30. 그림 그리는 로봇 몸 동작으로 파트너에게 지시한다. ← 왼쪽,↑ 위로,

    → 오른쪽, ↓ 아래로 ⇊ 점프 fill 두명이 짝을 지어 번갈아 하는 놀이
  31. 4. 점과 선 dot and line

  32. 셋업 드로우

  33. 햄스터 휠 function draw()

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

  35. function setup(){ createCanvas(250,250); } function draw(){ point(10,10);
 point(200,200); } 4-2

    점 두개
  36. function draw(){ line(10,10,170,20); 
 } 라인 = 선 (x1, y1,

    x2, y2) x1, y1 x2, y2 4-3 선
  37. strokeWeight(3); 굵기 값 획 굵기 대문자 4-4 선의 굵기

  38. function setup(){ createCanvas(250,250); } function draw(){ strokeWeight(2); line(10,10,240,230); } 4-5

    선의 굵기 값을 바꿔보세요
  39. stroke(255,0,0); (Red, Green, Blue) 스트로크, 획 4-5 선의 색

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

    4-5 선의 색
  41. ellipse(100,100,100,100); 4-6 원

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

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

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

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

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

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

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

  49. 입력

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

    마우스 위치 입력 x축 마우스 위치, y축 마우스 위치
  51. 만약에 거짓 참 지시어

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

  53. function draw(){ if(mouseIsPressed){ ellipse(mouseX,mouseY,10,10); } } 조건 성립시에만 반복 5-2

    마우스를 클릭하면
  54. 6. 과제 자신이 직접 만든 그림판으로 그림 그리기 참가자 게시판에

    질문/후기 올리기