Atölye › OutRun Tarzı Yarış › 3/44. adım
Hilenin kalbi perspektif: iki kat uzaktaki şey yarım büyüklükte görünür. Tren raylarının uzakta birleşiyor gibi görünmesi bu yüzden.
Dünyadaki her nokta kameraya göre bir yerde durur: dz kadar önünde, dx kadar yanında, dy kadar
yukarısında. project (izdüşür) fonksiyonu böyle bir noktanın ekranda nereye düştüğünü ve yolun orada ne kadar
geniş göründüğünü hesaplayacak. Bu adımda ekran değişmez; hesap makinesini kuruyoruz.
```js
const ROAD = 1000 // half the width of the road
const CAMERA_HEIGHT = 1000
const DEPTH = 1 / Math.tan((50 * Math.PI) / 180) // camera depth for a 100 degree field of view
// Perspective: a point `dz` in front of the camera, `dx` to the side and `dy` above the ground.
function project(dx, dy, dz) {
const scale = DEPTH / dz
return { x: W / 2 + scale * dx * (W / 2), y: H / 2 - scale * dy * (H / 2), w: scale * ROAD * (W / 2) }
}
```ROAD = 1000 → yolun yarı genişliği, dünya birimiyle (metre gibi düşün). CAMERA_HEIGHT = 1000 → kamera yerden
1000 birim yukarıda.DEPTH → kameranın görüş açısını ayarlar. Math.tan trigonometriden tanjant hesabıdır; açıyı derece değil
radyan ister. * Math.PI / 180 dereceyi radyana çevirir. Sonuç yaklaşık 0.84. Bu satırı olduğu gibi yazman
yeterli: 100 derecelik geniş bir görüş verir.const scale = DEPTH / dz → perspektifin kendisi: uzaklık (dz) iki katına çıkınca scale yarıya iner.x: W / 2 + scale * dx * (W / 2) → ekranın ortasından (W / 2) başlar, dx kadar yana kayar. Uzaktaki nokta
daha az kayar.y: H / 2 - scale * dy * (H / 2) → H / 2 ufuk çizgisi. Yol kameranın altında olduğu için dy eksi
(-CAMERA_HEIGHT) verilecek; eksi ile eksi artı yapar, nokta ufkun altına düşer. Uzaklaştıkça ufka yaklaşır.w: scale * ROAD * (W / 2) → o uzaklıkta yolun ekrandaki yarı genişliği.return { x: ..., y: ..., w: ... } → üç sonucu tek bir nesne (object) içinde geri verir.const H = canvas.height satırının altına üç sabiti (ROAD, CAMERA_HEIGHT, DEPTH) yaz.function draw() { satırının üstüne yorum satırını ve project fonksiyonunu yaz; project'in kapanış
}'si ile function draw() { arasında bir boş satır kalsın.Beceriler: Canvas üzerine çizim, Hız ve yerçekimi
← Tekrar tekrar çiz Bir parça yol →