Berikut ini contoh cara menggambar model atom Bohr Al (konfigurasi 2-8-3) yang dibuat dengan p5.js single html. Untuk mempraktikan boleh menggunakan notepad, atau notepad ++ atau yang sejenis. Salin kode dan lakukan ubahan seperlunya, kemudian simpan sebagai file html dengan nama tertentu.
Sila klik salin kode di bawah ini. Tersedia 2 model, model statis dan model animatif. File ini memang membutuhkan koneksi internet, kecuali script js dari p5.js diunduh dan disertakan dalam file ini maka dapat dijalankan secara offline.
Contoh bentuk jadinya sebagai berikut.
Model Atom Bohr Aluminium (Statis)
Kode yang dapat disalin sebagai berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Model Atom Bohr untuk Al (Statis)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>
</head>
<body>
<script>
// Inisialisasi kanvas dan pengaturan awal
function setup() {
createCanvas(400, 400); // Membuat kanvas 400x400 piksel
angleMode(DEGREES); // Menggunakan derajat untuk sudut
textAlign(CENTER, CENTER); // Mengatur teks ke tengah secara horizontal dan vertikal
noLoop(); // Menghentikan animasi, membuat gambar statis
}
function draw() {
background(255); // Latar belakang putih
translate(width / 2, height / 2); // Memindahkan titik asal ke tengah kanvas
// Menggambar inti atom (proton + neutron)
fill(255, 0, 0); // Warna merah untuk inti
noStroke(); // Tanpa garis tepi
ellipse(0, 0, 50, 50); // Lingkaran inti dengan diameter 50px (cukup besar)
// Menambahkan lambang "Al" di tengah inti
fill(255); // Warna putih untuk teks
textSize(20); // Ukuran teks 20px
text("Al", 0, 0); // Teks "Al" di pusat inti
// Fungsi untuk menggambar orbit garis putus-putus
function drawDashedOrbit(radius, segments, dashLength) {
noFill(); // Tanpa isi
stroke(150); // Garis abu-abu
strokeWeight(1); // Ketebalan garis 1px
for (let i = 0; i < segments; i++) {
let angleStart = i * (360 / segments); // Sudut awal segmen
let angleEnd = (i + 0.5) * (360 / segments); // Sudut akhir segmen
arc(0, 0, radius * 2, radius * 2, angleStart, angleEnd); // Gambar busur
}
}
// Menggambar tiga orbit sesuai kulit elektron Al (K, L, M)
drawDashedOrbit(60, 20, 10); // Orbit kulit K (1s², 2 elektron)
drawDashedOrbit(90, 30, 10); // Orbit kulit L (2s² 2p⁶, 8 elektron)
drawDashedOrbit(120, 40, 10); // Orbit kulit M (3s² 3p¹, 3 elektron)
// Menggambar elektron (total 13 elektron, posisi statis)
fill(0, 0, 255); // Warna biru untuk elektron
noStroke(); // Tanpa garis tepi
// Kulit K: 2 elektron (posisi pada sudut 0° dan 180°)
ellipse(60 * cos(0), 60 * sin(0), 16, 16); // Elektron 1
ellipse(60 * cos(180), 60 * sin(180), 16, 16); // Elektron 2
// Kulit L: 8 elektron (disusun setiap 45 derajat)
for (let i = 0; i < 8; i++) {
let angleL = i * 45; // Sudut per elektron
ellipse(90 * cos(angleL), 90 * sin(angleL), 16, 16); // Gambar elektron
}
// Kulit M: 3 elektron (disusun setiap 120 derajat)
for (let i = 0; i < 3; i++) {
let angleM = i * 120; // Sudut per elektron
ellipse(120 * cos(angleM), 120 * sin(angleM), 16, 16); // Gambar elektron
}
}
</script>
</body>
</html>Contoh bentuk jadinya sebagai berikut.
Model Atom Bohr Aluminium (Animatif)
Kode yang dapat disalin sebagai berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Model Atom Bohr untuk Al</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>
</head>
<body>
<script>
// Inisialisasi kanvas dan pengaturan awal
function setup() {
createCanvas(400, 400); // Membuat kanvas 400x400 piksel
angleMode(DEGREES); // Menggunakan derajat untuk sudut
textAlign(CENTER, CENTER); // Mengatur teks ke tengah secara horizontal dan vertikal
}
function draw() {
background(255); // Latar belakang putih
translate(width / 2, height / 2); // Memindahkan titik asal ke tengah kanvas
// Menggambar inti atom (proton + neutron)
fill(255, 0, 0); // Warna merah untuk inti
noStroke(); // Tanpa garis tepi
ellipse(0, 0, 50, 50); // Lingkaran inti dengan diameter 50px (lebih besar)
// Menambahkan lambang "Al" di tengah inti
fill(255); // Warna putih untuk teks
textSize(20); // Ukuran teks 20px
text("Al", 0, 0); // Teks "Al" di pusat inti
// Fungsi untuk menggambar orbit garis putus-putus
function drawDashedOrbit(radius, segments, dashLength) {
noFill(); // Tanpa isi
stroke(150); // Garis abu-abu
strokeWeight(1); // Ketebalan garis 1px
for (let i = 0; i < segments; i++) {
let angleStart = i * (360 / segments); // Sudut awal segmen
let angleEnd = (i + 0.5) * (360 / segments); // Sudut akhir segmen
arc(0, 0, radius * 2, radius * 2, angleStart, angleEnd); // Gambar busur
}
}
// Menggambar tiga orbit sesuai kulit elektron Al (K, L, M)
drawDashedOrbit(60, 20, 10); // Orbit kulit K (1s², 2 elektron)
drawDashedOrbit(90, 30, 10); // Orbit kulit L (2s² 2p⁶, 8 elektron)
drawDashedOrbit(120, 40, 10); // Orbit kulit M (3s² 3p¹, 3 elektron)
// Menggambar elektron (total 13 elektron)
fill(0, 0, 255); // Warna biru untuk elektron
noStroke(); // Tanpa garis tepi
let speed = 1; // Kecepatan rotasi elektron
// Kulit K: 2 elektron
let angleK1 = frameCount * speed; // Sudut elektron pertama
let angleK2 = frameCount * speed + 180; // Sudut elektron kedua (berlawanan)
ellipse(60 * cos(angleK1), 60 * sin(angleK1), 16, 16); // Elektron 1
ellipse(60 * cos(angleK2), 60 * sin(angleK2), 16, 16); // Elektron 2
// Kulit L: 8 elektron (disusun setiap 45 derajat)
for (let i = 0; i < 8; i++) {
let angleL = frameCount * speed * 0.8 + i * 45; // Sudut per elektron
ellipse(90 * cos(angleL), 90 * sin(angleL), 16, 16); // Gambar elektron
}
// Kulit M: 3 elektron (disusun setiap 120 derajat)
for (let i = 0; i < 3; i++) {
let angleM = frameCount * speed * 0.6 + i * 120; // Sudut per elektron
ellipse(120 * cos(angleM), 120 * sin(angleM), 16, 16); // Gambar elektron
}
}
</script>
</body>
</html>
Tidak ada komentar:
Posting Komentar