Design a web utility that allows the user to view the entirety of a color spectr
ID: 3544745 • Letter: D
Question
Design a web utility that allows the user to view the entirety of a color spectrum they provide. The user will enter the three color component values (red, green, and blue) as well as a gradient (an integer greater than 0). Utility should determine the ratio of red to green and green to blue. Starting with a red value of 0, increase the red by the gradient and use the ratio of red to green to infer the green component of the color. Use the ratio of green to blue to infer the blue component of the color. Print a 100px by 100px box of this color on the screen, with 5 boxes occuring per line. Repeat this process until any of the three color components reach or exceed 255.
Example:
User input: Red - 100, Green - 75, Blue - 50, gradient - 10
Expected output:
Ratio of Red to Green: 100/75
Ratio of Green to Blue: 75/50
The first box printed would be pure black: 0,0,0
The second box printed would be: Red - 10, Green - 10*(100/75), Blue 10*(75/50)
The third box printed would be: Red - 20, Green - 20*(100/75), Blue: 20*(75/50)
Design a web utility that allows the user to view the entirety of a color spectrum they provide. The user will enter the three color component values (red, green, and blue) as well as a gradient (an integer greater than 0). Utility should determine the ratio of red to green and green to blue. Starting with a red value of 0, increase the red by the gradient and use the ratio of red to green to infer the green component of the color. Use the ratio of green to blue to infer the blue component of the color. Print a 100px by 100px box of this color on the screen, with 5 boxes occuring per line. Repeat this process until any of the three color components reach or exceed 255. Example: User input: Red - 100, Green - 75, Blue - 50, gradient - 10 Expected output: Ratio of Red to Green: 100/75 Ratio of Green to Blue: 75/50 The first box printed would be pure black: 0,0,0 The second box printed would be: Red - 10, Green - 10*(100/75), Blue 10*(75/50) The third box printed would be: Red - 20, Green - 20*(100/75), Blue: 20*(75/50)Explanation / Answer
Here is your PHP script to generate the required color gradient. Please comment below the answer if you need more help:
<html>
<head><title>Color Gradient</title></head>
<style type="text/css">
div.outerbox
{
width: 510px;
float: left;
clear: both;
}
span.colorbox
{
width:100px;
height: 100px;
float: left;
clear: none;
}
</style>
<body>
<?php
function show_next_color($red, $green, $blue)
{
$color = str_pad(dechex($red),2,'0',STR_PAD_LEFT) . str_pad(dechex($green),2,'0',STR_PAD_LEFT) . str_pad(dechex($blue),2,'0',STR_PAD_LEFT);
echo "<span class='colorbox'></span>";
}
if(!isset($_GET['red']))
{
echo <<<FORM
<form name='colorform' action='' method='get'>
Red(0-255): <input type='text' name='red' maxlength='3'/><br>
Green(1-255): <input type='text' name='green' maxlength='3'/><br>
Blue(1-255): <input type='text' name='blue' maxlength='3'/><br>
Gradient: <input type='text' name='gradient' maxlength='3'/><br>
<input type='submit' value='Generate Gradient'/>
</form>
FORM;
}
else
{
$red = (int)$_GET['red'];
$green = (int)$_GET['green'];
$blue = (int)$_GET['blue'];
$gradient = (int)$_GET['gradient'];
if(strlen($red) == 0)
$red = 0;
if(strlen($green) == 0)
$green = 0;
if(strlen($blue) == 0)
$red = 0;
if(strlen($gradient) == 0)
$gradient = 0;
if($red == 0 || $green == 0 || $blue == 0 || $gradient == 0)
echo "Colors cannot be zero, Gradient has to be an integer greater than 1.";
else
{
$red_to_green = $red/$green;
$green_to_blue = $green/$blue;
# Start from zero
$red = 0;
$green = 0;
$blue = 0;
echo "<div class='outerbox'>";
show_next_color($red, $green, $blue);
while($red <= 255 && $green <= 255 && $blue <= 255)
{
$red += $gradient;
$green += ($gradient * $red_to_green);
$blue += ($gradient * $green_to_blue);
show_next_color($red, $green, $blue);
}
echo "</div>";
}
}
?>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.