Playing with gradients

Just playing with gradients and canvas

by Rushan Sakhibgareev

HTML

<script src="https://rawgit.com/anomal/RainbowVis-JS/master/rainbowvis.js"></script>
<div>
<input id="color1" type="color" value="#ff0000"/>
<input id="color2" type="color" value="#ffffff"/>
<input id="steps" type="number" min="2" step="1" value="2" />
</div>

<canvas id="color-palette" width="512" height="512"></canvas>

JavaScript

// Going for the gradient in this:
// http://www.cs.ucr.edu/~vbz/cs230papers/x-toon.pdf

// Stemming from this SO question:
// http://stackoverflow.com/questions/38317719/rendering-artifacts-when-using-dotn-l-as-texture-lookup-coordinate-webgl

var canvas = document.getElementById('color-palette');

var controller = new GradientController(canvas);
controller.draw();

c1input = document.getElementById('color1');
c1input.addEventListener('input', function(e){
	controller.setColor1(c1input.value);
  controller.draw();
});

c2input = document.getElementById('color2');
c2input.addEventListener('input', function(e){
	controller.setColor2(c2input.value);
  controller.draw();
});

stepinput = document.getElementById('steps');
stepinput.addEventListener('change', function(e){
	controller.setSteps(stepinput.value);
  controller.draw();
});

function GradientController(canvasElement){
	this.canvas = canvasElement;
  this.ctx = this.canvas.getContext('2d');
	this.steps = 2;
  this.color1 = '#ff0000';
  this.color2 = '#ffffff';
  
  // https://github.com/anomal/RainbowVis-JS
  this.rainbow = new Rainbow();

  this.rainbow.setNumberRange(0, this.steps - 1);
  
  this.setSteps = function(value){
  	this.steps = value;
    this.rainbow.setNumberRange(0, value - 1);
  }
  this.setColor1 = function(value){
  	this.color1 = value;
    this.rainbow.setSpectrum(this.color1, this.color2);
  }
  this.setColor2 = function(value){
  	this.color2 = value;
    this.rainbow.setSpectrum(this.color1, this.color2);
  }
  
  
  
  this.draw = function(){
  	//var gradient = this.ctx.createLinearGradient(0,0,this.canvas.width,this.canvas.height);
    //gradient.addColorStop(0.5,this.color1);
    //gradient.addColorStop(0.5,this.color2);
    //console.log(this.generateColors('hex'));
    for(var i=0; i < this.steps; i++){
    	this.ctx.fillStyle = '#'+this.rainbow.colourAt(i);
      var xpos = (this.canvas.width / this.steps) * i;
      var width = this.canvas.width / this.steps;
     ...