Daily Direct Sun Through a Facade

forked from chriswmackey's block: Explore Facade Options

forked from chriswmackey's block: Direct Sun Through a Facade

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="//d3js.org/d3.v3.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="solarPosition.js"></script>
  <script src="intersection.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #inputSliders { font-family:sans-serif;outline:none;margin-top:10px}
    .inputgroup {border:none;}
    .slider { width:400px;float:left;padding:10px;}
    .slider2 { width:210px;float:left;padding:10px;}
    label { float:left;font-weight:bold;padding-bottom:10px;}
    input[type=range] { float:left;clear:left;margin-right:10px;width:320px;}
    .slider2 input[type=range] { float:left;clear:left;margin-right:10px;width:130px;}
    input[type=range]::-ms-track { background: transparent;border-color: transparent;color: transparent;-webkit-appearance: none}
    input[type=range]::-webkit-slider-runnable-track { height: 5px;background:#7c7c7c; margin-top: -4px;}
    input[type=range]::-webkit-slider-thumb { margin-top:-6px;}
    #inputSliders p {padding-top:10px;}
  </style>
</head>

<body>
  <div id="inputSliders">
			<form id="sliders" autocomplete="off">
				<fieldset class="inputgroup">
          <div class="slider" id="altitude">
					<label>Month</label>
					<input type="range" name="mon" id="mon" value="9" min="1" max="12" step = "1"><p id="monoutput">Sep</p></div>
          <div class="slider" id="azimuth">
          <label>Day</label>
					<input type="range" name="day" id="day" value="21" min="1" max="31" step = "1"><p id="dayoutput">21</p></div>
          <div class="slider2">
					<label>Window Width</label>
					<input type="range" name="width" id="width" value="5" min="1" max="15" step = "0.5"><p id="widthoutput">5 ft</p></div>
          <div class="slider2">
          <label>Window Height</label>
					<input type="range" name="height" id="height" value="7" min="1" max="12" step = "0.5"><p id="heightoutput">7 ft</p></div>
          <div class="slider2">
          <label>Window X</label>
					<input type="range" name="wx" id="wx" value="4" min="0" max="15" step = "0.5"><p id="xoutput">4 ft</p></div>
          <div class="slider2">
          <label>Window Y</label>
					<input type="range" name="wy" id="wy" value="3" min="0" max="15"  step = "0.5"><p id="youtput">3 ft</p></div>
				</fieldset>
			</form>
		</div>
  
  <div id="content">
    </div>
  
  <script>
    // Global variables
    var dimensions = {x: 60, y:30}
    var gridSize = .25
    var facadeY = -dimensions.y * gridSize
    var increment = gridSize/2
    var floorH = 3
    
    // Create a colored grid of results.
    var svgWidth = 960
    var svgHeight = 400
    var padding = {top: 10, left:100, right:100}
    var cellDim = parseInt((svgWidth - padding.left - padding.right)/dimensions.x)
    
    // Create a grid of points
    var svg = d3.select("#content").append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight)
    
    var pointGrid = []
    var dataset = []
    for (var i = 0; i < dimensions.x; i++) {
      for (var j = 0; j < dimensions.y; j++) {
      	pointGrid.push({x:(i*gridSize)+increment, y:-(j*gridSize)-increment, z:floorH})
        svg.append("rect")
        	.attr("x", padding.left + cellDim*i)
          .attr("y", padding.top + cellDim*j)
          .attr("width", cellDim)
          .attr("height", cellDim)
          .attr('fill', 'red')
          .style("stroke", "#000")
          .style("stroke-width", "0.05em");
      }
    }
    
    // Create the facade graphic
    var facadeSvg = d3.select("#content").append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight)
    
    facadeSvg.append("rect")
      .attr("x", padding.left)
      .attr("y", padding.top)
      .attr("width", (cellDim*dimensions.x))
      .attr("height", (cellDim*15))
      .attr('fill', '#b5b5b5')
      .style("stroke-width", "0.05em");
    
    
  	// Get inputs
    var Mon = parseFloat($("#mon").val());
    var Day = parseFloat($("#day").val());
    var Width = parseFloat($("#width").val());
    var Height = parseFloat($("#height").val());
    var WX = parseFloat($("#wx").val());
    var WY = parseFloat($("#wy").val());
    
    // Dictionaries for specific outputs.
    var monDict = {1:"Jan", 2:"Feb", 3:"Mar", 4:"Apr", 5:"May", 6:"Jun", 7:"Jul", 8:"Aug", 9:"Sep", 10:"Oct", 11:"Nov", 12:"Dec"}
    
    // Update the display as inputs change
    $("#mon").on("input", function(event) {
      Mon = parseFloat($(this).val());
      $("#monoutput").text(monDict[Mon]);
      sunVecs = updateSunVecs(solarObject, Mon, Day)
    	sunResult = threeDIntersect(sunVecs, pointGrid, windowExtrusions, [], 1/timestep)
			updateChart(sunResult)
    });
    $("#day").on("input", function(event) {
      Day = parseFloat($(this).val());
      $("#dayoutput").text(Day.toString());
      sunVecs = updateSunVecs(solarObject, Mon, Day)
    	sunResult = threeDIntersect(sunVecs, pointGrid, windowExtrusions, [], 1/timestep)
			updateChart(sunResult)
    });
    $("#width").on("input", function(event) {
      Width = parseFloat($(this).val());
      $("#widthoutput").text(Width.toString() + 'ft');
      windowExtrusions = updateWinDim()
      sunResult = threeDIntersect(sunVecs, pointGrid, windowExtrusions, [], 1/timestep)
      updateChart(sunResult)
    });
    $("#height").on("input", function(event) {
      Height = parseFloat($(this).val());
      $("#heightoutput").text(Height.toString() + 'ft');
      windowExtrusions = updateWinDim()
      sunResult = threeDIntersect(sunVecs, pointGrid, windowExtrusions, [], 1/timestep)
      updateChart(sunResult)
    });
    $("#wx").on("input", function(event) {
      WX = parseFloat($(this).val());
      $("#xoutput").text(WX.toString() + 'ft');
      windowExtrusions = updateWinDim()
      sunResult = threeDIntersect(sunVecs, pointGrid, windowExtrusions, [], 1/timestep)
      updateChart(sunResult)
    });
    $("#wy").on("input", function(event) {
      WY = parseFloat($(this).val());
      $("#youtput").text(WY.toString() + 'ft');
      windowExtrusions = updateWinDim()
      sunResult = threeDIntersect(sunVecs, pointGrid, windowExtrusions, [], 1/timestep)
      updateChart(sunResult)
    });
    
    // Set up solar position for Boston.
    var solarObject = solarCalculator([-71, 42])
    var TimeZone = -5
    var offset = (new Date().getTimezoneOffset())/60
    var timestep = 2
    
    
    // Function to update sun vectors.
    var updateSunVecs = function (solarObj, Mon, Day){
      // Convert sphereical to cartesian.
      var RAD2DEG = 180 / Math.PI
      var DEG2RAD = Math.PI / 180
      function polarToCartesian(lon, lat) {
        var phi = ( 90 - lat ) * DEG2RAD
        var theta = ( -lon ) * DEG2RAD

return {
          x: -(Math.sin(phi) * Math.sin(theta)),
          y: Math.sin(phi) * Math.cos(theta),
          z: Math.cos(phi),
        }
      }
      
      var dates = []
      var sunvecs = []
      for (i = 1; i <= 24*timestep; i++) {
        hour = i/timestep
        dates.push(new Date(2000, Mon-1, Day, hour - TimeZone - offset, (hour%parseInt(hour))*60))
      }

for (i = 0; i < dates.length; i++) {
        var posit = solarObj.position(dates[i])
        if (posit[1] > 0){
          sunvecs.push(polarToCartesian(posit[0], posit[1]))
        }
      }
      return sunvecs
    }
    
    
    // Function to update window dimensions.
    function updateWinDim(){
      facadeSvg.selectAll('.window').remove();
      facadeSvg.append("rect")
        .attr("x", padding.left + (cellDim*WX)/gridSize)
        .attr("y", padding.top + (cellDim*15) - (cellDim*WY) - (cellDim*Height))
        .attr("width", cellDim*Width*(1/gridSize))
        .attr("height", cellDim*Height)
        .attr('fill', "#bee9ee")
      	.attr("class", "window");
      
      var windowSrfs = [{xy:[[WX, facadeY], [WX+Width, facadeY]], yz:[[facadeY, WY], [facadeY, WY+Height]]}]
      return windowSrfs
    }
    
    color = d3.scale.linear().domain([1,12])
      .interpolate(d3.interpolateHcl)
      .range([d3.rgb("#007AFF"), d3.rgb('#FFF500')]);
    
    
    // Function to update the colored chart
    function updateChart(dataset) {
      svg.selectAll('rect')
        .data(dataset)
        .attr('fill', function(d){return color(d)})
    }
    
    
    
    // Run the functions to generate everything.
    var sunVecs = updateSunVecs(solarObject, Mon, Day)
    var windowExtrusions = updateWinDim()
    var sunResult = threeDIntersect(sunVecs, pointGrid, windowExtrusions, [], 1/timestep)
		updateChart(sunResult)
    
   d3.select(self.frameElement).style("height", 960 + "px");
  </script>
  
</body>

https://d3js.org/d3.v3.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js