Pertama-tama, tambahkan elemen canvas ke dalam dokumen HTML, dan beri id "myCanvas":
Kemudian, dalam script JavaScript, inisialisasikan canvas dan konteksnya dengan cara berikut:
Selanjutnya, kita dapat menggunakan loop untuk menggambar titik-titik pada canvas dan
menghitung nilai persamaan lingkaran pada setiap titik. Jika nilai persamaan mendekati 0, gambar
titik tersebut sebagai bagian dari kurva hati.
Berikut adalah script lengkap untuk membuat kurva hati menggunakan persamaan matematika
(𝑥^2+ 𝑦^2−1)^3−𝑥^2 𝑦^3=0:
Mendapatkan elemen HTML dengan id "myCanvas" yang nantinya akan digunakan sebagai objek
canvas.
Menghitung nilai persamaan lingkaran berdasarkan nilai x dan y pada setiap iterasi.
Jika nilai hasil persamaan lingkaran mendekati 0, maka dilakukan penggambaran titik pada koordinat
x dan y.
ctx.beginPath();
ctx.fillStyle = "black";
ctx.fill();
Menggambar isi dari lingkaran pada koordinat yang telah ditentukan sebelumnya.
Dalam script ini, saya menggunakan loop for untuk menggambar titik-titik pada canvas. Loop ini
berjalan sebanyak empat kali, dari -2 hingga 2 dengan inkrementasi 0,01. Ini berarti setiap titik pada
kurva hati akan digambar menggunakan 10.000 titik.
Saya menghitung nilai persamaan lingkaran pada setiap titik menggunakan persamaan matematika
(𝑥^2+ 𝑦^2−1)^3−𝑥^2 𝑦^3=0. Jika hasil persamaan mendekati 0, itu berarti titik tersebut berada di
dalam kurva hati dan harus digambar.
Terakhir, kita gambar setiap titik dengan menggunakan fungsi arc() pada konteks canvas. Setiap titik
digambar sebagai lingkaran kecil dengan diameter 2 piksel dan warna merah.
Dengan demikian, kurva hati dapat dibuat menggunakan HTML Canvas dan persamaan matematika
(𝑥^2+ 𝑦^2−1)^3−𝑥^2 𝑦^3=0.