A Pen By Pruthvi Raj

a-pen-by-pruthvi-raj.markdown

A Pen By Pruthvi Raj

A Pen by Pruthvi Raj on CodePen.

License.

index.html

<canvas></canvas>

script.js

var canvas = document.querySelector("canvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext("2d");
window.addEventListener("resize", function() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  init();
});

var mouse = { x: -9999, y: -9999 };

var colors = ["#5E0042","#2C2233","#005869","#00856A","#8DB500"];

window.addEventListener("mousemove", function(event) {
  mouse.x = event.x;
  mouse.y = event.y;
});

window.addEventListener("mouseout", function(event) {
  mouse.x = -9999;
  mouse.y = -9999;
});

function Circle(x, y, r, dx, dy, text) {
  this.x = x;
  this.y = y;
  this.radius = r;
  this.dx = dx;
  this.dy = dy;
  this.originalRadius = r;
  this.text = text;
  this.fillColor = "#" + (((1 << 24) * Math.random()) | 0).toString(16);
  //this.fillColor = colors[Math.round(Math.random()*(colors.length - 1))];
}

Circle.MAX_RADIUS = 50;

Circle.prototype.draw = function() {
    c.save();
    c.beginPath();
    c.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
    if(this.text == '♥') {
      c.fillStyle = "white";
      //c.fill();
      c.font = (this.radius*2).toString() + "pt Calibri";
      c.fillStyle = "red";
      c.textAlign = "center";
      c.fillText(this.text, this.x, this.y + this.radius);
    }
    else {
      c.fillStyle = this.fillColor;
      c.fill();      
      c.font = this.radius.toString() / 2 + "pt Calibri";
      c.fillStyle = "white";
      c.textAlign = "center";
      c.fillText(this.text, this.x, this.y + this.radius / 4);
    }
    this.update();
    c.restore();
};

Circle.prototype.update = function() {
  this.x += this.dx;
  this.y += this.dy;
  if (this.x + this.radius > canvas.width || this.x - this.radius < 0)
    this.dx = -this.dx;
  if (this.y + this.radius > canvas.height || this.y - this.radius < 0)
    this.dy = -this.dy;

  if (Math.abs(this.x - mouse.x) <= 50 && Math.abs(this.y - mouse.y) <= 50) {
    if (this.radius < Circle.MAX_RADIUS) {
      this.radius += 2;
    }
  } else if (this.radius > this.originalRadius) {
    this.radius -= 2;
  }
};

var circles = [];

var texts = ['M','P','♥'];

var N_CIRCLES = Math.round(window.innerWidth/3);
function init() {
  circles = [];
  for (var i = 0; i < N_CIRCLES; i++) {
    var originalRadius = Math.random() *20 + 3;
    var x =
      Math.random() * (canvas.width - originalRadius * 2) + originalRadius;
    var dx = Math.random() - 0.5;
    var y =
      Math.random() * (canvas.height - originalRadius * 2) + originalRadius;
    var dy = Math.random() - 0.5;
    circles.push(
      new Circle(x, y, originalRadius, dx, dy, texts[Math.round(Math.random()*(texts.length-1))])
    );
  }
  animate();
}

function animate() {
  c.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < N_CIRCLES; i++) circles[i].draw();
  requestAnimationFrame(animate);
}
init();

style.css

body {
  margin: 0;
}

canvas {
  border: 1px black solid;
 
}