바운싱 스크린 세이버가 충돌을 계산하는 방법

설득력 있게 튀는 화면 보호기는 작은 물리학 문제입니다. 객체는 일정한 속도로 이동하고, 눈에 보이는 경계에 깔끔하게 닿고, 충돌 후 과도한 움직임을 유지하고, 크기 조정에 적응하고, 수평 및 수직 벽이 함께 도달할 때만 모서리를 계산해야 합니다. 새로 고침 빈도나 브라우저 작업 부하가 변경되자마자 움직임을 “프레임당 픽셀 수”로 묶는 것은 실패합니다.

최소 상태

직사각형 물체의 경우 위치를 저장합니다. (x, y), 속도 (vx, vy), 개체 너비 및 높이, 뷰포트 너비 및 높이. 왼쪽 위 모서리가 위치를 나타내는 경우 유효한 경계는 다음과 같습니다.

0 ≤ x ≤ viewportWidth  - objectWidth
0 ≤ y ≤ viewportHeight - objectHeight

배지는 단일 중심점이 아닌 눈에 보이는 상자와 충돌해야 합니다. 따라서 배지 크기를 변경하면 최대 x 및 y 값이 변경됩니다.

가정된 프레임 속도가 아닌 경과 시간을 사용하십시오.

브라우저는 고해상도 타임스탬프를 제공합니다. requestAnimationFrame 콜백. 이전 타임스탬프를 빼서 경과된 밀리초를 구하고 이를 초로 변환합니다.

dt = min((now - previous) / 1000, maximumStep)
x  = x + vx * dt
y  = y + vy * dt

속도는 초당 픽셀로 표현됩니다. 60Hz 디스플레이와 144Hz 디스플레이는 동일한 실시간으로 거의 동일한 거리를 커버합니다. 클램핑 dt 디버깅 또는 정지된 전경 프레임 후에 실행이 재개되는 경우 큰 점프를 방지합니다. 또한 페이지는 브라우저 제한에만 의존하지 않고 숨겨지면 자체 루프를 취소합니다.

벽에 오버슛 반사

간단한 구현 세트 x 경계까지 가서 부정한다 vx. 그러면 벽 너머로 이동한 거리가 삭제되고 움직임이 약간 고르지 않게 됩니다. 오버슈트를 반영하면 이를 보존합니다.

if (x < 0) {
  x = -x
  vx = abs(vx)
}
if (x > maxX) {
  x = maxX - (x - maxX)
  vx = -abs(vx)
}

등가 논리를 수직으로 적용합니다. 합리적인 최대 시간 간격을 사용하면 일반적으로 축당 하나의 반사로 충분합니다. 보다 일반적인 엔진은 매우 큰 오버슈트가 경계 외부에 남아 있는 동안 루프를 반복할 수 있습니다.

코너 히트로 간주되는 것은 무엇입니까?

한 시뮬레이션 단계에서 수평 충돌과 수직 충돌에 대해 별도의 부울을 기록합니다. 동일한 단계에서 둘 다 참이 될 때만 코너 카운터를 증가시킵니다. 다음과 같은 부동 소수점 동등성을 테스트하지 마십시오. x === 0 && y === 0; 반사 단계에서는 교차가 발생한 것을 이미 알고 있습니다.

코너 히트 확률은 시작 위치, 속도 비율 및 크기에 따라 달라집니다. 완벽하게 반복되는 개별 경로는 모퉁이를 무한정 놓칠 수 있습니다. 개체 크기를 조정하거나 변경하면 경로가 변경되므로 카운터는 의미를 재설정하거나 명확하게 유지해야 합니다.

구현이 세련되게 느껴지도록 하는 세부 사항

• 크기 조정 시 관련 없는 임의 지점으로 순간 이동하지 않고 위치를 새 경계로 고정합니다.
• x/y 위치에서 연속적으로 변경되지 않고 실제 벽 이벤트에서만 충돌 색상을 변경합니다.
• 사용자 정의 이미지 종횡비를 유지하고 문서화된 유형 및 크기 제한을 초과하는 파일을 거부합니다.
• 일시 중지 및 재설정 컨트롤을 예측 가능하게 유지하고 Escape를 전체 화면에서 나가도록 하세요.
• 감소된 모션을 존중하고 숨겨진 탭에서 렌더링을 중지합니다.
• 캡 장치 픽셀 비율 Canvas 고밀도 전화기가 과도한 표면을 할당하지 않도록 작동합니다.

