Canvas: Random rectangles & colors

Canvas:-Random-rectangles-&-colors.markdown

Canvas: Random rectangles & colors

Learning canvas, experimenting with JavaScript and the canvas element. Randomize - Randomizes everything based on the color you pick

A Pen by RenGM on CodePen.

License.

index.html

<div class="text-cont">
  <button id="ran">Randomize</button>
  <p>Please pick a color:</p>
  <div class="color-boxes">
    <div class="orange" data-color="27"></div>
    <div class="blue" data-color="203"></div>
    <div class="red" data-color="0"></div>
    <div class="green" data-color="69"></div>
    <div class="violet sel" data-color="340"></div>
  </div>
</div>

<canvas id="art" width="700" height="400"></canvas> 

script.js

var can = document.getElementById("art");
var can_c = can.getContext("2d");
//can_c.fillRect(50, 25, 150, 100);

//creates random height rectangles with random colors
function randomify(hue) {
  can.width = can.width;
  var ran;
  var ranc = "";
  
  //creates grid accdg. to this tutorial http://diveintohtml5.info/canvas.html
  for (var i = 0.5; i <= 700; i += 10) {
    can_c.moveTo(i, 0);
    can_c.lineTo(i, 399.5);
    can_c.moveTo(0, i);
    can_c.lineTo(699.5, i);
  }
  can_c.strokeStyle = "#efefef";
  can_c.stroke();
  
  for(var c = 0.5; c <= 699.5; c += 10) {
    ran = Math.floor(Math.random() * 40 + 1);

    ranc = 'hsl(' + hue + ', ' + Math.floor(Math.random() * 99) + '%, ' + Math.floor(Math.random() * 99) + '%)';
    can_c.fillStyle = ranc;
    console.log(ranc); 
    can_c.fillRect(c, 0.5, 10, ran * 10);
  }
}

//default reddish violet
randomify(340);

$(document).ready(function() {
  //$('#art').css('border-width', '10');
  $('.color-boxes div').click(function() {
    $('.color-boxes div').removeClass('sel');
    $(this).addClass('sel');
    
    randomify($(this).attr('data-color'));
  });
  $('#ran').click(function() {
    randomify($('.color-boxes .sel').attr('data-color'));
  });
});

style.css

body {
  background: #eee;
  font-family: Verdana;
}
p {
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #aaa;
  font-size: 12px;
  line-height: 20px;
}
canvas {
  width: 700px;
  height: 400px;
  border: 10px solid #ddd;
  display: block;
  margin: 25px auto;
  background: #fff;
}
.text-cont {
  width: 250px;
  margin: 15px auto;
  text-align: center;
}
.color-boxes div {
  display: inline-block;
  margin: 5px;
  width: 25px;
  height: 25px;
  opacity: 1;
  transition: all .5s;
}
.color-boxes div.sel {
  opacity: 0.5;
  box-shadow: 0 0 0 2px #fff, 0 0 7px rgba(0,0,0,0.6), inset 0 0 2px rgba(0,0,0,0.2);
}
.color-boxes div:hover {
  opacity: 0.8;
}
.color-boxes div.orange {
  background: orange;
}
.color-boxes div.blue {
  background: #39acf4;
}
.color-boxes div.red {
  background: #f43939;
}
.color-boxes div.green {
  background: #d7f439;
}
.color-boxes div.violet {
  background: #df1458;
}