Added a fancy background using p5js

2 years ago · 0b959203a3
5 changed files with 111321 additions and 2 deletions
--- a/css/main.css
+++ b/css/main.css
@ -61,10 +61,17 @@ html {
 font-family: Arial, sans-serif;
 }

+#bg {
+  z-index: -1;
+  overflow: hidden;
+  position: fixed;
+}
+
 #desk {
  display: flex;
  flex-direction: column;
  align-items: center;
+  min-width: 830px;
 }

 #players, #search-area {
--- a/index.html
+++ b/index.html
@ -24,7 +24,7 @@

 <body>

-  <!-- Add your site or application content here -->
+  <div id="bg"></div>

  <div id="desk">
    <div id="players">
@ -75,8 +75,9 @@


  <script src="js/vendor/modernizr-3.11.2.min.js"></script>
-  <script src="js/plugins.js"></script>
+  <script src="./js/vendor/p5.js"></script>
  <script src="js/main.js"></script>
+  <script src="js/sketch.js"></script>

 </body>

--- a/js/sketch.js
+++ b/js/sketch.js
@ -0,0 +1,143 @@
+let sketch = function(p) {
+  let bgCol = hexToRgb('#222233');
+  let starCol = [hexToRgb('#ffcdff'), hexToRgb('#804442'), hexToRgb('#ffff7d')]
+
+  let starDensity = 0.0005; //0.0005 is safe. Above 0.01 is absurd
+
+  let currentWidth;
+  let currentHeight;
+
+  let nbStars;
+  let stars;
+  let bg;
+
+  let time = 0;
+
+
+  p.setup = function(){
+    p.frameRate(24);
+    currentWidth = p.windowWidth;
+    currentHeight = p.windowHeight;
+    p.createCanvas(currentWidth, currentHeight);
+
+    bgInit();
+
+
+
+    // p.noLoop();
+  }
+
+  p.draw = function(){
+    p.background(bgCol);
+    p.image(bg, 0, 0);
+
+    // p.circle(30, time*1.5, 10);
+
+
+
+    // for (let i=0; i<nbStars; i++) {
+    //   let x = p.random(p.windowWidth);
+    //   let y = p.random(p.windowHeight);
+    //   let d = 1 + p.random(2);
+    //   let c = p.random(starCol);
+    //   let a = p.random(230);
+    //   c.setAlpha(a);
+    //   // console.log(c);
+    //
+    //   p.stroke(c);
+    //   // p.point(x, y);
+    //   p.circle(x, y, d);
+    // }
+    time += 1;
+  } //End of draw()
+
+  class Stars {
+    //Inspired by https://www.youtube.com/watch?v=NJjEGoqTn1Y
+    constructor(nb) {
+      this.nb = nb;
+      this.x = [];
+      this.y = [];
+      this.color = [];
+      this.size = [];
+    }
+
+    make() {
+      for (let i = 0; i < this.nb; i++) {
+        this.x[i] = p.random(0,p.width);
+        this.y[i] = p.random(0,p.height);
+        this.color[i] = p.random(starCol);
+        this.color[i].setAlpha(p.random(100,230));
+        this.size[i] = 1 + p.random(2);
+      }
+    }
+
+    draw() {
+      for (let i = 0; i < this.nb; i++) {
+        bg.strokeWeight(this.size[i]);
+        bg.stroke(this.color[i]);
+        bg.point(this.x[i], this.y[i]);
+      }
+    }
+  }
+
+  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) {
+      currentWidth = newWidth;
+      currentHeight = newHeight;
+
+      p.resizeCanvas(currentWidth, currentHeight);
+      bgInit();
+    }
+
+  }
+
+  function bgInit() {
+    nbStars = calcNumberOfStars();
+    bg = p.createGraphics(p.width, p.height);
+    bg.background(bgCol);
+    setGradient(0, 0, p.width, p.height, bgCol, starCol[1]);
+
+    stars = new Stars(nbStars);
+    stars.make();
+    stars.draw();
+  }
+
+  function calcNumberOfStars() {
+    //Helps to get a consistent number of starts regardless the window size
+    if (starDensity > 0.01) {
+      console.log('starDensity is too high! going back to the maximum (0.01) in order to prevent too much CPU load when starting the patch');
+      starDensity = 0.01;
+    }
+    let nb = p.round(starDensity * currentWidth * currentHeight)
+    console.log('nbStars: ' + nb);
+    return nb;
+  }
+
+  function hexToRgb(hex) {
+      hex = hex.replace('#', '');
+
+      var bigint = parseInt(hex, 16);
+
+      var r = (bigint >> 16) & 255;
+      var g = (bigint >> 8) & 255;
+      var b = bigint & 255;
+
+      return p.color(r, g, b);
+  }
+  function setGradient(x, y, w, h, c1, c2) {
+    bg.noFill();
+      // Top to bottom gradient
+    for (let i = y; i <= y + h; i++) {
+      let inter = p.pow(p.map(i, y, y + h, 0, 1),6);
+      let c = bg.lerpColor(c1, c2, inter);
+      bg.stroke(c);
+      bg.line(x, i, x + w, i);
+    }
+
+  }
+};
+
+new p5(sketch, 'bg');
--- a/js/vendor/p5.js
+++ b/js/vendor/p5.js
--- a/js/vendor/p5.min.js
+++ b/js/vendor/p5.min.js