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
570
daum
Taeyoon Choi
September 30, 2016
Tweet
Share
More Decks by Taeyoon Choi
See All by Taeyoon Choi
Prosthetics — Adaptation
tchoi8
0
81
Artist Talk at ITP
tchoi8
0
86
workshop4
tchoi8
0
550
day3
tchoi8
0
310
Day2
tchoi8
0
430
Day 1
tchoi8
0
570
Experimental pedagogy
tchoi8
0
230
Unlearning disability
tchoi8
0
2.2k
This talk is not about privilege but about access.
tchoi8
0
62
Featured
See All Featured
How to Ace a Technical Interview
jacobian
274
23k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
What the flash - Photography Introduction
edds
65
11k
Producing Creativity
orderedlist
PRO
340
39k
The Language of Interfaces
destraynor
151
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
A better future with KSS
kneath
231
17k
Infographics Made Easy
chrislema
238
18k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Happy Clients
brianwarren
94
6.6k
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
마우스를 클릭하면