7-laboratoriya mashg‘uloti: web graphics va real-time physics

HTML5 Canvas va JavaScript asosida kadrlar chastotasini (delta-time) hisobga olgan holda oddiy fizik tebranishlar animatsiyasini kodlash

Kompyuter grafikasi va interaktiv fizik modellashtirishning eng muhim poydevori — apparat ekran yangilanishiga (V-Sync) bog‘liq bo‘lmagan, Delta-Time ($\Delta t$) ga asoslangan kadr siklini to‘g‘ri arxitekturalashdir. Mazkur laboratoriya mashg‘ulotida talabalar requestAnimationFrame tsiklini yozadi, delta-timeni aniq o‘lchaydi, tekis va garmonik tebranma harakatlarni kodlaydi hamda Google Antigravity agentlik platformasida AI agentga kadr vaqtini o‘lchovchi test skriptini yozdirib, uning natijalarini (FPS, Jank) tanqidiy tekshiradi.

📋 7-laboratoriya mashg‘uloti rejasi va tahliliy bosqichlari:

1. Diagnostika va shaxsiy reja:
TPACK va ZPD asosida brauzer Event Loop, V-Sync va delta-time bo‘yicha diagnostik test hamda shaxsiy o‘quv trayektoriyasi.

2. Canvas: birinchi kadr sikli:
Canvas 2D konteksti, requestAnimationFrame, timestamp vaqt qadami, Fiedler akkumulyatori (qat’iy fizik qadam) va harakat qonunlari.

3. Google Antigravity monitoring:
AI agent yozgan o‘lchov skripti, kadr vaqti tebranishi (Jank/FPS drop) tahlili va natijalarni talaba tomonidan tekshirish.

4. Claude (Artifacts):
Mustaqil interaktiv Canvas shablonini generatsiya qilish, garmonik tebranishlar differensial tenglamasi va Sokratik audit.

2. HTML5 Canvas: birinchi kadr sikli va delta-time arxitekturasi

Veb-brauzerda silliq 60 kadr/sekund (yoki 120Hz ekranlarda 120 FPS) chastotada fizik jarayonlarni tasvirlash — brauzerning Event Loop va ekranni yangilash (rendering) sikli bilan bog‘liq: requestAnimationFrame chaqiruvlari asosiy oqimda, navbatdagi kadr chizilishidan oldin bajariladi (Lewis, n.d.; WHATWG HTML). Standart CanvasRenderingContext2D muhitida animatsiya quyidagi 3 ta ajralmas bosqichdan iborat:

1. Tozalash (Clear)

ctx.clearRect(0, 0, width, height) chaqirilib, o‘tgan kadrdagi barcha piksellar to‘liq tozalanadi yoki yarim shaffof rang bilan to‘ldirilib harakat izi (motion blur) hosil qilinadi.

2. Fizik yangilanish (Update)

Delta-Time orqali tezlik va koordinata o‘zgaradi: $x_{yangi} = x_{eski} + v_x \cdot \Delta t$. Devorlar bilan elastik to‘qnashuv va chegaraviy shartlar hisoblanadi.

3. Qayta chizish (render)

beginPath(), arc(), fill(), stroke() buyruqlari bilan geometrik jismlar, vektor nayzalari va o‘lchov datchiklari canvas bitmapiga chiziladi (brauzer uni odatda GPU yordamida ekranga chiqaradi).

⏱ Delta-time matematik modeli va Glenn Fiedler qoidasi:

requestAnimationFrame(callback) funksiyasi o‘zining argumenti sifatida millisekundlarda o‘lchanadigan yuqori aniqlikdagi DOMHighResTimeStamp qiymatini uzatadi.

$$\Delta t = \frac{t_{joriy} - t_{oldingi}}{1000} \quad \text{[sekundlarda]}$$ $$\Delta t_{xavfsiz} = \min(\Delta t, 0.1) \quad \text{[«Spiral of Death» oldini olish chegarasi]}$$

