Colors & Gradients & A Little Math

sketch.js

var Y_AXIS = 1;
var X_AXIS = 2;
var c1, c2;

var img;
function setup() {
	createCanvas(640, 480);

  	img = loadImage( "kitten.png" );

  	c1 = color(254,214,70);
  	c2 = color(252,87,74);
	
  	background( 255 );

  	// we define this
	setGradient(0, 0, width, height, c1, c2, Y_AXIS);
}

function draw() {
  if( mouseIsPressed ){
    image( img, mouseX-(img.width/6), mouseY-(img.height/6), img.width/3, img.height/3 );  
  }
}

function setGradient(x, y, w, h, c1, c2, axis) {
  if (axis == Y_AXIS) {  // Top to bottom gradient
    for (var i = y; i <= y+h; i++) {
      var inter = map(i, y, y+h, 0, 1);
      var c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x+w, i);
    }
  }  
  else if (axis == X_AXIS) {  // Left to right gradient
    for (var i = x; i <= x+w; i++) {
      var inter = map(i, x, x+w, 0, 1);
      var c = lerpColor(c1, c2, inter);
      stroke(c);
      line(i, y, i, y+h);
    }
  }
}