7-ma’ruza: Dasturiy arxitektura va dvigatel

Fizik animatsiya arxitekturasi: HTML5 Canvas asoslari

HTML5 Canvas 2D konteksti, Glenn Fiedlerning "Fix Your Timestep" akkumulyatorli fizik tsikli, requestAnimationFrame apparat sinxronizatsiyasi, Google Antigravity monitoringi, ChatGPT kadr optimizatsiyasi (Dirty Rects, Multi-layer Canvas, Object Pooling) va Claude (Artifacts) vizual sinovlari.

📋 7-ma’ruza rejasi va AI texnologik konveyeri:

1. AI diagnostika va reja:
MagicSchool AI: ZPD va Bloom taksonomiyasi bo‘yicha 3 klasterli adaptiv grafik o‘quv rejasi.
2. Kod yozish va monitoring:
Google Antigravity: Modulli dasturiy arxitektura, xotira (Heap) va kadr pacing monitoringi.
3. Kadr tsikli va delta-time:
Claude: Glenn Fiedler akkumulyatori, qat’iy qadam (Fixed dt) va alpha interpolyatsiyasi.
4. Kadr optimizatsiyasi:
ChatGPT Code Interpreter: Dirty Rectangles, ko‘p qatlamli Canvas va Object Pooling (Zero-GC).
5. Vizual sinov va Artifacts:
Claude (Artifacts): Retina High-DPI dpr masshtablash, real vaqtli FPS va jank telemetriyasi.
6. Simulyatsiya va test:
HTML5 Canvas jonli arxitektura dvigateli, lag-simulyator, diagnostik test va adabiyotlar.
1-bosqich: Kognitiv diagnostika

MagicSchool AI: kognitiv diagnostika va 3 klasterli adaptiv o‘quv rejasi

📚 Nazariy-Metodologik Asos:

Grafik va kompyuter fizikasi ta’limida talabalarning animatsiya mexanikasini o‘zlashtirishi Lev Vygotskiyning "Eng Yaqin Rivojlanish Zonasi" (ZPD, 1978) hamda Bloomning taksonomiyasi (Anderson va Krathwohl, 2001) prinsiplari asosida tashkil etiladi. Dasturiy grafik apparat bilan ishlash tajribasi turli darajadagi talabalarni MagicSchool AI diagnostikasi orqali 3 ta ixtisoslashgan klasterga ajratadi.

HTML5 Canvas fizik simulyatsiyalarini yaratishda oddiy rasm chizishdan tashqari kadrlar yangilanishi chastotasi (FPS), kompyuter monitorlarining V-Sync xususiyatlari (60Hz, 120Hz, 144Hz) va vaqt diskretizatsiyasi hisobga olinishi lozim. Talabalar bilimi quyidagi 3 klasterga ajratiladi:

Klaster A (boshlang‘ich)

Scaffolding

HTML5 Canvas 2D kontekstini biladi (`ctx.fillRect`, `ctx.arc`), biroq `requestAnimationFrame` va `setInterval` o‘rtasidagi fundamental farqni tushunmaydi. O‘zgaruvchan delta-time xatolariga yo‘l qo‘yadi.

O‘quv trayektoriyasi: Qo‘llab-quvvatlovchi andozalar (Scaffolding), oddiy 1D to‘g‘ri chiziqli harakat kadr tsikli, Canvas tozalash va to‘qnashuvlar.

Klaster B (o‘rta / standart)

Dvigatel quruvchi

Delta-Time ($\Delta t$) tushunchasini to‘liq tushunadi. JavaScript ES6+ sintaksisiga ega. Monitor chastotasining (60Hz / 144Hz) fizik tezlikka ta’sirini anglaydi.

O‘quv trayektoriyasi: Glenn Fiedler akkumulyatorli tsiklini kodlash, Alpha holat interpolyatsiyasi va Retina High-DPI Canvas moslashuvi.

Klaster C (Ilg‘or / Research)

Tadqiqotchi

Xotira boshqaruvi, Garbage Collection (GC) pauzalari, Web Workers va OffscreenCanvas ko‘p oqimli arxitekturasi bilan tanish.

O‘quv trayektoriyasi: Dirty Rectangles, Multi-layer Canvas, Object Pooling (Zero-GC dvigateli) va Web Workers rendering tadqiqoti.

🗺️ 4 Haftalik adaptiv Canvas arxitekturasi yo‘l xaritasi:

