Color Testing

Tutorials of (Color testing) by Nicholas

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Color Testing</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      #canvas {
  margin: 0px;
  border: 0px;
}

.circle{
  position : absolute;
}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <body id="canvas"></body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

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

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#canvas {
  margin: 0px;
  border: 0px;
}

.circle{
  position : absolute;
}
/* Downloaded from https://www.codeseek.co/ */
function createCircle(x,y,radius,color,opacity)
{
  var circle = $("<div class='circle'/>");
  circle.css('height',radius*2);
  circle.css('width',radius*2);
  circle.css('border-radius',10000+radius);
  circle.css('margin-top',y);
  circle.css('margin-left',x+"%");
  circle.css('background-color',color);
  circle.css('opacity',opacity);

  $('#canvas').prepend(circle);
}

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

var colorList = new Array();


var r = 255;
var g = 0;
var b = 0;
var rc = "ff";
var gc = "00";
var bc = "00";


while (r>0)
  {
    rc = r.toString(16);
    gc = g.toString(16);
    bc = b.toString(16);
    while (rc.length <2)
      {
        rc='0'+rc;
      }
    while (gc.length <2)
      {
        gc='0'+gc;
      }
    while (bc.length <2)
      {
        bc='0'+bc;
      }
    colorList.push("#"+rc+gc+bc);
    r-=1;
    b+=1;
  }
while (b>0)
  {
    rc = r.toString(16);
    gc = g.toString(16);
    bc = b.toString(16);
    while (rc.length <2)
      {
        rc='0'+rc;
      }
    while (gc.length <2)
      {
        gc='0'+gc;
      }
    while (bc.length <2)
      {
        bc='0'+bc;
      }
    colorList.push("#"+rc+gc+bc);
    b-=1;
    g+=1;
  }
while (g>0)
  {
    rc = r.toString(16);
    gc = g.toString(16);
    bc = b.toString(16);
    while (rc.length <2)
      {
        rc='0'+rc;
      }
    while (gc.length <2)
      {
        gc='0'+gc;
      }
    while (bc.length <2)
      {
        bc='0'+bc;
      }
    colorList.push("#"+rc+gc+bc);
    g-=1;
    r+=1;
  }
var i = 0;

function changeColor()
{
  i=i%colorList.length;
  $("#canvas").css("background-color",colorList[i]);
  i+=1;
  if (getRandomInt(1,100)==1)
  {
    createCircle(getRandomInt(0,80),getRandomInt(0,480),10,colorList[i],1);
  }
  
}

$('document').ready(function() {
setInterval(function() {changeColor()}, 3);
});

This awesome code ( Color Testing ) is write by Nicholas, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Nicholas