Muhim aniqlik: Fiedler (2004) maqolasining asosiy tavsiyasi — fizikani o‘zgaruvchan $\Delta t$ bilan emas, balki qat’iy qadam ($h = 1/60$ s) bilan integratsiyalash: kadrlar orasidagi real vaqt akkumulyatorga qo‘shiladi va undan $h$ qadamlar ayriladi. Kadr vaqtini chegaralash (maqoladagi misolda 0,25 s, bizda 0,1 s) brauzer uzoq qotib qolganda akkumulyatorda qadamlar to‘planib, «o‘lim spirali»ga tushib qolishning oldini oladi. Quyidagi skelet oddiylik uchun o‘zgaruvchan $\Delta t$ dan foydalanadi; akkumulyatorli variant undan keyin keltirilgan.

Monitor chastotasi	Kadrlar vaqti ($\Delta t$)	Kadrga bog‘liq harakat ($x += 5$)	Delta-time bilan harakat ($x += 300 \cdot \Delta t$)
60 Hz (Ofis monitori)	$\approx 16.67\text{ ms}$	Sekundiga 300 piksel	Sekundiga 300 piksel (Etalon)
144 Hz (O‘yin monitori)	$\approx 6.94\text{ ms}$	Sekundiga 720 piksel (2.4 baravar tez!)	Sekundiga 300 piksel (O‘zgarmas!)
30 FPS (Kuchli yuklama/lag)	$\approx 33.33\text{ ms}$	Sekundiga 150 piksel (2 baravar sekin!)	Sekundiga 300 piksel (O‘zgarmas!)

💻 Etalon HTML5 Canvas kadr sikli skeleti (JavaScript):

const canvas = document.getElementById("simCanvas");
const ctx = canvas.getContext("2d");

let lastTime = 0;
let x = 50, y = 100;
let vx = 200, vy = 120; // Tezlik: piksel/sekund
const radius = 15;

function gameLoop(timestamp) {
  if (!lastTime) lastTime = timestamp;
  
  // 1. Delta-time hisoblash (sekundlarda)
  const rawDt = (timestamp - lastTime) / 1000;
  lastTime = timestamp;
  
  // 2. Fiedler xavfsizlik chegarasi (0.1 soniyadan oshmasligi shart)
  const dt = Math.min(rawDt, 0.1);
  
  // 3. Fizik yangilanish (Mustaqil tezlik)
  x += vx * dt;
  y += vy * dt;
  
  // Devorlar bilan elastik to‘qnashuv (jismni chegaraga qaytarib,
  // tezlik yo‘nalishini aniq belgilaymiz — aks holda katta dt da
  // to‘p devorga "yopishib" qolishi mumkin)
  if (x - radius < 0)             { x = radius;                vx =  Math.abs(vx); }
  if (x + radius > canvas.width)  { x = canvas.width - radius;  vx = -Math.abs(vx); }
  if (y - radius < 0)             { y = radius;                vy =  Math.abs(vy); }
  if (y + radius > canvas.height) { y = canvas.height - radius; vy = -Math.abs(vy); }
  
  // 4. Kadrni tozalash va chizish
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = "#38bdf8";
  ctx.fill();
  
  // Keyingi kadrni so‘rash
  requestAnimationFrame(gameLoop);
}

// Siklni boshlash
requestAnimationFrame(gameLoop);

🧮 Fiedler akkumulyatori: qat’iy fizik qadam (Fixed Timestep):

const h = 1 / 60;        // qat’iy fizik qadam (s)
let accumulator = 0;
let last = 0;

