Creating a Dynamic Vertical Gradient in PHP

calculate-steps.php

<?php

// You may replace this with a static height.
$height = $_GET['height'];

// You may replace this with a static start color.
// RGB goes here, e.g. Array(255, 0, 0) for red
$start = Array();

// You may replace this with a static end color.
// RGB goes here, e.g. Array(0, 0, 255) for blue
$end = Array();

/*
Convert start hex to RGB.
Delete this block of code if using a static start color.
For three values (red, green, and blue)...
*/
for ($x = 0; $x < 3; $x++) {

  /*
  We need to get the value of the color from
    its place in the hex string.
  e.g. for red, we'll want the first two characters.
  e.g. for blue, we'll want the last two characters.
  Take the color #fc8400 for example.
  For RED, $value1 will be f, $value2 will be c
  For GREEN, $value1 will be 8, $value2 will be 4
  For BLUE, $value1 will be 0, $value2 will be 0
  */
  $value1 = substr($_GET['from'], $x * 2, 1);
  $value2 = substr($_GET['from'], $x * 2 + 1, 1);

  /*
  Convert the base-16 numbers to base-10.
  e.g. 0 is the 0th character so will be converted to 0
  e.g. 8 is the 8th character so will be converted to 8
  e.g. A is the 10th character so will be converted to 10
  e.g. F is the 15th character so will be converted to 15
  $value1 is multiplied by 16 because every 1 first digit
    in hex is equivalent to 16 second digits.
  e.g. 10 in hex is 16 in decimal, 20 is 32, f0 is 240.
  */
  $value1 = stripos('0123456789abcdef', $value1) * 16;
  $value2 = stripos('0123456789abcdef', $value2);

  /*
  Add the decimal value to the array.
  e.g. FF when converted to RGB becomes
  $value1 = 'F' * 16 = 15 * 16 = 240;
  $value2 = 'F' = 15;
  $value1 + $value2 = 255; // FF = 255
  */
  array_push($start, $value1 + $value2);
}

/*
Convert end color to RGB.
Delete this block of code if using a static end color.
Condensed because the algorithm was explained above.
*/
$end = Array();
for ($x = 0; $x < 3; $x++)
  array_push($end,
    stripos('0123456789abcdef',
      substr($_GET['to'], $x * 2, 1)
    ) * 16 +
    stripos('0123456789abcdef',
      substr($_GET['to'], $x * 2 + 1, 1)
    )
  );

/*
Now we need to calculate how much the gradient will change with each pixel.
I call these "steps"
A step for red, a step for green, and a step for blue.
In English, if we're trying to get from 0 to 100 in 4 steps, each step needs to be 25 (25, 50, 75, 100).
*/
$step = Array();

// For each of red, green, and blue...
for ($x = 0; $x < 3; $x++) {

  // Take the difference between the two values, e.g. 100 - 0
  $difference = $end[$x] - $start[$x];

  // Calculate the step size for this difference, e.g. 100 / 4
  $step_size = $difference / $height;
  array_push($step, $step_size);
}

?>