Dynamic multicolor gradient image.

Question

I need to create a dynamic multicolor gradient image as shown below:

I need to create it dynamically for 2/3/4/5/6 colors while I'm working on 6 color gradients.

What i have done so far:

$size = 1536; $thickness = 54; $im = imagecreatetruecolor($size, $thickness); $clrCount = count($clr); $limit = floor($size/$clrCount); for($i = 0; $i < $limit; $i++) { // Line 1: red = 255 ; green = 0 -> 255 ; blue = 0 $mycolors[$i] = imagecolorallocate($im, 255, $i, 0); // Line 2: red = 255 -> 0 ; green = 255 ; blue = 0 $mycolors[$i + $limit] = imagecolorallocate($im, (255 - $i), 255, 0); // Line 3: red = 0 ; green = 255 ; blue = 0 -> 255 $mycolors[$i + $limit*2] = imagecolorallocate($im, 0, 255, $i); // Line 4: red = 0 ; green = 255 -> 0 ; blue = 255 $mycolors[$i + $limit*3] = imagecolorallocate($im, 0, (255 - $i), 255); // Line 5: red = 0 -> 255 ; green = 0 ; blue = 255 $mycolors[$i + $limit*4] = imagecolorallocate($im, $i, 0, 255); // Line 6: red = 255 ; green = 0 ; blue = 255 -> 0 $mycolors[$i + $limit*5] = imagecolorallocate($im, 255, 0, (255 - $i)); } for ($i=0; $i < $size; $i++) { imageline($im, $i, 0, $i, $thickness-1, $mycolors[$i]); } imagepng($im); imagegd($im); imagedestroy($im); 

I created the above image using this article

But the code here uses static color codes, when I tried to manipulate it, I get an image as shown below:

EDITED CODE

 $size = 1536; $thickness = 54; $im = imagecreatetruecolor($size, $thickness); $clrCount = count($clr); $limit = floor($size/$clrCount); $clr = array(0 => '4d6eae', 1 => 'e58f0e', 2 => 'ff00ff', 3 => '9900ff', 4 => '9f560a', 5 => '93c47d'); list($r, $g, $b) = sscanf($clr[0], "%02x%02x%02x"); list($r1, $g1, $b1) = sscanf($clr[1], "%02x%02x%02x"); list($r2, $g2, $b2) = sscanf($clr[2], "%02x%02x%02x"); list($r3, $g3, $b3) = sscanf($clr[3], "%02x%02x%02x"); list($r4, $g4, $b4) = sscanf($clr[4], "%02x%02x%02x"); list($r5, $g5, $b5) = sscanf($clr[5], "%02x%02x%02x"); for($i = 0; $i < $limit; $i++) { // Line 1: red = 255 ; green = 0 -> 255 ; blue = 0 $mycolors[$i] = imagecolorallocate($im, $r, $i, 0); // Line 2: red = 255 -> 0 ; green = 255 ; blue = 0 $mycolors[$i + $limit] = imagecolorallocate($im, ($r1 - $i), $g1, 0); // Line 3: red = 0 ; green = 255 ; blue = 0 -> 255 $mycolors[$i + $limit*2] = imagecolorallocate($im, 0, $g2, $i); // Line 4: red = 0 ; green = 255 -> 0 ; blue = 255 $mycolors[$i + $limit*3] = imagecolorallocate($im, 0, ($g3 - $i), 255); // Line 5: red = 0 -> 255 ; green = 0 ; blue = 255 $mycolors[$i + $limit*4] = imagecolorallocate($im, $i, 0, $b4); // Line 6: red = 255 ; green = 0 ; blue = 255 -> 0 $mycolors[$i + $limit*5] = imagecolorallocate($im, $r5, 0, ($b5 - $i)); } for ($i=0; $i < $size; $i++) { imageline($im, $i, 0, $i, $thickness-1, $mycolors[$i]); } imagepng($im); imagegd($im); imagedestroy($im); 

You can see that the gradient effect is lost because the static 255 is replaced by a dynamic value that creates negative numbers and thereby lose the effect.

Can someone help me create a dynamic color gradient image using this code, or can it help provide me with another direction to achieve this output using the gd library.

UPDATED

Now that I have received the answer to this question, I have a new problem related to this question.

What I want to achieve is a random distribution of colors now, something like this:

I'm going with a six-color array, as in the case of the problem above, I need a little hint to get started.

Answer 1

You yourself have already found the problem yourself. So keep going further:

You can see that the gradient effect is lost because the static 255 is replaced by a dynamic value that creates negative numbers and thereby lose the effect.

So, instead of decreasing from $i every time you have to decrease with a percentage of $i .

PSEUDOKOD

We want to go from the red value: from 50 to the red value: 200 by 75 steps. How do we do this?

 $red = 50; for ($i = 0; $i < 75; $i++) { $red = 50 + ((200 - 50) / 75) * $i; //Our color is: // The difference between the limits (150: 200-50) // divided by the amount of steps: 75. // We multiply the result by the current step. // And we add the lower limit to it, so we start at 50. } 

This code will give us:

50 - 52 - 54 - 56 - 58 - ... - 192 - 194 - 196 - 198

Now apply your code to reflect this:

 for($i = 0; $i < $limit; $i++) { $mycolors[$i] = imagecolorallocate($im, $r + (($r1 - $r) / $limit) * $i, $g + (($g1 - $g) / $limit) * $i, $b + (($b1 - $b) / $limit) * $i); $mycolors[$i + $limit] = imagecolorallocate($im, $r1 + (($r2 - $r1) / $limit) * $i, $g1 + (($g2 - $g1) / $limit) * $i, $b1 + (($b2 - $b1) / $limit) * $i); //Copy-paste magic here }