다음의 동작을 시도해 보세요. 튀는 DVD 스크린세이버. 사용자 정의 로컬 이미지가 장치를 떠나지 않는 동안 기본 표시는 선명하게 유지됩니다.

기술 참고자료

• MDN: requestAnimationFrame
• MDN: 전체화면 API
• MDN: 화면 Wake Lock API

속도 벡터 선택

속도 슬라이더는 일반적으로 크기를 나타내고 방향은 정규화된 벡터에서 나옵니다. 각도의 경우 θ 그리고 속도 s:

vx = cos(θ) * s
vy = sin(θ) * s

정확히 수평 또는 수직인 방향은 전체 표면을 탐색하지 않으므로 초기 각도는 90도의 배수에 너무 가까운 값을 피해야 합니다. x 및 y 속도를 독립적으로 무작위화하면 하나의 구성 요소가 작은 경우 거의 평평한 경로를 생성할 수도 있습니다. 허용된 범위에서 각도를 생성한 다음 두 구성요소를 모두 파생시킵니다.

수평 속도와 수직 속도의 비율은 경로 반복 여부에 영향을 미칩니다. 이상적인 연속 기하학에서는 x 경계와 y 경계까지의 이동 시간이 일치할 때 코너가 발생합니다. 유한 차원과 부동 소수점 단계는 정확한 위치 동일성을 신뢰할 수 없게 만듭니다. 이는 좌표 동일성이 아닌 충돌 이벤트가 카운터를 구동하는 이유입니다.

큰 시간 단계와 다중 반사 처리

클램핑 경과 시간은 일반 애니메이션을 보호하지만 재사용 가능한 엔진은 큰 단계 동안 두 개 이상의 벽을 가로지르는 객체도 처리할 수 있습니다. 이동 후 범위를 벗어난 좌표가 범위 내에 들어갈 때까지 반복적으로 반영합니다. 잘못된 상태로 인해 불가능한 범위가 생성되는 경우 루프에는 엄격한 반복 제한이 필요합니다.

function reflect(position, velocity, maximum) {
  let hits = 0
  while ((position < 0 || position > maximum) && hits < 8) {
    if (position < 0) {
      position = -position
      velocity = Math.abs(velocity)
    } else {
      position = maximum - (position - maximum)
      velocity = -Math.abs(velocity)
    }
    hits++
  }
  return { position: clamp(position, 0, maximum), velocity, hits }
}

프로덕션 화면은 보수적인 최대 시간 단계를 사용하고 숨겨지면 일시 중지되므로 다중 벽 점프는 예외적입니다. 방어적인 처리는 여전히 재설정, 디버거 일시 중지 및 비정상적인 브라우저 예약을 더 안전하게 만듭니다.

충돌 이벤트는 방향보다 더 많은 영향을 미칩니다

엔진이 수평 및 수직 적중을 보고하면 렌더러는 배지 색상을 변경하고, 총 충돌 수를 늘리고, 선택적으로 사용자가 활성화할 수 있는 사운드를 재생하거나 코너 수를 업데이트할 수 있습니다. 이러한 부작용은 이벤트당 한 번씩 발생해야 합니다. 위치에서 연속적으로 색상을 추출하면 무지개 움직임 효과가 생성되고 더 이상 충돌을 전달하지 않습니다.

사운드는 기본적으로 꺼진 상태로 유지되며 브라우저 자동 재생 제한 및 사용자 편의가 중요하므로 상호 작용이 필요합니다. 매우 빠른 속도에서의 급격한 충돌은 속도가 제한되어 소리와 상태 알림이 너무 크지 않도록 해야 합니다.

트레일에는 의도적인 청소 모델이 필요합니다.

선명한 프레임이 전체를 지웁니다. Canvas 그리고 뱃지 하나를 그립니다. 대신 트레일은 다음 배지를 그리기 전에 반투명 배경으로 이전 프레임을 덮습니다. 알파가 낮을수록 표시가 더 오래 보존됩니다. 인식된 트레일 길이도 속도와 프레임 속도에 따라 달라지므로 시각적으로 안정적으로 유지되는 방식으로 정의하고 효과가 산만한 경우 모션이 감소된 경우 비활성화합니다.

