Day 1

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. 과제 자신이 직접 만든 그림판으로 그림 그리기 참가자 게시판에

    질문/후기 올리기