Logo javascript canvas

logo.js

(function() {
  'use strict';
  window.addEventListener('load', function() {
    var canvas = document.getElementById('canvas');

    if (!canvas || !canvas.getContext) {
      return false;
    }

    function rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    // canvas 
    var ctx = canvas.getContext('2d');
    var X = canvas.width = window.innerWidth;
    var Y = canvas.height = window.innerHeight;
    var centerX = X / 2;
    var centerY = Y / 2;
    var color = '#F37748';
    var segmentColor = 'rgb(4, 162, 219)';

    var linesNum = 5;
    var lines = [];
    
    var segments = [];
    var radius = 80; 
    var diff = radius / 100;
    var lw = 5;
    var blur = 10;
    
    var rectNum = 4;
    var rects = [];
    
    window.requestAnimationFrame =
      window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(cb) {
        setTimeout(cb, 17);
      };

    /********************
      Text
    ********************/
    
    var text = 'CENTRIFUGO';
    var textSize = lw*12;
    function drawText() {
      ctx.save();
      ctx.fillStyle = segmentColor;
      ctx.font = textSize + 'px' + " Geneva"
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.shadowBlur = blur;
      ctx.fillText(text, X / 2, Y / 2 - radius*2.65 - textSize);
      ctx.restore();
    }

    /********************
      Line
    ********************/
    function Line(ctx, x, y) {
      this.ctx = ctx;
      this.init(x, y);
    }

    Line.prototype.init = function(x, y) {
      this.x = x;
      this.y = y;
      this.c = 'rgb(61, 61, 61)';
      this.l = rand(10, 50);
      this.lw = 1;
      this.v = {
        x: rand(-5, 5) * Math.random(),
        y: rand(-5, 5) * Math.random()
      };
    };

    Line.prototype.draw = function() {
      var ctx = this.ctx;
      ctx.save();
      ctx.lineWidth = this.lw;
      ctx.strokeStyle = this.c;
      ctx.beginPath();
      ctx.moveTo(0, this.y);
      ctx.lineTo(X, this.y);
      ctx.stroke();
      ctx.lineWidth = this.lw;
      ctx.beginPath();
      ctx.moveTo(this.x, 0);
      ctx.lineTo(this.x, Y);
      ctx.stroke();
      ctx.restore();
    };

    Line.prototype.updatePosition = function() {
      this.x += this.v.x;
      this.y += this.v.y;
    }; 

    Line.prototype.wrapPosition = function() {
      if (this.x < 0) this.x = X;
      if (this.x > X) this.x = 0;
      if (this.y < 0) this.y = Y;
      if (this.y > Y) this.y = 0;
    };

    Line.prototype.updateParams = function() {
      this.l -= 0.05;
      if (this.l < 0) {
        this.v.x = rand(-5, 5) * Math.random();
        this.v.y = rand(-5, 5) * Math.random();
        this.l = rand(10, 50);
      }
    };

    Line.prototype.render = function() {
      this.updatePosition();
      this.wrapPosition();
      this.updateParams();
      this.draw();
    };

    for (var i = 0; i < linesNum; i++) {
      var line = new Line(ctx, rand(0, X), rand(0, Y));
      lines.push(line);
    }
    
    /********************
      Segment
    ********************/    
    function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
      var angleInRadians = angleInDegrees * Math.PI / 180.0;
      var x = centerX + (radius * Math.cos(angleInRadians));
      var y = centerY + (radius * Math.sin(angleInRadians));
      return [x, y];
    }
    
    function cartesianToPolar(centerX, centerY, radius, X, Y) {
      var radians = Math.atan2(Y-centerY, X-centerX);
      return radians * 180 / Math.PI;
    }
    
    function Segment(ctx, x, y, r, w, rotate, speed, angleDiff) {
      this.ctx = ctx;
      this.init(x, y, r, w, rotate, speed, angleDiff);
    } 
    
    Segment.prototype.init = function(x, y, r, w, rotate, speed, angleDiff) {
      this.x = x;
      this.y = y;
      this.r = r;
      this.w = w;
      this.c = segmentColor;
      this.rotate = rotate;
      this.speed = speed;
      this.angleDiff = angleDiff;
      this.a = 0;
    };
    
    Segment.prototype.drawSegment = function(fromAngle, toAngle, rotateAngle) {
      ctx.translate(this.x, this.y);
      ctx.rotate(rotateAngle * Math.PI / 180 );
      ctx.translate(-this.x, -this.y);
      ctx.beginPath();
 
      var res = polarToCartesian(this.x, this.y, this.r, fromAngle);
      var startX = res[0];
      var startY = res[1];
      var res = polarToCartesian(this.x, this.y, this.r, toAngle);
      var endX = res[0];
      var endY = res[1];

      var innerAngleStart;
      var innerAngleEnd;
      var anotherX = startX - this.w;
      var anotherY = endY - this.w;
      innerAngleStart = cartesianToPolar(this.x, this.y, this.r, anotherX, startY);
      innerAngleEnd = cartesianToPolar(this.x, this.y, this.r, endX, anotherY);
      var toAngleRad = toAngle * Math.PI / 180;
      var fromAngleRad = fromAngle * Math.PI / 180;
      ctx.arc(this.x, this.y, this.r, toAngleRad, fromAngleRad, true);
      var innerAngleStartRad = innerAngleStart * Math.PI / 180;
      var innerAngleEndRad = innerAngleEnd * Math.PI / 180;
      ctx.arc(this.x, this.y, this.r-this.w, innerAngleStartRad, innerAngleEndRad, false);
      ctx.closePath();
      ctx.fillStyle = segmentColor;
      ctx.fill();
      ctx.stroke();
    }

    Segment.prototype.draw = function() {
      var ctx = this.ctx;
      ctx.save();
      ctx.lineWidth = 3;
      ctx.strokeStyle = segmentColor;
      ctx.shadowColor = segmentColor;
      ctx.shadowBlur = blur;
      console.log(this.angleDiff);
      this.drawSegment(4 + this.angleDiff, 86 - this.angleDiff, this.rotate + this.a);
      ctx.restore();
    };

    Segment.prototype.resize = function() {
      this.x = X / 2;
      this.y = Y / 2;
    };

    Segment.prototype.updateParams = function() {
      this.a += this.speed * radius/this.r;
    };
    
    Segment.prototype.render = function() {
      this.updateParams();
      this.draw();
    };

    segments.push(new Segment(ctx, centerX, centerY, radius * 2.65, lw * 9, 0, -1.5, 0));
    segments.push(new Segment(ctx, centerX, centerY, radius * 2.65, lw * 9, 90, -1.5, 0));
    segments.push(new Segment(ctx, centerX, centerY, radius * 2.65, lw * 9, 180, -1.5, 0));
    segments.push(new Segment(ctx, centerX, centerY, radius * 2.65, lw * 9, 270, -1.5, 0));
    segments.push(new Segment(ctx, centerX, centerY, radius * 1.45, lw * 8, 45, 1.5, 2));
    segments.push(new Segment(ctx, centerX, centerY, radius * 1.45, lw * 8, 135, 1.5, 2));
    segments.push(new Segment(ctx, centerX, centerY, radius * 1.45, lw * 8, 225, 1.5, 2));
    
    /********************
      Rect
    ********************/
    function Rect(ctx, x, y, lw, r, flg) {
      this.ctx = ctx;
      this.init(x, y, lw, r, flg);
    }

    Rect.prototype.init = function(x, y, lw, r, flg) {
      this.flg = flg;
      this.flg === true ? this.s = -Math.random(): this.s = Math.random();
      this.flg === true ? this.scale = 1.45 : this.scale = 1.3;
      this.x = x;
      this.y = y;
      this.lw = lw;
      this.c = color;
      this.a = rand(60, 360);
      this.rad = this.a * Math.PI / 180;
      this.r = r;
    };

    Rect.prototype.draw = function(){
      var ctx = this.ctx;
      ctx.save();
      ctx.strokeStyle = this.c;
      ctx.shadowColor = color;
      ctx.shadowBlur = blur/2;
      ctx.lineWidth = this.lw;
      ctx.beginPath();
      ctx.moveTo(this.x + Math.cos(this.rad) * this.r, this.y + Math.sin(this.rad) * this.r);
      ctx.lineTo(this.x + Math.cos(this.rad) * this.r * this.scale, this.y + Math.sin(this.rad) * this.r * this.scale);
      ctx.stroke();
      ctx.restore();
    };

    Rect.prototype.resize = function() {
      this.x = X / 2;
      this.y = Y / 2;
    };
    
    Rect.prototype.upSpeed = function() {
      this.flg === true ? this.s = -30: this.s = 30;
    };
    
    Rect.prototype.resetSpeed = function() {
      this.flg === true ? this.s = -Math.random(): this.s = Math.random();
    };
     
    Rect.prototype.updateParams = function() {
      this.a -= this.s;
      this.rad = this.a * Math.PI / 180;
    };
     
    Rect.prototype.render = function() {
      this.updateParams();
      this.draw();
    };

    for (var i = 0; i < 9; i++) {
      var rect = new Rect(ctx, centerX, centerY, lw * 5, radius * 1.55, false);
      rects.push(rect);
    }
    
    function render(){
      ctx.clearRect(0, 0, X, Y);
      for (var i = 0; i < lines.length; i++) {
        lines[i].render();
      }
      for (var i = 0; i < rects.length; i++) {
        rects[i].render();
      }
      for (var i = 0; i < segments.length; i++) {
        segments[i].render();
      }
      drawText();
      requestAnimationFrame(render);
    }

    render();
    
    function onResize() {
      X = canvas.width = window.innerWidth;
      Y = canvas.height = window.innerHeight;
      textWidth = X / 5 + 1;
      for (var i = 0; i < segments.length; i++) {
        segments[i].resize();
      }
      for (var i = 0; i < rects.length; i++) {
        rects[i].resize();
      }
    }

    window.addEventListener('resize', function() {
      onResize();
    });
    
  }); 
})();