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
590
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
87
workshop4
tchoi8
0
560
day3
tchoi8
0
310
Day2
tchoi8
0
450
Day 1
tchoi8
0
570
Experimental pedagogy
tchoi8
0
240
Unlearning disability
tchoi8
0
2.3k
This talk is not about privilege but about access.
tchoi8
0
62
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
BBQ
matthewcrist
85
9.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.8k
Documentation Writing (for coders)
carmenintech
65
4.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.1k
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
마우스를 클릭하면