A Pen by François Lajoie

Thumbnail
This awesome code was written by 1franck, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1franck ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Fran├žois Lajoie</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <span id="fps"></span>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1franck/a-pen-by-franandxe7ois-lajoie-uJDjs */
* {
  padding: 0;
  margin: 0;
}
html,
body,
canvas {
  width: 100%;
  height: 100%;
}
canvas {
  display: block;
  background: #000;
  /* background-color: #F73D22;
  background-image: -o-linear-gradient(bottom, #111111 0%, #F73D22 100%);
  background-image: -moz-linear-gradient(bottom, #111111 0%, #F73D22 100%);
  background-image: -webkit-linear-gradient(bottom, #111111 0%, #F73D22 100%);
  background-image: -ms-linear-gradient(bottom, #111111 0%, #F73D22 100%);
  background-image: linear-gradient(to top, #000000 10%, #829AFB 110%);
  background-repeat: repeat-x; */
}
span {
  position: absolute;
  color: #fff;
  font-size: 10px;
}


/*Downloaded from https://www.codeseek.co/1franck/a-pen-by-franandxe7ois-lajoie-uJDjs */
// create DOM canvas
var canvas    = document.createElement("canvas");
var context   = canvas.getContext('2d');

//set canvas dim
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

document.body.appendChild(canvas);

// browser canvas fit to window
window.onresize = function() {
  canvas.width  = window.innerWidth;
  canvas.height = window.innerHeight;
};

var m_x, m_y;
canvas.addEventListener("mousemove", function(e) {
  m_x = e.clientX;
  m_y = e.clientY;
  
  //console.log(e.clientX);
}); 

function getMousePos(canvas, evt) {
     var rect = canvas.getBoundingClientRect();
     return {
         x: evt.clientX - rect.left,
         y: evt.clientY - rect.top
     };
 }


function Line(x, y, w, h, speed, win_w, win_h, color) {
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  this.speed = speed;
  this.start_speed = speed;
  this.win_w = win_w;
  this.win_h = win_h;
  this.color = color;
}

// Note here that we are using Object.prototype.newMethod rather than
// Object.prototype so as to avoid redefining the prototype object
Line.prototype.toString = function () {
  return this.w + " width by " + this.h + " height";
};

function PerspectiveLine(x, y, x2, y2, size, color) {
  this.x = x;
  this.y = y;
  this.x2 = x2;
  this.y2 = y2;
  this.size = size;
  this.color = color;
}


