Canvas Gradient Generator (& Intermediate Values)

Canvas Gradient Generator (& Intermediate Values).markdown

Canvas Gradient Generator (& Intermediate Values)

An HTML Canvas that shows a gradient from one user specified colour to another, along with the intermediate colours if you click on the gradient. Enter a higher number of squares to get a smoother gradient.

Update: There's now a randomize button if you don't know what rgb values you want to try this out with.

A Pen by Maya Shankar on CodePen.

License.

index.html

<div class="para">
  <p>Enter the two rgb values to make a gradient, or click 'Randomize!' to generate random colours.<br><span class="optional">(Optional: Enter number of squares per row.)</span><br>Click 'Gradient Me!' to generate gradient.<br>Click a specific colour in the gradient to view that colour's rgb value.<br><span class="optional">Selected square's colour value: <span class="rgb"></span></span></p>
</div>
<div class="cancont"><canvas width="300" height="300" id="myCanvas"></canvas></div>
<div class="container-fluid">
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-xs-3 control-label">From: </label>
      <input type="text" id="colour1" placeholder="eg: rgb(12,34,56)" class="form-control">
    </div>
    <div class="form-group">
      <label class="col-xs-3 control-label">To: </label>
      <input type="text" id="colour2" placeholder="eg: rgb(12,34,56)" class="form-control">
    </div>
    <div class="form-group">
      <label class="col-xs-3 control-label">Squares: </label>
      <input type="number" id="squares" placeholder="eg: 10" class="form-control">
    </div>
    <div class="form-group">
      <button class="btn btn-default rand" type="submit">Randomize!</button>
      <button class="btn btn-default grad" type="submit">Gradient Me!</button>
    </div>
  </div>
</div>

script.js

$(document).ready(function() {
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  
  // set default values
  $('#colour1').attr('value', '44,62,80');
  $('#colour2').attr('value', '52,152,219');
  $('#squares').attr('value', 10);
  var numSquares = $('#squares').val();
  var first = $('#colour1').val().split(',');
  var second = $('#colour2').val().split(',');
  
  // dimensions of each square
  var sqH = Math.floor(canvas.height / numSquares);
  
  // variable to store each square's colours
  var rgb = [];
  
  // draw squares and fill in gradient
  rgb = draw(numSquares, sqH, ctx, first, second);
  
  // if button is clicked
  $('.grad').click(function() {
    // get colours (if any)
    var firstColour = $('#colour1').val().split(',');
  
    var secondColour = $('#colour2').val().split(',');
    
    // get the number of squares (if any)
    numSquares = $('#squares').val();
    
    // generate new square height
    sqH = Math.floor(canvas.height / numSquares);
    
    // draw the squares
    rgb = draw(numSquares, sqH, ctx, firstColour, secondColour);  
  });
  
  // if any square is clicked
  $('canvas').click(function(event) {
    var x = event.offsetX;
    var y = event.offsetY;
    
    // real height of canvas (necessary because vh)
    var trueHeight = $(window).height() * 0.45
    sqH = trueHeight / numSquares;
    
    // get the exact square
    x = Math.floor(x/sqH);
    y = Math.floor(y/sqH);
    
    // translate coordinate system into array position
    var pos = y * numSquares + x;
    var num = rgb[pos];

    $('.rgb').html(num[0] + "," + num[1] + "," + num[2]);
  });
  
  // if randomize is clicked
  $('.rand').click(function() {
    var firstRand = [];
    var secondRand = [];
    
    // generate the random colours
    for (var i = 0; i < 3; i++) {
      firstRand[i] = Math.floor(Math.random() * 256);
      secondRand[i] = Math.floor(Math.random() * 256);
    }
    // change the values in the textfield to reflect new colours
    $('#colour1').prop('value', firstRand);
    $('#colour2').prop('value', secondRand);
    
    // draw squares and fill in gradient
    rgb = draw(numSquares, sqH, ctx, firstRand, secondRand);
  });
});

// function to draw squares and fill in gradient
var draw = function(numSquares, sqH, ctx, first, second) {
  // array to store all rgb values
  var rgb = [];
  
  // some math for colour gradients
  var diff1 = first[0]-second[0];
  var diff2 = first[1]-second[1];
  var diff3 = first[2]-second[2];
  
  var mult1 = diff1/(numSquares-1);
  var mult2 = diff2/(numSquares-1);
  var mult3 = diff3/(numSquares-1);
  for (var i = 0; i < numSquares; i++) {
    for (var j = 0; j < numSquares; j++) {
      // variable to store a certain square's rgb value 
      var colour = [];
      colour[0] = Math.floor(first[0]-(mult1*i));
      colour[1] = Math.floor(first[1]-(mult2*j));
      colour[2] = Math.floor(first[2]-(mult3*i));
      rgb.push(colour);
      // change this line to fit two colors specified by user
      ctx.fillStyle = 'rgb(' + colour[0] + ',' + colour[1] + ',' + colour[2] + ')';
      ctx.fillRect(i*sqH, j*sqH, sqH, sqH);
    }
  }
  // return array of colours
  return rgb;
}

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Lato:300,400);


@-webkit-keyframes trippy {
  0% { background: #333333 }
  50% { background: #34373C }
  100% { background: #2F4F4F }
}
@keyframes trippy {
  0% { background: #333333 }
  50% { background: #34373C }
  100% { background: #2F4F4F }
  /*20% { background: #9DFDDE }
  40% { background: #B5FDCC }
  60% { background: #CDFDB9 }
  80% { background: #E5FDA7 }
  100% { background: #FDFD95 }*/
}

body {
  overflow-x: hidden;
  -webkit-animation: trippy 5s alternate infinite ease;
          animation: trippy 5s alternate infinite ease;
}

.para {
  text-align: center;
  width: 400px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 15px;
  color: white;
  border: 3px solid #ffd194;
  padding-top: 4px;
}

.optional {
  color: #ffd194;
}

.cancont {
  /* what a silly name */
  height: 45vh;
  width: 45vh;
  margin: 0 auto;
  position: relative;
}

#myCanvas {
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: ivory 0 0 5px;
}

.container-fluid {
  padding: 3px 0;
  height: 20vh;
  width: 300px;
  margin: 0 auto;
  font-family: 'Lato';
  font-weight: 300;
  color: #ffd194;
  text-align: center;
  margin-top: 10px;
}

.form-group {
  position: relative;
  left: 50%;
  transform: translate(-43%);
}

input {
  width: 150px !important;
}
:-ms-input-placeholder {
  text-align: center;
}
.btn, .btn:hover, .btn:active, .btn:focus {
  text-decoration: none;
  outline: none;
  border: none;
  color: #ffd194;
  background: transparent;
}