function loop(timestamp) {
  if (!last) last = timestamp;
  const frameTime = Math.min((timestamp - last) / 1000, 0.1);
  last = timestamp;

  accumulator += frameTime;
  while (accumulator >= h) {
    update(h);           // fizika har doim bir xil qadam bilan
    accumulator -= h;
  }
  render();              // chizish ekran chastotasida
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Bu usulda natija FPS ga deyarli bog‘liq bo‘lmaydi va takrorlanuvchan bo‘ladi. Fiedler, shuningdek, accumulator / h nisbati bo‘yicha ikki holat orasida interpolyatsiya qilib, harakatni yanada silliq ko‘rsatishni tavsiya qiladi.

3. Kod yozish va jarayon monitoringi: Google Antigravity

Google Antigravity — Google tomonidan 2025-yil noyabrida Gemini 3 bilan birga taqdim etilgan agentlik dasturlash platformasi (IDE). Unda AI agentlar muharrir, terminal va brauzerda vazifalarni rejalashtiradi, bajaradi va natijani tekshirish uchun artefaktlar (reja, skrinshot, hisobot) qoldiradi (Google, 2025). Platformada tayyor «FPS telemetriyasi» moduli yo‘q: quyidagi ko‘rsatkichlarni o‘lchash uchun talaba agentdan performance.now() asosidagi o‘lchov skriptini yozib, ishga tushirishni so‘raydi va natijalarni o‘zi tekshiradi:

📊 1. Jank (kadr tushishi) monitoringi:

60 Hz ekranda kadr vaqti 16,67 ms dan sezilarli oshsa, kadr tushib qolgan (Jank) hisoblanadi. O‘lchov skripti har bir kadr oralig‘ini yozib boradi va bunday kadrlarni sanaydi. Natijalarni Chrome DevTools «Performance» panelidagi yozuv bilan solishtirish tavsiya etiladi.

🛡 2. Object Pooling va xotira auditi:

Kadr sikli ichida har safar new Object() yoki yangi massiv yaratish axlat yig‘uvchi (Garbage Collector — GC) yuklamasini oshiradi va vaqti-vaqti bilan GC pauzalari tufayli kadr tushishiga sabab bo‘lishi mumkin. Agentdan kodni ko‘rib chiqib, sikl ichida ortiqcha obyekt yaratilmasligini (Zero-Allocation Loop) tekshirishni so‘rash mumkin.

⚡ 3. Terminalda avtonom sinov:

Agent Playwright yoki Puppeteer yordamida sahifani ochib, 1000 ta kadr davomida delta-time ning o‘rtacha qiymati va standart chetlanishini ($\sigma$) hisoblovchi test yozishi mumkin. Diqqat: headless brauzerda kadr chastotasi haqiqiy ekrandagidan farq qilishi mumkin, shuning uchun yakuniy o‘lchovlarni oddiy brauzer oynasida takrorlang.

📝 4. Avtomatlashtirilgan hisobot:

Agent kadrlar chastotasi, integratsiya xatoligi va ossilyatorning energiya saqlanish darajasi bo‘yicha hisobot qoralamasini tayyorlaydi. AI agentlar xato qilishi mumkin: raqamlarni o‘zingiz qayta o‘lchab tekshiring, yakuniy xulosani o‘zingiz yozing.

🤖 Google Antigravity agenti uchun monitoring yo‘riqnomasi prompti:

Antigravity agentlik vazifasi (frame pacing va telemetry audit):

Sen Google Antigravity muhitidagi dasturiy tahlil agentisan.
Mening vazifam: HTML5 Canvas va JavaScript yordamida requestAnimationFrame va delta-time asosida ishlovchi fizik kadr siklini yaratish.

Iltimos, mening loyiham bo‘yicha quyidagi monitoring va audit choralarini amalga oshir:
1. KADR SIKLI SINTAKSIK AUDITI: Kodimda requestAnimationFrame to‘g‘ri rekursiv chaqirilganmi? Timestamp parametri to‘g‘ri ushlanganmi?
2. DELTA-TIME XAVFSIZLIK CHEGARASI: dt hisoblashda 0.1 sekundlik maksimal chegara (clamp) qo‘yilganmi? Agar brauzer minimallashtirilsa yoki kompyuter qotsa, "spiral of death" yuzaga kelmaydimi?
3. GARBAGE COLLECTION va ZERO-ALLOCATION: Har bir kadr sikli ichida ortiqcha obyektlar yaratilmayaptimi? GC pauzalari xavfi bormi?
4. AVTOMATLASHTIRILGAN TEST: performance.now() yordamida kadr oraliqlarini yozib boruvchi test skriptini yoz va ishga tushir. 60, 30 va 15 FPS cheklovlarida to‘pning 5 soniyada bosib o‘tgan masofasini o‘lchab, natijalarni jadvalda ko‘rsat va farqini foizda hisobla.
5. Hisobotda qaysi natijalar haqiqatan o‘lchanganini va qaysilari taxmin ekanini alohida belgilab ko‘rsat.

4. Canvas boshlang‘ich shabloni: Claude (Artifacts)

Artifacts — claude.ai interfeysidagi funksiya bo‘lib, 2024-yil iyunida Claude bilan birga taqdim etilgan (Anthropic, 2024) va hozir keyingi Claude modellarida ham mavjud. U yaratilgan kodni alohida oynada ham matn, ham ishlovchi interaktiv ilova sifatida ko‘rsatadi. AI yaratgan kodni ishga tushirib, fizik to‘g‘riligini albatta tekshiring. Quyida oddiy to‘p harakatidan Garmonik Tebranishlar (Prujinali Ossilyator) fizik modeliga o‘tish kodi keltirilgan:

📐 Garmonik ossilyator matematik modeli:

Guk qonuni va Nyutonning 2-qonuni bo‘yicha erkin prujinali tebranishlar differensial tenglamasi:

$$\frac{d^2 x}{dt^2} + \omega_0^2 x = 0, \quad \omega_0 = \sqrt{\frac{k}{m}}$$ $$x(t) = A \cos(\omega_0 t + \phi_0), \quad v(t) = -A \omega_0 \sin(\omega_0 t + \phi_0)$$

Kompyuterda tenglama Eyler–Kromer (yarim-oshkor Eyler) sxemasi bilan diskretlashtiriladi (Cromer, 1981). Oddiy Eyler usulidan farqli ravishda bu sxemada energiya vaqt o‘tishi bilan cheksiz o‘smaydi:

$$v_{n+1} = v_n - \omega_0^2 x_n \, h, \qquad x_{n+1} = x_n + v_{n+1} \, h$$

Claude Artifacts uchun to‘liq ishlovchi komponent:

class HarmonicOscillator {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx = canvas.getContext("2d");
    this.omega = 3.5;    // burchak chastotasi, rad/s
    this.x = 80;         // boshlang‘ich siljish (piksel) = amplituda
    this.v = 0;          // boshlang‘ich tezlik (piksel/s)
    this.h = 1 / 240;    // qat’iy fizik qadam (s)
    this.acc = 0;
    this.lastTime = 0;

    this.loop = this.loop.bind(this);
    requestAnimationFrame(this.loop);
  }

  step(h) {
    // Eyler–Kromer: avval tezlik, keyin yangi tezlik bilan koordinata
    this.v += -this.omega * this.omega * this.x * h;
    this.x += this.v * h;
  }

  loop(timestamp) {
    if (!this.lastTime) this.lastTime = timestamp;
    const dt = Math.min((timestamp - this.lastTime) / 1000, 0.1);
    this.lastTime = timestamp;

    // Fiedler akkumulyatori: fizika FPS dan mustaqil
    this.acc += dt;
    while (this.acc >= this.h) {
      this.step(this.h);
      this.acc -= this.h;
    }

    this.render(this.x);
    requestAnimationFrame(this.loop);
  }

  render(displacement) {
    const w = this.canvas.width;
    const h = this.canvas.height;
    const cy = h / 2;
    const cx = w / 2 + displacement;

    this.ctx.clearRect(0, 0, w, h);

    // Muvozanat chizig‘i
    this.ctx.strokeStyle = "rgba(255,255,255,0.2)";
    this.ctx.lineWidth = 1;
    this.ctx.beginPath();
    this.ctx.moveTo(w / 2, 20);
    this.ctx.lineTo(w / 2, h - 20);
    this.ctx.stroke();

    // Prujina
    this.ctx.strokeStyle = "#38bdf8";
    this.ctx.lineWidth = 2;
    this.ctx.beginPath();
    this.ctx.moveTo(30, cy);
    this.ctx.lineTo(cx, cy);
    this.ctx.stroke();

    // Yuk (to‘p)
    this.ctx.fillStyle = "#a855f7";
    this.ctx.beginPath();
    this.ctx.arc(cx, cy, 16, 0, Math.PI * 2);
    this.ctx.fill();
  }
}

