JavaScript에서 길이가 x인 선분을 따라 n개의 등간격(등거리) 점 배열을 생성하려면 간단한 반복문과 비율 계산을 활용하면 됩니다. 아래에서 핵심 원리와 실제 예제 코드를 단계별로 살펴보겠습니다.
핵심 원리
선분 위에 n개의 점을 균등하게 배치하려면 각 점의 위치를 비율로 계산해야 합니다. 기본 문법은 다음과 같습니다.
for (var 변수명 = 0; 변수명 < 시작값; 변수명++) {
var v = (변수명 + 1) / (시작값 + 1);
var v2 = v * 끝값;
}
여기서 핵심은 (index + 1) / (start + 1) 부분입니다. 이 식은 전체 구간을 n+1로 등분했을 때 내부 지점들의 위치를 나타내므로, 양 끝점(0과 끝값)은 제외하고 그 사이에 점들이 균등하게 배치됩니다.
예제 코드
function drawPoints(start, end) {
const arrayOfPoints = []
for (var index = 0; index < start; index++) {
var v = (index+1)/ (start+1);
var v2 = v*end;
arrayOfPoints.push(Math.round(v2));
}
return arrayOfPoints;
}
const arrayOfPoints = drawPoints(5, 50);
console.log("The Points=");
console.log(arrayOfPoints);
코드 설명
- drawPoints(start, end): start는 생성할 점의 개수(n), end는 선분의 길이(x)를 의미합니다.
- v = (index + 1) / (start + 1): 0과 1 사이의 균등한 비율 값을 계산합니다.
- v2 = v * end: 비율 값에 선분 길이를 곱해 실제 좌표를 구합니다.
- Math.round(v2): 소수점 좌표를 반올림하여 정수로 변환합니다.
실행 방법
위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 사용합니다.
node fileName.js
예를 들어 파일 이름이 demo53.js라면 아래와 같이 실행하면 됩니다.
node demo53.js
실행 결과
위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.
PS C:\Users\Amit\JavaScript-code> node demo54.js The Points= [ 8, 17, 25, 33, 42 ]
출력 결과를 보면 0부터 50까지의 선분 위에 5개의 점(8, 17, 25, 33, 42)이 약 8~9 단위의 동일한 간격으로 배치된 것을 알 수 있습니다. 이러한 방식은 차트 눈금 생성, 애니메이션 경로 계산, 데이터 시각화 등 다양한 개발 상황에서 유용하게 활용될 수 있습니다.