Skip to content
/ hbd Public

SELAMAT ULANG TAHUN: Happy Birthday Animation yang dibuat menggunakan Javascript automation generation files

4211421036.github.io/hbd/

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.txt
3 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

4211421036/hbd

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4,624 Commits
.github/workflows
.github/workflows
 
 
_site
_site
 
 
lib
lib
 
 
node_modules
node_modules
 
 
spec
spec
 
 
126693cc.js
126693cc.js
 
 
.htaccess
.htaccess
 
 
.ruby-version
.ruby-version
 
 
0056dc3f.js
0056dc3f.js
 
 
0aabff42.js
0aabff42.js
 
 
126693cc.js
126693cc.js
 
 
192x192.png
192x192.png
 
 
198x198.png
198x198.png
 
 
512x512.png
512x512.png
 
 
533210da.js
533210da.js
 
 
58fcdf02.js
58fcdf02.js
 
 
81f270a1.js
81f270a1.js
 
 
99a5361b.js
99a5361b.js
 
 
Gemfile
Gemfile
 
 
HBD.gemspec
HBD.gemspec
 
 
LICENSE
LICENSE
 
 
LICENSE.txt
LICENSE.txt
 
 
README.md
README.md
 
 
Rakefile
Rakefile
 
 
_config.yml
_config.yml
 
 
_headers
_headers
 
 
acf91514.js
acf91514.js
 
 
e85802e3.js
e85802e3.js
 
 
firework.js
firework.js
 
 
firework.min.js
firework.min.js
 
 
google3fbea5d43709d99d.html
google3fbea5d43709d99d.html
 
 
hbd-0.1.0.gem
hbd-0.1.0.gem
 
 
hbd.gemspec
hbd.gemspec
 
 
hbd.jpg
hbd.jpg
 
 
hbd.mp3
hbd.mp3
 
 
index.html
index.html
 
 
main.js
main.js
 
 
main.min.js
main.min.js
 
 
manifest.json
manifest.json
 
 
manifest.webmanifest
manifest.webmanifest
 
 
p5.js
p5.js
 
 
p5.min.js
p5.min.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
robots.txt
robots.txt
 
 
sc.js
sc.js
 
 
sw.js
sw.js
 
 
worker.js
worker.js
 
 
wrangler.toml
wrangler.toml
 
 

Repository files navigation

HBD Package Gem Ruby

HBD Banner

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} $$

  1. xVel: Komponen kecepatan horizontal:

$$\text{xVel} = \sqrt{\frac{\text{xDir}^2}{\text{scale}}}$$

  1. yVel: Komponen kecepatan vertikal:

$$\text{yVel} = \sqrt{\frac{\text{yDir}^2}{\text{scale}}}$$

  1. 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.
  1. 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:

source "https://rubygems.pkg.github.com/4211421036" do
gem "hbd"
end

Kemudian jalankan perintah:

bundle install

Atau instal secara manual menggunakan:

Cari module package yang anda ingin install

gem search hbd --source https://rubygems.pkg.github.com/4211421036

Pilih module tersebut dengan cara menginstall

gem install rl_hiya_hbd --version "0.0.2"
gem install my_string_extend_hbd --version "0.0.1"

Penggunaan

Tambahkan kode ini ke dalam file HTML anda:

