[JavaScript] 11. 리턴 값이 있는 함수

교재 : 비전공자를 위한 프로그래밍 입문 - 10. 인수가 있는 함수

 

리턴 값이 있는 함수

• random함수
• floor함수 : 소수점을 버려서 정수로 변환해주는 함수
• map함수

 - 제1인수 “입력값”을 제2-3인수로 지정한 범위로부터 제4-5인수로 지정한 새 범위에 맞도록 변환합니다.

변환된 값(출력값)은 리턴값으로 함수와 바뀝니다.

- 마우스 입력의 값을 특정 범위에 변환할때 자주 사용

map(입력, 최소, 최대, 신규최소, 신규최대)

 

예시)

function setup() {
  createCanvas(500, 100);
  noStroke();
}

function draw() {
  background(102, 103, 171);
  fill(200);
  rect(200, 0, 100, height); // 입력범위를 진한 회색으로 표시

  let x = map(mouseX, 200, 300, 0, width); // 범위:200-300 → 새 범위:0-width
  console.log(x);
  fill(255, 127, 0);
  circle(x, height / 2, 50);
}

 

입력값(마우스포인터 위치)이 캔버스의 200-300범위를 나오면 원이 캔버스 밖으로 사라져 버리지만,

map함수의 제6인수에 true를 추가하면 밖으로 사라지지 않게 됩니다.

let x = map(mouseX, 200, 300, 0, width, true);

 

 

· 마우스 y값 따라 원 크기,색 변하는 도형 만들기

function setup() {
  createCanvas(720, 400);
  noStroke();
}

function draw() {
  background(0);
  
  
  let c = map(mouseY, 0, width, 0, 175); 
  let d = map(mouseY, 0, width, 40, 300); 
    fill(255, c, 0);
    ellipse(width/2, height/2, d, d);

}