🎇 Stars around a black hole

📝 p5.js 기본형

const STAR_COUNT = 2500;

let stars = [];

class Star {
  constructor(initialAngle) {
    // 각 별마다 다른 기본 궤도 반경
    this.baseR = random(130, 800);
    this.r = this.baseR;

    // 각 별마다 다른 초기 각속도
    this.baseOmega = random(0.002, 0.006);
    this.omega = this.baseOmega;

    // 회전 상태
    this.angle = initialAngle;

    // 시각적 크기 (질량과 분리)
    this.size = random(2, 5);

    // 각운동량 상수 (m 제거된 형태)
    this.angularMomentum = this.r * this.r * this.omega;

    // 최소 접근 반지름 (사건의 지평선 느낌)
    this.minR = 10;
  }

  update() {
    // 마우스 입력에 따른 반지름 변화
    if (mouseIsPressed) {
      this.r -= random(1.5, 2.5);
      this.r = max(this.r, this.minR);
    } else {
      this.r += random(1.5, 5.5);
      this.r = min(this.r, this.baseR);
    }

    // 각운동량 보존
    this.omega = this.angularMomentum / (this.r * this.r);

    // 각도 업데이트
    this.angle += this.omega;
  }

  draw() {
    let x = cos(this.angle) * this.r;
    let y = sin(this.angle) * this.r;

    noStroke();
    fill(0);
    ellipse(x, y, this.size, this.size);
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);

  // 실행마다 다른 결과를 원할 경우 seed 고정하지 않음
  for (let i = 0; i < STAR_COUNT; i++) {
    let angle = random(TWO_PI);
    stars.push(new Star(angle));
  }
}

function draw() {
  background(230);
  translate(width / 2, height / 2);

  // 중심 블랙홀
  noStroke();
  fill(0);
  ellipse(0, 0, 24, 24);

  // 별 업데이트 및 렌더링
  for (let star of stars) {
    star.update();
    star.draw();
  }
}

📝 p5.js 리팩토링 + ease in/out

const STAR_COUNT = 2500;

let stars = [];
let spacePressed = false;

class Star {
  constructor(initialAngle) {
    this.baseR = Math.random() * 670 + 130;
    this.r = this.baseR;

    this.baseOmega = Math.random() * 0.004 + 0.002;
    this.omega = this.baseOmega;

    // 회전을 위한 벡터
    this.cosAngle = Math.cos(initialAngle);
    this.sinAngle = Math.sin(initialAngle);

    this.size = Math.random() * 3 + 2;

    this.angularMomentum = this.r * this.r * this.omega;

    this.minR = 10;

    // 애니메이션 진행도 (0.0 ~ 1.0)
    this.progress = 0.0;

    // 애니메이션 속도 
    this.animSpeed = Math.random() * 0.003 + 0.002;
  }

  // ease-in-out 함수 (smoothstep)
  easeInOut(t) {
    return t * t * (3.0 - 2.0 * t);
  }

  update() {
    // progress 업데이트
    if (spacePressed) {
      this.progress += this.animSpeed;
      if (this.progress > 1.0) this.progress = 1.0;
    } else {
      this.progress -= this.animSpeed;
      if (this.progress < 0.0) this.progress = 0.0;
    }

    // ease-in-out 적용
    const easedProgress = this.easeInOut(this.progress);

    // 반지름 보간
    this.r = this.baseR - (this.baseR - this.minR) * easedProgress;

    // 각운동량 보존
    const rSquared = this.r * this.r;
    this.omega = this.angularMomentum / rSquared;

    // 증분 회전
    const cosOmega = Math.cos(this.omega);
    const sinOmega = Math.sin(this.omega);

    const newCos = this.cosAngle * cosOmega - this.sinAngle * sinOmega;
    const newSin = this.sinAngle * cosOmega + this.cosAngle * sinOmega;

    this.cosAngle = newCos;
    this.sinAngle = newSin;
  }

  draw() {
    const x = this.cosAngle * this.r;
    const y = this.sinAngle * this.r;

    noStroke();
    fill(0);
    ellipse(x, y, this.size, this.size);
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);

  const twoPI = 6.28;

  for (let i = 0; i < STAR_COUNT; i++) {
    const angle = Math.random() * twoPI;
    stars.push(new Star(angle));
  }
}

function draw() {
  background(230);
  translate(width / 2, height / 2);

  noStroke();
  fill(0);
  ellipse(0, 0, 24, 24);

  for (let i = 0; i < STAR_COUNT; i++) {
    stars[i].update();
    stars[i].draw();
  }
}

function keyPressed() {
  if (key === " ") {
    spacePressed = true;
  }
}

function keyReleased() {
  if (key === " ") {
    spacePressed = false;
  }
}

최적화 항목

1. 삼각함수 계산 간소화

   • cos()/sin() 대신 증분 회전 방식 사용
   • 매 프레임 삼각함수 호출 2500번 → 0번으로 감소

2. 수학 상수 미리 계산

   • TWO_PI 상수를 초기화 시 한 번만 사용
   • 반복 계산되는 값들을 변수로 저장

3. 메모리 접근 최적화

   • 객체 속성 접근 횟수 최소화
   • 지역 변수 활용으로 참조 비용 감소

4. 불필요한 함수 호출 제거

   • random() 호출을 고정 값으로 대체 가능한 부분 개선
   • max()/min() 대신 조건문 사용

성능 개선 효과

• 삼각함수 계산: 프레임당 5000번 → 2500번 (50% 감소)
• 함수 호출: random() 호출을 생성자에서만 사용
• 메모리 접근: 배열 인덱스 직접 접근으로 iterator 오버헤드 제거