DOM 기반 애니메이션에서 트레일은 페이딩 요소의 제한된 풀일 수 있습니다. 새 노드를 영원히 추가하지 마세요. 이는 메모리 누수를 초래하고 결국 상호 작용 성능에 해를 끼칩니다.

사용자 정의 텍스트 및 이미지가 충돌 경계를 변경합니다.

텍스트 너비는 글꼴, 내용, 무게 및 장치 렌더링에 따라 다릅니다. 글꼴을 사용할 수 있게 된 후 측정하고 의도적인 패딩을 추가하고 최대 x/y를 다시 계산합니다. 뷰포트보다 넓어지지 않도록 텍스트 길이를 제한하세요. 배지가 치수보다 큰 경우 음수 경계를 허용하는 대신 크기를 줄이거나 중앙에 배치하세요.

로컬 이미지는 고유한 크기를 신뢰하기 전에 디코딩되어야 합니다. ScreenOrbit 만 받아들인다 PNG, JPEG, 그리고 WebP 5MB 및 측면당 4096픽셀 이내에서 디코딩된 크기를 확인하고 종횡비를 유지하며 임시 개체 URL을 해제합니다. 거부한다 SVG 그리고 HTML 활동적이거나 예기치 않게 복잡한 로컬 콘텐츠를 삭제하려고 시도하는 대신.

개체 손실 없이 크기 조정

뷰포트가 변경되면 새 경계를 계산하고 가능한 경우 상대 위치를 유지합니다.

ratioX = oldMaxX > 0 ? x / oldMaxX : 0.5
ratioY = oldMaxY > 0 ? y / oldMaxY : 0.5
x = clamp(ratioX * newMaxX, 0, newMaxX)
y = clamp(ratioY * newMaxY, 0, newMaxY)

이는 모바일 주소 표시줄이 변경되거나 방향 이벤트가 발생할 때마다 무작위 위치를 선택하는 것보다 더 부드럽습니다. 크기 조정은 충돌이 아니며 카운터를 증가시키거나 색상을 변경해서는 안 됩니다.

Canvas 픽셀과 CSS 기하학

CSS 치수는 이동 범위를 정의합니다. 는 Canvas 고밀도 디스플레이의 경우 백업 버퍼가 더 커질 수 있습니다. 제한된 장치 픽셀 비율을 곱하고 좌표가 유지되도록 그리기 컨텍스트의 크기를 조정합니다. CSS 단위. 스케일이 없으면 물리와 렌더링은 서로 다른 단위를 사용합니다. 캡이 없으면 4× 전화기는 픽셀 영역의 16배를 할당할 수 있습니다.

다음과 같이 표현될 수 있는 이미지 또는 텍스트 개체의 경우 HTML, 변환 기반 DOM 애니메이션도 가능합니다. Canvas 예측 가능한 장면 구성과 계속 내보내기를 제공하는 반면 DOM은 더 간단한 의미를 제공할 수 있습니다. 선택해도 경과 시간 이동 및 수명 주기 정리의 필요성이 바뀌지는 않습니다.

일시중지, 가시성 및 전체 화면 수명주기

하나의 애니메이션 루프 식별자를 유지합니다. 이미 실행 중인 동안 시작하면 두 번째 루프를 예약하면 안 됩니다. Pause는 보류 중인 콜백을 취소하고 상태를 기록합니다. 이력서는 새로운 이전 타임스탬프를 설정하므로 숨겨진 기간은 이동으로 처리되지 않습니다. 가시성 핸들러는 동일한 규칙을 따릅니다.

전체 화면은 애니메이션 요구 사항이 아닌 프레젠테이션 상태입니다. 거부되거나 지원되지 않는 전체 화면 요청은 포함된 미리보기가 계속 작동하도록 해야 합니다. 종료 시 뷰포트가 확정된 후 경계를 다시 계산합니다. Wake Lock 페이지가 숨겨지면 별도로 요청되고 해제됩니다. 실패가 애니메이션을 차단하지 않습니다.

단 한번의 매력적인 주행이 아닌 엔진을 테스트해보세요

