File: C:/xampp/htdocs/cieclock/phpclock3.php
<?php
$csec=date('s');
//$csec=3;
//echo "csec:".$csec;
$cseci=360-(($csec-15)*6);
$cseci0=360-(($csec-1-15)*6);
if ($cseci>360){
$cseci=$cseci-360;
}
if ($cseci0>360){
$cseci0=$cseci0-360;
}
//echo "cseci:".$cseci;
include 'de00.php';
include 'lab2xyz.php';
function RGBToHex($r, $g, $b) {
//String padding bug found and the solution put forth by Pete Williams (http://snipplr.com/users/PeteW)
$hex = "#";
$hex.= str_pad(dechex($r), 2, "0", STR_PAD_LEFT);
$hex.= str_pad(dechex($g), 2, "0", STR_PAD_LEFT);
$hex.= str_pad(dechex($b), 2, "0", STR_PAD_LEFT);
return $hex;
}
function cieXYZtoSRGB($X, $Y, $Z) {
// Normalize XYZ values
$X /= 1.0;
$Y /= 1.0;
$Z /= 1.0;
// Linear transformation from XYZ to RGB
$R = $X * 3.2406 + $Y * -1.5372 + $Z * -0.4986;
$G = $X * -0.9689 + $Y * 1.8758 + $Z * 0.0415;
$B = $X * 0.0557 + $Y * -0.2040 + $Z * 1.0570;
// Compensate for out-of-range RGB values
$R = ($R > 0.0031308) ? (1.055 * pow($R, (1 / 2.4)) - 0.055) : (12.92 * $R);
$G = ($G > 0.0031308) ? (1.055 * pow($G, (1 / 2.4)) - 0.055) : (12.92 * $G);
$B = ($B > 0.0031308) ? (1.055 * pow($B, (1 / 2.4)) - 0.055) : (12.92 * $B);
// Clamp RGB values to [0, 1] range
$R = max(0, min(1, $R));
$G = max(0, min(1, $G));
$B = max(0, min(1, $B));
// Scale to 8-bit sRGB values
$R = round($R * 255);
$G = round($G * 255);
$B = round($B * 255);
// Return sRGB color array
return [$R, $G, $B];
}
function cieXYZtoAdobeRGB($X, $Y, $Z) {
// Normalize XYZ values
$X /= 1.0;
$Y /= 1.0;
$Z /= 1.0;
// Transformation matrix from XYZ to Adobe RGB
$matrix = [
[ 2.04159, -0.56501, -0.34473],
[-0.96924, 1.87597, 0.04156],
[ 0.01344, -0.11836, 1.01517]
];
// Linear transformation from XYZ to Adobe RGB
$R = $matrix[0][0] * $X + $matrix[0][1] * $Y + $matrix[0][2] * $Z;
$G = $matrix[1][0] * $X + $matrix[1][1] * $Y + $matrix[1][2] * $Z;
$B = $matrix[2][0] * $X + $matrix[2][1] * $Y + $matrix[2][2] * $Z;
// Compensate for out-of-range RGB values
$R = ($R > 0.0031308) ? (1.055 * pow($R, (1 / 2.4)) - 0.055) : (12.92 * $R);
$G = ($G > 0.0031308) ? (1.055 * pow($G, (1 / 2.4)) - 0.055) : (12.92 * $G);
$B = ($B > 0.0031308) ? (1.055 * pow($B, (1 / 2.4)) - 0.055) : (12.92 * $B);
// Clamp RGB values to [0, 1] range
$R = max(0, min(1, $R));
$G = max(0, min(1, $G));
$B = max(0, min(1, $B));
// Scale to 8-bit Adobe RGB values
$R = round($R * 255);
$G = round($G * 255);
$B = round($B * 255);
// Return Adobe RGB color array
return [$R, $G, $B];
}
function cieXYZtoP3RGB($X, $Y, $Z) {
// Normalize XYZ values
$X /= 1.0;
$Y /= 1.0;
$Z /= 1.0;
// Transformation matrix from XYZ to Display P3 RGB
$matrix = [
[ 2.725394, -1.018662, -0.440185],
[-0.795168, 1.781022, 0.015715],
[ 0.041241, -0.126682, 1.272056]
];
// Linear transformation from XYZ to Display P3 RGB
$R = $matrix[0][0] * $X + $matrix[0][1] * $Y + $matrix[0][2] * $Z;
$G = $matrix[1][0] * $X + $matrix[1][1] * $Y + $matrix[1][2] * $Z;
$B = $matrix[2][0] * $X + $matrix[2][1] * $Y + $matrix[2][2] * $Z;
// Compensate for out-of-range RGB values
$R = ($R > 0.0031308) ? (1.055 * pow($R, (1 / 2.4)) - 0.055) : (12.92 * $R);
$G = ($G > 0.0031308) ? (1.055 * pow($G, (1 / 2.4)) - 0.055) : (12.92 * $G);
$B = ($B > 0.0031308) ? (1.055 * pow($B, (1 / 2.4)) - 0.055) : (12.92 * $B);
// Clamp RGB values to [0, 1] range
$R = max(0, min(1, $R));
$G = max(0, min(1, $G));
$B = max(0, min(1, $B));
// Scale to 8-bit Display P3 RGB values
$R = round($R * 255);
$G = round($G * 255);
$B = round($B * 255);
// Return Display P3 RGB color array
return [$R, $G, $B];
}
/////sec section////////
$chrome=100;
$L=55;
if ($cseci>47){
$L=55;
}
if ($cseci>53){
$L=60;
}
if ($cseci>59){
$L=65;
}
if ($cseci>65){
$L=70;
}
if ($cseci>71){
$L=75;
}
if ($cseci>77){
$L=80;
}
if ($cseci>83){
$L=85;
//$chrome=87;
}
if ($cseci>89){
$L=93;
//$chrome=90;
}
if ($cseci>95){
$L=93;
//$chrome=87;
}
if ($cseci>101){
$L=92;
}
if ($cseci>107){
$L=90;
}
if ($cseci>113){
$L=88;
}
if ($cseci>119){
$L=85;
}
if ($cseci>125){
$L=83;
}
if ($cseci>131){
$L=80;
}
if ($cseci>137){
$L=78;
}
if ($cseci>143){
$L=75;
}
if ($cseci>149){
$L=70;
//$chrome=80;
}
if ($cseci>155){
$L=68;
//$chrome=80;
}
if ($cseci>161){
$L=65;
//$chrome=80;
}
if ($cseci>167){
$L=63;
//$chrome=80;
}
if ($cseci>173){
$L=60;
//$chrome=80;
}
if ($cseci>179){
$L=58;
//$chrome=80;
}
if ($cseci>185){
$L=55;
//$chrome=80;
}
$degree=deg2rad($cseci);
$a=cos($degree)*$chrome;
$b=sin($degree)*$chrome;
$degree0=deg2rad($cseci0);
$a0=cos($degree0)*$chrome;
$b0=sin($degree0)*$chrome;
//echo "L a b:".$L."_".$a."_".$b;
$de00=round(de00($L,$a,$b,$L,$a0,$b0),2);
//echo "de00:".$de00;
$SXm=lab2xyz("x",$L,$a,$b);
$SYm=lab2xyz("y",$L,$a,$b);
$SZm=lab2xyz("z",$L,$a,$b);
//58.763535563754_74.164133933331_12.406893998571_
// Example usage
$cieXYZ = [$SXm/100, $SYm/100, $SZm/100]; // Example CIE XYZ values
$sRGB = cieXYZtoSRGB($cieXYZ[0], $cieXYZ[1], $cieXYZ[2]);
$sR = $sRGB[0];
$sG = $sRGB[1];
$sB = $sRGB[2];
$secHEX=RGBToHex($sR,$sG,$sB);
$aRGB = cieXYZtoAdobeRGB($cieXYZ[0], $cieXYZ[1], $cieXYZ[2]);
$aR = $aRGB[0];
$aG = $aRGB[1];
$aB = $aRGB[2];
$asecHEX=RGBToHex($aR,$aG,$aB);
$pRGB = cieXYZtoP3RGB($cieXYZ[0], $cieXYZ[1], $cieXYZ[2]);
$pR = $pRGB[0];
$pG = $pRGB[1];
$pB = $pRGB[2];
$psecHEX=RGBToHex($pR,$pG,$aB);
// Generate random RGB color values for the circular rings of the first clock
$inner_ring_color_1 = sprintf('#%02x%02x%02x', $pR,$pG,$pB);
$middle_ring_color_1 = sprintf('#%02x%02x%02x',$aR,$aG,$aB);
$outer_ring_color_1 = sprintf('#%02x%02x%02x', $sR,$sG,$sB);
/////////////////////////////////////////////////////////////2nd clock
$chrome=25;
$L=85;
if ($cseci>47){
$L=85;
}
if ($cseci>53){
//$L=60;
}
if ($cseci>59){
//$L=65;
}
if ($cseci>65){
//$L=70;
}
if ($cseci>71){
//$L=75;
}
if ($cseci>77){
//$L=80;
}
if ($cseci>83){
$L=85;
}
if ($cseci>89){
$L=93;
}
if ($cseci>95){
$L=93;
}
if ($cseci>101){
$L=92;
}
if ($cseci>107){
$L=90;
}
if ($cseci>113){
$L=88;
}
if ($cseci>119){
$L=85;
}
if ($cseci>125){
//$L=83;
}
if ($cseci>131){
//$L=80;
}
if ($cseci>137){
//$L=78;
}
if ($cseci>143){
//$L=75;
}
if ($cseci>149){
//$L=70;
//$chrome=80;
}
if ($cseci>155){
//$L=68;
//$chrome=80;
}
if ($cseci>161){
///$L=65;
//$chrome=80;
}
if ($cseci>167){
//$L=63;
//$chrome=80;
}
if ($cseci>173){
//$L=60;
//$chrome=80;
}
if ($cseci>179){
$L=80;
//$chrome=80;
}
if ($cseci>269){
$L=85;
//$chrome=80;
}
$degree=deg2rad($cseci);
$a=cos($degree)*$chrome;
$b=sin($degree)*$chrome;
$degree0=deg2rad($cseci0);
$a0=cos($degree0)*$chrome;
$b0=sin($degree0)*$chrome;
//echo "L a b:".$L."_".$a."_".$b;
$de00=round(de00($L,$a,$b,$L,$a0,$b0),2);
//echo "de00:".$de00;
$SXm=lab2xyz("x",$L,$a,$b);
$SYm=lab2xyz("y",$L,$a,$b);
$SZm=lab2xyz("z",$L,$a,$b);
//58.763535563754_74.164133933331_12.406893998571_
// Example usage
$cieXYZ = [$SXm/100, $SYm/100, $SZm/100]; // Example CIE XYZ values
$sRGB = cieXYZtoSRGB($cieXYZ[0], $cieXYZ[1], $cieXYZ[2]);
$sR = $sRGB[0];
$sG = $sRGB[1];
$sB = $sRGB[2];
$secHEX=RGBToHex($sR,$sG,$sB);
$aRGB = cieXYZtoAdobeRGB($cieXYZ[0], $cieXYZ[1], $cieXYZ[2]);
$aR = $aRGB[0];
$aG = $aRGB[1];
$aB = $aRGB[2];
$asecHEX=RGBToHex($aR,$aG,$aB);
$pRGB = cieXYZtoP3RGB($cieXYZ[0], $cieXYZ[1], $cieXYZ[2]);
$pR = $pRGB[0];
$pG = $pRGB[1];
$pB = $pRGB[2];
$psecHEX=RGBToHex($pR,$pG,$aB);
// Generate random RGB color values for the circular rings of the second clock
$inner_ring_color_2 = sprintf('#%02x%02x%02x', $pR,$pG,$pB);
$middle_ring_color_2 = sprintf('#%02x%02x%02x',$aR,$aG,$aB);
$outer_ring_color_2 = sprintf('#%02x%02x%02x', $sR,$sG,$sB);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Analog Clocks with Circular Rings and Moving Hands</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
}
.clock-container {
display: flex;
justify-content: space-around;
align-items: center;
width: 400px;
}
.clock {
position: relative;
width: 200px;
height: 200px;
border: 2px solid #000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
position: absolute;
width: 80px; /* Adjust the size of each ring */
height: 80px; /* Adjust the size of each ring */
border-radius: 50%;
}
/* Clock 1 rings */
.inner-ring-1 {
background-color: <?php echo $inner_ring_color_1; ?>;
width: 80px;
height: 80px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.middle-ring-1 {
background-color: <?php echo $middle_ring_color_1; ?>;
width: 145px;
height: 145px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.outer-ring-1 {
background-color: <?php echo $outer_ring_color_1; ?>;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Clock 2 rings */
.inner-ring-2 {
background-color: <?php echo $inner_ring_color_2; ?>;
width: 80px;
height: 80px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.middle-ring-2 {
background-color: <?php echo $middle_ring_color_2; ?>;
width: 145px;
height: 145px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.outer-ring-2 {
background-color: <?php echo $outer_ring_color_2; ?>;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Clock hands */
.hand {
position: absolute;
width: 2px; /* Adjust the width of the hands */
height: 50px; /* Adjust the length of the hands */
background-color: black; /* Set the color of the hands */
top: 50%;
left: 50%;
transform-origin: center bottom;
}
.hour-hand {
width: 4px;
height: 50px;
background-color: red;
transform: translate(-50%, -100%) rotate(90deg); /* Adjust rotation and position */
}
.minute-hand {
width: 2px;
height: 70px;
background-color: green;
transform: translate(-50%, -100%) rotate(180deg); /* Adjust rotation and position */
}
.second-hand {
width: 1px; /* Adjust the width of the second hand */
height: 80px; /* Adjust the length of the second hand */
background-color: blue; /* Set the color of the second hand */
transform: translate(-50%, -100%) rotate(270deg); /* Adjust rotation and position */
}
</style>
</head>
<body>
<div class="container">
<div class="clock-container">
<table>
<tr>
<td>
<div class="clock">
<div class="circle outer-ring-1"></div>
<div class="circle middle-ring-1"></div>
<div class="circle inner-ring-1"></div>
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="clock">
<div class="circle outer-ring-2"></div>
<div class="circle middle-ring-2"></div>
<div class="circle inner-ring-2"></div>
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
</div>
</td>
</tr>
</table>
</div>
</div>
<script>
function moveClockHands() {
// Get the current time
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// Calculate the rotation angles for the clock hands
const hourAngle = (hours % 12) * 30 + minutes * 0.5;
const minuteAngle = minutes * 6;
const secondAngle = seconds * 6;
// Apply the rotation angles to the clock hands
const hourHands = document.querySelectorAll('.hour-hand');
hourHands.forEach(hand => hand.style.transform = `translate(-50%, -100%) rotate(${hourAngle}deg)`);
const minuteHands = document.querySelectorAll('.minute-hand');
minuteHands.forEach(hand => hand.style.transform = `translate(-50%, -100%) rotate(${minuteAngle}deg)`);
const secondHands = document.querySelectorAll('.second-hand');
secondHands.forEach(hand => hand.style.transform = `translate(-50%, -100%) rotate(${secondAngle}deg)`);
}
// Update clock hands every second
setInterval(moveClockHands, 1000);
</script>
</body>
</html>