Bosqich Hafta Klaster A (boshlang‘ich) Klaster B (standart) Klaster C (ilg‘or) Baholash mezonlari
1-Hafta Canvas Asoslari va rAF Canvas 2D primitivlari va oddiy `requestAnimationFrame` tsikli Delta-Time hisobi va fizik tezlikni vaqtga bog‘lash Retina High-DPI masshtablash va sub-pixel tekislash Kadrlar silliqligi (60 FPS)
2-Hafta Akkumulyator va Barqarorlik O‘zgaruvchan dt muammolarini (Tunneling) kuzatish Glenn Fiedler "Fix Your Timestep" akkumulyatorini joriy etish Spiral of Death himoyasi va Alpha interpolyatsiyasi Fizik determinizm (100%)
3-Hafta Optimizatsiya va Xotira Kadrni tozalash va to‘qnashuvlar chegarasi Object Pooling joriy etib, GC mikro-pauzalarini yo‘qotish Dirty Rectangles va Multi-layer Canvas arxitekturasi Jank kadrlar soni (< 1%)
4-Hafta Capstone va Telemetriya 50 ta elastik to‘p simulyatsiyasini yig‘ish Real vaqtli FPS/Frame Pacing HUD telemetriyasini qurish OffscreenCanvas Web Worker ko‘p oqimli dvigatelini himoya qilish Akademik loyiha himoyasi
MagicSchool AI uchun Moslashtirilgan Diagnostika Prompti
Sen Oliy ta’lim hisoblash fizikasi va kompyuter grafikasi metodistisan. Talabalarning "HTML5 Canvas Fizik Animatsiya Arxitekturasi" bo‘yicha tayyorgarligini aniqlash uchun 5 ta kognitiv test savoli ishlab chiq: 1) requestAnimationFrame va setInterval o‘rtasidagi apparat darajasidagi farq, 2) O‘zgaruvchan delta-time da nima uchun tebranishlar va devordan o‘tib ketish (tunneling) yuz beradi, 3) Glenn Fiedler akkumulyatori fizik hisoblarni qanday barqarorlashtiradi, 4) Alpha interpolyatsiyasi qanday vazifani bajaradi, 5) JavaScript Garbage Collector pauzalarini yo‘qotish uchun Object Pooling qanday qo‘llaniladi. Natijalarni A, B, C klasterlarga ajratib, 4 haftalik laboratoriya rejasini tuz.
2-bosqich: Monitoring va arxitektura

Google Antigravity: dastur arxitekturasi va resurs monitoringi

📚 Dasturiy Muhandislik va O‘yin Dvigatellari Arxitekturasi:

Zamonaviy kompyuter grafikasi va interaktiv tizimlar arxitekturasi qat’iy komponentli modullashuvni talab etadi (Gregory, J., 2018, Game Engine Architecture, 3rd Ed., CRC Press). Google Antigravity agentik tizimi loyiha kodining modulliligini, xotira sarfini (Heap Profiling) va kadrlar barqarorligini avtomatlashtirilgan tarzda kuzatib boradi.

Fizik modellashtirish kodida fizik hisoblar va vizual renderlash qat’iy ajratilishi (Decoupling) zarur. Google Antigravity quyidagi 4 ta asosiy quyi tizimni shakllantiradi:

🏗️ Modulli dasturiy quyi tizimlar:

  • 1. CoreEngine (bosh boshqaruvchi): Kadrlar tsikli (`loop`), vaqt hisobi (`performance.now()`) va holatlar mashinasi (Play, Pause, Reset, Step).
  • 2. PhysicsSubsystem (fizik quyi tizim): Qat’iy qadamli integrator ($\Delta t_{\text{fixed}} = 1/60\text{ s}$), kuchlar yig‘indisi, Nyuton mexanikasi va to‘qnashuvlar.
  • 3. RenderSubsystem (grafik tizim): Canvas 2D kontekstida alpha-interpolyatsiya bilan chizish, Retina High-DPI masshtablash.
  • 4. TelemetryHUD (monitoring): Real vaqtli FPS, Frame Time, Jank kadrlari va xotira monitoringi.

📊 Animatsiya konveyeri (pipeline)

HTML5 Canvas Animation Loop Pipeline

🛡️ Antigravity resurs va xotira monitoringi qoidalari:

1. Kadr byudjeti (16.66 ms):
60 FPS barqarorligi uchun kadrning umumiy vaqti (Fizika + Render) $16.66\text{ ms}$ dan oshmasligi shart.
2. Heap memory chiziqliligi:
Animatsiya tsikli ichida yangi massivlar yoki obyektlar yaratilmasligi, xotira sarfi gorizontal to‘g‘ri chiziq bo‘lishi lozim.
3. Jank (qotish) indikatori:
Agar kadr vaqti $33.3\text{ ms}$ dan oshsa, Antigravity monitoringi avtomatik qizil ogohlantirish qayd etadi.
3-bosqich: Matematik va algoritmik mantiq

