Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Day2
Search
Taeyoon Choi
August 20, 2016
0
460
Day2
Taeyoon Choi
August 20, 2016
Tweet
Share
More Decks by Taeyoon Choi
See All by Taeyoon Choi
Prosthetics — Adaptation
tchoi8
0
81
Artist Talk at ITP
tchoi8
0
92
daum
tchoi8
0
620
workshop4
tchoi8
0
560
day3
tchoi8
0
310
Day 1
tchoi8
0
570
Experimental pedagogy
tchoi8
0
240
Unlearning disability
tchoi8
0
2.4k
This talk is not about privilege but about access.
tchoi8
0
65
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1367
200k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Mobile First: as difficult as doing things right
swwweet
222
9.1k
Building Adaptive Systems
keathley
39
2.4k
Faster Mobile Websites
deanohume
305
30k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
What's in a price? How to price your products and services
michaelherold
244
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Transcript
코드 시 쓰기 SeMA 비엔날래 미디어시티서울 2016 / 불확실한 학교
৬:Mediacityseoul_2016 ࠺ߣഐ: mcs123456789 IUUQVODFSUBJOUZTDIPPMPSHEBZ
코드? 시 Code? Poem
1. 개발 환경 Developing environment
ࢲ࠳ۄ ఫझ https://sublimetext.com
ࢲ࠳ۄ ߓ҃ ࢝ ߄Բӝ
empty-example
P5 ۄ࠳۞ܻ ۽٘
ੌ ҳઑ 스케치 웹 페이지
개발자 도구 যझ۽ झா ࠁӝ
ѐߊ ജ҃ ѐߊ ۽ 1.٘ ߸҃ 2.ࢲ࠳ۄীࢲ (Ctrl +
S, Command + S) 3. যझীࢲ ܻېद (Ctrl + R, Command + R) ࢲ࠶ۄ যझ
2. 글자와 숫자 letters and numbers
Edward Ruscha. OOF. 1962
function setup(){ createCanvas(windowWidth,windowHeight); } 브라우저 윈도우의 너비와 높이
“Ӗ ղਊ” 큰따옴표 사용
function draw() { textAlign(CENTER); textSize(150); textStyle(BOLD); text(“OOF", windowWidth / 2,windowHeight
/ 2); } 윈도우 너비의 절반 윈도우의 높이의 절반 중심 스타일 “ 글 ”
None
3. 코드 시 Code poems
//Ҋ |Ӓ Ԣ} 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
/ ੑ۱ ߑߨ
None
String 스트링 = 문자열
//Ҋ |Ӓ Ԣ} 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
//Ҋ |Ӓ Ԣ} 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
\n ੑ۱ ߑߨ: PCח ₩ ః
җઁ: Әө ߓ ղਊਸ ഝਊ೧ࢲ Ӗ৬ بഋਵ۽ ܖয ٘ दܳ
ॳࣁਃ
4. 변수 variable
변수 variable i
var = variable의 약자 var i = 0; 변수의 이름
값 지정 i
ৡ ৬ۄ On Kawara
function draw() { textAlign(CENTER); textSize(150); textStyle(BOLD); text("OOF", windowWidth / 2,
windowHeight / 2); } 윈도우 너비의 절반 윈도우의 높이의 절반 글자 중앙정렬 글자의 스타일(굵게) “ 글 ”
function draw() { background(0); fill(255); textSize(200); var ਘ = month();
var ੌ = day(); var ֙ = year(); text(ਘ + “ ” + ੌ + “,” + ֙, 250, windowHeight/2); } 월 일 년 스페이스
None
var द = hour(); var ࠙ = minute(); var ୡ
= second(); text(द + " : " + ࠙ + " : " + ୡ, 250,windowHeight/2+100); 시 분 초 시계 만들기
None
5. 입력 Input
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 값
키보드 입력 해보세요
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; } 변수 key 값 이것은 사각형 그리기. 이것은 왜 필요 할까요? 알아보기 위해 서 코드를 코멘 트 아웃 할까요? windowWidth
4. 연산자 operators
None
< ୡҗ Greater than <= ࢚ Greater or equal >=
ೞ less or equal > ݅ less than == э equal to != ܰ not equal to
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); } } 만약에 마우스 위치가 캔버스 크기의 절반보 다 크다면…
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 가 높이 의 절반보다 크거 나
| ੑ۱ ߑߨ: Shift + \ ₩
ࠛഛपೠ Ү ࣁա/ द ࣗѐ