<!doctype html><html lang="id" xml-lang="id"><head><meta charset="UTF-8"><title>Selamat Ulang Tahun!</title><link rel="shortcut icon" href="https://4211421036.github.io/g4lihru/987654567.png" type="image/x-icon"><link rel="icon" href="https://4211421036.github.io/g4lihru/987654567.png" type="image/x-icon"><link rel="preload" as="audio" href="https://4211421036.github.io/hbd/hbd.mp3"><link rel="preload" as="image" href="https://4211421036.github.io/hbd/hbd.jpg" type="image/jpg"><link rel="preload" as="image" href="https://4211421036.github.io/g4lihru/987654567.png" type="image/x-icon"><link rel="apple-touch-icon" href="https://4211421036.github.io/g4lihru/987654567.png"><link rel="canonical" href="https://4211421036.github.io/hbd/"><link rel="manifest" href="manifest.webmanifest" crossorigin="use-credentials"><meta name="application-name" content="HBD"><meta name="description" content="Selamat Ulang Tahun!"><meta name="generator" content="HBD"><meta name="bingbot" content="noarchive"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="Selamat Ulang Tahun!"><meta name="robots" content="index, follow"><meta name="author" content="GALIH RIDHO UTOMO"><meta name="color-scheme" content="dark light"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#edf4f8"><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1e1e1e"><meta prefix="og: http://ogp.me/ns#" property="og:title" content="Selamat Ulang Tahun!"><meta prefix="og: http://ogp.me/ns#" property="og:type" content="website"><meta prefix="og: http://ogp.me/ns#" property="og:description" content="Selamat Ulang Tahun!"><meta prefix="og: http://ogp.me/ns#" property="og:site_name" content="Birthday Celebration"><meta prefix="og: http://ogp.me/ns#" property="og:locale" content="id_ID"><meta prefix="og: http://ogp.me/ns#" property="og:url" content="https://4211421036.github.io/hbd/"><meta prefix="og: http://ogp.me/ns#" property="og:image" content="https://4211421036.github.io/hbd/hbd.jpg"><meta prefix="og: http://ogp.me/ns#" property="og:image:secure_url" content="https://4211421036.github.io/hbd/hbd.jpg"><meta prefix="og: http://ogp.me/ns#" property="og:image:type" content="image/jpeg"><meta prefix="og: http://ogp.me/ns#" property="og:image:width" content="1280"><meta prefix="og: http://ogp.me/ns#" property="og:image:height" content="1280"><meta prefix="og: http://ogp.me/ns#" property="og:image:alt" content="Selamat Ulang Tahun"><meta prefix="og: http://ogp.me/ns#" property="og:audio:secure_url" content="https://4211421036.github.io/hbd/hbd.mp3"><meta prefix="og: http://ogp.me/ns#" property="og:audio" content="https://4211421036.github.io/hbd/hbd.mp3"><meta prefix="og: http://ogp.me/ns#" property="og:audio:type" content="audio/mpeg"><meta name="google-site-verification" content="OYdjPwgIjGMAbQd3CGwM_l20jLNRRp84mEl3kw06DMg"><meta name="browsermode" content="no-sensors"><meta name="renderer" content="webkit|ie-comp|ie-stand"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes"><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Strict-Transport-Security" content="max-age=31536000; includeSubDomains; preload"><meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin"><meta http-equiv="X-Content-Type-Options" content="nosniff"><meta http-equiv="Referrer-Policy" content="strict-origin"><meta http-equiv="Content-Security-Policy" content="style-src self nonce-HhAt8acqxJncfl1zuPdmPQ== unsafe-inline https://4211421036.github.io http://4211421036.github.io; object-src none; base-uri self; img-src self data: https://4211421036.github.io http://4211421036.github.io; default-src self https://4211421036.github.io http://4211421036.github.io; script-src self unsafe-inline nonce-HhAt8acqxJncfl1zuPdmPQ== strict-dynamic sha384-oC5xZuayjRS/uax42oWTtZprJ3hCwfez8lJZtc0o0ZFSXFSPiTZhvRM7lkCzIE3g sha384-8qhZECEumeO9WOzyEYb5gr73cuUk9ld2zhRe5Ki/sysPTiTeeAMR23/YLcdLSDtr sha384-pQqoOFthVCMylNYJ0GyFMb4dBC/qyE3q/5wDxDKyjxqQpaLEFQjxiFmmlV6guegT https://4211421036.github.io http://4211421036.github.io;; font-src self https://4211421036.github.io http://4211421036.github.io; media-src self https://4211421036.github.io http://4211421036.github.io; connect-src self https://4211421036.github.io http://4211421036.github.io; form-action self; manifest-src self https://4211421036.github.io http://4211421036.github.io; worker-src self blob: https://4211421036.github.io http://4211421036.github.io"><meta http-equiv="Expires" content="0"><meta http-equiv="content-language" content="id"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@ITBGRU"><meta name="twitter:creator" content="@ITBGRU"><meta name="twitter:title" content="Selamat Ulang Tahun"><meta name="twitter:description" content="Selamat Ulang Tahun"><meta name="twitter:image" content="https://4211421036.github.io/hbd/hbd.jpg"><meta name="twitter:domain" content="4211421036.github.io"><meta name="twitter:url" content="https://4211421036.github.io/MentalHealth"><meta name="twitter:image:src" content="https://4211421036.github.io/g4lihru/987654567.png"><meta name="twitter:image:alt" content="Mental Health">
<script rel="preload" as="script" src="126693cc.js" nonce="HhAt8acqxJncfl1zuPdmPQ==" integrity="sha384-oC5xZuayjRS/uax42oWTtZprJ3hCwfez8lJZtc0o0ZFSXFSPiTZhvRM7lkCzIE3g" crossorigin="anonymous" defer="defer"></script><script rel="preload" as="script" src="e85802e3.js" nonce="HhAt8acqxJncfl1zuPdmPQ==" integrity="sha384-8qhZECEumeO9WOzyEYb5gr73cuUk9ld2zhRe5Ki/sysPTiTeeAMR23/YLcdLSDtr" crossorigin="anonymous" defer="defer"></script><script rel="preload" as="script" src="58fcdf02.js" nonce="HhAt8acqxJncfl1zuPdmPQ==" integrity="sha384-pQqoOFthVCMylNYJ0GyFMb4dBC/qyE3q/5wDxDKyjxqQpaLEFQjxiFmmlV6guegT" crossorigin="anonymous" defer="defer"></script><style nonce="HhAt8acqxJncfl1zuPdmPQ==">: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}}</style></head><body translate="no" data-new-gr-c-s-check-loaded="14.1147.0"><script nonce="HhAt8acqxJncfl1zuPdmPQ==">"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")</script><script nonce="HhAt8acqxJncfl1zuPdmPQ==">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)})})</script></body></html>

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.

Kontak

Jika Anda memiliki pertanyaan atau masukan, jangan ragu untuk menghubungi:

Sosial Media

Jika Anda memiliki pertanyaan atau masukan, jangan ragu untuk menghubungi:

Dukungan

Jika Anda menemukan bug atau memiliki permintaan fitur, silakan buka issue di repositori GitHub.

Sitasi

Jika Anda menggunakan proyek ini dalam penelitian atau publikasi, silakan cantumkan referensi berikut:

@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!

About

SELAMAT ULANG TAHUN: Happy Birthday Animation yang dibuat menggunakan Javascript automation generation files

4211421036.github.io/hbd/

Topics

csp js animation secure happy-birthday hbd galih ridho utomo

Resources

Readme

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.txt
Activity

Stars

3 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases 1

HBD Latest
Feb 19, 2025

Packages

 
 
 

Contributors 3

  •  
  •  
  •  

Languages