CSS+Vanilla JS shooting stars (P5JS no longuer in use but still there); more styling; favicons; Trying to get in touch with Bandcamp

css/main.css

@@ -5,13 +5,40 @@
   --accent-color-1: #ff91d8;
   --accent-color-1-light: #ffcdff;
   --accent-color-2: #ffff7d;
+
+  --crossfader-thumb-width: 30px;
+  --crossfader-thumb-height: 60px;
+  --crossfader-thumb-radius: 15px;
+
 }
 
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(fonts/Roboto Regular.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url(fonts/Roboto Thin.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url(fonts/Roboto Black.woff2) format('woff2');
+}
 
 html {
   color: var(--text-color);
   font-size: 1em;
   line-height: 1.4;
+  font-family: Roboto, Arial, sans-serif;
 }
 
 ::-moz-selection {
@@ -52,14 +79,6 @@ textarea {
   resize: vertical;
 }
 
-/* ==========================================================================
-   Author's custom styles
-   ========================================================================== */
-
-html {
- font-family: Arial, sans-serif;
-}
-
 #bg {
   z-index: -2;
   overflow: hidden;
@@ -73,11 +92,8 @@ html {
 #bg img {
   z-index: -1;
   position: fixed;
-  /* max-width: 100%;
-  max-height: 100%; */
 }
 
-
 #desk {
   /* display: none; */
   display: flex;
@@ -92,6 +108,10 @@ html {
   padding-bottom: 2em;
   gap: 15px;
 }
+
+.hidden {
+  display: none;
+}
 .player {
   max-width: 480px;
   display: flex;
@@ -124,9 +144,11 @@ iframe {
 
 .load-button {
   /* flex-grow: 2; */
+  cursor: pointer;
   border: none;
   background-color: var(--accent-color-2);
   color: var(--bg-color);
+  font-weight: 900;
   border-radius: 5px;
   /* padding: 2em; */
   width: 50%;
@@ -137,10 +159,12 @@ iframe {
   font-size: 0.8em;
 
   margin: auto;
+  font-weight: 100;
   color: var(--text-color-light);
 }
 
 .control-label span {
+  font-weight: 400;
   color: var(--accent-color-2);
 }
 
@@ -179,10 +203,35 @@ span.volume-value {
   display: inline-block;
 }
 
-#crossfader {
+
+#crossfader-wrapper {
   width: 30em;
   padding: 3em 0;
 }
+#crossfader {
+  width: 100%;
+  z-index: 2;
+}
+
+.graduations {
+  z-index: 0;
+  width: 100;
+  margin: 0 13px 0 13px;
+  display: flex;
+  justify-content: space-between;
+}
+.graduation {
+  z-index: 0;
+  width: 3px;
+  height: 23px;
+  border-radius: 23px;
+  background-color: var(--accent-color-1-light);
+}
+
+.graduation-small {
+  width: 2px;
+  height: 8px;
+}
 
 /* Custom crossfader styling made using http://danielstern.ca/range.css */
 input[type=range] {
@@ -216,10 +265,10 @@ input[type=range]::-moz-range-track {
 }
 input[type=range]::-moz-range-thumb {
   background: var(--accent-color-2);
-  border: solid var(--accent-color-1-light);
+  /* border: solid var(--accent-color-1-light); */
   cursor: pointer;
   border-width: 0px;
-  border-radius: 25px;
+  border-radius: var(--crossfader-thumb-radius);
 }
 input[type=range]::-ms-track {
   background: transparent;
@@ -238,7 +287,7 @@ input[type=range]::-ms-fill-upper {
 }
 input[type=range]::-ms-thumb {
   background: var(--accent-color-2);
-  border: solid var(--accent-color-1-light);
+  /* border: solid var(--accent-color-1-light); */
   cursor: pointer;
   margin-top: 0px;
   /*Needed to keep the Edge thumb centred*/
@@ -256,47 +305,50 @@ input[type=range]#crossfader::-webkit-slider-runnable-track {
 }
 input[type=range]#crossfader::-webkit-slider-thumb {
   margin-top: -20.65px;
-  width: 30px;
+  width: var(--crossfader-thumb-width);
-  height: 50px;
+  height: var(--crossfader-thumb-height);
-  border-width: 5px;
+  /* border-width: 5px;
-  border-radius: 12px;
+  border-radius: 12px; */
 }
 
 input[type=range]#crossfader::-moz-range-track {
-  border-radius: 25px;
+  /* border-radius: 25px; */
   width: 100%;
   height: 13.3px;
   cursor: pointer;
 }
 input[type=range]#crossfader::-moz-range-thumb {
-  width: 30px;
+  width: var(--crossfader-thumb-width);
-  height: 50px;
+  height: var(--crossfader-thumb-height);
-  border-width: 5px;
+  /* border-width: 5px; */
-  border-radius: 12px;
+  /* border-radius: 12px; */
   cursor: pointer;
 }
 input[type=range]#crossfader::-ms-track {
-  border-width: 18.75px 0;
+  /* border-width: 18.75px 0; */
   height: 13.3px;
 }
 input[type=range]#crossfader::-ms-fill-lower {
-  border-width: 2.3px;
+  /* border-width: 2.3px;
-  border-radius: 50px;
+  border-radius: 50px; */
 }
 input[type=range]#crossfader::-ms-fill-upper {
