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
480
Day2
Taeyoon Choi
August 20, 2016
Tweet
Share
More Decks by Taeyoon Choi
See All by Taeyoon Choi
Prosthetics — Adaptation
tchoi8
0
86
Artist Talk at ITP
tchoi8
0
110
daum
tchoi8
0
650
workshop4
tchoi8
0
570
day3
tchoi8
0
320
Day 1
tchoi8
0
580
Experimental pedagogy
tchoi8
0
250
Unlearning disability
tchoi8
0
2.5k
This talk is not about privilege but about access.
tchoi8
0
72
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Building Adaptive Systems
keathley
43
2.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Cult of Friendly URLs
andyhume
79
6.5k
Embracing the Ebb and Flow
colly
86
4.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Navigating Team Friction
lara
187
15k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
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 + \ ₩
ࠛഛपೠ Ү ࣁա/ द ࣗѐ