• 왼쪽, 오른쪽, 위쪽, 아래쪽 벽에 직접 타격
• 동시 x/y 충돌 및 한 모서리 증분
• 인접한 단계에서 발생하며 계산되지 않는 코너 근처 충격
• 거리와 부호를 유지하는 반사 오버슈트
• 동일한 시간 동안 동일한 이동을 생성하는 60, 120 및 144Hz 타임스탬프 시퀀스
• 긴 일시 중지 간격 후 텔레포트 없이 재개됨
• 현재 위치보다 작게, 선택한 개체보다 작게 크기 조정
• 유형, 바이트 크기, 디코딩된 크기 및 실패한 디코딩에 따른 로컬 이미지 거부
• 하나의 활성 콜백이 있고 유지된 객체 URL이 없는 반복적인 재설정/시작 주기
• 움직임 감소, 키보드 일시 중지, 전체 화면 거부 및 숨겨진 탭 동작

자동화된 테스트는 산술 및 상태 전환을 다룹니다. Playwright는 브라우저 수명주기와 반응형 기하학을 다룹니다. 30분 동안 수동 안정성 실행을 통해 다음 사항을 확인합니다. Canvas 크기, 메모리 및 루프 수는 안정적으로 유지됩니다.

모션 감소 이상의 접근성

일시 중지, 재설정 및 전체 화면에는 일반 페이지 보기에서 키보드 포커스와 텍스트 레이블이 표시되어야 합니다. 스크린 리더에 도달할 때마다 충돌 횟수가 발표되어서는 안 됩니다. 그러면 사용할 수 없는 잡담이 생길 것입니다. 상태 공지는 의미 있는 제어 변경을 위해 예약되어 있습니다. 터치 대상은 최소 44 x 44로 유지됩니다. CSS 픽셀 및 내장된 미리보기는 주변 컨트롤의 키보드 작동을 도용하지 않습니다.

모퉁이를 도는 데 시간이 오래 걸릴 수 있는 이유

완벽하게 결정적인 직사각형에서는 위치와 속도가 반복 궤도를 생성할 수 있습니다. 높이 및 속도 구성 요소에 대한 유효 이동 폭의 비율에 따라 해당 궤도는 많은 바운스 후에만 빠르게 코너에 도달할 수도 있고 실제 시간 내에 전혀 코너에 도달하지 못할 수도 있습니다. 픽셀 반올림, 크기 조정, 배지 크기 변경 및 속도 조정으로 경로가 변경됩니다.

희소성은 매력의 일부입니다. 카운터는 코너를 만들기 위해 설계된 타이머가 아닌 정직한 이벤트 기록입니다. 재설정은 시작 상태를 알려줍니다. 그것은 히트를 약속하지 않습니다.

하나의 명확한 작업에 이 페이지를 사용하십시오.

튀는 장면 뒤에 있는 프레임 타이밍, 벽 충돌, 크기 조정 및 코너 히트 규칙을 설명합니다. 웹 개발자, 학생, 스트리머 및 호기심 많은 사용자는 이 가이드를 사용하여 눈에 보이는 애니메이션 동작을 확인합니다. 링크를 따라가거나 설정을 변경하기 전에 필요한 결과를 적어 두십시오. 좁은 목표는 시간을 절약하고 증거와 연계된 최종 결정을 유지합니다.

작업에 디스플레이 테스트, 청소 단계, 시뮬레이션, 파일 권한, 개인 정보 보호 요청 또는 지원 보고서가 포함된 경우 작업을 수행하기 전에 전체 페이지를 한 번 읽으십시오. 그런 다음 작업에 필요한 정확한 섹션으로 돌아갑니다. 다음 단계를 결정하는 동안 명시된 한계를 눈에 띄게 유지하십시오. 이 경로는 다음 사항에 중점을 두고 있습니다. 튀는 장면 뒤에 있는 프레임 타이밍, 벽 충돌, 크기 조정 및 코너 히트 규칙을 설명합니다.

안정적인 출발점을 준비하세요

실행을 비교하기 전에 고정 뷰포트, 배지 크기, 속도 및 시작점을 선택하십시오. 컨트롤을 변경하거나, 장치를 이동하거나, 양식을 제출하거나, 정책 설명을 사용하기 전에 시작 상태를 기록하세요. 공식적인 검토에는 현재 소스 자료와 현재 페이지 버전을 사용하세요.

세션이나 메시지당 하나의 이슈를 보관하세요. 하드웨어 클레임과 시각적 증상을 분리하세요. 브라우저 시뮬레이션을 시스템 이벤트와 분리합니다. 생성된 파일을 파일 내부에 있는 제3자 자료와 분리합니다. 이러한 경계는 증거를 더 쉽게 평가할 수 있게 해줍니다. 주요 경로 위험은 다음과 같습니다. 프레임 카운트 모션이 60Hz 및 120Hz 디스플레이에서 서로 다른 속도로 실행됩니다.