-  border-radius: 50px;
+  /* border-radius: 50px; */
 }
 input[type=range]#crossfader::-ms-thumb {
-  width: 30px;
+  width: var(--crossfader-thumb-width);
-  height: 50px;
+  height: var(--crossfader-thumb-height);
-  border-width: 5px;
+  /* border-width: 5px;
-  border-radius: 12px;
+  border-radius: 12px; */
   cursor: pointer;
   margin-top: 0px;
   /*Needed to keep the Edge thumb centred*/
 }
 
 
+.footer {
+  font-weight: 100;
+}
 .footer a, .footer a:visited {
   color: var(--text-color);
   text-decoration: none;
@@ -305,176 +357,3 @@ input[type=range]#crossfader::-ms-thumb {
 .footer span {
   cursor: pointer;
 }
-/* ==========================================================================
-   Helper classes
-   ========================================================================== */
-
-/*
- * Hide visually and from screen readers
- */
-
-.hidden,
-[hidden] {
-  display: none !important;
-}
-
-/*
- * Hide only visually, but have it available for screen readers:
- * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
- *
- * 1. For long content, line feeds are not interpreted as spaces and small width
- *    causes content to wrap 1 word per line:
- *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
- */
-
-.sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-  /* 1 */
-}
-
-/*
- * Extends the .sr-only class to allow the element
- * to be focusable when navigated to via the keyboard:
- * https://www.drupal.org/node/897638
- */
-
-.sr-only.focusable:active,
-.sr-only.focusable:focus {
-  clip: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  white-space: inherit;
-  width: auto;
-}
-
-/*
- * Hide visually and from screen readers, but maintain layout
- */
-
-.invisible {
-  visibility: hidden;
-}
-
-/*
- * Clearfix: contain floats
- *
- * For modern browsers
- * 1. The space content is one way to avoid an Opera bug when the
- *    `contenteditable` attribute is included anywhere else in the document.
- *    Otherwise it causes space to appear at the top and bottom of elements
- *    that receive the `clearfix` class.
- * 2. The use of `table` rather than `block` is only necessary if using
- *    `:before` to contain the top-margins of child elements.
- */
-
-.clearfix::before,
-.clearfix::after {
-  content: " ";
-  display: table;
-}
-
-.clearfix::after {
-  clear: both;
-}
-
-/* ==========================================================================
-   EXAMPLE Media Queries for Responsive Design.
-   These examples override the primary ('mobile first') styles.
-   Modify as content requires.
-   ========================================================================== */
-
-@media only screen and (min-width: 35em) {
-  /* Style adjustments for viewports that meet the condition */
-}
-
-@media print,
-  (-webkit-min-device-pixel-ratio: 1.25),
-  (min-resolution: 1.25dppx),
-  (min-resolution: 120dpi) {
-  /* Style adjustments for high resolution devices */
-}
-
-/* ==========================================================================
-   Print styles.
-   Inlined to avoid the additional HTTP request:
-   https://www.phpied.com/delay-loading-your-print-css/
-   ========================================================================== */
-
-@media print {
-  *,
-  *::before,
-  *::after {
-    background: #fff !important;
-    color: #000 !important;
-    /* Black prints faster */
-    box-shadow: none !important;
-    text-shadow: none !important;
-  }
-
-  a,
-  a:visited {
-    text-decoration: underline;
-  }
-
-  a[href]::after {
-    content: " (" attr(href) ")";
-  }
-
-  abbr[title]::after {
-    content: " (" attr(title) ")";
-  }
-
-  /*
-   * Don't show links that are fragment identifiers,
-   * or use the `javascript:` pseudo protocol
-   */
-  a[href^="#"]::after,
-  a[href^="javascript:"]::after {
-    content: "";
-  }
-
-  pre {
-    white-space: pre-wrap !important;
-  }
-
-  pre,
-  blockquote {
-    border: 1px solid #999;
-    page-break-inside: avoid;
-  }
-
-  /*
-   * Printing Tables:
-   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
-   */
-  thead {
-    display: table-header-group;
-  }
-
-  tr,
-  img {
-    page-break-inside: avoid;
-  }
-
-  p,
-  h2,
-  h3 {
-    orphans: 3;
-    widows: 3;
-  }
-
-  h2,
-  h3 {
-    page-break-after: avoid;
-  }
-}

