Atölye › OutRun Tarzı Yarış › 9/44. adım
Şu an parçaları yakından uzağa boyuyoruz. Düz yolda bunun bir zararı yok. Ama ileride virajda yol kıvrılıp kendi arkasına geçecek, arabalar da yolun üstüne binecek. Kural şu olmalı: önce en uzaktakini, en son en yakındakini boya; yakındaki, arkasındakinin üstünü örter. Ressamlar da önce arka planı boyar; adı da ressam algoritması.
Bunun için işi iki döngüye ayırıyoruz: ilki parçaların yerini hesaplayıp bir listeye koyar, ikincisi o listeyi sondan başa boyar.
```js
const shown = []
for (let i = 0; i < DRAW; i++) {
const index = (base + i) % segments.length
const z = (base + i) * SEG - position
const near = project(0, -CAMERA_HEIGHT, z)
const far = project(0, -CAMERA_HEIGHT, z + SEG)
if (z > 0) shown.push({ index, near, far })
}
// Paint from far to near, so nearer road covers what is behind it.
for (let i = shown.length - 1; i >= 0; i--) {
const { index, near, far } = shown[i]
const light = Math.floor(index / 3) % 2 === 0
quad(light ? '#6b7280' : '#646b75', near.x, near.y, near.w, far.x, far.y, far.w)
}
```const shown = [] → ekranda görünecek parçaların listesi.shown.push({ index, near, far }) ile listeye bir nesne ekliyor.
{ index, near, far }, { index: index, near: near, far: far }'ın kısası.i son elemandan (shown.length - 1) başlar, i >= 0 olduğu sürece sürer,
i-- her turda 1 azaltır. Listenin sonunda en uzak parça var; demek ki önce o boyanır.const { index, near, far } = shown[i] → nesnenin üç alanını tek satırda üç ayrı ada çıkarır. Buna
destructuring (paketi açmak) denir.light ve quad satırları aynı; sadece ikinci döngüye taşındılar.for satırının üstüne const shown = [] yaz.light ve if (z > 0) quad(...) satırlarını sil; yerine if (z > 0) shown.push({ index, near, far })
yaz.}'sinin altına bir boş satır bırak; yorum satırını ve ikinci döngüyü yaz.Beceriler: Canvas üzerine çizim, Diziler ve nesneler
← Şeritler Bordür ve orta çizgi →