function setup(){
// 가로 500, 세로 500 픽셀의 캔버스요소를 만들어라
createCanvas(500, 500);
// 뒤에 오는 도형에 RGB(255, 10, 30)의 색을 칠해라
fill(255, 10, 30);
// x,y좌표 10,20에 가로세로 100, 50 크기의 사각형을 그려라
rect(10, 20, 100, 50);
// 뒤에 오는 도형의 선에 #0057ef의 색을 칠해라
stroke("#0057ef");
// x,y좌표 260,300에 가로세로 150, 170 크기의 타원을 그려라
ellipse(260, 300, 150, 170);
};
변수
변수(Variable)
숫자나 문자, 참거짓에 대한 값을 담아서 임시적으로 저장해 재사용할 수 있도록 하는 역할을 한다.
JavaScript
// 변수 선언
var 변수명;
// 변수 정의
var 변수명 = 값;
var 변수명;
변수명 = 값;
JavaScript
// 변수 선언 예시
var number;
// 변수 정의 예시
var number = 12;
var text;
text = "문장입니다.";
연산자
연산자란 값에 대해서 어떤 작업을 컴퓨터에게 지시하기 위한 기호이다.
대입 연산자
'=' 오른쪽 값을 왼쪽의 변수에 대입하는 연산자이다.
JavaScript
// 변수 a에 1을 대입한다
a = 1;
비교
Boolean
true, false (참, 거짓) 두가지 데이터를 표현하는 데이터형식이다.
비교 연산자
주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 연산자이다. 비교 연산자의 결과는 true나 false 중의 하나다. true는 비교 결과가 참이라는 의미이고, false는 거짓이라는 뜻이다.
==
좌항과 우항이 같은지를 비교한다.
JavaScript
alert(1 == 2); // 결과 : false
alert(1 == 1); // 결과 : true
!=
좌항과 우항이 같지 않은지를 비교한다.
JavaScript
alert(1 != 2); // 결과 : true
alert(1 != 1); // 결과 : false
>
좌항이 우항보다 큰지를 비교한다.
<
좌항이 우항보다 작은지를 비교한다.
JavaScript
alert(1 > 2); // 결과 : false
alert(1 < 2); // 결과 : true
>=
좌항이 우항보다 크거나 같은지를 비교한다.
<=
좌항이 우항보다 작거나 같은지를 비교한다.
JavaScript
alert(2 >= 1) // 결과 : true
alert(1 >= 1); // 결과 : true
alert(0 >= 1); // 결과 : false
alert(1 <= 2); // 결과 : true
조건문
조건문
조건에 따라 원하는 동작이 일어나도록 제어하는 문법이다.
if
뒤에오는 소괄호 안에 조건을 판별하여 동작을 실행한다.
JavaScript
// 조건문의 문법
if( 조건 ){ 동작 }
// 동작이 실행되는 경우
if(true){
alert("경고창!");
}
var a = 2;
if(a > 1){
alert("경고창!");
}
// 동작이 실행되지 않는 경우
if(false){
alert("경고창!");
}
var b = 2;
if(b < 1){
alert("경고창!");
}
else
if의 조건에 해당되지 않을 때(조건이 false일 때) else 의 중괄호 안에 있는 동작을 실행한다.
JavaScript
if(false){
}
else{
alert("경고창!");
}
var a = 2;
if(a < 1){
}
else{
alert("경고창!");
}
else if
if의 조건에 해당되지 않으면서 다른 조건을 판별할 때 사용한다.
JavaScript
var a = 7;
if(a > 10){
alert("a 는 10보다 크다");
}
else if(a > 5){
alert("a 는 5보다 크다"); // 이 동작이 실행된다
}
else{
alert("a 는 5보다 작거나 같다");
}
Mouse Pressed 이벤트
mouseIsPressed
현재 마우스버튼이 눌린 상태인지를 담고 있는 변수이다. Boolean 데이터형
JavaScript
function setup(){
createCanvas(500, 500);
}
function draw(){
// 마우스 버튼이 눌리면 배경색이 빨간색, 눌리지 않았으면 검은색
if(mouseIsPressed){
background(255,0,0);
}
else{
background(0);
}
}