{"id":33112,"date":"2025-10-29T20:41:10","date_gmt":"2025-10-29T17:41:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=33112"},"modified":"2025-10-29T20:41:10","modified_gmt":"2025-10-29T17:41:10","slug":"canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/","title":{"rendered":"Canvas API ile Animasyonlar – B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim"},"content":{"rendered":"

<\/p>\n

Canvas API ile Animasyonlar – B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim<\/h2>\n

Giri\u015f: Fizik Tabanl\u0131 Animasyonlar\u0131n Kap\u0131s\u0131n\u0131 Aralamak<\/h2>\n

Canvas API ile animasyon serimizin bu \u00fc\u00e7\u00fcnc\u00fc b\u00f6l\u00fcm\u00fcne ho\u015f geldiniz! \u0130lk iki b\u00f6l\u00fcmde, Canvas’\u0131n temel \u00e7izim yeteneklerini, basit hareketleri ve animasyon d\u00f6ng\u00fcs\u00fcn\u00fcn nas\u0131l olu\u015fturuldu\u011funu ke\u015ffetmi\u015ftik. \u00c7izim ba\u011flamlar\u0131n\u0131 ayarlamay\u0131, \u015fekiller \u00e7izmeyi ve requestAnimationFrame<\/code> kullanarak ak\u0131c\u0131 animasyonlar yaratmay\u0131 \u00f6\u011frendik. Ancak, bu animasyonlar genellikle \u00f6nceden tan\u0131mlanm\u0131\u015f, do\u011frusal veya basit e\u011frilerle s\u0131n\u0131rl\u0131yd\u0131. Ger\u00e7ek d\u00fcnya dinamiklerini taklit eden, daha inand\u0131r\u0131c\u0131 ve etkile\u015fimli animasyonlar yaratmak istedi\u011fimizde, fizik tabanl\u0131 yakla\u015f\u0131mlara y\u00f6nelmemiz gerekir.<\/p>\n

Bu b\u00f6l\u00fcmde, animasyonlar\u0131m\u0131za derinlik ve ger\u00e7ek\u00e7ilik katacak iki kritik konuya odaklanaca\u011f\u0131z: yer\u00e7ekimi sim\u00fclasyonu ve dinamik \u00e7izim teknikleri. Yer\u00e7ekimi, d\u00fc\u015fen nesneler, z\u0131playan toplar veya f\u0131rlat\u0131lan mermiler gibi bir\u00e7ok ger\u00e7ek d\u00fcnya senaryosunun temelini olu\u015fturur. Dinamik \u00e7izim ise, bu karma\u015f\u0131k fiziksel etkile\u015fimleri performansl\u0131 bir \u015fekilde g\u00f6rselle\u015ftirmek i\u00e7in elzemdir. Bu sayede, hem g\u00f6rsel olarak \u00e7ekici hem de taray\u0131c\u0131 kaynaklar\u0131n\u0131 verimli kullanan animasyonlar geli\u015ftirebilece\u011fiz.<\/p>\n

Fizik tabanl\u0131 animasyonlar, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmenin yan\u0131 s\u0131ra, oyun geli\u015ftirme, veri g\u00f6rselle\u015ftirme ve interaktif sanat gibi alanlarda da geni\u015f uygulama potansiyeli sunar. Yer\u00e7ekimi gibi temel bir kuvveti anlamak ve uygulamak, daha karma\u015f\u0131k kuvvetler (s\u00fcrt\u00fcnme, hava direnci, yay kuvvetleri) ve etkile\u015fimler (\u00e7arp\u0131\u015fmalar) i\u00e7in bir temel olu\u015fturacakt\u0131r.<\/p>\n

Yer\u00e7ekimi Sim\u00fclasyonuna Giri\u015f<\/h2>\n

Ger\u00e7ek d\u00fcnyada her \u015fey yer\u00e7ekimi yasalar\u0131na tabidir. Bir topu havaya att\u0131\u011f\u0131n\u0131zda, belirli bir noktaya kadar y\u00fckselir ve ard\u0131ndan h\u0131zlanarak yere d\u00fc\u015fer. Bu davran\u0131\u015f, animasyonlar\u0131m\u0131zda da taklit edilebilir. Yer\u00e7ekimi, bir nesneye s\u00fcrekli olarak uygulanan bir kuvvettir ve bu kuvvet, nesnenin h\u0131z\u0131nda (velocity) ve dolay\u0131s\u0131yla konumunda (position) s\u00fcrekli bir de\u011fi\u015fikli\u011fe neden olur.<\/p>\n

Canvas \u00fczerinde yer\u00e7ekimi sim\u00fclasyonu yapmak i\u00e7in, nesnelerimizin konumunu her animasyon karesinde belirli fiziksel kurallara g\u00f6re g\u00fcncellememiz gerekir. Bu, genellikle bir update()<\/code> fonksiyonu i\u00e7inde ger\u00e7ekle\u015ftirilir ve bu fonksiyon, nesnenin h\u0131z\u0131n\u0131 ivme (acceleration) ve ge\u00e7en zaman (delta time) kullanarak ayarlar, ard\u0131ndan yeni h\u0131z\u0131 kullanarak nesnenin konumunu g\u00fcnceller.<\/p>\n

Temel Fizik Kavramlar\u0131<\/h3>\n

Yer\u00e7ekimi sim\u00fclasyonunu anlamak i\u00e7in birka\u00e7 temel fizik kavram\u0131n\u0131 hat\u0131rlamam\u0131z gerekiyor:<\/p>\n

* Konum (Position):<\/strong> Bir nesnenin Canvas \u00fczerindeki (x, y) koordinatlar\u0131. Bu, nesnenin o anki yerini belirtir.
\n* H\u0131z (Velocity):<\/strong> Bir nesnenin belirli bir y\u00f6nde ne kadar h\u0131zl\u0131 hareket etti\u011fini g\u00f6sterir. Hem b\u00fcy\u00fckl\u00fc\u011f\u00fc (s\u00fcrat) hem de y\u00f6n\u00fc vard\u0131r. Genellikle (vx, vy) olarak ifade edilir, burada vx<\/code> yatay h\u0131z\u0131, vy<\/code> ise dikey h\u0131z\u0131 temsil eder. H\u0131z, konumun zaman i\u00e7indeki de\u011fi\u015fim oran\u0131d\u0131r.
\n* \u0130vme (Acceleration):<\/strong> Bir nesnenin h\u0131z\u0131n\u0131n zaman i\u00e7indeki de\u011fi\u015fim oran\u0131d\u0131r. Yer\u00e7ekimi durumunda, ivme genellikle sabittir ve nesnenin dikey h\u0131z\u0131n\u0131 s\u00fcrekli olarak art\u0131r\u0131r (a\u015fa\u011f\u0131 y\u00f6nde). Genellikle (ax, ay) olarak ifade edilir.
\n* Zaman (Time \/ Delta Time):<\/strong> Animasyon d\u00f6ng\u00fcs\u00fcn\u00fcn her iterasyonunda ge\u00e7en s\u00fcredir. Fizik hesaplamalar\u0131n\u0131n do\u011fru ve tutarl\u0131 olmas\u0131 i\u00e7in bu s\u00fcreyi dikkate almak \u00e7ok \u00f6nemlidir. requestAnimationFrame<\/code> bize kareler aras\u0131nda ge\u00e7en s\u00fcreyi (delta time) sa\u011flar ve bu, animasyonun farkl\u0131 kare h\u0131zlar\u0131nda bile ayn\u0131 \u015fekilde g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n

Bu kavramlar aras\u0131ndaki ili\u015fki olduk\u00e7a basittir:
\n \u0130vme, h\u0131z\u0131 etkiler: yeni_h\u0131z = mevcut_h\u0131z + ivme <\/em> delta_time<\/code>
\n H\u0131z, konumu etkiler: yeni_konum = mevcut_konum + h\u0131z <\/em> delta_time<\/code><\/p>\n

Yer\u00e7ekimi, dikey y\u00f6nde (y ekseni) etki eden bir ivmedir. Bu ivme genellikle sabittir ve pozitif bir de\u011ferle (Canvas’\u0131n y ekseni a\u015fa\u011f\u0131 do\u011fru artt\u0131\u011f\u0131 i\u00e7in) ifade edilir. \u00d6rne\u011fin, GRAVITY = 0.5<\/code> gibi bir de\u011fer, her karede dikey h\u0131za 0.5 birim ekleyecektir.<\/p>\n

Yer\u00e7ekimi Uygulamas\u0131<\/h2>\n

\u015eimdi, bu kavramlar\u0131 Canvas animasyonlar\u0131m\u0131za nas\u0131l entegre edece\u011fimize bakal\u0131m. Bir topun d\u00fc\u015f\u00fc\u015f\u00fcn\u00fc sim\u00fcle etmek i\u00e7in basit bir JavaScript s\u0131n\u0131f\u0131 veya nesne yap\u0131s\u0131 kullanabiliriz.<\/p>\n

class Ball {\n    constructor(x, y, radius, color) {\n        this.x = x;\n        this.y = y;\n        this.radius = radius;\n        this.color = color;\n        this.vx = 0; \/\/ Yatay h\u0131z\n        this.vy = 0; \/\/ Dikey h\u0131z\n        this.gravity = 0.5; \/\/ Yer\u00e7ekimi ivmesi\n        this.friction = 0.9; \/\/ Yere \u00e7arpmada yatay s\u00fcrt\u00fcnme\n        this.bounceFactor = 0.7; \/\/ Z\u0131plama katsay\u0131s\u0131 (enerji kayb\u0131)\n    }\n\n    draw(ctx) {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);\n        ctx.fillStyle = this.color;\n        ctx.fill();\n        ctx.closePath();\n    }\n\n    update(canvasHeight) {\n        \/\/ Yer\u00e7ekimi ivmesini dikey h\u0131za ekle\n        this.vy += this.gravity;\n\n        \/\/ H\u0131z\u0131 kullanarak konumu g\u00fcncelle\n        this.x += this.vx;\n        this.y += this.vy;\n\n        \/\/ Yere \u00e7arpma kontrol\u00fc\n        if (this.y + this.radius > canvasHeight) {\n            this.y = canvasHeight - this.radius; \/\/ Topu zemine oturt\n            this.vy *= -this.bounceFactor; \/\/ H\u0131z\u0131 ters \u00e7evir ve enerji kaybettir\n            \/\/ Yatay s\u00fcrt\u00fcnme uygula (sadece yerde sekme s\u0131ras\u0131nda)\n            if (Math.abs(this.vy) < 1) { \/\/ E\u011fer dikey h\u0131z \u00e7ok d\u00fc\u015f\u00fckse, durdur\n                this.vy = 0;\n            }\n            this.vx *= this.friction; \/\/ Yatay h\u0131z\u0131 s\u00fcrt\u00fcnme ile azalt\n            if (Math.abs(this.vx) < 0.1) { \/\/ E\u011fer yatay h\u0131z \u00e7ok d\u00fc\u015f\u00fckse, durdur\n                this.vx = 0;\n            }\n        }\n\n        \/\/ Duvarlara \u00e7arpma kontrol\u00fc (iste\u011fe ba\u011fl\u0131)\n        if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {\n            this.vx *= -1; \/\/ Yatay h\u0131z\u0131 ters \u00e7evir\n            this.x = Math.max(this.radius, Math.min(canvas.width - this.radius, this.x)); \/\/ S\u0131n\u0131rlar i\u00e7inde tut\n        }\n    }\n}<\/code><\/pre>\n
Bu Ball<\/code> s\u0131n\u0131f\u0131, bir topun yer\u00e7ekimi alt\u0131ndaki hareketini ve yere \u00e7arpmas\u0131n\u0131 sim\u00fcle etmek i\u00e7in gerekli temel mant\u0131\u011f\u0131 i\u00e7erir. update()<\/code> metodu, her animasyon karesinde \u00e7a\u011fr\u0131larak topun fiziksel durumunu g\u00fcnceller.<\/p>\n
Ana animasyon d\u00f6ng\u00fcs\u00fc i\u00e7inde bu update()<\/code> ve draw()<\/code> metotlar\u0131n\u0131 nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 hat\u0131rlayal\u0131m:<\/p>\n
const canvas = document.getElementById('myCanvas');\nconst ctx = canvas.getContext('2d');\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\nlet ball = new Ball(canvas.width \/ 2, 50, 30, 'blue');\n\nfunction animate() {\n    requestAnimationFrame(animate);\n    ctx.clearRect(0, 0, canvas.width, canvas.height); \/\/ Her karede Canvas'\u0131 temizle\n\n    ball.update(canvas.height); \/\/ Topun durumunu g\u00fcncelle\n    ball.draw(ctx); \/\/ Topu \u00e7iz\n}\n\nanimate();<\/code><\/pre>\n
Bu basit yap\u0131 ile bir topun yere d\u00fc\u015fmesini, sekmesini ve sonunda durmas\u0131n\u0131 g\u00f6zlemleyebilirsiniz. Bu, fizik tabanl\u0131 animasyonlar\u0131n temelini olu\u015fturur.<\/p>\n
\u00c7arp\u0131\u015fma Tespiti ve Tepkisi<\/h2>\n
Yer\u00e7ekimi ile d\u00fc\u015fen bir nesnenin en do\u011fal sonucu bir y\u00fczeye \u00e7arpmas\u0131d\u0131r. Bu \u00e7arp\u0131\u015fmalar\u0131 do\u011fru bir \u015fekilde tespit etmek ve bunlara fiziksel olarak inand\u0131r\u0131c\u0131 tepkiler vermek, animasyonlar\u0131m\u0131z\u0131n ger\u00e7ek\u00e7ili\u011fini art\u0131r\u0131r. Yukar\u0131daki Ball<\/code> s\u0131n\u0131f\u0131ndaki update()<\/code> metodu, basit bir zemin \u00e7arp\u0131\u015fma tespitini ve tepkisini zaten i\u00e7eriyor.<\/p>\n
Zemin \u00c7arp\u0131\u015fmas\u0131<\/h3>\n
Bir nesnenin (\u00f6rne\u011fin bir topun) zemine \u00e7arpmas\u0131n\u0131 tespit etmek i\u00e7in, nesnenin alt kenar\u0131n\u0131n Canvas'\u0131n alt kenar\u0131n\u0131 ge\u00e7ip ge\u00e7medi\u011fini kontrol ederiz. Top i\u00e7in bu, this.y + this.radius > canvasHeight<\/code> kontrol\u00fc ile yap\u0131l\u0131r.<\/p>\n
\u00c7arp\u0131\u015fma tespit edildi\u011finde, iki \u015fey yapmam\u0131z gerekir:
\n1.  Konum D\u00fczeltme:<\/strong> Nesnenin zemin alt\u0131na girmesini engellemek i\u00e7in konumunu zemine s\u0131f\u0131rlar\u0131z: this.y = canvasHeight - this.radius;<\/code>.
\n2.  H\u0131z Tepkisi:<\/strong> Nesnenin dikey h\u0131z\u0131n\u0131 tersine \u00e7eviririz. Ancak ger\u00e7ek d\u00fcnyada enerji kayb\u0131 oldu\u011fu i\u00e7in, h\u0131z\u0131n mutlak de\u011ferini bir bounceFactor<\/code> (z\u0131plama katsay\u0131s\u0131) ile \u00e7arpar\u0131z. this.vy *= -this.bounceFactor;<\/code>. Bu katsay\u0131 0 ile 1 aras\u0131nda bir de\u011fer al\u0131r. 1 ise hi\u00e7 enerji kaybetmez, 0 ise hi\u00e7 z\u0131plamaz.<\/p>\n
Duvar \u00c7arp\u0131\u015fmalar\u0131<\/h3>\n
Benzer \u015fekilde, yan duvarlara \u00e7arp\u0131\u015fmalar\u0131 da kontrol edebiliriz:
\n*   Sol duvar: this.x - this.radius < 0<\/code>
\n*   Sa\u011f duvar: this.x + this.radius > canvas.width<\/code><\/p>\n
Duvar \u00e7arp\u0131\u015fmalar\u0131nda, genellikle yatay h\u0131z\u0131 tersine \u00e7eviririz: this.vx *= -1;<\/code>. Yine, bir enerji kayb\u0131 fakt\u00f6r\u00fc (bounceFactor veya ayr\u0131 bir duvar s\u00fcrt\u00fcnmesi) uygulanabilir.<\/p>\n
S\u00fcrt\u00fcnme<\/h3>\n
Yere \u00e7arpan bir topun sadece dikey h\u0131z\u0131 de\u011fil, yatay h\u0131z\u0131 da zamanla azal\u0131r. Bu, s\u00fcrt\u00fcnme kuvveti nedeniyle olur. this.vx *= this.friction;<\/code> ifadesiyle yatay h\u0131z\u0131 her karede belirli bir oranda azaltarak s\u00fcrt\u00fcnmeyi sim\u00fcle edebiliriz. S\u00fcrt\u00fcnme katsay\u0131s\u0131 genellikle 0 ile 1 aras\u0131nda bir de\u011ferdir (1 ise s\u00fcrt\u00fcnme yok, 0 ise an\u0131nda durur).<\/p>\n
\u00c7arp\u0131\u015fma tepkilerinde k\u00fc\u00e7\u00fck ama \u00f6nemli bir detay, nesnenin h\u0131z\u0131n\u0131n \u00e7ok d\u00fc\u015f\u00fck oldu\u011fu durumlarda onu tamamen durdurmakt\u0131r (if (Math.abs(this.vy) < 1) this.vy = 0;<\/code>). Bu, sonsuz k\u00fc\u00e7\u00fck hareketleri engelleyerek animasyonun daha kararl\u0131 ve ger\u00e7ek\u00e7i g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n
Dinamik \u00c7izim ve Performans<\/h2>\n
Yer\u00e7ekimi ve \u00e7arp\u0131\u015fmalar gibi fiziksel etkile\u015fimler, animasyonlar\u0131m\u0131zdaki nesnelerin s\u00fcrekli olarak konum ve \u015fekil de\u011fi\u015ftirmesine neden olur. Bu durumda, her animasyon karesinde t\u00fcm Canvas'\u0131 yeniden \u00e7izmek (clear-and-redraw) en yayg\u0131n ve genellikle en basit yakla\u015f\u0131md\u0131r. Ancak, \u00f6zellikle \u00e7ok say\u0131da nesne veya karma\u015f\u0131k \u00e7izimler s\u00f6z konusu oldu\u011funda, bu yakla\u015f\u0131m performans sorunlar\u0131na yol a\u00e7abilir.<\/p>\n
Tam Ekran Yeniden \u00c7izim (Clear-and-Redraw)<\/h3>\n
Yukar\u0131daki \u00f6rnekte kulland\u0131\u011f\u0131m\u0131z ctx.clearRect(0, 0, canvas.width, canvas.height);<\/code> komutu, Canvas'\u0131n tamam\u0131n\u0131 temizler ve ard\u0131ndan t\u00fcm nesneler yeniden \u00e7izilir. Bu y\u00f6ntem, \u00e7o\u011fu basit ve orta karma\u015f\u0131kl\u0131ktaki animasyon i\u00e7in yeterince performansl\u0131d\u0131r. Modern taray\u0131c\u0131lar ve GPU h\u0131zland\u0131rmas\u0131 sayesinde, bu i\u015flem genellikle olduk\u00e7a h\u0131zl\u0131d\u0131r.<\/p>\n
Avantajlar\u0131:
\n*   Uygulamas\u0131 kolayd\u0131r.
\n*   \"Kuyruk\" veya \"iz\" b\u0131rakma gibi g\u00f6rsel hatalar\u0131 otomatik olarak \u00e7\u00f6zer.<\/p>\n
Dezavantajlar\u0131:
\n*   \u00c7ok say\u0131da veya \u00e7ok karma\u015f\u0131k nesne oldu\u011funda CPU\/GPU \u00fczerinde gereksiz y\u00fck olu\u015fturabilir.
\n*   Her pikseli her karede yeniden \u00e7izmek, \u00f6zellikle b\u00fcy\u00fck Canvas'larda israft\u0131r.<\/p>\n
K\u0131smi \u00c7izim (Dirty Rectangle)<\/h3>\n
Daha geli\u015fmi\u015f bir performans optimizasyonu tekni\u011fi, sadece de\u011fi\u015fen alanlar\u0131 yeniden \u00e7izmektir. Buna \"dirty rectangle\" (kirli dikd\u00f6rtgen) tekni\u011fi denir. Bu yakla\u015f\u0131mda, her nesnenin bir \u00f6nceki karedeki konumunu ve mevcut konumunu takip ederiz. Ard\u0131ndan, her iki konumu da kapsayan en k\u00fc\u00e7\u00fck dikd\u00f6rtgen alanlar\u0131 hesaplar\u0131z ve sadece bu \"kirli\" alanlar\u0131 temizleyip yeniden \u00e7izeriz.<\/p>\n
Uygulamas\u0131 daha karma\u015f\u0131kt\u0131r:
\n1.  Her nesne i\u00e7in, bir \u00f6nceki karedeki konumunu (oldX<\/code>, oldY<\/code>) ve mevcut konumunu (x<\/code>, y<\/code>) saklaman\u0131z gerekir.
\n2.  Her update()<\/code> d\u00f6ng\u00fcs\u00fcnde, nesnenin eski konumunu kapsayan bir \"kirli dikd\u00f6rtgen\" (dirtyRect1<\/code>) ve yeni konumunu kapsayan ba\u015fka bir \"kirli dikd\u00f6rtgen\" (dirtyRect2<\/code>) hesaplan\u0131r.
\n3.  Bu iki dikd\u00f6rtgeni birle\u015ftiren en b\u00fcy\u00fck dikd\u00f6rtgeni buluruz.
\n4.  ctx.clearRect()<\/code> metodunu bu birle\u015fik kirli dikd\u00f6rtgenin koordinatlar\u0131yla \u00e7a\u011f\u0131r\u0131r\u0131z.
\n5.  Ard\u0131ndan, sadece bu alandaki nesneleri (veya t\u00fcm nesneleri, ama sadece bu alanda \u00e7izim yap\u0131lmas\u0131n\u0131 bekleyerek) yeniden \u00e7izeriz.<\/p>\n
Avantajlar\u0131:
\n*   \u00c7ok say\u0131da nesne veya b\u00fcy\u00fck Canvas'lar i\u00e7in \u00f6nemli performans art\u0131\u015f\u0131 sa\u011flayabilir.
\n*   CPU\/GPU y\u00fck\u00fcn\u00fc azalt\u0131r.<\/p>\n
Dezavantajlar\u0131:
\n*   Uygulamas\u0131 karma\u015f\u0131kt\u0131r ve hata yapmaya daha m\u00fcsaittir.
\n*   Nesnelerin \u00fcst \u00fcste bindi\u011fi veya \u00e7ok s\u0131k hareket etti\u011fi durumlarda, t\u00fcm ekran\u0131 temizlemekten \u00e7ok da farkl\u0131 olmayabilir.<\/p>\n
\u00c7o\u011fu durumda, clearRect(0, 0, canvas.width, canvas.height)<\/code> kullanmak yeterince iyi bir ba\u015flang\u0131\u00e7t\u0131r. Performans sorunlar\u0131 ya\u015famaya ba\u015flad\u0131\u011f\u0131n\u0131zda k\u0131smi \u00e7izim gibi optimizasyonlara y\u00f6nelmek daha mant\u0131kl\u0131d\u0131r.<\/p>\n
Performans \u0130pu\u00e7lar\u0131<\/h3>\n
Canvas animasyonlar\u0131nda performans\u0131 art\u0131rmak i\u00e7in genel ipu\u00e7lar\u0131:<\/p>\n
1.  requestAnimationFrame<\/code> Kullan\u0131n:<\/strong> Taray\u0131c\u0131n\u0131n ekran yenileme h\u0131z\u0131yla senkronize oldu\u011fu i\u00e7in en ak\u0131c\u0131 animasyonu sa\u011flar ve taray\u0131c\u0131 sekme arka plana d\u00fc\u015ft\u00fc\u011f\u00fcnde animasyonu duraklatarak CPU d\u00f6ng\u00fclerinden tasarruf eder.
\n2.  Gereksiz \u00c7izimlerden Ka\u00e7\u0131n\u0131n:<\/strong> Sadece de\u011fi\u015fen nesneleri veya de\u011fi\u015fen alanlar\u0131 \u00e7izin.
\n3.  Offscreen Canvas Kullan\u0131n:<\/strong> Statik veya nadiren de\u011fi\u015fen karma\u015f\u0131k \u00e7izimleri bir offscreen Canvas'a \u00f6nceden \u00e7izip, ana Canvas'a sadece bu offscreen Canvas'tan kopyalayarak (bitblitting) performans kazanabilirsiniz. \u00d6zellikle arka planlar veya sabit aray\u00fcz elemanlar\u0131 i\u00e7in faydal\u0131d\u0131r.
\n4.  Canvas Durumunu Kaydetme\/Geri Y\u00fckleme Maliyeti:<\/strong> ctx.save()<\/code> ve ctx.restore()<\/code> kullanmak faydal\u0131 olsa da, \u00e7ok s\u0131k \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda performans maliyeti olabilir. Gereksiz kullan\u0131mdan ka\u00e7\u0131n\u0131n.
\n5.  Say\u0131sal De\u011ferleri Yuvarlay\u0131n:<\/strong> Piksel hizalamas\u0131 i\u00e7in Math.floor()<\/code> veya Math.round()<\/code> kullanmak, bazen kenar yumu\u015fatma (anti-aliasing) hesaplamalar\u0131n\u0131 azaltarak performans\u0131 art\u0131rabilir. Ancak bu, g\u00f6rsel kaliteden \u00f6d\u00fcn verebilir.
\n6.  Donan\u0131m H\u0131zland\u0131rma:<\/strong> Modern taray\u0131c\u0131lar Canvas \u00e7izimlerini GPU \u00fczerinde h\u0131zland\u0131r\u0131r. Ancak baz\u0131 i\u015flemler (\u00f6rne\u011fin g\u00f6lgeler, karma\u015f\u0131k filtreler) hala CPU \u00fczerinde daha fazla y\u00fck olu\u015fturabilir.
\n7.  Nesne Havuzlar\u0131 (Object Pooling):<\/strong> \u00d6zellikle \u00e7ok say\u0131da k\u0131sa \u00f6m\u00fcrl\u00fc nesnenin (\u00f6rne\u011fin patlama par\u00e7ac\u0131klar\u0131) olu\u015fturulup yok edildi\u011fi durumlarda, nesneleri tekrar kullanmak (yeni nesne olu\u015fturmak yerine) \u00e7\u00f6p toplama (garbage collection) maliyetini azaltarak performans\u0131 art\u0131r\u0131r.<\/p>\n
Geli\u015fmi\u015f Konulara K\u0131sa Bak\u0131\u015f<\/h2>\n
Yer\u00e7ekimi ve \u00e7arp\u0131\u015fma tespiti, fizik tabanl\u0131 animasyonlar\u0131n sadece ba\u015flang\u0131c\u0131d\u0131r. Bu temeller \u00fczerine in\u015fa edebilece\u011fimiz daha bir\u00e7ok geli\u015fmi\u015f kavram vard\u0131r:<\/p>\n
Hava Direnci (Air Resistance \/ Drag)<\/h3>\n
Ger\u00e7ek d\u00fcnyada, hareket eden nesneler hava direnciyle kar\u015f\u0131la\u015f\u0131r. Bu kuvvet, nesnenin h\u0131z\u0131n\u0131n tersi y\u00f6nde etki eder ve h\u0131zla orant\u0131l\u0131 olarak artar. Basit bir sim\u00fclasyon i\u00e7in, her karede h\u0131z\u0131n belirli bir y\u00fczdesini azaltabiliriz:
\nthis.vx *= (1 - DRAG_FACTOR);<\/code>
\nthis.vy *= (1 - DRAG_FACTOR);<\/code>
\nBurada DRAG_FACTOR<\/code> 0 ile 1 aras\u0131nda k\u00fc\u00e7\u00fck bir de\u011ferdir (\u00f6rne\u011fin 0.01).<\/p>\n
Birden Fazla Nesne ve Etkile\u015fim<\/h3>\n
Tek bir nesneyi hareket ettirmek kolayd\u0131r, ancak birden fazla nesnenin birbirleriyle etkile\u015fime girmesi i\u015fleri karma\u015f\u0131kla\u015ft\u0131r\u0131r.
\n*   Nesneler Aras\u0131 \u00c7arp\u0131\u015fma:<\/strong> \u0130ki topun birbirine \u00e7arpmas\u0131n\u0131 sim\u00fcle etmek, daha karma\u015f\u0131k bir algoritma gerektirir. Daireler i\u00e7in merkezler aras\u0131 mesafe ve yar\u0131\u00e7aplar kullan\u0131larak \u00e7arp\u0131\u015fma tespiti yap\u0131l\u0131r. Tepki ise momentum ve enerji korunumu yasalar\u0131na g\u00f6re h\u0131zlar\u0131n de\u011fi\u015ftirilmesini i\u00e7erir.
\n*   K\u00fctle\u00e7ekimi (Gravitation):<\/strong> Yer\u00e7ekimi, genellikle sabit bir kuvvettir (D\u00fcnya'n\u0131n y\u00fczeyinde). K\u00fctle\u00e7ekimi ise, her nesnenin k\u00fctlesine ve aralar\u0131ndaki mesafeye ba\u011fl\u0131 olarak di\u011ferini \u00e7ekti\u011fi bir kuvvettir. Bu, gezegenlerin veya y\u0131ld\u0131z sistemlerinin sim\u00fclasyonu i\u00e7in kullan\u0131l\u0131r ve her nesnenin di\u011fer t\u00fcm nesneler \u00fczerindeki etkisini hesaplamay\u0131 gerektirir.<\/p>\n
Bu gibi ileri konular, animasyonlar\u0131n\u0131za daha fazla ger\u00e7ek\u00e7ilik ve karma\u015f\u0131kl\u0131k katma potansiyeline sahiptir, ancak ayn\u0131 zamanda performans ve matematiksel karma\u015f\u0131kl\u0131k a\u00e7\u0131s\u0131ndan daha fazla zorluk da sunar.<\/p>\n
Kod Yap\u0131s\u0131 ve Entegrasyon<\/h2>\n
Daha karma\u015f\u0131k animasyonlar geli\u015ftirirken, kodunuzu d\u00fczenli tutmak \u00f6nemlidir. Genellikle bir ana AnimationManager<\/code> veya benzeri bir yap\u0131, t\u00fcm animasyon nesnelerini y\u00f6netir.<\/p>\n
\/\/ Ana animasyon y\u00f6neticisi\nclass AnimationManager {\n    constructor(canvas, ctx) {\n        this.canvas = canvas;\n        this.ctx = ctx;\n        this.balls = []; \/\/ T\u00fcm top nesnelerini saklayacak dizi\n        this.init();\n    }\n\n    init() {\n        \/\/ Ba\u015flang\u0131\u00e7ta birka\u00e7 top ekleyebiliriz\n        this.balls.push(new Ball(50, 50, 20, 'red'));\n        this.balls.push(new Ball(150, 100, 25, 'green'));\n        this.balls.push(new Ball(250, 150, 30, 'blue'));\n        \/\/ Rastgele ba\u015flang\u0131\u00e7 h\u0131zlar\u0131 ekleyebiliriz\n        this.balls[0].vx = 5;\n        this.balls[1].vx = -3;\n        this.balls[2].vx = 7;\n    }\n\n    animate() {\n        requestAnimationFrame(this.animate.bind(this)); \/\/ 'this' ba\u011flam\u0131n\u0131 koru\n        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n\n        this.balls.forEach(ball => {\n            ball.update(this.canvas.height);\n            ball.draw(this.ctx);\n        });\n    }\n\n    start() {\n        this.animate();\n    }\n}\n\n\/\/ Canvas ve Context'i al\nconst canvas = document.getElementById('myCanvas');\nconst ctx = canvas.getContext('2d');\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\n\/\/ Y\u00f6neticimizi olu\u015ftur ve ba\u015flat\nconst animation = new AnimationManager(canvas, ctx);\nanimation.start();\n\n\/\/ Pencere boyutu de\u011fi\u015fti\u011finde Canvas boyutunu g\u00fcncelle\nwindow.addEventListener('resize', () => {\n    canvas.width = window.innerWidth;\n    canvas.height = window.innerHeight;\n});<\/code><\/pre>\n
Bu yap\u0131, birden fazla nesneyi y\u00f6netmeyi ve animasyon d\u00f6ng\u00fcs\u00fcn\u00fc merkezile\u015ftirmeyi kolayla\u015ft\u0131r\u0131r. Her Ball<\/code> nesnesi kendi fiziksel durumunu y\u00f6netirken, AnimationManager<\/code> t\u00fcm nesnelerin update<\/code> ve draw<\/code> \u00e7a\u011fr\u0131lar\u0131n\u0131 koordine eder.<\/p>\n
Optimizasyon ve En \u0130yi Uygulamalar<\/h2>\n
Fizik tabanl\u0131 animasyonlar geli\u015ftirirken, sadece do\u011fru fizi\u011fi uygulamak de\u011fil, ayn\u0131 zamanda bunu verimli bir \u015fekilde yapmak da \u00f6nemlidir.<\/p>\n
*   CPU ve GPU Y\u00fck\u00fcn\u00fc Dengeleme:<\/strong> Karma\u015f\u0131k fizik hesaplamalar\u0131 CPU'da yap\u0131l\u0131rken, \u00e7izim i\u015flemleri genellikle GPU taraf\u0131ndan h\u0131zland\u0131r\u0131l\u0131r. Bu iki kaynak aras\u0131ndaki dengeyi bulmak, ak\u0131c\u0131 bir deneyim i\u00e7in kritiktir. \u00c7ok fazla nesne veya \u00e7ok karma\u015f\u0131k \u00e7arp\u0131\u015fma algoritmalar\u0131 CPU'yu a\u015f\u0131r\u0131 y\u00fckleyebilirken, b\u00fcy\u00fck boyutlu resimler veya filtreler GPU'yu zorlayabilir.
\n*   Say\u0131sal Kararl\u0131l\u0131k Sorunlar\u0131:<\/strong> Fizik sim\u00fclasyonlar\u0131nda, delta_time<\/code> \u00e7ok b\u00fcy\u00fck oldu\u011funda veya hesaplamalar yeterince hassas olmad\u0131\u011f\u0131nda \"say\u0131sal karars\u0131zl\u0131k\" sorunlar\u0131 ortaya \u00e7\u0131kabilir. \u00d6rne\u011fin, bir nesne bir karede \u00e7arp\u0131\u015fma noktas\u0131n\u0131 ge\u00e7ip di\u011fer tarafa atlayabilir. Bu t\u00fcr sorunlar\u0131 azaltmak i\u00e7in, zaman ad\u0131mlar\u0131n\u0131 k\u00fc\u00e7\u00fck tutmak veya daha geli\u015fmi\u015f entegrasyon y\u00f6ntemleri (\u00f6rne\u011fin Verlet entegrasyonu) kullanmak gerekebilir. Ancak \u00e7o\u011fu web animasyonu i\u00e7in basit Euler entegrasyonu (yukar\u0131da g\u00f6sterilen) yeterlidir.
\n*   Taray\u0131c\u0131 Uyumlulu\u011fu ve Performans Profili:<\/strong> Farkl\u0131 taray\u0131c\u0131lar Canvas API'sini farkl\u0131 \u015fekillerde optimize edebilir. Animasyonunuzu \u00e7e\u015fitli taray\u0131c\u0131larda test etmek ve taray\u0131c\u0131lar\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki performans profilleme \u00f6zelliklerini kullanarak darbo\u011fazlar\u0131 belirlemek \u00f6nemlidir.
\n*   Kullan\u0131c\u0131 Deneyimi (Smoothness):<\/strong> Nihayetinde, animasyonun ak\u0131c\u0131l\u0131\u011f\u0131 kullan\u0131c\u0131 deneyimi i\u00e7in en \u00f6nemli fakt\u00f6rd\u00fcr. Saniyede 60 kare (FPS) hedeflemek, \u00e7o\u011fu durumda ak\u0131c\u0131 bir deneyim sa\u011flar. E\u011fer bu hedefe ula\u015f\u0131lam\u0131yorsa, animasyonun karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azaltmak veya yukar\u0131da bahsedilen optimizasyon tekniklerini uygulamak gerekebilir.<\/p>\n
Sonu\u00e7<\/h2>\n
Bu b\u00f6l\u00fcmde, Canvas API ile animasyonlar serimizin en heyecan verici y\u00f6nlerinden birine, fizik tabanl\u0131 animasyonlara dald\u0131k. Yer\u00e7ekimi gibi temel bir kuvveti sim\u00fcle etmenin, nesnelerin konumunu, h\u0131z\u0131n\u0131 ve ivmesini nas\u0131l g\u00fcncelleyece\u011fimizi \u00f6\u011frendik. Ayr\u0131ca, zemin ve duvar \u00e7arp\u0131\u015fmalar\u0131n\u0131 nas\u0131l tespit edip bunlara nas\u0131l tepki verece\u011fimizi de g\u00f6rd\u00fck.<\/p>\n
Dinamik \u00e7izim teknikleri ve performans optimizasyonlar\u0131, bu karma\u015f\u0131k animasyonlar\u0131 taray\u0131c\u0131da ak\u0131c\u0131 ve verimli bir \u015fekilde \u00e7al\u0131\u015ft\u0131rmak i\u00e7in ne kadar \u00f6nemli oldu\u011funu g\u00f6sterdi. requestAnimationFrame<\/code> kullan\u0131m\u0131, k\u0131smi \u00e7izim (dirty rectangle) teknikleri ve di\u011fer performans ipu\u00e7lar\u0131, Canvas animasyonlar\u0131n\u0131z\u0131 bir sonraki seviyeye ta\u015f\u0131man\u0131z i\u00e7in size rehberlik edecektir.<\/p>\n
Art\u0131k sadece hareket eden de\u011fil, ayn\u0131 zamanda ger\u00e7ek d\u00fcnya dinamiklerine g\u00f6re tepki veren animasyonlar yaratma yetene\u011fine sahipsiniz. Bu bilgi, oyunlardan interaktif deneyimlere kadar geni\u015f bir yelpazede daha zengin ve inand\u0131r\u0131c\u0131 web uygulamalar\u0131 geli\u015ftirmenizin \u00f6n\u00fcn\u00fc a\u00e7acakt\u0131r. Gelecekte, hava direnci, yay kuvvetleri, \u00e7oklu nesne \u00e7arp\u0131\u015fmalar\u0131 ve hatta k\u00fctle\u00e7ekimi gibi daha karma\u015f\u0131k fiziksel etkile\u015fimleri ke\u015ffederek Canvas animasyonlar\u0131n\u0131z\u0131n potansiyelini daha da geni\u015fletebilirsiniz. Animasyon d\u00fcnyas\u0131ndaki yolculu\u011funuzda ba\u015far\u0131lar dileriz!<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Canvas API ile Animasyonlar – B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim\nGiri\u015f: Fizik Tabanl\u0131 Animasyonlar\u0131n Kap\u0131s\u0131n\u0131 Aralamak\nCanvas API ile anim","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-33112","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nCanvas API ile Animasyonlar - B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Canvas API ile Animasyonlar - B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim\" \/>\n<meta property=\"og:description\" content=\"Canvas API ile Animasyonlar - B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim Giri\u015f: Fizik Tabanl\u0131 Animasyonlar\u0131n Kap\u0131s\u0131n\u0131 Aralamak Canvas API ile anim\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-29T17:41:10+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Canvas API ile Animasyonlar – B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim\",\"datePublished\":\"2025-10-29T17:41:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/\"},\"wordCount\":2641,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/\",\"name\":\"Canvas API ile Animasyonlar - B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-29T17:41:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Canvas API ile Animasyonlar – B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Canvas API ile Animasyonlar - B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/","og_locale":"tr_TR","og_type":"article","og_title":"Canvas API ile Animasyonlar - B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim","og_description":"Canvas API ile Animasyonlar - B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim Giri\u015f: Fizik Tabanl\u0131 Animasyonlar\u0131n Kap\u0131s\u0131n\u0131 Aralamak Canvas API ile anim","og_url":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-29T17:41:10+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Canvas API ile Animasyonlar – B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim","datePublished":"2025-10-29T17:41:10+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/"},"wordCount":2641,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/","url":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/","name":"Canvas API ile Animasyonlar - B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-29T17:41:10+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-animasyonlar-bolum-3-yercekimi-ve-dinamik-cizim\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Canvas API ile Animasyonlar – B\u00f6l\u00fcm 3: Yer\u00e7ekimi ve Dinamik \u00c7izim"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33112"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33112\/revisions"}],"predecessor-version":[{"id":33113,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33112\/revisions\/33113"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}