Marco Spitzbarth

The End of the F***ing Internet

Benutzer-Werkzeuge

Webseiten-Werkzeuge


art:rgb-cube

RGB CUBE

HEX(adezimal)-Farb(Codes) sind im Grunde einfach Zahlen.
Nummern um einem Bildschirm mitzuteilen, welche Farben angezeigt werden sollen.
Der Nummernbereich geht von 0 (00 00 00) bis (FF FF FF) oder 16777215
Im Internet begegnen uns die Farben im Format: #F44CD7

Die Idee war jetzt die Farben (Zahlen) mittels einer Schleife zu iterieren. #what?
Und dabei den Farbraum zu berücksichtigen und daher nicht einfach eine Fläche zu bespielen sondern einen falzbaren Würfel zu generieren.

Wer den Ausschneidbogen gerne selber ausdrucken möchte findet hier das fertige PDF:


Wer sich selber am Code versuchen möchte findet hier einen guten Einstieg in den Algorithmus.

<?php
function RGB_CUBE($rgb){
  $printer = "<div class='bigbox'>";
    switch($rgb){
      case 0:
      for ($z=255; $z>=16; $z=$z-16){
      for ($x=255; $x>=16; $x=$x-16){
      $r = str_pad(dechex($z),2);
      $g = str_pad(dechex($x),2);
      $b = "00";
      $hex_color =$r.$g.$b;
      $printer.= "<div class='pixel' style='background-color:#".$hex_color.";'></div>";
      }}
      break;
      case 1:
      for ($z=255; $z>=16; $z=$z-16){
      for ($x=16; $x<=255; $x=$x+16){
      $r = str_pad(dechex($z),2);
      $g = "00";
      $b = str_pad(dechex($x),2);
      $hex_color =$r.$g.$b;
      $printer.= "<div class='pixel' style='background-color:#".$hex_color.";'></div>";
      }}
      break;
      case 2:
      for ($z=16; $z<=255; $z=$z+16){
      for ($x=255; $x>=16; $x=$x-16){
      $r = "00";
      $g = str_pad(dechex($x),2);
      $b = str_pad(dechex($z),2);
      $hex_color =$r.$g.$b;
      $printer.= "<div class='pixel' style='background-color:#".$hex_color.";'></div>";
      }}
      break;
    }
  $printer.= "</div>";
  return $printer;
}
for ($i=0;$i<3;$i++){
  $cube.= "<div style='float:left;'>".RGB_CUBE($i)."</div>";
}
?>
<html>
<head><title>RGB CUBE</title>
<style>
.bigbox{
  width: 315px;
  height:315px;
  padding:0px;
  margin:0px;
}
.pixel{
  float:left;
  width:20px;
  height:20px;
  padding:0px;
  overflow: auto;
  margin:0px 1px 1px 0px;
}
</style>
</head>
<body>
  <?php
  echo $cube;
  ?>
</body>
</html>

art/rgb-cube.txt · Zuletzt geändert: 2018/08/23 18:43 von spitz