Glenn Fiedler "Fix Your Timestep" akkumulyatori va delta-time integratsiyasi

📚 Ilmiy Nashr va Standart:

Interaktiv fizik tizimlarda vaqtni qat’iy diskretlash konsepsiyasi Glenn Fiedler (2004, "Fix Your Timestep!", Gaffer on Games) tomonidan asoslab berilgan. Ushbu algoritm fizik dvigatel hisob-kitoblarini apparat monitorining yangilanish chastotasidan to‘liq ajratadi va simulyatsiyaning deterministik barqarorligini ta’minlaydi.

Oddiy o‘zgaruvchan vaqt qadami (`x += v * dt`) qo‘llanilganda, kompyuterdagi tasodifiy kechikish (lag) vaqtida $dt$ kattalashib, jismlar devor ichidan o‘tib ketadi (Tunneling effekti) yoki tizim energiyasi portlaydi. Glenn Fiedler akkumulyatori bu muammoni to‘liq hal qiladi:

Fixed va Variable Timestep

📐 Matematik apparat va algoritm:

1. Vaqt to‘plash (accumulator): $$\text{accumulator} \mathrel{+}= \min(\Delta t_{\text{frame}}, 0.25)$$ (0.25 s chegarasi "O‘lim spirali" — Spiral of Death ning oldini oladi).

2. Qat’iy qadamlar bilan yutish (consumption): $$\text{while } (\text{accumulator} \ge \Delta t_{\text{fixed}}) \implies \begin{cases} \text{updatePhysics}(\Delta t_{\text{fixed}}) \\ \text{accumulator} \mathrel{-}= \Delta t_{\text{fixed}} \end{cases}$$

3. Alpha holat interpolyatsiyasi: $$\alpha = \frac{\text{accumulator}}{\Delta t_{\text{fixed}}}, \quad x_{\text{render}} = x_{\text{prev}}(1 - \alpha) + x_{\text{curr}}\alpha$$

🛡️ Claude tomonidan ishlab chiqilgan tsikl:

let lastTime = performance.now();
let accumulator = 0;
const fixedDelta = 1 / 60;

function loop(currentTime) {
  let frameTime = (currentTime - lastTime) / 1000;
  lastTime = currentTime;
  if (frameTime > 0.25) frameTime = 0.25;
  accumulator += frameTime;

  while (accumulator >= fixedDelta) {
    physics.update(fixedDelta);
    accumulator -= fixedDelta;
  }

  const alpha = accumulator / fixedDelta;
  render(alpha);
  requestAnimationFrame(loop);
}
4-bosqich: Ishlash tezligi va xotira

Kadr chastotasi optimizatsiyasi: ChatGPT Code Interpreter tahlili

📚 Veb Grafikasi Standarti va MDN Spetsifikatsiyasi:

MDN Web Docs (2024, Optimizing HTML5 Canvas) hamda W3C HTML5 2D Canvas Context standartlariga muvofiq, yuqori zichlikdagi zarrachalar simulyatsiyasida kadr tushib ketishi (Frame Drop) CPU va GPU o‘rtasidagi ma’lumotlar o‘tkazuvchanligi va Garbage Collection (GC) to‘xtalishlari tufayli sodir bo‘ladi.

Canvas Optimization Performance

1. Object Pooling (zero-GC)

Animatsiya tsikli ichida har bir kadrda new Vector() yoki yangi zarracha yaratish qat’iyan man etiladi. Obyektlar massivdan olinadi va qaytariladi, bu GC mikro-pauzalarini 0 ga tushiradi.

2. Multi-layer Canvas (qatlamlash)

Statik fon panjara chiziqlari pastki Canvas qatlamiga 1 marta chiziladi. Dinamik zarrachalar esa ustki shaffof qatlamda yangilanadi. Ortiqcha chizishlar 70% ga qisqaradi.

3. Butun sonli koordinatalar

Kasr koordinatalar (masalan, 14.73px) brauzerni qimmat anti-aliasing hisoblariga majbur qiladi. Koordinatalarni (x | 0) yoki Math.round orqali yaxlitlash kadr tezligini 20% oshiradi.

5-bosqich: Vizual sinov va Retina

Claude (Artifacts): Retina high-DPI masshtablash va vizual sinov

📚 Retina va HiDPI Displey Standartlari:

Zamonaviy mobil va noutbuk ekranlarida piksellar zichligi koeffitsiyenti Device Pixel Ratio ($DPR \ge 2$) ga teng. Standart Canvas piksel buferi o‘lchami CSS o‘lchamiga teng bo‘lsa, tasvir 4 barobar xiralashadi. Claude Artifacts muhitida ushbu muammo dinamik piksellar adapteri orqali bartaraf etiladi.