Claude Artifacts generator prompti:

Iltimos, Claude Artifacts muhitida to‘g‘ridan-to‘g‘ri ishga tushuvchi bitta mustaqil HTML5 Canvas komponentini yaratib ber.
Komponentda quyidagilar bo‘lsin:
1. Garmonik tebranma harakat (prujinaga mahkamlangan sharik);
2. requestAnimationFrame, delta-time va qat’iy fizik qadamli akkumulyator (Fiedler usuli), integratsiya uchun Eyler–Kromer sxemasi;
3. Ekranning o‘ng tomonida kadrlar chastotasini sun’iy 60 FPS, 30 FPS va 15 FPS ga o‘zgartiruvchi tugmalar;
4. "Delta-Time bilan" va "Delta-timesiz" holatlarini solishtiruvchi belgilagich (checkbox);
5. Real vaqtli FPS va delta-time o‘lchov datchigi (HUD);
6. To‘liq mexanik energiyani (E = ½kx² + ½mv²) hisoblab ko‘rsatuvchi indikator.
Kod to‘liq zamonaviy ES6 sinflarida va toza o‘zbekcha izohlar bilan taqdim etilsin.

5. Interaktiv dastgoh: kadrlar chastotasi, delta-time va tebranishlar sandboksi

Ushbu interaktiv laboratoriya stendida siz delta-time integratsiyasining ahamiyatini ko‘zingiz bilan ko‘rishingiz mumkin. Ekranning o‘ng tomonidagi sozlamalardan kadrlar chastotasini sun’iy ravishda 60 FPS dan 30 yoki 15 FPS ga tushirib ko‘ring: agar “Delta-time integratsiyasi” yoqilgan bo‘lsa, jismning harakat tezligi zarracha o‘zgarmaydi! Agar uni o‘chirib qo‘ysangiz, fizika har kadrda qat’iy 1/60 s ga suriladi: 15 FPS da to‘p 4 baravar sekinlashadi, 120 Hz ekranda esa (“Cheklovsiz” rejim) 2 baravar tezlashadi (katta xatolik!).

