Day2 - Speaker Deck

Slide 1

Slide 1 text

코드 시 쓰기 SeMA 비엔날래 미디어시티서울 2016 / 불확실한 학교

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

코드? 시 Code? Poem

Slide 4

Slide 4 text

1. 개발 환경 Developing environment

Slide 5

Slide 5 text

ࢲ࠳ۄ੐ ఫझ౟ https://sublimetext.com

Slide 6

Slide 6 text

ࢲ࠳ۄ੐ ߓ҃ ࢝ ߄Բӝ

Slide 7

Slide 7 text

empty-example

Slide 8

Slide 8 text

P5 ۄ੉࠳۞ܻ ׮਍۽٘

Slide 9

Slide 9 text

౵ੌ ҳઑ 스케치 웹 페이지

Slide 10

Slide 10 text

개발자 도구 ౵੉য಩झ۽ झா஖ ࠁӝ

Slide 11

Slide 11 text

ѐߊ ജ҃ ѐߊ ೒۽਋ 1.௏٘ ߸҃ 2.ࢲ࠳ۄ੐ীࢲ ੷੢ (Ctrl + S, Command + S) 3. ౵੉য಩झীࢲ ܻ೐ېद (Ctrl + R, Command + R) ࢲ࠶ۄ੐ ౵੉য಩झ

Slide 12

Slide 12 text

2. 글자와 숫자 letters and numbers

Slide 13

Slide 13 text

Edward Ruscha. OOF. 1962

Slide 14

Slide 14 text

function setup(){ createCanvas(windowWidth,windowHeight); } 브라우저 윈도우의 너비와 높이

Slide 15

Slide 15 text

“Ӗ ղਊ” 큰따옴표 사용

Slide 16

Slide 16 text

function draw() { textAlign(CENTER); textSize(150); textStyle(BOLD); text(“OOF", windowWidth / 2,windowHeight / 2); } 윈도우 너비의 절반 윈도우의 높이의 절반 중심 스타일 “ 글 ”

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

3. 코드 시 Code poems

Slide 19

Slide 19 text

//Ҋ਷ |Ӓ Ԣ} function setup() { createCanvas(windowWidth, windowHeight); } function draw() { background(230,140,140,100); fill(255,255,255,100); textSize(50); text("ղ۰т ٸ ࠁও֎ ৢۄт ٸ ࠁ૑ ޅೠ Ӓ Ԣ", 150, windowHeight/2); } 코멘트 시 내용 Opacity(ైݺب): 1~100

Slide 20

Slide 20 text

/ ੑ۱ ߑߨ

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

String 스트링 = 문자열

Slide 23

Slide 23 text

//Ҋ਷ |Ӓ Ԣ} function setup() { createCanvas(windowWidth, windowHeight); } function draw() { background(230,140,140); fill(255,255,255,100); textSize(50); text("ղ۰т ٸ ࠁও֎ ৢۄт ٸ ࠁ૑ ޅೠ Ӓ Ԣ", windowWidth / 2 - 200, windowHeight / 2, 300,300); } Bounding box

Slide 24

Slide 24 text

//Ҋ਷ |Ӓ Ԣ} function setup() { createCanvas(windowWidth, windowHeight); } function draw() { background(230,140,140); fill(255,255,255,70); textSize(50); text("ղ۰т ٸ ࠁও֎ \nৢۄт ٸ ࠁ૑ ޅೠ \nӒ Ԣ, windowWidth / 2 - 200, windowHeight / 2, 600,300); } \ ੑ۱ ߑߨ: ׮਺ ठۄ੉٘ Opacity(ైݺب): 1~100 600 300

Slide 25

Slide 25 text

\n ੑ۱ ߑߨ: PCח ₩ ః

Slide 26

Slide 26 text

җઁ: ૑Әө૑ ߓ਍ ղਊਸ ഝਊ೧ࢲ Ӗ੗৬ بഋਵ۽ ੉ܖয૓ ௏٘ दܳ ॳࣁਃ

Slide 27

Slide 27 text

4. 변수 variable

Slide 28

Slide 28 text

변수 variable i

Slide 29

Slide 29 text

var = variable의 약자 var i = 0; 변수의 이름 값 지정 i

Slide 30

Slide 30 text

ৡ ஠৬ۄ On Kawara

Slide 31

Slide 31 text

function draw() { textAlign(CENTER); textSize(150); textStyle(BOLD); text("OOF", windowWidth / 2, windowHeight / 2); } 윈도우 너비의 절반 윈도우의 높이의 절반 글자 중앙정렬 글자의 스타일(굵게) “ 글 ”

Slide 32

Slide 32 text

function draw() { background(0); fill(255); textSize(200); var ਘ = month(); var ੌ = day(); var ֙ = year(); text(ਘ + “ ” + ੌ + “,” + ֙, 250, windowHeight/2); } 월 일 년 스페이스

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

var द = hour(); var ࠙ = minute(); var ୡ = second(); text(द + " : " + ࠙ + " : " + ୡ, 250,windowHeight/2+100); 시 분 초 시계 만들기

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

5. 입력 Input

Slide 37

Slide 37 text

var ੑ۱ః = 0; function setup() { createCanvas(windowWidth, windowHeight); } function draw() { fill(230); noStroke(); rect(0, 0, width, height); fill(0); textSize(200); text(ੑ۱ః, width / 2, height / 2); } function keyTyped() { ੑ۱ః = key; } 변수 keyTyped 함수: 입력시 작동 key 값

Slide 38

Slide 38 text

키보드 입력 해보세요

Slide 39

Slide 39 text

Slide 40

Slide 40 text

4. 연산자 operators

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

< ୡҗ Greater than <= ੉࢚ Greater or equal >= ੉ೞ less or equal > ޷݅ less than == э׮ equal to != ׮ܰ׮ not equal to

Slide 43

Slide 43 text

function draw() { background(255); fill(255); ellipse(windowWidth/2, windowHeight/2, 100, 100); if (mouseX > windowWidth/2) { fill(0); ellipse(windowWidth/2, windowHeight/2, 100, 100); } } 만약에 마우스 위치가 캔버스 크기의 절반보 다 크다면…

Slide 44

Slide 44 text

function draw() { background(255); fill(255); ellipse(width/2, height/2, 100, 100); if (mouseX > windowWidth/2 || mouseY > windowHeight/ 2) { fill(0); ellipse(width/2, height/2, 100, 100); } } | 는 Or mouseX가 폭의 절반보다 크거나 , mouseY 가 높이 의 절반보다 크거 나