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
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
We Have a Design System, Now What?
morganepeng
53
7.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
The Invisible Side of Design
smashingmag
302
51k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
33
2.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Making Projects Easy
brettharned
120
6.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Agile that works and the tools we love
rasmusluckow
331
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
Why Our Code Smells
bkeepers
PRO
340
57k
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
마우스를 클릭하면