Fizik rejimni tanlash:

Kadrlar chastotasini sun’iy cheklash (FPS):

Harakat tezligi / masshtab: 1,0×

Delta-time integratsiyasi YOQILGAN (to‘g‘ri fizika)

🖥 HTML5 Canvas fizik maydoni requestAnimationFrame

📈 Δt telemetriyasi va ossillograf kadr vaqti tahlili

📊 Jonli datchiklar va kadr telemetriyasi:

Kadrlar chastotasi:
60,0 FPS

Kadr oralig‘i ($\Delta t$):
16,67 ms

Fizik rejim:
2D elastik to‘p

Tezlik ko‘rsatkichi:
1,0×

Holat: Barqaror (FPS ga bog‘liq emas)

6. Akademik baholash rubrikasi (100 ballik tizim) va ilmiy manbalar

🧮 Laboratoriya ishini baholash mezonlari kalkulyatori:

1. HTML5 Canvas kadr sikli va requestAnimationFrame to‘g‘ri tuzilishi:

Ekran yangilanishi (V-Sync) bilan sinxronlashish, clearRect tozalash va keyingi kadrni to‘g‘ri so‘rash.

Max: 25 b.

2. Delta-time ($\Delta t$) va Fiedler akkumulyatori integratsiyasi:

dt hisoblash, millisekunddan sekundga o‘tish, dt ni chegaralash va turli FPS da o‘zgarmas tezlik.

Max: 25 b.

3. Google Antigravity agenti bilan monitoring va telemetriya tahlili:

Jank / Frame drop o‘lchovi, terminal testlari, GC auditi va agent natijalarini mustaqil tekshirish.

Max: 20 b.

4. Claude (Artifacts) shabloni va garmonik tebranishlar:

Prujina ossilyatori differensial tenglamasini diskretlashtirish va modulli ES6 klassi.