// scene
var scene = (function () {
 
  var lines = [],
      p_lines = [],
      width_index = canvas.width,
      acceleration_factor = 1.008,
      last_acc_factor = acceleration_factor,
      range = {
        space_min: 18,
        space_max: 26,
        speed_min: 0.7,
        speed_max: 1,
        w_min: 1,
        w_max: 1,
        h_min: canvas.height+10,
        h_max: canvas.height+10,
      }, 
      colors = ["#000","#111", "#222", "#333", "#444", "#555", "#151515"];
      
      
  // rand with round to 20 interval. ex:25 become 20, 35 become 40, 23 become 20, ...
  var rand = function(min, max, interval) {
    if(interval === undefined) interval = 1;
    return Math.round((Math.floor(Math.random() * (max - min + 1)) + min) / interval) *interval;
  };
  
  // rand float
  var randFloat = function(min, max) {
    return (Math.random() * (max -min) + min).toFixed(4);
  };
  
  // rand var colors
  var randColor = function() {
    //return '#'+Math.floor(Math.random()*16777215).toString(16);
    return colors[rand(1, colors.length) - 1];
  };

  return {
         
    // vertical line
    drawLine: function(b) {
            
      //context.beginPath();
      /*context.rect(b.x, b.y, b.w, b.h);
      context.fillStyle = "#111111";
      context.fill();*/
      
      /*var grd=context.createLinearGradient(b.x,b.y,b.x,b.y + b.h);
      grd.addColorStop(1,"#000000");
      grd.addColorStop(0,"#0a0a0a");
      context.fillStyle=grd;*/
      
      /*context.beginPath();
      context.fillStyle = b.color;
      context.fillRect(b.x, b.y, b.w, b.h);*/  
      
      if(b instanceof Line) {
        
        context.beginPath();
        context.moveTo(b.x, b.y);
        context.lineTo(b.x, b.h);
        context.lineWidth = 1;
        
        context.shadowBlur  = 0;

        // set line color
        context.strokeStyle = b.color;
        context.stroke();  
      }
      else {
        //console.log('k');
        context.beginPath();
        context.moveTo(b.x, b.y);
        context.lineTo(b.x2, b.y2);
        context.lineWidth = b.size;
        
        /*context.shadowColor = "#111";
        context.shadowBlur  = 20;
        context.shadowOffsetX = 0;
        context.shadowOffsetY = 0;*/
    
        // set line color
        context.strokeStyle = b.color;
        context.stroke();
        
      }
      
    },
    
    drawPerpectiveLine: function(b) {
      
      
    },
        
    createLine: function() {
      
    
      var w = rand(range.w_min, range.w_max),
          //h = rand(range.h_min, range.h_max, 25),
          h = rand(200, canvas.height),
          y = canvas.height - h,
          speed = randFloat(range.speed_min, range.speed_max),
          win_w = rand(10,10),
          win_h = rand(10,10);
      
      lines.push(
        new Line(width_index, y, w, h, speed, win_w, win_h, randColor())
      );
   
      // create perspective line
      if(lines.length > 2) {
        
        var i   = lines.length - 2,
            px  = lines[i].x,
            py  = lines[i].y,
            px2 = width_index + w + rand(range.space_min, range.space_max),
            py2 = lines[i].h;
        
        /*lines.push(
          new PerspectiveLine(px, py, px2, py2, 1, randColor())
        );*/
      }

      width_index = width_index + w + rand(range.space_min, range.space_max);
    },
       
    createXLines: function(n) {
      for(i=0;i<n;++i) this.createLine();
    },
    
    
    moveAll: function() {
      
      var cap = 50;
      var len = lines.length;
      
      //width_index = canvas.width;
  
      for(i=0;i < len;++i) {
        
        if(lines[i] instanceof Line) {
          
          lines[i].speed = acceleration_factor * lines[i].speed;

          if((lines[i].speed / lines[i].start_speed) >= cap) {
            acceleration_factor = 0.98 * acceleration_factor;   
            lines[i].x -= lines[i].speed;
          }
          else if((lines[i].start_speed / lines[i].speed) >= cap) {

            acceleration_factor = 1.005 * acceleration_factor; 
            lines[i].speed = acceleration_factor * lines[i].speed;
            lines[i].x += lines[i].speed;
          }
          else {
            lines[i].x -= lines[i].speed;
          }

          if((lines[i].x + lines[i].w) < 0) {
            lines[i].x = canvas.width;
          }
        }
        else {
          lines[i].x  = lines[i - 1].x;
          lines[i].y  = lines[i - 1].y;
          lines[i].x2 = canvas.width/2;
          lines[i].y2 = lines[i - 1].y;
        }
      }
    },
    
    drawAll: function() {
      for(var i in lines) {
        this.drawLine(lines[i]);
      }
    }
  };
})();


scene.createXLines(200);


function update() {
  scene.moveAll();
}

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  scene.drawAll();
}


var fps = 0, now, lastUpdate = (new Date)*1;

// The higher this value, the less the FPS will be affected by quick changes
// Setting this to 1 will show you the FPS of the last sampled frame only
var fpsFilter = 50;

function drawFrame(){
  var thisFrameFPS = 1000 / ((now=new Date) - lastUpdate);
  if (now!=lastUpdate){
    fps += (thisFrameFPS - fps) / fpsFilter;
    lastUpdate = now;
  }
}



var animation_fps = 60;
var fpsOut = document.getElementById('fps');

setInterval(function() {
  update();
  draw();
  drawFrame();
  fpsOut.innerHTML = fps.toFixed(0) + " fps";
}, 1000/animation_fps);

Comments