css/shooting-star.css

@@ -0,0 +1,160 @@
+:root {
+  --shooting-star-duration: 3000ms;
+  --shooting-star-angle: 10deg;
+  --shooting-star-translate: 300px;
+  --shooting-star-direction: 1; /* 1 or -1 */
+}
+
+
+/* From https://www.geeksforgeeks.org/how-to-create-shooting-star-animation-effect-using-css/ */
+.shooting-stars-wrapper {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  -webkit-transform: scaleX(var(--shooting-star-direction)) rotateZ(var(--shooting-star-angle));
+
+  transform: scaleX(var(--shooting-star-direction)) rotateZ(var(--shooting-star-angle));
+
+}
+
+.shooting-star {
+  position: absolute;
+  /* left: 50%; */
+  top: 50%;
+  height: 2px;
+  border-radius: 885px;
+  background: linear-gradient(-45deg, #eef0f5, rgba(0, 0, 255, 0));
+
+  -webkit-filter: drop-shadow(0 0 6px #eef1f8);
+  filter: drop-shadow(0 0 6px #d7dff0);
+
+  -webkit-animation: tail var(--shooting-star-duration) ease-in-out 1,
+    shooting var(--shooting-star-duration) ease-in-out 1;
+  animation: tail var(--shooting-star-duration) ease-in-out 1,
+    shooting var(--shooting-star-duration) ease-in-out 1;
+}
+
+/* .shooting-star.is-shooting {
+  -webkit-animation: tail var(--shooting-star-duration) ease-in-out 1,
+    shooting var(--shooting-star-duration) ease-in-out 1;
+  animation: tail var(--shooting-star-duration) ease-in-out 1,
+    shooting var(--shooting-star-duration) ease-in-out 1;
+} */
+
+/* Here we add before and after effect to star */
+.shooting-star::before,
+.shooting-star::after {
+  content: "";
+  position: absolute;
+  top: calc(50% - 1px);
+  right: 0;
+  height: 2px;
+  background: linear-gradient(
+    -45deg,
+    rgba(0, 0, 255, 0),
+    #eaeef8,
+    rgba(0, 0, 255, 0)
+  );
+  -webkit-transform: translateX(50%) rotateZ(45deg);
+  transform: translateX(50%) rotateZ(45deg);
+  border-radius: 100%;
+  -webkit-animation: shining var(--shooting-star-duration) ease-in-out 1;
+  animation: shining var(--shooting-star-duration) ease-in-out 1;
+}
+/* .shooting-star.is-shooting::before,
+.shooting-star.is-shooting::after {
+  -webkit-animation: shining var(--shooting-star-duration) ease-in-out 1;
+  animation: shining var(--shooting-star-duration) ease-in-out 1;
+} */
+.shooting-star::after {
+  -webkit-transform: translateX(50%) rotateZ(-45deg);
+  transform: translateX(50%) rotateZ(-45deg);
+}
+
+/* Here we are adding location of each
+nth-child, animations, delays, and
+before and after effects to each
+and every balls(stars) */
+/* .shooting-star:nth-child(1) {
+  top: calc(50% - -119px);
+  left: calc(50% - 43px);
+  -webkit-animation-delay: 4000ms;
+  animation-delay: 4000ms;
+}
+.shooting-star:nth-child(1)::before,
+.shooting-star:nth-child(1)::after {
+  -webkit-animation-delay: 4000ms;
+  animation-delay: 4000ms;
+} */
+
+/* This code will help to generate
+effect in tail of star */
+@keyframes tail {
+  0% {
+    width: 0;
+  }
+  30% {
+    width: 100px;
+  }
+  100% {
+    width: 0;
+  }
+}
+@-webkit-keyframes tail {
+  0% {
+    width: 0;
+  }
+  30% {
+    width: 100px;
+  }
+  100% {
+    width: 0;
+  }
+}
+
+/* This code will generate shining
+effect in head of star */
+@keyframes shining {
+  0% {
+    width: 0;
+  }
+  50% {
+    width: 30px;
+  }
+  100% {
+    width: 0;
+  }
+}
+@-webkit-keyframes shining {
+  0% {
+    width: 0;
+  }
+  50% {
+    width: 30px;
+  }
+  100% {
+    width: 0;
+  }
+}
+
+/* Here we make shooting effect */
+@keyframes shooting {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+  100% {
+    -webkit-transform: translateX(var(--shooting-star-translate));
+    transform: translateX(var(--shooting-star-translate));
+  }
+}
+@-webkit-keyframes shooting {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+  100% {
+    -webkit-transform: translateX(var(--shooting-star-translate));
+    transform: translateX(var(--shooting-star-translate));
+  }
+}

index.html

@@ -12,12 +12,14 @@
   <meta property="og:url" content="">
   <meta property="og:image" content="">
 
-  <link rel="manifest" href="site.webmanifest">
+  <link rel="apple-touch-icon" sizes="180x180" href="/img/icon/apple-touch-icon.png">
-  <!-- <link rel="apple-touch-icon" href="icon.png"> -->
+  <link rel="icon" type="image/png" sizes="32x32" href="/img/icon/favicon-32x32.png">
-  <!-- Place favicon.ico in the root directory -->
+  <link rel="icon" type="image/png" sizes="16x16" href="/img/icon/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
 
-  <link rel="stylesheet" href="css/normalize.css">
+  <link rel="stylesheet" href="/css/normalize.css">
-  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="/css/main.css">
+  <link rel="stylesheet" href="/css/shooting-star.css">
 
   <meta name="theme-color" content="#fafafa">
 </head>
@@ -26,6 +28,9 @@
 
   <div id="bg">
     <img src="img/stars_1920x1080.svg" alt="A night sky with plenty of stars">
+    <div class="shooting-stars-wrapper">
+      <!-- <div class="shooting-star"></div> -->
+    </div>
   </div>
 
   <div id="desk">
@@ -54,36 +59,43 @@
         </div>
         <input class='load-button' type="button" value="Load new track or playlist">
       </div>
+      <div class="hidden">
+        <!-- <iframe style="border: 0; width: 480px; height: 270px;" src="https://bandcamp.com/EmbeddedPlayer/album=78256716/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/track=1064671887/transparent=true/" seamless><a href="https://clett.bandcamp.com/album/tancarville">Tancarville by Clett</a></iframe> -->
+        <!-- For a single track:
+        <iframe style="border: 0; width: 480px; height: 270px;" src="https://bandcamp.com/EmbeddedPlayer/album=78256716/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/track=1064671887/transparent=true/" seamless><a href="https://clett.bandcamp.com/album/tancarville">Tancarville by Clett</a></iframe>-->
+      </div>
     </div>
 
-    <input type="range" id='crossfader' name="crossfader" min='0' max='1000' value='500'>
+    <div id="crossfader-wrapper">
-    <!-- <div id="search-area">
+      <input type="range" id='crossfader' name="crossfader" min='0' max='1000' value='500'>
-      <div class="search">
+      <div class="graduations">
-        <input type="button" value="Load new track or playlist">
+        <div class="graduation"></div>
-
+        <div class="graduation graduation-small"></div>
-        <label for="url-player-A">Enter link of a YT video or playlist</label>
+        <div class="graduation graduation-small"></div>
-        <input type="url" name="url-player-A" id="url_A" placeholder="https://www.youtube.com/watch?v=...." pattern="https://.*" size="40">
+        <div class="graduation graduation-small"></div>
+        <div class="graduation graduation-small"></div>
+        <div class="graduation"></div>
+        <div class="graduation graduation-small"></div>
+        <div class="graduation graduation-small"></div>
+        <div class="graduation graduation-small"></div>
+        <div class="graduation graduation-small"></div>
+        <div class="graduation"></div>
       </div>
-      <div class="search">
+    </div>
-        <input type="button" value="Load new track or playlist">
+
-        <label for="url-player-B">Enter link of a YT video or playlist</label>
+    <h1>🔊 Mix like a pro youtube DJ! 🎧</h1>
-        <input type="url" name="url-player-B" id="url_B" placeholder="https://www.youtube.com/watch?v=...." pattern="https://.*" size="40">
-      </div>
-    </div> -->
-    <h1>Mix like a pro youtube DJ!</h1>
     <div class="footer">
-      <p><span id='shooting-stars-enable'></span>by <a href="https://tflcl.xyz">tflcl.xyz</a> </p>
+      <p><span id='shooting-stars-enable'></span> ⚒ <a href="https://tflcl.xyz">Made by tflcl.xyz</a> 🧩</p>
     </div>
   </div>
 
 
 
   <script async defer data-website-id="8db8311f-63a6-47d5-a77f-7d9b80db22b1" src="https://stats.tflcl.xyz/sucre.js"></script>
-  <script src="js/vendor/modernizr-3.11.2.min.js"></script>
+  <!-- <script src="/js/vendor/p5.js"></script>
-  <!-- <script src="./js/vendor/p5.js"></script>
+  <script src="/js/vendor/p5.svg.js"></script>
-  <script src="./js/vendor/p5.svg.js"></script>
+  <script src="/js/sketch.js"></script> -->
-  <script src="js/sketch.js"></script> -->
+  <script src="/js/main.js"></script>
-  <script src="js/main.js"></script>
 
 
 </body>

js/main.js

@@ -51,19 +51,28 @@ class player {
       let url = prompt('Enter a YouTube URL (track or playlist):', 'https://www.youtube.com/watch?v=' + this.trackID);
 
       if (url) {
-        let newTrackID = get_video_id(url);
+        let resp = check_url(url);
-        let newPlaylistID = get_playlist_id(url);
+
-
+        if (resp < 0) {
-        if (newPlaylistID[0] != 0) {
-          console.log('playlistid to load: ' + newPlaylistID);
-          this.loadPlaylist(newPlaylistID);
-        } else if (newTrackID != 0) {
-          console.log('track to load: ' + newTrackID);
-          this.load(newTrackID);
-        } else {
           console.log('Nothing to load!');
+        } else if (resp == 0) {
+          let newTrackID = get_video_id(url);
+          let newPlaylistID = get_playlist_id(url);
+
+          if (newPlaylistID[0] != 0) {
+            console.log('playlistid to load: ' + newPlaylistID);
+            this.loadPlaylist(newPlaylistID);
+          } else if (newTrackID != 0) {
+            console.log('track to load: ' + newTrackID);
+            this.load(newTrackID);
+          } else {
+            console.log('Nothing to load!');
+          }
+        } else if (resp == 1) {
+          fetch_bandcamp_url(url);
         }
 
+
       }
     });
 
@@ -124,7 +133,7 @@ calcCrossfaderCoefs(crossfader.value);
 
 crossfader.addEventListener('input', (e) => {
   //Makes the slider stick on the middle
-  if (Math.abs(crossfader.value - 500) < 15) {
+  if (Math.abs(crossfader.value - 500) < 20) {
     crossfader.value = 500;
   }
 
@@ -155,6 +164,16 @@ function calcCrossfaderCoefs(input) {
   playerB.crossfaderCoef = coefB;
 }
 
+function check_url(url) {
+  let test = url.indexOf('youtu');
+  if (test > -1 && test < 13) {
+    return 0; //It's most likely a youtube link
+  } else if (url.indexOf('.bandcamp') > -1 || url.indexOf('/album/') > -1 || url.indexOf('/track/') > -1) {
+    return 1; //It's most likely a bandcamp link
+  } else {
+    return -1; //Wrong link
+  }
+}
 
 // From https://stackoverflow.com/a/55616161/14182148
 function get_playlist_id(url) {
@@ -184,16 +203,15 @@ function get_video_id(url) { //originally 'video_id_from_playlist'
     }
 }
 
-// From https://thomaspark.co/projects/needledrop/ by Thomas Park
+function fetch_bandcamp_url(url) {
-// function getYouTubeID(url){
+  let iframe = document.createElement('iframe');
-//   url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
+  iframe.setAttribute('class','hidden');
-//   return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : false;
+  iframe.setAttribute('src',url);
-// }
+  playerB.node.parentNode.appendChild(iframe);
-
+  console.log(iframe);
-// function get_video_id(url) {
+  let scrap = iframe.contentWindow.document.querySelector('script[data-tralbum]');
-//     url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
+  console.log('scrap: ' + scrap);
-//     return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
+}
-// }
 
 function componentToHex(c) {
   var hex = c.toString(16);
@@ -201,20 +219,101 @@ function componentToHex(c) {
 }
 
 // Thumbnails: https://i1.ytimg.com/vi/{trackID}/mqdefault.jpg
-if (typeof variable !== 'undefined') {
+
-  let separatorSpan = document.createElement('span');
+let bcURL = 'https://clett.bandcamp.com/track/placenta';
-  separatorSpan.innerHTML = ' - ';
+// let html = async await fetch(bcURL).text(); // html as text
-  document.getElementById('shooting-stars-enable').after(separatorSpan);
+// let doc = new DOMParser().parseFromString(html, 'text/html');
-  document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+// doc.title; doc.body;
+
+// let Http = new XMLHttpRequest();
+// Http.open("GET", bcURL);
+// Http.send();
+//
+// Http.onreadystatechange = (e) => {
+//   console.log(Http.responseText)
+// }
+
+let areStarsShooting = true;
+let shootingStarWrapper = document.getElementsByClassName('shooting-stars-wrapper')[0];
+let shootingStar;
+
+function newShootingStar() {
+  shootingStar = document.createElement('div');
+
+  let topStart = Math.floor(0.6 * window.innerHeight * Math.random());
+  let leftStart = Math.floor(window.innerWidth * (0.1 + 0.8 * Math.random()));
+  let duration = 1000 + Math.floor(Math.random() * 5000);
+  let distance = 200 + Math.floor(Math.random() * 500);
+  let angle = Math.floor(Math.random() * 30) - 15;
+  let direction = Math.random() < 0.5 ? -1 : 1;
+
+  shootingStar.style.top = topStart + 'px';
+  shootingStar.style.left = leftStart + 'px';
+  // root.style.setProperty('--shooting-star-duration', duration + "px");
+  // shootingStarCSS.insertRule(':root{--shooting-star-duration: '+ duration + 'ms}');
+
+  document.documentElement.style.setProperty('--shooting-star-duration', duration + "ms");
+  document.documentElement.style.setProperty('--shooting-star-translate', distance + "px");
+  document.documentElement.style.setProperty('--shooting-star-angle', angle + "deg");
+  document.documentElement.style.setProperty('--shooting-star-direction', direction);
+
+
+
+  shootingStarWrapper.appendChild(shootingStar);
+  shootingStar.classList.add('shooting-star');
+
+  setTimeout(() => {
+    shootingStar.remove();
+    // let nextIn = 10;
+    let nextIn =  7000 + Math.floor(Math.random() * 5000);
+    if (areStarsShooting) {
+      setTimeout('newShootingStar()', nextIn);
+    }
+  }, duration);
+  // setTimeout('newShootingStar()', duration + nextIn);
 }
+// function endShootingStar(el) {
+//   el.remove();
+//   console.log('removed!');
+//   let nextIn = 4000;
+//   setTimeout('newShootingStar()', nextIn);
+// }
+
+newShootingStar();
+
+// Enable/disable shooting stars
+let separatorSpan = document.createElement('span');
+separatorSpan.innerHTML = ' - ';
+document.getElementById('shooting-stars-enable').after(separatorSpan);
+document.getElementById('shooting-stars-enable').innerHTML = '⭐️Disable shooting stars⭐️';
+
 document.getElementById('shooting-stars-enable').addEventListener('click', () => {
-  if (processingIsOn) {
+  if (areStarsShooting) {
-    processingSketch.frameRate(0);
+    document.getElementById('shooting-stars-enable').innerHTML = '⭐️Enable shooting stars⭐️';
-    document.getElementById('shooting-stars-enable').innerHTML = 'Enable shooting stars⭐️';
+    areStarsShooting = false;
-    processingIsOn = false;
   } else {
-    processingSketch.frameRate(24);
+    document.getElementById('shooting-stars-enable').innerHTML = '⭐️Disable shooting stars⭐️';
-    document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+    areStarsShooting = true;
-    processingIsOn = true;
+    newShootingStar();
   }
 });
+
+
+// Enable/disable shooting stars (with P5JS background)
+// if (typeof processingSketch !== 'undefined') {
+//   let separatorSpan = document.createElement('span');
+//   separatorSpan.innerHTML = ' - ';
+//   document.getElementById('shooting-stars-enable').after(separatorSpan);
+//   document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+// }
+// document.getElementById('shooting-stars-enable').addEventListener('click', () => {
+//   if (processingIsOn) {
+//     processingSketch.frameRate(0);
+//     document.getElementById('shooting-stars-enable').innerHTML = 'Enable shooting stars⭐️';
+//     processingIsOn = false;
+//   } else {
+//     processingSketch.frameRate(24);
+//     document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+//     processingIsOn = true;
+//   }
+// });

js/sketch.js

@@ -1,6 +1,7 @@
 // Another possible inspiration: https://www.khanacademy.org/computer-programming/twinkle-twinkle/6280832014565376
-
 let sketch = function(p) {
+  let svgExport = false; // To export the result to SVG
+
   let bgCol = hexToRgb('#222233');
   let starCol = [hexToRgb('#ffcdff'), hexToRgb('#804442'), hexToRgb('#ffff7d')]
 
@@ -25,9 +26,13 @@ let sketch = function(p) {
     p.frameRate(24);
     currentWidth = p.windowWidth;
     currentHeight = p.windowHeight;
-    // p.createCanvas(currentWidth, currentHeight);
+
-    p.createCanvas(1920, 1080, p.SVG) // To export the result to SVG
+    if (svgExport) {
-    p.noLoop(); // To export the result to SVG
+      p.createCanvas(1920, 1080, p.SVG) // To export the result to SVG
+      p.noLoop(); // To export the result to SVG
+    } else {
+      p.createCanvas(currentWidth, currentHeight);
+    }
 
     bgInit();
 
@@ -57,8 +62,10 @@ let sketch = function(p) {
 
 
     time += 1;
-    p.save(); // To export the result to SVG
 
+    if (svgExport) {
+        p.save(); // To export the result to SVG
+    }
   } //End of draw()
 
   class Stars {

site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/img/icon/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/img/icon/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffff7d","background_color":"#222233","display":"standalone"}