https://github.com/4211421036/hbd
HAPPY BIRTHDAY: Happy Birthday Animation created using Javascript automation generation files
https://github.com/4211421036/hbd
animation csp galih happy-birthday hbd js ridho secure utomo
Last synced: about 1 month ago
JSON representation
HAPPY BIRTHDAY: Happy Birthday Animation created using Javascript automation generation files
- Host: GitHub
- URL: https://github.com/4211421036/hbd
- Owner: 4211421036
- License: mit
- Created: 2025-01-20T07:56:03.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-04-07T16:28:28.000Z (about 1 month ago)
- Last Synced: 2025-04-07T16:39:50.298Z (about 1 month ago)
- Topics: animation, csp, galih, happy-birthday, hbd, js, ridho, secure, utomo
- Language: JavaScript
- Homepage: https://4211421036.github.io/hbd/
- Size: 7.47 MB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# HBD Package Gem Ruby
**HBD Gem Ruby** adalah sebuah Ruby Gem yang menyediakan animasi kembang api untuk merayakan ulang tahun. Gem ini dirancang untuk memudahkan pengguna dalam menambahkan efek visual yang menarik ke dalam halaman web anda.
## Fitur Utama
- Animasi kembang api yang indah dan interaktif.
- Mudah diintegrasikan ke dalam proyek Ruby on Rails atau aplikasi web lainnya.
- Dukungan untuk tema gelap dan terang.
- Praktis dan ringan, tidak memerlukan dependensi tambahan yang berat.
## Formulasi
#### Properti
- **`target`**: Posisi target kembang api (koordinat `x` dan `y`).
- **`startingX`**: Posisi awal kembang api pada sumbu `x`, dihitung secara acak dalam rentang `[100, window.innerWidth - 100]`.
- **`vel`**: Vektor kecepatan kembang api, dihitung menggunakan metode `velVector()`.
- **`pos`**: Posisi saat ini kembang api (`x` dan `y`).
- **`colours`**: Array warna yang mungkin untuk kembang api.
- **`colour`**: Warna kembang api yang dipilih secara acak dari array `colours`.
- **`explosionParticles`**: Array partikel yang dihasilkan saat kembang api meledak.
- **`exploded`**: Status apakah kembang api sudah meledak atau belum.
---
#### Formulasi
### 1. **Metode `velVector()`**
Metode ini menghitung vektor kecepatan kembang api berdasarkan posisi target.
#### Formulasi
1. **`vel`**: Kecepatan konstan (10).
2. **`xDir`**: Jarak horizontal antara target dan posisi awal (`target.x - startingX`).
3. **`yDir`**: Jarak vertikal antara target dan posisi awal (`target.y - window.innerHeight`).
4. **`scale`**: Faktor skala untuk menormalkan vektor kecepatan:
$$
\text{scale} = \frac{(\text{xDir}^2 + \text{yDir}^2)}{\text{vel}^2}
$$
5. **`xVel`**: Komponen kecepatan horizontal:
$$\text{xVel} = \sqrt{\frac{\text{xDir}^2}{\text{scale}}}$$
6. **`yVel`**: Komponen kecepatan vertikal:
$$\text{yVel} = \sqrt{\frac{\text{yDir}^2}{\text{scale}}}$$
7. Jika `xDir < 0`, arah horizontal dibalik (`xVel *= -1`).
#### Output
- Vektor kecepatan dengan komponen `x` dan `y`:
$$\text{vel}_{x} = \{ x: \text{xVel}\},$$
$$\text{vel}_{y} = \{ y: -\text{yVel} \}$$
---
### 2. **Metode `step()`**
Metode ini mengupdate posisi kembang api dan menangani ledakan.
#### Logika
1. Jika posisi kembang api (`pos.y`) masih di atas target (`target.y`):
- Update posisi kembang api:
$$\text{pos.x} += \text{vel.x}$$
$$\text{pos.y} += \text{vel.y}$$
- Gambar titik kembang api dengan warna dan ketebalan tertentu.
2. Jika kembang api mencapai atau melewati target:
- Jika belum meledak (`exploded == false`), panggil metode `explode()`.
- Update posisi dan kecepatan partikel ledakan:
$$\text{particle.x} += \text{particle.velX}$$
$$\text{particle.y} += \text{particle.velY}$$
$$\text{particle.velY} += 0.05 \quad (\text{gravitasi})$$
- Hapus partikel jika keluar dari layar.
## Instalasi
Tambahkan baris berikut ke dalam `Gemfile` aplikasi Anda:
```ruby
source "https://rubygems.pkg.github.com/4211421036" do
gem "hbd"
end
```
Kemudian jalankan perintah:
```bash
bundle install
```
Atau instal secara manual menggunakan:
Cari module package yang anda ingin install
```bash
gem search hbd --source https://rubygems.pkg.github.com/4211421036
```
Pilih module tersebut dengan cara menginstall
```bash
gem install rl_hiya_hbd --version "0.0.2"
```
```bash
gem install my_string_extend_hbd --version "0.0.1"
```
## Penggunaan
Tambahkan kode ini ke dalam file HTML anda:
```html
Selamat Ulang Tahun!
:root{--background:radial-gradient(100% 193.51% at 100% 0%, rgb(237, 244, 248) 0%, rgb(239, 242, 250) 16.92%, rgb(250, 239, 246) 34.8%, rgb(250, 230, 242) 48.8%, rgb(250, 240, 247) 63.79%, rgb(241, 241, 251) 81.34%, rgb(240, 244, 248) 100%);--text-light:#333333;--input-border-light:#dddddd;--input-bg-light:#ffffff;--placeholder-light:rgba(255,255,255,0.5);--background-dark:#1e1e1e;--text-dark:#ffffff;--input-border-dark:#404040;--input-bg-dark:#2d2d2d;--placeholder-dark:rgba(0,0,0,0.5);--transition-speed:0.3s}@media (prefers-color-scheme:dark){:root{color-scheme:dark;--background:var(--background-dark);--text:var(--text-dark);--input-border:var(--input-border-dark);--input-bg:var(--input-bg-dark);--placeholder:var(--placeholder-dark)}}@media (prefers-color-scheme:light){:root{color-scheme:light;--background:var(--background-light);--text:var(--text-light);--input-border:var(--input-border-light);--input-bg:var(--input-bg-light);--placeholder:var(--placeholder-light)}}body{margin:0;overflow:hidden;background:var(--background);color:var(--text)}@media (prefers-color-scheme:dark){body{background:var(--background);color:var(--text)}}@keyframes skeletonLoading{0%{opacity:.7}50%{opacity:.5}100%{opacity:.7}}.skeleton-animation{animation:skeletonLoading 1.5s infinite}// Di dalam bagian style input[type=text i]::placeholder{color:var(--placeholder);opacity:.1;transition:opacity var(--transition-speed) ease;contain:style layout;content-visibility:auto;font-display:swap}input#placeholder::-webkit-input-placeholder{display:none!important;color:transparent}input[type=text i]:focus::placeholder{opacity:.7}input[type=text i]:focus{outline:0;border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(76,175,80,.2)}@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}"serviceWorker"in navigator&&navigator.serviceWorker.register("/hbd/sw.js").then(e=>console.log("Service worker registered")).catch(e=>console.log("Service worker not registered",e)),console.log("Generated automatic on: 2/15/2025, 12:28:51 AM")document.addEventListener("DOMContentLoaded",()=>{if(!document.querySelector("#id-c5803a6e")){let e=document.createElement("a");e.href="#defaultCanvas0",e.id="id-104c3ca5",e.textContent="Skip to main content",e.style.position="absolute",e.style.top="-40px",e.style.left="10px",e.style.background="#fff",e.style.color="#000",e.style.padding="5px",e.style.zIndex="1004",e.style.transition="top 0.3s",e.addEventListener("focus",()=>{e.style.top="10px"}),e.addEventListener("blur",()=>{e.style.top="-40px"}),document.body.prepend(e)}let e=document.createElement("div"),t=(e.id="id-3eb3175e",e.role="progressbar",e.title="progressbar",e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.width="0%",e.style.height="3px",e.style.background="#29d",e.style.zIndex="9999",e.style.transition="width 0.2s ease-in-out",document.body.appendChild(e),0),d=setInterval(()=>{(t+=10*Math.random())<90&&(e.style.width=t+"%")},200);window.addEventListener("load",()=>{clearInterval(d),e.style.width="100%",setTimeout(()=>{e.style.opacity="0"},500)})})
```
## Kontribusi
Kami sangat menghargai kontribusi dari komunitas. Jika Anda ingin berkontribusi, silakan ikuti langkah-langkah berikut:
1. Fork repositori ini.
2. Buat branch baru (`git checkout -b fitur-baru`).
3. Commit perubahan Anda (`git commit -am Menambahkan fitur baru`).
4. Push ke branch (`git push origin fitur-baru`).
5. Buat Pull Request.
## Lisensi
Proyek ini dilisensikan di bawah [MIT License](LICENSE.txt).
## Kontak
Jika Anda memiliki pertanyaan atau masukan, jangan ragu untuk menghubungi:
- **Nama**: Galih Ridho Utomo
- **Email**:
- **Website**: [https://4211421036.github.io/hbd](https://4211421036.github.io/hbd)
- **GitHub**: [@4211421036](https://github.com/4211421036)
## Sosial Media
Jika Anda memiliki pertanyaan atau masukan, jangan ragu untuk menghubungi:
- **Instagram**: [https://www.instagram.com/galih_ridho_utomo/](https://www.instagram.com/galih_ridho_utomo/)
- **LinkedIn**: [https://www.linkedin.com/in/galih-ridho-utomo-2493492b0/](https://www.linkedin.com/in/galih-ridho-utomo-2493492b0/)
## Dukungan
Jika Anda menemukan bug atau memiliki permintaan fitur, silakan buka [issue](https://github.com/4211421036/hbd/issues) di repositori GitHub.
## Sitasi
Jika Anda menggunakan proyek ini dalam penelitian atau publikasi, silakan cantumkan referensi berikut:
```bibtex
@misc{hbd-gem,
author = {Utomo, Galih Ridho},
title = {HBD Package Gem Ruby: Animasi Kembang Api untuk Ulang Tahun},
year = {2025},
howpublished = {\url{https://github.com/4211421036/hbd}},
note = {GitHub repository},
}
```
---
Dibuat dengan ❤️ oleh Galih Ridho Utomo. Selamat menggunakan HBD Gem!