Installation (by n&n) for hostage release vigils (Israel, 2023). Functions as a centerpiece for meditation circles by Roaring Silence
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

each-name-a-star.html 6.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. <!DOCTYPE html>
  2. <html lang="he" dir="rtl">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  6. <title>כל שם כוכב</title>
  7. <!-- Google fonts-->
  8. <link rel="preconnect" href="https://fonts.googleapis.com">
  9. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10. <link href="https://fonts.googleapis.com/css2?family=Alef:wght@700&display=swap" rel="stylesheet">
  11. <style>
  12. body {
  13. font-family: Alef;
  14. font-size: 3rem;
  15. color: white;
  16. background-color: black;
  17. background-image: url('starfield.png');
  18. background-size: cover;
  19. }
  20. .name {
  21. position: fixed;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
  27. <script>
  28. var CYCLE_MILLIS = 50;
  29. var P_TWINKLE = 0.23;
  30. var DECAY_FACTOR = 0.023;
  31. var CUTOFF_LEVEL = 0.1;
  32. function cycle() {
  33. if (Math.random()<P_TWINKLE) {
  34. $($(".name")[Math.floor(Math.random()*N)]).css("opacity", 1);
  35. }
  36. $(".name").each(function(index) {
  37. var op = Number($(this).css("opacity"))*(1.0-DECAY_FACTOR);
  38. $(this).css("opacity", op>CUTOFF_LEVEL? op: 0);
  39. });
  40. }
  41. var names = [
  42. "Anucha",
  43. "Gong",
  44. "Komkrit",
  45. "Manee",
  46. "Natthaporn",
  47. "Owat",
  48. "Pattanayuth",
  49. "אביב",
  50. "אביב",
  51. "אביבה",
  52. "אביגיל",
  53. "אבינתן",
  54. "אביתר",
  55. "אברהם",
  56. "אגם",
  57. "אגם",
  58. "אהד",
  59. "אוהד",
  60. "אוהד",
  61. "אופיר",
  62. "אופיר",
  63. "אופליה",
  64. "אור",
  65. "אור",
  66. "אורי",
  67. "אוריאל",
  68. "אוריה",
  69. "אוריון",
  70. "אורן",
  71. "איוון",
  72. "אילן",
  73. "אילנה",
  74. "אירנה",
  75. "איתי",
  76. "איתי",
  77. "איתי",
  78. "איתן",
  79. "איתן",
  80. "איתן",
  81. "איתן",
  82. "אלה",
  83. "אלון",
  84. "אלון",
  85. "אלי",
  86. "אליה",
  87. "אליה",
  88. "אליהו",
  89. "אליקים",
  90. "אלכס",
  91. "אלכסנדר",
  92. "אלמה",
  93. "אלמוג",
  94. "אלמוג",
  95. "אלעד",
  96. "אלקנה",
  97. "אמה",
  98. "אמילי",
  99. "אמיליה",
  100. "אנדריי",
  101. "אפרת",
  102. "ארבל",
  103. "ארז",
  104. "אריאל",
  105. "אריאל",
  106. "אריה",
  107. "בלאל",
  108. "בר",
  109. "גבריאלה",
  110. "גד",
  111. "גד",
  112. "ג'ודי",
  113. "ג'ושוע",
  114. "ג'ושי",
  115. "גיא",
  116. "גיא",
  117. "ג'ימי",
  118. "גל",
  119. "גלי",
  120. "דוד",
  121. "דוד",
  122. "דולב",
  123. "דורון",
  124. "דורון",
  125. "דיצה",
  126. "דניאל",
  127. "דניאל",
  128. "דניאל",
  129. "דפנה",
  130. "דפנה",
  131. "דרור",
  132. "דרור",
  133. "הגר",
  134. "הילה",
  135. "הירש",
  136. // "ויויאן",
  137. "זיו",
  138. "חיים",
  139. "חמזה",
  140. "חן",
  141. "חנה",
  142. "חנה",
  143. "חנן",
  144. "טל",
  145. "טל",
  146. "טל",
  147. "טל",
  148. "יאיר",
  149. "יאיר",
  150. "יגב",
  151. "יגיל",
  152. "יהודית",
  153. "יהל",
  154. "יובל",
  155. "יובל",
  156. "יולי",
  157. "יונתן",
  158. "יוסוף",
  159. "יוסף",
  160. "יוסף",
  161. "יורם",
  162. "יותם",
  163. "ילנה",
  164. "יפה",
  165. "יצחק",
  166. "יצחק",
  167. "ירדן",
  168. "ירדן",
  169. "כפיר",
  170. "כרמל",
  171. "לואיס",
  172. "ליאור",
  173. "ליאם",
  174. "ליאת",
  175. "לירי",
  176. "מורן",
  177. "מיה",
  178. "מיה",
  179. "מייה",
  180. "מייה",
  181. "מיקה",
  182. "מירב",
  183. "מישל",
  184. "מקסים",
  185. "מרגלית",
  186. "מתן",
  187. "מתן",
  188. "נדב",
  189. "נוגה",
  190. "נווה",
  191. // "נועה",
  192. "נועה",
  193. "נועם",
  194. "נורלין",
  195. "נילי",
  196. "ניק",
  197. "נמרוד",
  198. "נעם",
  199. "נעמה",
  200. "סאמר",
  201. "סהר",
  202. "סהר",
  203. "סוג'יט",
  204. "ספיר",
  205. "סשה",
  206. "עאישה",
  207. "עדה",
  208. "עדי",
  209. "עדינה",
  210. "עדן",
  211. "עדן",
  212. "עודד",
  213. "עומר",
  214. "עומר",
  215. "עומר",
  216. "עומרי",
  217. "עופר",
  218. "עידן",
  219. "עידן",
  220. "עלמה",
  221. "עמירם",
  222. "עמית",
  223. "עמית",
  224. "עמית",
  225. "ענבר",
  226. "עפרה",
  227. "עפרי",
  228. "פאצ'קו",
  229. "פרננדו",
  230. "צחי",
  231. "קאיד",
  232. "קיריל",
  233. "קית",
  234. "קלמנס",
  235. "קלרה",
  236. "קרינה",
  237. "קרינה",
  238. "קרן",
  239. "רביד",
  240. "רום",
  241. "רומי",
  242. "רון",
  243. "רון",
  244. "רון",
  245. // "רוני",
  246. "רונן",
  247. "רותי",
  248. "רז",
  249. "רז",
  250. "רימון",
  251. "רן",
  252. "רעיה",
  253. "שגב",
  254. "שגיא",
  255. "שושן",
  256. "שירי",
  257. "שירי",
  258. "שלומי",
  259. "שלמה",
  260. "שני",
  261. "שני",
  262. "שקד",
  263. "שרון",
  264. "שרון",
  265. "תומר",
  266. "תמיר",
  267. "תמיר",
  268. "תמר"
  269. ];
  270. var N = names.length;
  271. $(() => {
  272. for (i=0; i<N; i++) {
  273. var div = $("<div/>").addClass("name").text(names[i]).css("opacity",0);
  274. var yoffset = 50-Math.round(Math.random()*50.0*0.98);
  275. var xoffset = Math.round(50.0-(Math.random()*50.0*0.7*Math.sin(Math.PI*0.5*(yoffset/50.0))));
  276. // *(9.0/16.0)
  277. if (Math.random()<0.5) {
  278. div.css("left", xoffset.toString()+"vw");
  279. } else {
  280. div.css("right", xoffset.toString()+"vw");
  281. }
  282. if (Math.random()<0.5) {
  283. div.css("top", yoffset.toString()+"vh");
  284. } else {
  285. div.css("bottom", yoffset.toString()+"vh");
  286. }
  287. $("body").append(div);
  288. }
  289. window.addEventListener('keydown', (event) => {
  290. console.log(event.key);
  291. if (event.key==="ArrowDown") {
  292. $('.name').css("rotate", "180deg");
  293. } else if (event.key==="ArrowUp") {
  294. $('.name').css("rotate", "0deg");
  295. } else if (event.key==="ArrowLeft") {
  296. $('body').css("background-image", "none");
  297. } else if (event.key==="ArrowRight") {
  298. $('body').css("background-image", "url('starfield.png')").css("background-size", "cover");
  299. }
  300. });
  301. setInterval(cycle, CYCLE_MILLIS);
  302. });
  303. </script>
  304. </body>