Tutorial Cradle Newton – Beragampengetahuan

Anda dapat mendownload kode lengkapnya di sini: cradle.htm atau copy paste dengan mengikuti langkah-langkah di bawah ini.

Mulailah dengan struktur HTML sederhana yang berisi elemen kanvas dan tombol kontrol:

Atur konteks kanvas dan tentukan parameter fisik braket:

const kanvas = document.getElementById(‘kanvas’); const ctx = kanvas.getContext(‘2d’); numBalls konstan = 5; // Jumlah bola dalam buaian const ballRadius = 20; // Radius setiap bola const stringLength = 150; // Panjang bandul const frameY = 50; // Posisi Y pada frame atas const Spacing = ballRadius * 2 + 2; // Jarak antar bola const centerX = canvas.width / 2; // Bagian tengah kanvas biarkan bola = [];biarkan menyeret = null; // melacak bola mana yang diseret

💡Kiat: Bola diberi jarak sedikit lebih besar dari diameternya untuk mencegahnya tumpang tindih saat diam.

Properti bola

Setiap bola merupakan pendulum dengan titik jangkar, sudut, dan kecepatan:

Bola Kelas { Konstruktor (indeks) { this.index = indeks; this.anchorX = centerX + (indeks – 2) * spasi; this.anchorY = bingkai Y; ini.sudut = 0; // sudut arus dari vertikal this.velocity = 0; // kecepatan sudut this.mass = 1; this.stringLength = stringLength; } }

Hitung posisi

Konversi koordinat kutub (sudut) ke koordinat kartesius (x,y):

dapatkan x() { kembalikan ini.anchorX + Math.sin(ini.sudut) * ini.stringLength; } dapatkan y() { kembalikan this.anchorY + Math.cos(this.angle) * this.stringLength; }

Konsep fisik: Kami menggunakan sinus dan cosinus untuk mengubah sudut pendulum menjadi koordinat layar. Sudut 0 berarti bola menggantung lurus ke bawah.

Metode pembaruan

Terapkan fisika pendulum sederhana untuk memperbarui posisi bola di setiap frame:

perbarui(dt) { gravitasi konstan = 0,5; redaman konstan = 0,999; // Hitung percepatan berdasarkan gravitasi let Acceleration = (-gravity / this.stringLength) * Math.sin(this.angle); // Perbarui kecepatan dan terapkan redaman this.velocity += Acceleration * dt; this.velocity *= redaman; // Perbarui sudut this.angle += this.velocity * dt; }

Rumus pendulum:
Percepatan = -(g/L) × sin(θ)

Gambarlah setiap bola dan talinya di kanvas:

draw() { // Gambarkan stringnya ctx.StrokeStyle=”#333″; ctx.lebar garis = 2; ctx.beginPath(); ctx.moveTo(ini.anchorX, ini.anchorY); ctx.lineTo(ini.x, ini.y); ctx.stroke(); // Gambar bolanya ctx.fillStyle=”#4a5568″; ctx.beginPath(); ctx.arc(ini.x, ini.y, ballRadius, 0, Math.PI * 2); ctx.isi(); // Tambahkan efek sorotan 3D ctx.fillStyle=”rgba(255,255,255,0.3)”; ctx.beginPath(); ctx.arc(ini.x – 5, ini.y – 5, ballRadius / 3, 0, Math.PI * 2); ctx.isi(); }

Mendeteksi kapan bola bertabrakan dan mentransfer momentum di antara keduanya:

function detectorCollisions() { for (misalkan i = 0; i < bola.panjang - 1; i++) { const b1 = bola[i]; const b2 = bola[i + 1]; // Hitung jarak antara pusat bola const dx = b2.x - b1.x; const dy = b2.y - b1.y; const dist = Matematika.sqrt(dx * dx + dy * dy); // Jika bola bersentuhan if (dist < ballRadius * 2) { // Kecepatan pertukaran (tumbukan lenting) const temp = b1.velocity; b1.kecepatan=b2.kecepatan; b2. Kecepatan = suhu; } } }

Konsep fisik: Pada tumbukan lenting sempurna antara benda-benda bermassa sama, keduanya hanya bertukar kecepatan. Inilah yang menciptakan Efek Cradle Newton yang ikonik!

Buat loop animasi utama yang memperbarui dan merender semuanya:

Fungsi bernyawa() { const dt = 0,5; // Langkah waktu Fisika // Perbarui semua bola (kecuali bola yang diseret) Balls.forEach(bola => { if (menyeret !== bola) { ball.update(dt); } }); // Periksa detektor tabrakanCollisions(); // Render semuanya draw(); // Minta bingkai berikutnya requestAnimationFrame(animate); }

💡Kiat: requestAnimationFrame Secara otomatis melakukan sinkronisasi dengan kecepatan refresh browser (biasanya 60 FPS) untuk animasi yang halus.

Bersihkan kanvas dan gambar semua elemen:

function draw() { // Hapus kanvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Gambar bingkai atas ctx.strokeStyle=”#2d3748″; ctx.lebar garis = 4; ctx.beginPath(); ctx.moveTo(50,frameY); ctx.lineTo(kanvas.lebar – 50,frameY); ctx.stroke(); // Gambar semua bola ball.forEach(ball => ball.draw()); }

Mouse ditekan – mulai menyeret

canvas.addEventListener(‘mousedown’, e => { const rect = canvas.getBoundingClientRect(); const mx = e.clientX – rect.left; const my = e.clientY – rect.top; // Periksa apakah mouse berada pada bola mana pun untuk (biarkan bola) { const dx = mx – ball.x; const dy = my – ball.y; const distance = Math.sqrt(dx * dx + dy * dy); if (jarak < ballRadius) { Menyeret = bola; // Hentikan pergerakannya} } });

Gerakan mouse – memperbarui posisi bola

canvas.addEventListener(‘mousemove’, e => { if (menyeret) { const rect = canvas.getBoundingClientRect(); const mx = e.clientX – rect.left; const my = e.clientY – rect.top; // Hitung sudut dari titik jangkar ke mouse const dx = mx -dragging.anchorX; const dy = my -menyeret.anchorY;menyeret.sudut = Math.atan2(dx, dy);

Arahkan mouse – lepaskan bola

kanvas.addEventListener(‘mouseup’, () => { seret = nol; }); kanvas.addEventListener(‘mouseleave’, () => { drag = null; });

Tambahkan dukungan layar sentuh yang mirip dengan logika peristiwa mouse:

canvas.addEventListener(‘touchstart’, e => { e.preventDefault(); // Mencegah pengguliran const rect = canvas.getBoundingClientRect(); const touch = e.touches[0]; const mx = touch.clientX – persegi.kiri; const my = touch.clientY – rect.top; for (bola dalam handicap) { const dx = mx – ball.x; const dy = saya – bola.y; if (Matematika.sqrt(dx * dx + dy * dy) < ballRadius) { 拖动 = ball;球.速度 = 0;休息; } } }); canvas.addEventListener('touchmove', e => { e.preventDefault(); if (seret) { const rect = canvas.getBoundingClientRect(); const sentuh = e.sentuhan[0]; const mx = touch.clientX – persegi.kiri; const my = touch.clientY – rect.top; const dx = mx – menyeret.anchorX; const dy = menyeret-saya.anchorY; menyeret.sudut = Math.atan2(dx, dy); } }); canvas.addEventListener(‘touchend’, () => { menyeret = null; }); canvas.addEventListener(‘touchcancel’, () => { seret = null; });

💡Penting: selalu menelepon e.preventDefault() Cegah halaman agar tidak bergulir saat menyeret acara sentuh.

Inisialisasi dudukannya

fungsi init() { bola = []; for (misalkan i = 0; i < numBalls; i++) { bola.push(Bola baru(i)); } } }

Mulai ayunan otomatis

fungsi startSwing(hitungan) { reset(); for (misalkan i = 0; i < hitung; i++) { bola[i].sudut=-0,6; // tarik kembali 0,6 radian} }

atur ulang semua bola

Fungsi reset() { bola.forEach(bola => { bola.sudut = 0; bola.kecepatan = 0; }); }

Terakhir, inisialisasi bola dan mulai loop animasi:

inisialisasi();animasi();

• Tambahkan massa bola yang berbeda untuk melihat tumbukan asimetris
• Peregangan string yang diterapkan untuk fisika yang lebih realistis
• Tambahkan efek suara tabrakan
• Izinkan pengguna untuk menambah/menghapus bola secara dinamis
• Tambahkan jejak di belakang bola untuk memvisualisasikan gerakan
• Menerapkan bahan berbeda dengan elastisitas berbeda (logam, karet, dll.)