📱 Retina High-DPI adapter kodi:

function setupHighDPICanvas(canvas, ctx) {
  const dpr = window.devicePixelRatio || 1;
  const rect = canvas.getBoundingClientRect();

  // 1. Ichki piksel buferini kengaytirish:
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;

  // 2. Grafik kontekstni masshtablash:
  ctx.scale(dpr, dpr);

  // 3. CSS o‘lchamini mustahkamlash:
  canvas.style.width = `${rect.width}px`;
  canvas.style.height = `${rect.height}px`;
}

🔍 Standart va Retina high-DPI sifat

Retina High DPI Canvas Scaling
Jonli laboratoriya

Canvas fizik animatsiyasi arxitekturasining interaktiv laboratoriyasi

📈 Kadr vaqtlari grafigi (oxirgi kadrlar, ms): Yashil: <18 ms (60 FPS) | Sariq: 18–25 ms | Qizil: >25 ms (qotish)

🎛️ Dvigatel rejimlari va parametrlari:

Kadr tezligi cheklovi (FPS): Cheklovsiz (V-Sync)
Sun’iy protsessor yuklamasi (kechikish): 0,0 ms
Zarrachalar soni: 50 ta

📊 Real vaqtdagi telemetriya:

Renderlash chastotasi:
60 FPS
Fizika chastotasi:
60 Hz
Kadr vaqti ($\Delta t$):
16,6 ms
Akkumulyator:
0,0 ms
Fizik qadamlar / kadr:
1
Qotishlar soni:
0
O‘z-o‘zini baholash

7-ma’ruza diagnostika testi (3 ta ilmiy savol)

HTML5 Canvas fizik animatsiya arxitekturasi, delta-time va kadrlar optimizatsiyasi bo‘yicha bilimlaringizni sinab ko‘ring:

1-savol: Glenn Fiedlerning "Fix Your Timestep" akkumulyatorli arxitekturasida nima sababdan fizik qadam $\Delta t_{\text{fixed}} = 1/60\text{ s}$ qat’iy saqlanadi?

⚪ A) Chunki kompyuter ekrani faqat 60 FPS da ishlay oladi
⚪ B) Fizik hisoblarni renderlash kadr chastotasidan (FPS) to‘liq mustaqil qilib, lag vaqtida devordan o‘tib ketish (tunneling) va energiya portlashining oldini olish uchun
⚪ C) Chunki JavaScript faqat butun sonlar bilan ishlaydi

2-savol: Yuqori yuklamali HTML5 Canvas animatsiyalarida Object Pooling (obyektlar havzasi) qo‘llashning asosiy maqsadi nima?

⚪ A) Har bir kadrda yangi obyektlar yaratishni to‘xtatib, Garbage Collector (GC) keltirib chiqaradigan mikro-qotishlarni (Jank) 0 ga tushirish
⚪ B) Canvas ekranini kattalashtirish
⚪ C) Internet tezligini oshirish

3-savol: Retina va HiDPI ekranlarda (Device Pixel Ratio $DPR \ge 2$) Canvas elementining xiralashib qolmasligi uchun qanday chora ko‘riladi?

⚪ A) `canvas.width` va `height` piksellar buferi $DPR$ ga ko‘paytiriladi va `ctx.scale(dpr, dpr)` orqali masshtablanadi
⚪ B) Ekran yorug‘ligi oshiriladi
⚪ C) Faqat qora-oq ranglardan foydalaniladi

📚 7-ma’ruza bo‘yicha ilmiy-uslubiy adabiyotlar ro‘yxati:

  1. Fiedler, G. (2004). Fix your timestep! Gaffer on Games. (Physics loop decoupling and accumulator algorithms).
  2. Gregory, J. (2018). Game Engine Architecture (3rd ed.). CRC Press. (Game loop architecture, frame pacing, fixed va variable timesteps).
  3. Mozilla Developer Network (MDN). (2024). Optimizing Canvas Performance. MDN Web Docs.
  4. W3C. (2023). HTML Canvas 2D Context Specification. World Wide Web Consortium.
  5. Anderson, L. W., va Krathwohl, D. R. (2001). A Taxonomy for Learning, Teaching, and Assessing. Longman.
  6. Vygotsky, L. S. (1978). Mind in Society: The Development of Higher Psychological Processes. Harvard University Press.
  7. Hairer, E., Lubich, C., va Wanner, G. (2006). Geometric Numerical Integration: Structure-Preserving Algorithms. Springer.
  8. Halliday, D., Resnick, R., va Walker, J. (2018). Fundamentals of Physics (11th ed.). Wiley.