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
daum
Search
Taeyoon Choi
September 30, 2016
0
640
daum
Taeyoon Choi
September 30, 2016
Tweet
Share
More Decks by Taeyoon Choi
See All by Taeyoon Choi
Prosthetics — Adaptation
tchoi8
0
84
Artist Talk at ITP
tchoi8
0
99
workshop4
tchoi8
0
560
day3
tchoi8
0
310
Day2
tchoi8
0
470
Day 1
tchoi8
0
580
Experimental pedagogy
tchoi8
0
240
Unlearning disability
tchoi8
0
2.5k
This talk is not about privilege but about access.
tchoi8
0
69
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
Designing for Performance
lara
608
69k
Rails Girls Zürich Keynote
gr2m
94
13k
The Language of Interfaces
destraynor
157
24k
Six Lessons from altMBA
skipperchong
27
3.7k
Raft: Consensus for Rubyists
vanstee
137
6.9k
The Invisible Side of Design
smashingmag
299
50k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Speed Design
sergeychernyshev
29
900
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Designing Experiences People Love
moore
141
24k
Transcript
코딩. 0부터 1까지 Coding 0 to 1 최태윤, 정유미, 김태경
코드? 지시어 Code? Instruction
ࠗ
झಕझ ੋ߬؊
1ࠗ Ӓܻ٘
x୷ y୷
0,0, 색칠
0,0, 색칠 x୷ y୷
0,0, 색칠 2,1, 색칠
0,0, 색칠 2,1, 색칠 4,0 색칠
0,0, 색칠 2,1, 색칠 4,0 색칠 1,3, 색칠
0,0, 색칠 2,1, 색칠 4,0 색칠 1,3, 색칠 4,4, 색칠
None
파이어폭스, 오픈소스 브라우저 자바스크립트
function setup() { createCanvas(500,500); } function draw() { rect(100,100,100,100); }
None
sketch.js ਢಕ ࢜۽Ҋஜ ٘ ࢿ index.html
1. 함수: 函數 2. 숫자가 들어있는 상자 function ಔ࣌
function setup() 셋업 프로그램 설정 펑션: 함수
function setup() 소괄호 퍼렌터시스 parenthesis
전달인수, 아규먼트 argument ( )
소괄호 입력
중괄호 컬리 브레이스 Curly brace function setup(){ }
두개의 중괄호 사이에 지시문statement이 들어간다 { }
중괄호 입력
function setup(){ createCanvas(500,500); } 캔버스를 만든다 세미콜론 대문자 x축, y축
쎄미콜론 하나의 지시문이 끝남을 표시 ;
여러개의 지시문을 포함하기도 한다. } 지시문 ; { 지시문 ;
지시문 ;
function setup(){ createCanvas(500,500); } x축 y축 0 0 500 500
None
셋업 드로우
햄스터 휠같이 반복 재생 function draw( )
rect(100,100,100,100); 너비, 높이 사각형 rectangle X축, Y축
None
ࢸޙઑࢎೞӝ
None
None
None
None
None
None
None
एחदр ࢸޙઑࢎೞӝ
ࠗ
ইөߓѪٜҗ ࣻೠࠁ۽ ۠Ѫਸٜ݅যࠅѢਃ
ٜ݅ӝਤ೧ࢲח ۠Ѫٜਸ೧ঠפ Ӗ ৈ۞ѐ بഋ
Ӗ֍ӝ
Ӗ֍ӝ text(“ղਊ”, xઝ, yઝ);
Ӗ֍ӝ text(“উ֞ೞࣁਃ”, 50, 50); ղਊ Yઝ Zઝ
ۧѱӖоաఋժפ ଵҊ ܽ
ઁபߡझਤীӖܳ֍যࠅѱਃ ଵҊ ܽ
ߣ૩Ӗੋtѐҳܻuܳ ਤী֍যࠁѷणפ text(“ѐҳܻ”, 50, 100);
Ӗܳ֍যࠇद ଵҊ ܽ
Ӗܳৈ۞ѐ֍যࠇद text(“ѐҳܻ”, 50, 100); text(“ѐҳܻ”, 50, 200); text(“ѐҳܻ”, 50, 300);
text(“ѐҳܻ”, 50, 400);
ଵҊ ܽ Ӗܳৈ۞ѐ֍যࠇद
ղоઑࢎೠ೦ݾਵ۽߄Լࠇद text(“࣠ಞ”, 50, 100); text(“ੋ”, 50, 200); text(“ಀदܖڂ”, 50, 300);
text(“хڂ”, 50, 400);
ղоઑࢎೠ೦ݾਸ֍যࠇद ଵҊ ܽ
بഋ֍ӝ
ۧѱٜ݅Ѫੑפ
ࢎпഋਸݢٜ݅যࠁѷणפ ଵҊ ܽ
ࢎпഋਸ݅٘חߑߨӝরաࣁਃ rect(xઝ, yઝ, ց࠺, ֫);
ࢎпഋೞաܳ֍যࠇद rect(50, 100, 50, 50);
ࢎпഋೞաٜযщणפ ଵҊ ܽ
ߣীחߣ૩ࢎпഋয়ܲଃী ࢎпഋೞա؊ٜ݅যࠅѤؘਃ ଵҊ ܽ
rect(150, 50, 50, 50); rect(200, 50, 50, 50); ߣ૩ࢎпഋ فߣ૩ࢎпഋ
ߣ૩ࢎпഋয়ܲଃী ࢎпഋٜ݅যणפ ଵҊ ܽ
فߣ૩ࢎпഋয়ܲଃী ࢎпഋਸೠߣ؊୶оפ rect(150, 50, 50, 50); rect(200, 50, 50, 50);
rect(250, 50, 50, 50); ߣ૩ࢎпഋ فߣ૩ࢎпഋ ࣁߣ૩ࢎпഋ
فߣ૩ࢎпഋয়ܲଃী ࢎпഋٜ݅যणפ ଵҊ ܽ
ઁل૩ਸٜ݅যࠅѱਃ ଵҊ ܽ
ل૩ߣ૩֎ݽٟܳ݅פ rect(150,50,50,50); rect(200,50,50,50); rect(150,150,50,50); rect(250,50,50,50);
ل૩ߣ૩ࢎпഋ ٜ݅যणפ ଵҊ ܽ
ࢎпഋց࠺۽ઑೞחߑߨ ଵҊ ܽ
ࢎпഋց࠺чਸ ߉झ౭ழѐࣻ݅ఀғ೧સפ ଵҊ ܽ
ࢎпഋց࠺чਸ ߉झ౭ழѐࣻ݅ఀғ೧સפ rect(150, 150, 50*झ౭ழѐࣻ, 50); ࢎпഋо۽ց࠺
ࢎпഋց࠺ܳઑ೧חߑߨਵ۽ ٘ب߸҃೧ࠇפ ଵҊ ܽ
पण ଵҊ ܽ
࢝ӭ߄Բӝ
ۧѱٜ݅ѩפ
അ࢚࢝ഥ࢝ਵ۽غযחؘਃ fill(‘grey’);
ٮ১উӖܳ߄Լࠇद fill(‘red’);
Ӗ࢝җبഋ࢝߄Շणפ ଵҊ ܽ
࢚ٜܲ࢝ਸਊ೧ࠇद fill(‘red’); fill(‘yellow’); fill(‘blue’); ࡈр࢝ ֢ۆ࢝ ۆ࢝ fill(‘navy’); թ࢝
Ӗ࢝җبഋ࢝߄Շणפ ଵҊ ܽ
Ӗ࢝җبഋ࢝߄Շणפ ଵҊ ܽ
ઁݾਸ୶оפ ଵҊ ܽ
ellipse(100,100,100,100); 원
ellipse(100,100,10,10); 폭, 높이 엘립스, 원 X축, Y축 원 100 100
10 10
입력
function setup(){ createCanvas(500,500); } function draw(){ ellipse(mouseX,mouseY,10,10); } 마우스
위치 입력 x축 마우스 위치, y축 마우스 위치
만약에 거짓 참 지시어
if(mouseIsPressed){ } 5-2 조건문 햄버거를 먹자; 마우스를 클릭하면
function draw(){ if(mouseIsPressed){ ellipse(mouseX,mouseY,10,10); } } 조건 성립시에만 반복 5-2
마우스를 클릭하면