실용적인 4단계 프로세스를 따르세요.

1. 목표를 정의하십시오. 튀는 장면 뒤에 있는 프레임 타이밍, 벽 충돌, 크기 조정 및 코너 히트 규칙을 설명합니다. 작업이 다른 문제로 바뀌면 중지하세요.
2. 기준선을 캡처합니다. 뷰포트 크기, 장치 픽셀 비율, 경과 시간, 위치, 속도, 충돌 횟수 및 크기 조정 이벤트를 기록합니다. 존재하는 정확한 값과 이름을 사용하십시오.
3. 주요 위험을 확인하세요. 프레임 카운트 모션은 60Hz 및 120Hz 디스플레이에서 서로 다른 속도로 실행됩니다. 단계를 반복하기 전에 설정을 수정하십시오.
4. 다음 작업을 선택하세요. DVD 스크린세이버를 열고 컨트롤 하나를 변경한 다음 라이브 카운터를 가이드의 공식과 비교하세요. 비교를 위해 원본 기록을 보관하세요.

다른 사람이 이해하고 있다는 증거를 구축하세요

뷰포트 크기, 장치 픽셀 비율, 경과 시간, 위치, 속도, 충돌 횟수 및 크기 조정 이벤트를 기록합니다. 날짜와 페이지 URL을 추가하세요. 스크린샷이나 보고서를 공유하기 전에 비밀번호, 주소, 일련번호, 결제 데이터, 비공개 메시지, 기밀 로그를 제거하세요. 짧게 쓰여진 시퀀스는 가까운 사진 한 장보다 더 많은 가치를 전달하는 경우가 많습니다.

비교를 위해 동일한 순서를 반복하고 관련 없는 모든 변수를 안정적으로 유지합니다. 정책이나 권리 관련 질문의 경우 정확한 파일이나 조항을 자신의 말로 인용하고 출처를 연결하세요. 버그의 경우 예상되는 동작, 관찰된 동작 및 신뢰할 수 있는 가장 작은 재현 경로를 포함합니다. 이 경로는 뷰포트 크기, 장치 픽셀 비율, 경과 시간, 위치, 속도, 충돌 횟수 및 크기 조정 이벤트를 기록하도록 요청합니다.

약한 증거와 불분명한 주장을 피하세요

• 프레임 카운트 모션은 60Hz 및 120Hz 디스플레이에서 서로 다른 속도로 실행됩니다.
• 브라우저 애니메이션은 형상과 타이밍을 보여줍니다. 이 페이지에서는 물리적 마찰이나 충격을 모델링하지 않습니다.
• 기준선과 결과 사이에 여러 가지 설정 변경을 피하십시오. 이 경로 준비: 달리기를 비교하기 전에 고정 뷰포트, 배지 크기, 속도 및 시작 지점을 선택하십시오.
• 현재 기본 소스가 없는 비공개 또는 모델별 소유권 주장을 피하세요. 페이지 제한은 다음과 같습니다. 브라우저 애니메이션은 기하학과 타이밍을 보여줍니다. 이 페이지에서는 물리적 마찰이나 충격을 모델링하지 않습니다.
• 공개 스크린샷, 링크, 예시, 지원 메시지에 개인 데이터를 포함하지 마세요. 유용한 증거는 기록 뷰포트 크기, 장치 픽셀 비율, 경과 시간, 위치, 속도, 충돌 횟수 및 크기 조정 이벤트입니다.
• 검색 결과, 카메라 이미지, 포럼 댓글을 최종 증거로 삼지 마세요. 주요 위험은 다음과 같습니다. 프레임 카운트 모션이 60Hz 및 120Hz 디스플레이에서 서로 다른 속도로 실행됩니다.

다음 유용한 작업으로 이동

DVD 스크린세이버를 열고 컨트롤 하나를 변경한 다음 라이브 카운터를 가이드의 공식과 비교하세요. 결과 옆에 기준선과 페이지 제한을 유지합니다. 관련 제조사, 판매자, 플랫폼, 전문가, 권리 보유자 또는 ScreenOrbit 결정이 페이지 범위를 벗어나는 경우 편집자.