Added a footer; Added ability to export P5JS result to SVG; Replaced P5JS background by static SVG

2 years ago · abc6095610
8 changed files with 2604 additions and 26 deletions
--- a/css/main.css
+++ b/css/main.css
@ -9,7 +9,6 @@


 html {
-  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 1em;
  line-height: 1.4;
@ -62,11 +61,23 @@ html {
 }

 #bg {
-  z-index: -1;
+  z-index: -2;
  overflow: hidden;
  position: fixed;
+  min-width: 100%;
+  min-height: 100%;
+  background: rgb(34,34,51);
+  background: linear-gradient(180deg, rgba(34,34,51,1) 0%, rgba(34,34,51,1) 70%, rgba(171, 92, 102,1) 120%);
+}
+
+#bg img {
+  z-index: -1;
+  position: fixed;
+  /* max-width: 100%;
+  max-height: 100%; */
 }

+
 #desk {
  /* display: none; */
  display: flex;
@ -285,6 +296,15 @@ input[type=range]#crossfader::-ms-thumb {
  /*Needed to keep the Edge thumb centred*/
 }

+
+.footer a, .footer a:visited {
+  color: var(--text-color);
+  text-decoration: none;
+}
+
+.footer span {
+  cursor: pointer;
+}
 /* ==========================================================================
   Helper classes
   ========================================================================== */
--- a/img/stars_1920x1080.svg
+++ b/img/stars_1920x1080.svg
--- a/img/stars_2560x1440.svg
+++ b/img/stars_2560x1440.svg
--- a/index.html
+++ b/index.html
@ -24,7 +24,9 @@

 <body>

-  <div id="bg"></div>
+  <div id="bg">
+    <img src="img/stars_1920x1080.svg" alt="A night sky with plenty of stars">
+  </div>

  <div id="desk">
    <div id="players">
@ -68,16 +70,21 @@
        <input type="url" name="url-player-B" id="url_B" placeholder="https://www.youtube.com/watch?v=...." pattern="https://.*" size="40">
      </div>
    </div> -->
-    <h1>YTDJ!</h1>
+    <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>
+    </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/sketch.js"></script> -->
  <script src="js/main.js"></script>
-  <script src="js/sketch.js"></script>
+

 </body>

--- a/js/main.js
+++ b/js/main.js
@ -201,3 +201,20 @@ function componentToHex(c) {
 }

 // Thumbnails: https://i1.ytimg.com/vi/{trackID}/mqdefault.jpg
+if (typeof variable !== '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;
+  }
+});
--- a/js/sketch.js
+++ b/js/sketch.js
@ -1,3 +1,5 @@
+// Another possible inspiration: https://www.khanacademy.org/computer-programming/twinkle-twinkle/6280832014565376
+
 let sketch = function(p) {
  let bgCol = hexToRgb('#222233');
  let starCol = [hexToRgb('#ffcdff'), hexToRgb('#804442'), hexToRgb('#ffff7d')]
@ -16,22 +18,25 @@ let sketch = function(p) {

  let time = 0;

+  let sketchLoop = 0;
+

  p.setup = function(){
    p.frameRate(24);
    currentWidth = p.windowWidth;
    currentHeight = p.windowHeight;
-    p.createCanvas(currentWidth, currentHeight);
+    // p.createCanvas(currentWidth, currentHeight);
+    p.createCanvas(1920, 1080, p.SVG) // To export the result to SVG
+    p.noLoop(); // To export the result to SVG

    bgInit();

    mover = new Mover();
-
-    // p.noLoop();
  }

  p.draw = function(){
-    p.background(bgCol);
+    // p.background(bgCol);
+    p.clear();
    p.image(bg, 0, 0);


@ -52,6 +57,8 @@ let sketch = function(p) {


    time += 1;
+    p.save(); // To export the result to SVG
+
  } //End of draw()

  class Stars {
@ -118,15 +125,10 @@ let sketch = function(p) {
      this.acc.set(0, 0);
      this.vel.set(0, 0);
      this.pos.x = p.random(p.round(0.05 * p.width), p.round(0.95 * p.width));
-      this.pos.y = p.random(0, p.round(p.height*0.3));
+      this.pos.y = p.random(0, p.round(p.height*0.45));

      let gravity = p.createVector(0, 0.02);
      this.applyForce(gravity);
-
-      // this.pos = p.createVector(200, 200);
-
-      // this.acc.x = p.random(7, 15) * (1 + p.random(0, 1) * -2);
-      // this.acc.y = p.random(0, 3) - 6;
    }


@ -167,11 +169,6 @@ let sketch = function(p) {
    }

    show() {
-      // p.stroke(255);
-      // p.strokeWeight(2);
-      // p.fill(255, 100);
-      // p.ellipse(this.pos.x, this.pos.y, this.r * 2);
-
      p.strokeWeight(this.size);
      // p.stroke(this.color);
      p.stroke(255, p.constrain(305-this.lifespan, 0, 255), 0, 255-0.7*this.lifespan);
@ -181,10 +178,11 @@ let sketch = function(p) {
  }

  p.windowResized = function() {
-    //Redraw only if new size if bigger than previously
    let newWidth = p.windowWidth;
    let newHeight = p.windowHeight;
-    if (newWidth > currentWidth || newHeight > currentHeight) {
+    //Redraw only if new size if bigger than previously
+    // if (newWidth > currentWidth || newHeight > currentHeight) {
+    if (true) {
      currentWidth = newWidth;
      currentHeight = newHeight;

@ -197,8 +195,9 @@ let sketch = function(p) {
  function bgInit() {
    nbStars = calcNumberOfStars();
    bg = p.createGraphics(p.width, p.height);
-    bg.background(bgCol);
-    setGradient(0, 0, p.width, p.height, bgCol, starCol[1]);
+    // bg.background(bgCol);
+    // setGradient(0, 0, p.width, p.height, bgCol, starCol[1]);
+    // bg.background(0, 0, 0, 0);

    stars = new Stars(nbStars);
    stars.make();
@ -240,4 +239,6 @@ let sketch = function(p) {
  }
 };

-new p5(sketch, 'bg');
+let processingSketch = new p5(sketch, 'bg');
+
+let processingIsOn = true;
--- a/js/vendor/p5.svg.cjs.min.js
+++ b/js/vendor/p5.svg.cjs.min.js
--- a/js/vendor/p5.svg.js
+++ b/js/vendor/p5.svg.js