Halo sobat Webbiz kali ini kami akan share bagaimana Membuat Kalkulator Centroid dengan JavaScript. Pada aplikasi ini user bisa memilih berapa dimensi yang ingin dihitung (2-4 dimensi)
Centroid (titik berat) dari sebuah benda atau bentuk adalah titik di mana seluruh massa atau luas dari bentuk tersebut dapat dianggap terkonsentrasi. Pada geometri bidang (2D), centroid sering kali dihitung untuk bentuk segitiga, persegi, atau bangun lainnya.
Kalkulator Centroid
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Centroid</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: #f8f9fa;
}
.container {
width: 500px;
margin: 30px auto;
padding: 30px 20px;
background-color: #f2f2f2;
}
.result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Kalkulator Centroid</h2>
<div class="form-group">
<label for="dimensi">Pilih Dimensi:</label>
<select class="form-control" id="dimensi" onchange="updateInputFields()">
<option value="2">2 Dimensi</option>
<option value="3">3 Dimensi</option>
<option value="4">4 Dimensi</option>
</select>
</div>
<div id="inputFields"></div>
<button class="btn btn-primary" onclick="calculateCentroid()">Hitung Centroid</button>
<div class="result" id="result"></div>
</div>
<script>
function updateInputFields() {
const dimensi = document.getElementById('dimensi').value;
const inputFields = document.getElementById('inputFields');
inputFields.innerHTML = '';
for (let i = 0; i < dimensi; i++) {
inputFields.innerHTML += `
<div class="form-group">
<label for="point${i}">Titik ${i + 1} (${dimensi}D):</label>
<input type="text" class="form-control" id="point${i}" placeholder="Masukkan koordinat, pisahkan dengan koma">
</div>
`;
}
}
function calculateCentroid() {
const dimensi = document.getElementById('dimensi').value;
let sum = Array(parseInt(dimensi)).fill(0);
let count = 0;
for (let i = 0; i < dimensi; i++) {
const point = document.getElementById(`point${i}`).value.split(',').map(Number);
if (point.length === parseInt(dimensi)) {
sum = sum.map((s, index) => s + point[index]);
count++;
}
}
const centroid = sum.map(s => s / count);
document.getElementById('result').innerText = `Centroid: (${centroid.join(', ')})`;
}
</script>
</body>
</html>Cara Menghitung Centroid
Metode yang digunakan untuk menghitung centroid tergantung pada bentuk dari objek tersebut. Berikut adalah cara menghitung centroid untuk beberapa bentuk umum:
Baca juga: Membuat Aplikasi Crop Image menggunakan JavaScript
1. Centroid Segitiga
Centroid segitiga adalah titik pertemuan dari tiga garis berat, yaitu garis yang ditarik dari masing-masing titik sudut ke titik tengah sisi yang berlawanan.
Rumus centroid segitiga diberikan oleh:
Di mana: ((x_1, y_1)), ((x_2, y_2)), ((x_3, y_3)) adalah koordinat dari ketiga titik sudut segitiga.
2. Centroid Persegi Panjang
Centroid persegi panjang adalah titik perpotongan diagonal-diagonalnya. Jika persegi panjang memiliki panjang (l) dan lebar (w), centroidnya terletak di:
3. Centroid Lingkaran
Centroid (atau pusat) lingkaran adalah titik pusat geometrisnya. Jika lingkaran memiliki jari-jari (r) dan pusat berada di ((x_0, y_0)), maka centroidnya adalah:
4. Centroid Bentuk Gabungan
Untuk bentuk gabungan dari beberapa bentuk dasar, centroid dapat dihitung menggunakan metode momen. Jika sebuah bentuk dibagi menjadi beberapa bagian kecil, centroid total dapat dihitung sebagai:
Di mana:
- (A_i) adalah luas setiap bagian.
- (x_i, y_i) adalah koordinat centroid dari setiap bagian tersebut.
Kalkulator Centroid
Saya bisa membantu menghitung centroid jika Anda memberikan bentuk dan informasi detail seperti koordinat sudut, ukuran, atau pembagian dari bentuk gabungan. Jika ada kasus tertentu yang ingin Anda hitung, beri tahu saya bentuk dan datanya!
Semoga bermanfaat…
Leave a Reply