코드란 무엇인가?1. 창문과 들판2. 구두점과 여백3. 좌표4. 점과 선5. 반복과 조건SeMA 비엔날래 미디어시티서울 2016 / 불확실한 학교
View Slide
코드? 지시어Code? Instruction
৬:Mediacityseoul_2016࠺ߣഐ: mcs123456789IUUQVODFSUBJOUZTDIPPMPSHEBZ
1. 창문과 들판window and field
HTML, CSS, JavaScript에이치티엠엘, 씨에스에스, 자바스크립트
파이어폭스* 오픈소스 브라우저 Opensource browser
p5.js: 피파이브 제이에스자바스크립트
실행 버튼 playp5.js 에디터
실행 정지 무효 다시 처음부터p5.js 웹 에디터
1. 함수: 상자 函 + 숫자 數2. 숫자가 들어있는 상자function
function setup()셋업프로그램 설정펑션: 함수
2. 구두점과 여백punctuation and blank space
function setup() 소괄호퍼렌터시스 parenthesis
전달인수, 아규먼트 argument( )
소괄호 입력
중괄호컬리 브레이스 Curly bracefunction setup(){}
두개의 중괄호 사이에 지시문statement이 들어간다{ }
여러개의 지시문을 포함하기도 한다.}지시문 ;{지시문 ;지시문 ;
중괄호 입력
function setup(){createCanvas(250,250);}캔버스를 만든다 세미콜론대문자(x축, y축)
쎄미콜론한줄의 지시문이 끝남을 표시;
function setup(){createCanvas(250,250);background(0);}백그라운드: 배경색 0~255 사이의 수로 바꿔보세요
3. 좌표coordinates
일반적인 좌표
x축0 10y축좌표010
캔버스 canvas x축y축00250250
그림 그리는 로봇몸 동작으로 파트너에게 지시한다.← 왼쪽,↑ 위로, → 오른쪽, ↓ 아래로⇊ 점프 fill두명이 짝을 지어 번갈아 하는 놀이
4. 점과 선dot and line
셋업드로우
햄스터 휠function draw()
function draw(){point(10,10);}포인트:점(X축 좌표, Y축 좌표)4-1 점
function setup(){createCanvas(250,250);}function draw(){point(10,10); point(200,200);}4-2 점 두개
function draw(){line(10,10,170,20); }라인 = 선 (x1, y1, x2, y2)x1, y1x2, y24-3 선
strokeWeight(3);굵기 값획 굵기 대문자4-4 선의 굵기
function setup(){createCanvas(250,250);}function draw(){strokeWeight(2);line(10,10,240,230);}4-5 선의 굵기값을 바꿔보세요
stroke(255,0,0);(Red, Green, Blue)스트로크, 획4-5 선의 색
function draw(){stroke(255,0,0);strokeWeight(2);line(10,10,300,300); }(Red, Green, Blue)4-5 선의 색
ellipse(100,100,100,100);4-6 원
ellipse(100,100,10,10);폭, 높이엘립스,원X축, Y축4-6 원1001001010
rect(100,100,100,100);rectangle: 직사각형4-7 사각형
rect(100,100,100,100);폭, 높이사각형rectangle X축, Y축
fill(0);fill(255,0,0);색 칠하기흑백컬러4-5 색
function draw() {fill(255,0,0);ellipse(100,100,100,100);}원에 색 칠하기4-5 색
function draw() {fill(255,0,0);noStroke();ellipse(100,100,100,100);}노 스트로크4-5 색
5. 반복과 조건repetition and condition
입력
function setup(){createCanvas(600,600);}function draw(){ellipse(mouseX,mouseY,10,10); }5-1 마우스 위치 입력x축 마우스 위치, y축 마우스 위치
만약에거짓참지시어
if(mouseIsPressed){}5-2 조건문햄버거를 먹자;마우스를 클릭하면
function draw(){if(mouseIsPressed){ellipse(mouseX,mouseY,10,10);}}조건 성립시에만 반복5-2 마우스를 클릭하면
6. 과제자신이 직접 만든 그림판으로 그림 그리기참가자 게시판에 질문/후기 올리기