r/dailyprogrammer [2015-08-10] Challenge #227 [Easy] Square Spirals https://www.reddit.com/r/dailyprogrammer/comments/3ggli3/20150810_challenge_227_easy_square_spirals/

squarespirals.html

<!-- demo@ http://jopf.re/squarespirals -->
<textarea cols="30" rows="3">9
6 8 </textarea>
<button>calculate</button>
<p></p>
<script type="text/javascript">
  var button = document.getElementsByTagName('button')[0];
  var output = document.getElementsByTagName('p')[0];
  var input, spiralSize, queryPointNumber, queryCoordiante, center, square, pointNumber, quarterSquare, quarterSquares, dx, dy, direction, squareHTML, queryHTML;

  button.onclick = function() {
    //get value from input field and split on the white space into an array
    input = queryPointNumber = queryCoordiante = "";
    input = document.getElementsByTagName('textarea')[0].value.split(/\s+/);

    if (input[0]%2) {
      spiralSize = input[0];    
    } else {
      output.innerHTML = "Error: spiral size must be odd";
      return;
    }
   
    if (input.length<3) { //handle varying input types
      queryPointNumber = +input[1];
    } else {
      queryCoordiante = [input[1]-1, spiralSize-input[2]];
    }

    center = Math.floor(spiralSize/2);

    //build the square
    square = new Array(spiralSize);
    for (var i = 0; i < spiralSize; i++) {
      //fills the columns with plus signs
      square[i] = new Array(spiralSize+1).join('+').split('');
    }

    quarterSquares = []; //these are the corner points of the spiral
    for (pointNumber = 1; pointNumber <= Math.pow(spiralSize, 2); pointNumber++) {
       quaterSquare = Math.floor(Math.pow(pointNumber, 2)/4)+1; //this is how the quarter squares are calcualted see https://oeis.org/A002620
      if (quaterSquare<=Math.pow(spiralSize, 2)) {
        quarterSquares.push(quaterSquare);
      }
    }

    dx = 0; //x position from the center
    dy = 0; //y position from the center
    direction = -1; //no direction to start with
    
    for (pointNumber = 1; pointNumber <= Math.pow(spiralSize, 2); pointNumber++) {
      for (var j = 0; j < quarterSquares.length; j++) {
        if (quarterSquares[j] === pointNumber) { //if the point number is a quater square
          direction++; //turn the direction
          if (direction > 3) { //if we have done a full circle
            direction = 0; //reset the direction
          }
        }
      }
      switch (direction) {
        case 0: //right
          setPointNumber();
          dx++;
          break;
        case 1: //up
          setPointNumber();
          dy++;
          break;
        case 2: //left
          setPointNumber();
          dx--;
          break;
        case 3: //down
          setPointNumber();
          dy--;
          break;
      }
      function setPointNumber() {
        if (spiralSize > 9) {
          square[center+dy][center+dx] = ("00" + pointNumber).slice(-3); //ensures all numbers are three digits
        } else {
          square[center+dy][center+dx] = ("0" + pointNumber).slice(-2); //ensures all numbers are two digits
        }
      }
    }

    //print square
    squareHTML = "<br><br>";
    for (var i = spiralSize-1; i >= 0; i--) {
      squareHTML += square[i].toString()+"<br>";
    }

    queryHTML = "Output: ";
    if (queryPointNumber) { 
      for (var i = 0; i < spiralSize; i++) {
        for (var j = 0; j < spiralSize; j++) {
          if (queryPointNumber == square[i][j]) {
            var posX = 1+j;
            var posY = spiralSize-i;
            queryHTML+="("+posX+", "+posY+")";
          }
        }
      }
    }

    if (queryCoordiante) {
      queryHTML+=square[queryCoordiante[1]][queryCoordiante[0]];
    }
    output.innerHTML=queryHTML+squareHTML;
  }
</script>