nimrodkerrett
/
each-name-a-star


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
							
<!DOCTYPE html>
<html lang="he" dir="rtl">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>כל שם כוכב</title>
    <!-- Google fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Alef:wght@700&display=swap" rel="stylesheet"> 
    <style>
    body {
        font-family: Alef;
        font-size: 3rem;
        color: white;
        background-color: black;
        background-image: url('starfield.png');
        background-size: cover;
    }
    .name {
        position: fixed;
    }
    </style>
</head>
<body>

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
var CYCLE_MILLIS = 50;
var P_TWINKLE = 0.23;
var DECAY_FACTOR = 0.023;
var CUTOFF_LEVEL = 0.1;

function cycle() {
    if (Math.random()<P_TWINKLE) {
        $($(".name")[Math.floor(Math.random()*N)]).css("opacity", 1);
    }
    $(".name").each(function(index) {
        var op = Number($(this).css("opacity"))*(1.0-DECAY_FACTOR);
        $(this).css("opacity", op>CUTOFF_LEVEL? op: 0); 
    });
}

var names = [
    "Anucha",
    "Gong",
    "Komkrit",
    "Manee",
    "Natthaporn",
    "Owat",
    "Pattanayuth",
    "אביב",
    "אביב",
    "אביבה",
    "אביגיל",
    "אבינתן",
    "אביתר",
    "אברהם",
    "אגם",
    "אגם",
    "אהד",
    "אוהד",
    "אוהד",
    "אופיר",
    "אופיר",
    "אופליה",
    "אור",
    "אור",
    "אורי",
    "אוריאל",
    "אוריה",
    "אוריון",
    "אורן",
    "איוון",
    "אילן",
    "אילנה",
    "אירנה",
    "איתי",
    "איתי",
    "איתי",
    "איתן",
    "איתן",
    "איתן",
    "איתן",
    "אלה",
    "אלון",
    "אלון",
    "אלי",
    "אליה",
    "אליה",
    "אליהו",
    "אליקים",
    "אלכס",
    "אלכסנדר",
    "אלמה",
    "אלמוג",
    "אלמוג",
    "אלעד",
    "אלקנה",
    "אמה",
    "אמילי",
    "אמיליה",
    "אנדריי",
    "אפרת",
    "ארבל",
    "ארז",
    "אריאל",
    "אריאל",
    "אריה",
    "בלאל",
    "בר",
    "גבריאלה",
    "גד",
    "גד",
    "ג'ודי",
    "ג'ושוע",
    "ג'ושי",
    "גיא",
    "גיא",
    "ג'ימי",
    "גל",
    "גלי",
    "דוד",
    "דוד",
    "דולב",
    "דורון",
    "דורון",
    "דיצה",
    "דניאל",
    "דניאל",
    "דניאל",
    "דפנה",
    "דפנה",
    "דרור",
    "דרור",
    "הגר",
    "הילה",
    "הירש",
    // "ויויאן",
    "זיו",
    "חיים",
    "חמזה",
    "חן",
    "חנה",
    "חנה",
    "חנן",
    "טל",
    "טל",
    "טל",
    "טל",
    "יאיר",
    "יאיר",
    "יגב",
    "יגיל",
    "יהודית",
    "יהל",
    "יובל",
    "יובל",
    "יולי",
    "יונתן",
    "יוסוף",
    "יוסף",
    "יוסף",
    "יורם",
    "יותם",
    "ילנה",
    "יפה",
    "יצחק",
    "יצחק",
    "ירדן",
    "ירדן",
    "כפיר",
    "כרמל",
    "לואיס",
    "ליאור",
    "ליאם",
    "ליאת",
    "לירי",
    "מורן",
    "מיה",
    "מיה",
    "מייה",
    "מייה",
    "מיקה",
    "מירב",
    "מישל",
    "מקסים",
    "מרגלית",
    "מתן",
    "מתן",
    "נדב",
    "נוגה",
    "נווה",
    // "נועה",
    "נועה",
    "נועם",
    "נורלין",
    "נילי",
    "ניק",
    "נמרוד",
    "נעם",
    "נעמה",
    "סאמר",
    "סהר",
    "סהר",
    "סוג'יט",
    "ספיר",
    "סשה",
    "עאישה",
    "עדה",
    "עדי",
    "עדינה",
    "עדן",
    "עדן",
    "עודד",
    "עומר",
    "עומר",
    "עומר",
    "עומרי",
    "עופר",
    "עידן",
    "עידן",
    "עלמה",
    "עמירם",
    "עמית",
    "עמית",
    "עמית",
    "ענבר",
    "עפרה",
    "עפרי",
    "פאצ'קו",
    "פרננדו",
    "צחי",
    "קאיד",
    "קיריל",
    "קית",
    "קלמנס",
    "קלרה",
    "קרינה",
    "קרינה",
    "קרן",
    "רביד",
    "רום",
    "רומי",
    "רון",
    "רון",
    "רון",
    // "רוני",
    "רונן",
    "רותי",
    "רז",
    "רז",
    "רימון",
    "רן",
    "רעיה",
    "שגב",
    "שגיא",
    "שושן",
    "שירי",
    "שירי",
    "שלומי",
    "שלמה",
    "שני",
    "שני",
    "שקד",
    "שרון",
    "שרון",
    "תומר",
    "תמיר",
    "תמיר",
    "תמר"
];
var N = names.length;
$(() => {
    for (i=0; i<N; i++) {
        var div = $("<div/>").addClass("name").text(names[i]).css("opacity",0);
        var yoffset = 50-Math.round(Math.random()*50.0*0.98);
        var xoffset = Math.round(50.0-(Math.random()*50.0*0.7*Math.sin(Math.PI*0.5*(yoffset/50.0))));
        // *(9.0/16.0)
        if (Math.random()<0.5) {
            div.css("left", xoffset.toString()+"vw");
        } else {
            div.css("right", xoffset.toString()+"vw");
        }
        if (Math.random()<0.5) {
            div.css("top", yoffset.toString()+"vh");
        } else {
            div.css("bottom", yoffset.toString()+"vh");
        }
        $("body").append(div);
    }
    window.addEventListener('keydown', (event) => {
        console.log(event.key);
        if (event.key==="ArrowDown") {
            $('.name').css("rotate", "180deg");
        } else if (event.key==="ArrowUp") {
            $('.name').css("rotate", "0deg");
        } else if (event.key==="ArrowLeft") {
            $('body').css("background-image", "none");
        } else if (event.key==="ArrowRight") {
            $('body').css("background-image", "url('starfield.png')").css("background-size", "cover");
        }
    });
    setInterval(cycle, CYCLE_MILLIS);
});
</script>
</body>