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
670
daum
Taeyoon Choi
September 30, 2016
Tweet
Share
More Decks by Taeyoon Choi
See All by Taeyoon Choi
Prosthetics — Adaptation
tchoi8
0
87
Artist Talk at ITP
tchoi8
0
120
workshop4
tchoi8
0
570
day3
tchoi8
0
320
Day2
tchoi8
0
490
Day 1
tchoi8
0
590
Experimental pedagogy
tchoi8
0
260
Unlearning disability
tchoi8
0
2.5k
This talk is not about privilege but about access.
tchoi8
0
74
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Facilitating Awesome Meetings
lara
56
6.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Mobile First: as difficult as doing things right
swwweet
224
10k
Statistics for Hackers
jakevdp
799
220k
GraphQLとの向き合い方2022年版
quramy
49
14k
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
마우스를 클릭하면