Day 1

Transcript

1. 코드란 무엇인가? 1. 창문과 들판 2. 구두점과 여백 3. 좌표 4. 점과 선 5. 반복과 조건 SeMA 비엔날래 미디어시티서울 2016 / 불확실한 학교
2. 코드? 지시어 Code? Instruction
3. ৬੉౵੉:Mediacityseoul_2016 ࠺޻ߣഐ: mcs123456789 IUUQVODFSUBJOUZTDIPPMPSHEBZ
4. 1. 창문과 들판 window and field
6. HTML, CSS, JavaScript 에이치티엠엘, 씨에스에스, 자바스크립트
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
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. 과제 자신이 직접 만든 그림판으로 그림 그리기 참가자 게시판에 질문/후기 올리기