코딩. 0부터 1까지Coding 0 to 1최태윤, 정유미, 김태경
View Slide
코드? 지시어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, 색칠
파이어폭스, 오픈소스 브라우저 자바스크립트
function setup() {createCanvas(500,500);}function draw() {rect(100,100,100,100);}
sketch.jsਢಕ࢜۽Ҋஜ٘ ࢿindex.html
1. 함수: 函數2. 숫자가 들어있는 상자function ಔ࣌
function setup()셋업프로그램 설정펑션: 함수
function setup() 소괄호퍼렌터시스 parenthesis
전달인수, 아규먼트 argument( )
소괄호 입력
중괄호컬리 브레이스 Curly bracefunction setup(){}
두개의 중괄호 사이에 지시문statement이 들어간다{ }
중괄호 입력
function setup(){createCanvas(500,500);}캔버스를 만든다 세미콜론대문자x축, y축
쎄미콜론하나의 지시문이 끝남을 표시;
여러개의 지시문을 포함하기도 한다.}지시문 ;{지시문 ;지시문 ;
function setup(){createCanvas(500,500);} x축y축00500500
셋업드로우
햄스터 휠같이 반복 재생function draw( )
rect(100,100,100,100);너비, 높이사각형rectangle X축, Y축
ࢸޙઑࢎೞӝ
एחदрࢸޙઑࢎೞӝ
ইөߓѪٜҗࣻೠࠁ۽۠Ѫਸٜ݅যࠅѢਃ
ٜ݅ӝਤ೧ࢲח۠Ѫٜਸ೧ঠפӖৈ۞ѐبഋ
Ӗ֍ӝ
Ӗ֍ӝ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축원1001001010
입력
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 마우스를 클릭하면
tchoi8
jrom
sugarenia
lemiorhan
aarron
rasmusluckow
jnunemaker
wjessup
quramy
myddelton
brettharned
eileencodes
addyosmani