Terkadang Anda berharap bisa kembali ke masa lalu untuk memberi tahu diri Anda yang lebih muda bahwa matematika memang penting! Tapi aku ragu aku akan mendengarkan saat itu. Saya telah bermain dengan trigonometri akhir-akhir ini untuk tujuan animasi dengan kanvas HTML5 dalam contoh khusus ini.

Ini adalah animasi super sederhana: Ini memposisikan busur dengan cara melingkar di sekitar tengah kanvas. Posisi X dan Y dihitung berdasarkan fungsi trigonometri dasar sinus dan kosinus. "SohCahToa". Saya pikir saya mulai mengerti. Tapi entah bagaimana saya tidak tahu cara menggambar persegi di tengah salah satu sisi segitiga.

GIF showing the problem.

let radius = 200;
let angle = 0;
x = centerX + Math.cos(angle) * radius;

ctx.beginPath();
ctx.fillRect(x/2, centerY, 20, 20);

https://codepen.io/melvinidema/pen/wvKPepa?editors=1010

Jadi busur digambar dengan menjumlahkan bagian tengah kanvas dengan rumus pengerjaan ulang: (co)sinus - untuk X = Cos, untuk Y = Sin) dari sudut kali jari-jari lingkaran.

Jika kita hanya mengambil posisi X (garis merah) dan ingin menggambar setengah persegi dari posisi busur. ( Jadi di tengah garis merah ) kita seharusnya bisa membagi posisi X yang baru dihitung dengan dua kan? Tetapi jika saya melakukan itu, bujur sangkar secara ajaib digambar sepenuhnya di luar lingkaran.

Apa yang terjadi? Mengapa berperilaku seperti ini? Dan perhitungan apa yang harus saya gunakan sebagai gantinya agar kotak ditempatkan di tengah garis merah sepanjang animasi?

Terima kasih sebelumnya!

0
Melvin Idema 3 Mei 2020, 16:28

1 menjawab

Jawaban Terbaik

x Anda didefinisikan sebagai:

x = centerX + Math.cos(angle) * radius;

Tapi kalau mau dibagi 2 tinggal dibagi Math.cos(angle) * radius, sedangkan centerX adalah titik nolnya, dan berdiri apa adanya.

Jadi rect harus ditempatkan di:

centerX + Math.cos(angle)/2

Juga, saya pikir akan lebih baik jika Anda mengurangi setengah dari lebar persegi, dan mendapatkan:

centerX + Math.cos(angle)/2 - 10
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let radius = 200;

function frame(angle) {
  const cx = canvas.width / 2,
  cy = canvas.height / 2,
  x = Math.cos(angle) * radius,
  y = Math.sin(angle) * radius;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(cx, cy);
  ctx.lineTo(cx+x, cy+y);
  ctx.lineTo(cx+x, cy);
  ctx.lineTo(cx, cy);
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(cx+x, cy+y, 10, 0, Math.PI*2);
  ctx.fill();
  ctx.fillRect(cx + x/2 - 10, cy - 10, 20, 20);
  ctx.closePath();
  requestAnimationFrame(()=>frame(angle+.03));
}
frame(0)
canvas {
display: block;
max-height: 100vh;
margin: auto;
}
<canvas width="500" height="500"></canvas>
1
Yosef Tukachinsky 3 Mei 2020, 13:54