--- /dev/null
+<html>
+ <head>
+ <!-- Latest compiled and minified CSS -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+
+ <!-- Optional theme -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+
+ <!-- Latest compiled and minified JavaScript -->
+ <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+
+ <style>
+ .highlighted {
+ background-color: blue;
+ }
+
+ .sprite table.outline td {
+ border: 1px solid red;
+ }
+
+ .sprite table {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .clearfix {
+ clear: both;
+ }
+
+ td.line-right {
+ border-right: 2px solid black;
+ }
+
+ /*.sprite {
+ float: left;
+ margin-right: 20px;
+ }*/
+ </style>
+
+ </head>
+ <body>
+ <div class="container-fluid">
+ <h1>Wooden Sprites :)</h1>
+
+ <ul class="nav nav-tabs">
+ <li class="nav active"><a href="#comparison" data-toggle="tab">Comparison</a></li>
+ <li class="nav"><a href="#materials" data-toggle="tab">Materials</a></li>
+ <li class="nav"><a href="#C" data-toggle="tab">C</a></li>
+ </ul>
+
+ <div class="tab-content">
+ <div class="tab-pane fade in active" id="comparison">
+ <div id="original_sprite">
+ <div class="col-md-6">
+ <h2>Original</h2>
+ <div class="sprite col-md-8"><?php echo $original_sprite; ?></div>
+ <div class="colour_table col-md-4"><?php echo $original_colour_table; ?></div>
+ </div>
+ <div class="col-md-6">
+ <h2>Ironlack approximation</h2>
+ <div class="sprite col-md-8"><?php echo $ironlak_sprite; ?></div>
+ <div class="colour_table col-md-4"><?php echo $ironlak_colour_table; ?></div>
+ </div>
+ </div>
+ </div>
+ <div class="tab-pane fade in" id="materials">
+ <div class="col-md-6">
+ <h2>Dimensions</h2>
+ <div class="sprite measurements col-md-8">
+ <?php echo $ironlak_sprite; ?>
+ </div>
+ <div class="col-md-4 vertical-line"> </div>
+ </div>
+ <div class="col-md-6">
+ <h2>Paint</h2>
+ <div class="col-md-12">
+ <?php echo $spray_can_breakdown; ?>
+ </div>
+
+ <h2 class="clearfix">Wood</h2>
+ <div class="col-md-12">
+ <?php echo $lumber_breakdown; ?>
+ </div>
+ </div>
+ </div>
+ <div class="tab-pane fade in" id="C">
+ nice meme :]
+ </div>
+ </div>
+ </div>
+
+ <script>
+ //$(".sprite").width());
+ $(".measurements tr").append("<td class='line-right'></td>")
+ var pixelSize = Math.floor($(".sprite:first").width()*0.75 / $(".sprite:first table tr:first td").length);
+
+ $(".sprite td").width(pixelSize);
+ $(".sprite td").height(pixelSize);
+
+ $(window).bind('resize', function(e)
+ {
+ window.resizeEvt;
+ $(window).resize(function()
+ {
+ clearTimeout(window.resizeEvt);
+ window.resizeEvt = setTimeout(function()
+ {
+ var pixelSize = Math.floor($(".sprite:visible").filter(":first").width()*0.75 / $(".sprite:first table tr:first td").length);
+ //console.log($(".sprite:visible").filter(":first").width());
+ //console.log($(".sprite:first table tr:first td").length)
+ //console.log(pixelSize);
+ $(".sprite td").width(pixelSize);
+ $(".sprite td").height(pixelSize);
+ }, 250);
+ });
+ });
+
+ $( ".colour-row" ).hover(function() {
+ var colour = $(this).attr('colour');
+ $("." + colour).toggleClass("highlighted");
+ });
+ </script>
+ </body>
+</html>
+
-<html>
- <head>
- <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+<?php
+
+function colourDiff($rgb1, $rgb2) {
+ $red1 = hexdec(substr($rgb1,0,2));
+ $green1 = hexdec(substr($rgb1,2,2));
+ $blue1 = hexdec(substr($rgb1,4,2));
+
+ $red2 = hexdec(substr($rgb2,0,2));
+ $green2 = hexdec(substr($rgb2,2,2));
+ $blue2 = hexdec(substr($rgb2,4,2));
+
+ return sqrt(pow($red1 - $red2, 2) + pow($green1 - $green2, 2) + pow($blue1 - $blue2, 2)) ;
+}
+
+function closest_colour($rgb, array $colours) {
+ $smallest_diff = 766;
+ $closest = 'none';
+
+ foreach($colours as $hex => $name)
+ {
+ if(colourDiff($rgb, $hex) < $smallest_diff) {
+ $smallest_diff = colourDiff($rgb, $hex);
+ $closest = $hex;
+ }
+ }
+
+ return $closest;
+}
+
+function array_to_table($array) {
+ $headings = $array[0];
+ unset($array[0]);
+ $output = '<table class="table"><tr>';
+
+ foreach($headings as $heading) {
+ $output .= '<th>' . $heading . '</th>';
+ }
+
+ $output .= '</tr>';
+
+ foreach($array as $row) {
+ $output .= '<tr>';
- <style>
- .highlighted {
- background-color: blue;
- }
-
- .sprite {
- float: left;
- margin-right: 20px;
- }
+ foreach($row as $column) {
+ $output .= '<td>' . $column . '</td>';
+ }
+
+ $output .= '</tr>';
+ }
+
+ $output .= '</table>';
+ return $output;
+}
+
+function image_to_array($image) {
+ $dimensions = getimagesize($image);
+ $image = imagecreatefrompng($image);
+ $array = array();
+
+ for($i=0; $i<$dimensions[1]; $i++) {
+ for($j=0; $j<$dimensions[0]; $j++) {
+ $rgb = imagecolorsforindex($image, imagecolorat($image, $j, $i));
+ $r = $rgb['red'];
+ $g = $rgb['green'];
+ $b = $rgb['blue'];
+ $a = $rgb['alpha'];
- </style>
+ $hex =
+ str_pad(dechex($rgb['red']), 2, '0', STR_PAD_LEFT) .
+ str_pad(dechex($rgb['green']), 2, '0', STR_PAD_LEFT) .
+ str_pad(dechex($rgb['blue']), 2, '0', STR_PAD_LEFT);
- </head>
+ if($a == 127) $hex = "NONE";
+
+ $array[$i][$j] = $hex;
+ }
+ }
- <body>
+ return $array;
+}
-<?php
+function array_to_sprite($array, $colourmap = NULL) {
+ $width = count($array[0]);
+ $height = count($array);
+ $output = "<table border='0' cellpadding='0' cellspacing='0'>";
+ for($i=0; $i<$height; $i++) {
+ $output .= '<tr>';
+ for($j=0; $j<$width; $j++) {
+ $hex = $colourmap ? $colourmap[$array[$i][$j]] : $array[$i][$j];
+ $output .= $array[$i][$j] !== 'NONE' ? "<td class='$hex' bgcolor='#$hex'></td>" : "<td bgcolor='#FFFFFF'></td>";
+ }
+
+ $output .= '</tr>';
+ }
+
+ $output .= '</table>';
+
+ return $output;
+}
+
+function generate_colourmap($array, $new_palette) {
+ $width = count($array[0]);
+ $height = count($array);
+ $colourMap = array('NONE' => 'NONE');
+
+ for($i=0; $i<$height; $i++) {
+ for($j=0; $j<$width; $j++) {
+ $colour = $array[$i][$j];
+ if(!isset($colourMap[$colour]))
+ $colourMap[$colour] = closest_colour($colour, $new_palette);
+ }
+ }
+
+ return $colourMap;
+}
+
+function count_pixels($array) {
+ $width = count($array[0]);
+ $height = count($array);
+ $count = 0;
+
+ for($i=0; $i<$height; $i++) {
+ for($j=0; $j<$width; $j++) {
+ if($array[$i][$j] !== 'NONE') $count++;
+ }
+ }
+
+ return $count;
+}
+
+function lumber_breakdown($cost_per_length, $wood_length, $wood_size, $num_blocks) {
+ $lengths_required = ceil($num_blocks*$wood_size/$wood_length);
+ $total_lumber_cost = $lengths_required * $cost_per_length;
+
+ return array_to_table(
+ array(
+ array(
+ 'Num blocks',
+ 'No of ' . $wood_length . 'm lengths required',
+ 'Cost @ ' . $cost_per_length . ' per length'
+ ),
+ array(
+ $num_blocks,
+ $lengths_required,
+ $total_lumber_cost
+ )
+ )
+ );
+}
+
+function lumber_cost($cost_per_length, $wood_length, $wood_size, $num_blocks) {
+ $lengths_required = ceil($num_blocks*$wood_size/$wood_length);
+ return $lengths_required * $cost_per_length;
+}
+
+function colour_count($array, $colour_map = NULL) {
+ $width = count($array[0]);
+ $height = count($array);
+ $colour_count = array();
+
+ for($i=0; $i<$height; $i++) {
+ for($j=0; $j<$width; $j++) {
+ $colour = isset($colour_map[$array[$i][$j]]) ? $colour_map[$array[$i][$j]] : $array[$i][$j];
+ $colour_count[$colour] = isset($colour_count[$colour]) ? $colour_count[$colour]+1 : 1;
+ }
+ }
+
+ return $colour_count;
+}
+
+function colour_count_table($colour_count) {
+ $output = '<table class="table table-hover table-condensed"><tr><th>Colour</th><th>RGB</th><th>Num blocks</th></tr>';
+
+ foreach($colour_count as $colour => $count) {
+ //<tr class='colour-row' id='$colour'><td bgcolor='$colour'></td><td>$colour</td><td>$qty</td></tr>
+ if($colour != 'NONE')
+ $output .= '<tr class="colour-row" colour="' . $colour . '"><td bgcolor="' . $colour . '"></td><td>' . $colour . '</td><td>' . $count . '</td></tr>';
+ }
+
+ $output .= '</table>';
+
+ return $output;
+}
+
+function colour_breakdown($colour_count, $block_size, $can_coverage, $coats, $colour_names, $discount_matrix) {
+ $output = '<table class="table table-hover table-condensed"><tr><th>Colour</th><th>Name</th><th>Num cans</th><th>Can %</th><th>Full price</th><th>% Price</th></tr>';
+ $cost_per_can = $discount_matrix[0];
+ $total_cans = 0;
+
+ foreach($colour_count as $colour => $count) {
+ $total_cans += ceil($count * $block_size * $block_size / $can_coverage);
+ }
+
+ foreach($discount_matrix as $num_needed => $cost) {
+ if($total_cans <= $num_needed)
+ $cost_per_can = $cost;
+ }
+
+ foreach($colour_count as $colour => $count) {
+ $can_percent = $count * $block_size * $block_size * $coats / $can_coverage;
+ $num_needed = ceil($can_percent);
+ if(isset($colour_names[$colour]))
+ $output .= '<tr class="colour-row" colour="' . $colour . '"><td bgcolor="' . $colour . '"></td><td>' . $colour_names[$colour] . '</td><td>' . $num_needed . '</td><td>' . $can_percent . '</td><td>' . $cost_per_can*$num_needed . '</td><td>' . $can_percent * $cost_per_can . '</td></tr>';
+ }
+
+ $output .= '</table>';
+
+ return $output;
+}
+
+function spray_can_cost($colour_count, $block_size, $can_coverage, $coats, $discount_matrix, $percent_cost = FALSE) {
+ $cost_per_can = $discount_matrix[0];
+ $total_cans = 0;
+
+ foreach($colour_count as $colour => $count) {
+ $total_cans += $percent_cost ? $count * $block_size * $block_size * $coats / $can_coverage : ceil($count * $block_size * $block_size / $can_coverage);
+ }
+
+ foreach($discount_matrix as $num_needed => $cost) {
+ if($total_cans <= $num_needed)
+ $cost_per_can = $cost;
+ }
+
+ return $percent_cost ? end($discount_matrix)*$total_cans : $total_cans*$cost_per_can;
+}
-// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$ironlak_colours = array(
"532f18" => "Earth",
"ffffff" => "Whitest Possible",
"000000" => "Blackest Possible"
);
-
- function colourDiff($rgb1, $rgb2) {
- $red1 = hexdec(substr($rgb1,0,2));
- $green1 = hexdec(substr($rgb1,2,2));
- $blue1 = hexdec(substr($rgb1,4,2));
- $red2 = hexdec(substr($rgb2,0,2));
- $green2 = hexdec(substr($rgb2,2,2));
- $blue2 = hexdec(substr($rgb2,4,2));
-
- return sqrt(pow($red1 - $red2, 2) + pow($green1 - $green2, 2) + pow($blue1 - $blue2, 2)) ;
- }
+ $discount_matrix = array(
+ 0 => 6.36, //120+ cans
+ 199 => 6.6, //60-199 cans
+ 59 => 6.76, //36-59 cans
+ 35 => 7, //12-35 cans
+ 11 => 7.16, //6-11 cans
+ 5 => 7.95 // 0-5 cans
+ );
- function closest_colour($rgb, array $colours) {
- $smallest_diff = 766;
- $closest = 'none';
-
- foreach($colours as $hex => $name)
- {
- if(colourDiff($rgb, $hex) < $smallest_diff) {
- $smallest_diff = colourDiff($rgb, $hex);
- $closest = $hex;
- }
- }
-
- return $closest;
- }
-
- $cost_per_length = $_POST['wood_cost'];
- $wood_length = $_POST['wood_length'];
- $wood_size = $_POST['wood_size'];
- $num_cans = 0;
- $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
- if($check !== false) {
- $colour_count = array();
- $icolour_count = array();
- $image = imagecreatefrompng($_FILES["fileToUpload"]["tmp_name"]);
- $ironlak_sprite = array();
-
- echo "<div class='sprite'>Original sprite:<br />";
-
- echo "<table border='0' cellpadding='0' cellspacing='0'>";
- for($i=0; $i<$check[1]; $i++) {
- echo '<tr>';
- for($j=0; $j<$check[0]; $j++) {
- $rgb = imagecolorsforindex($image, imagecolorat($image, $j, $i));
- $r = $rgb['red'];
- $g = $rgb['green'];
- $b = $rgb['blue'];
- $a = $rgb['alpha'];
- $hex =
- str_pad(dechex($rgb['red']), 2, '0', STR_PAD_LEFT) .
- str_pad(dechex($rgb['green']), 2, '0', STR_PAD_LEFT) .
- str_pad(dechex($rgb['blue']), 2, '0', STR_PAD_LEFT);
- if($a == 127) $hex = "ffffff";
-
- if($a == 0) {
- echo "<td width='4' height='4' class='$hex' bgcolor='#$hex' r='$r' g='$g' b='$b' a='$a'></td>";
- $colour_count[$hex] = isset($colour_count[$hex]) ? $colour_count[$hex]+1 : 1;
- } else {
- echo "<td width='4' height='4' bgcolor='#$hex' r='$r' g='$g' b='$b' a='$a'></td>";
- }
-
- $ironlak_sprite[$i][$j] = closest_colour($hex, $ironlak_colours);
- }
- echo '</tr>';
- }
- echo '</table></div>';
-
- echo "<div class='sprite'>Ironlak sprite:<br />";
-
- echo "<table border='0' cellpadding='0' cellspacing='0'>";
- for($i=0; $i<$check[1]; $i++) {
- echo '<tr>';
- for($j=0; $j<$check[0]; $j++) {
- $rgb = imagecolorsforindex($image, imagecolorat($image, $j, $i));
- $r = $rgb['red'];
- $g = $rgb['green'];
- $b = $rgb['blue'];
- $a = $rgb['alpha'];
- $ihex = $ironlak_sprite[$i][$j];
- if($a == 127) $ihex = "ffffff";
-
- if($a == 0) {
- echo "<td width='4' height='4' class='$ihex' bgcolor='#$ihex' r='$r' g='$g' b='$b' a='$a'></td>";
- $icolour_count[$ihex] = isset($icolour_count[$ihex]) ? $icolour_count[$ihex]+1 : 1;
- } else {
- echo "<td width='4' height='4' bgcolor='#$ihex' r='$r' g='$g' b='$b' a='$a'></td>";
- }
- }
- echo '</tr>';
- }
- echo '</table></div>';
- echo '<div style="clear: both;"></div>';
- $total_blocks = array_sum($colour_count);
- $lengths_required = ceil($total_blocks*$wood_size/$wood_length);
- echo '<br />';
- echo '<br />';
-
- echo 'Physical dimensions (metres)<br />';
- echo 'Width: ' . $check[0] * $wood_size . '<br />';;
- echo 'Height: ' . $check[1] * $wood_size;
-
- echo '<br /><br />';
-
- echo 'Wood cost breakdown<br />';
- echo '<table border=1>
- <tr>
- <td>Total blocks</td>
- <td>No of ' . $wood_length . 'm lengths required</td>
- <td>Cost @ ' . $cost_per_length . ' per length</td>
- </tr>
- <tr>
- <td>' . $total_blocks . '</td>
- <td>' . $lengths_required . '</td>
- <td>' . $lengths_required * $cost_per_length . '</td>
- </td>
- </table>';
-
- $wood_cost = $lengths_required * $cost_per_length;
- $paint_cost = 0;
-
- echo '<br /><br />';
- echo 'Colour cost breakdown<br /><br >';
- echo '<div class="sprite">Original colour table:<br />';
-
- echo '<table border=1>
- <tr>
- <td>Colour</td>
- <td>RGB</td>
- <td>Num blucks</td>
- </tr>';
- foreach($colour_count as $colour => $qty) {
- echo "<tr class='colour-row' id='$colour'><td bgcolor='$colour'></td><td>$colour</td><td>$qty</td></tr>";
- }
-
- echo '</table></div>';
-
- echo '<div class="sprite">Ironlak colour table:<br />';
-
- echo '<table border=1>
- <tr>
- <td>Colour</td>
- <td>Name</td>
- <td>Coverage (m^2)</td>
- <td>Cans needed</td>
- </tr>';
- foreach($icolour_count as $colour => $qty) {
- echo "<tr class='colour-row' id='$colour'><td bgcolor='$colour'></td><td>" . $ironlak_colours[$colour] . "</td><td>" . $qty * ($wood_size * $wood_size) . "</td><td>" . ceil(($qty * ($wood_size * $wood_size))/2.2) . "</td></tr>";
- $num_cans+=+ceil(($qty * ($wood_size * $wood_size))/2.2);
- }
-
- echo '</table></div>';
-
- echo '<div style="clear: both;"></div>';
- echo '<br />';
-
- echo 'Paint cost:<br />';
-
- $cost_per_can = 6.36;
- if($num_cans <= 199 ) {
- $cost_per_can = 6.60;
- }
-
- if($num_cans <= 59 ) {
- $cost_per_can = 6.76;
- }
-
- if($num_cans <= 35 ) {
- $cost_per_can = 7;
- }
-
- if($num_cans <= 11 ) {
- $cost_per_can = 7.16;
- }
-
- if($num_cans <= 5 ) {
- $cost_per_can = 7.65;
- }
- $paint_cost = $num_cans * $cost_per_can;
- echo "$num_cans cans @ $cost_per_can each: $paint_cost";
- echo '<br /><br />';
-
- $total_cost = $wood_cost + $paint_cost;
- echo '<div style="font-size: 40px">Total cost (wood+paint): ' . $total_cost . '</div>';
+ $pixel_array = image_to_array($_FILES["fileToUpload"]["tmp_name"]);
+ $sprite_width_px = count($pixel_array[0]);
+ $sprite_height_px = count($pixel_array);
+ $colour_map = generate_colourmap($pixel_array, $ironlak_colours);
+ $original_sprite = array_to_sprite($pixel_array);
+ $ironlak_sprite = array_to_sprite($pixel_array, $colour_map);
+
+ $lumber_breakdown = lumber_breakdown($_POST['wood_cost'], $_POST['wood_length'], $_POST['wood_size'], count_pixels($pixel_array));
+
+ $original_colour_table = colour_count_table(colour_count($pixel_array));
+ $ironlak_colour_table = colour_count_table(colour_count($pixel_array, $colour_map));
+
+ $spray_can_breakdown = colour_breakdown(colour_count($pixel_array, $colour_map), $_POST['wood_size'], 2.2, 3, $ironlak_colours, $discount_matrix);
- }
+ $cost_of_cans = spray_can_cost(colour_count($pixel_array, $colour_map), $_POST['wood_size'], 2.2, 3, $discount_matrix);
+ $value_of_can_used = spray_can_cost(colour_count($pixel_array, $colour_map), $_POST['wood_size'], 2.2, 3, $discount_matrix, TRUE);
+// echo $original_sprite;
+// echo $original_colour_table;
+//
+// echo $ironlak_sprite;
+// echo $ironlak_colour_table;
+//
+// echo $lumber_breakdown;
+// echo $spray_can_breakdown;
+
+ require_once('./breakdown.html');
}
?>
-
- <script>
- $( ".colour-row" ).hover(function() {
- var colour = $(this).attr('id');
- console.log(colour);
- $("." + colour).toggleClass("highlighted");
- });
- </script>
-
- </body>
-</html>
\ No newline at end of file
projects / pixel-calc.git / commitdiff
