title: What is wrong with my perlin noise function?
body: <p>So I am currently working on a perlin noise generator, for some reason I'm getting incorrect output:</p>
  
  <p><a href="https://i.stack.imgur.com/7ztVJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7ztVJ.png" alt="enter image description here"></a></p>
  
  <p>The perlin noise is in a "grid" and does not resemble traditional perlin noise. 
  Here is my code:</p>
  
  <pre><code>var perlinNoise = {
  vectors: [{x:1,y:0},{x:1,y:-1},{x:0,y:-1},{x:-1,y:-1},{x:-1,y:0},{x:-1,y:1},{x:0,y:1},{x:1,y:1}],
  fade: function(t){
      return t * t * t * (t * (t * 6 - 15) + 10);
  },
  pointToCell: function(x, y){
      cellX = Math.floor(x);
      cellY = Math.floor(y);
      return {x:cellX, y:cellY};
  },
  cellToVectors: function(cellX, cellY){
      halfCell = .5;
      //I use the four intercardinal directions to label the vectors.
      //The random values are multiplied by 8 to map them to the 8 entries of the vectors array.
      NEvector = this.vectors[Math.floor(randomFromCoords(cellX + halfCell, cellY + halfCell)*8)];
      SEvector = this.vectors[Math.floor(randomFromCoords(cellX + halfCell, cellY - halfCell)*8)];
      SWvector = this.vectors[Math.floor(randomFromCoords(cellX - halfCell, cellY - halfCell)*8)];
      NWvector = this.vectors[Math.floor(randomFromCoords(cellX - halfCell, cellY + halfCell)*8)];
      return {NE: NEvector, SE: SEvector, SW: SWvector, NW: NWvector};
  },
  dotProduct: function(vector1, vector2){
      //Another way to calculate the dot product. This is more performance friendly than cosine calculations.
      return vector1.x * vector2.x + vector1.y * vector2.y;
  },
  lerp: function(value1, value2, t){
      return (1 - t) * value1 + t * value2;
  },
  perlinNoise: function(x, y){
      var cellCoord = this.pointToCell(x, y);
  
      //Get the positions of the x and y coordinants relative to the cell
      var Xoffset = this.fade(x - cellCoord.x);
      var Yoffset = this.fade(y - cellCoord.y);
  
      var vectors = this.cellToVectors(cellCoord.x, cellCoord.y);
  
      //The offset from each corner is calculated.
      //Then the dotproduct between the offset vector and the random vector is calculated.
      var NEoffset = {x: 1 - Xoffset, y: 1 - Yoffset};
      var NEdotProduct = this.dotProduct(NEoffset, vectors.NE);
  
      var SEoffset = {x: 1 - Xoffset, y: Yoffset};
      var SEdotProduct = this.dotProduct(SEoffset, vectors.SE);
  
      var SWoffset = {x: Xoffset, y: Yoffset};
      var SWdotProduct = this.dotProduct(SWoffset, vectors.SW);
  
      var NWoffset = {x: Xoffset, y: 1 - Yoffset};
      var NWdotProduct = this.dotProduct(NWoffset, vectors.NW);
  
      var Nlerp = this.lerp(NWdotProduct, NEdotProduct, Xoffset);
  
      var Slerp = this.lerp(SWdotProduct, SEdotProduct, Xoffset);
  
      var finalValue = this.lerp(Slerp, Nlerp, Yoffset);
      if(finalValue &lt; -.5 ){
          console.log("less than -.5");
      }
      return finalValue;
  },
  noise: function(width, height){
      var values = [];
      for (var y = 0; y &lt; height; ++y) {
          for (var x = 0; x &lt; width; ++x) {
                  values[x + y * width] = (this.perlinNoise(x/30,y/30)+1)/2;
          }
      }
      return values;
  },
  element: document.getElementById("PerlinDisplay1"),
  loop: function (){},
  initialize: function(){
      initCanvas("PerlinDisplay1Canvas");
      var values = this.noise(canvas.width, canvas.height);
      //maps values from 0 to 1 to grey scale pixels, already tested.
      var valuesAsPixels = values.map(x =&gt; ValueToPixel(x));
      UpdateCanvas(valuesAsPixels);
  },
  deinitialize: function(){}
  </code></pre>
  
  <p>}</p>
  
  <p>The functions initCanvas, ValueToPixel, and UpdateCanvas work and have been tested with other use cases. I would really appreciate some insight as to what I am doing wrong.</p>
  
  <p>Edit: Upon request I am adding the functions ValueToPixel and UpdateCanvas.</p>
  
  <pre><code>function UpdateCanvas(pixels){
      var n = 0;
      for (var y = 0; y &lt; canvas.height; ++y) {
          for (var x = 0; x &lt; canvas.width; ++x) {
              var index = (y * canvas.width + x) * 4;
              for(var channel = 0; channel &lt; 4; ++channel){
                  data[index + channel]  = pixels[index/4][channel];
                  n++;
              }
          }
      }
      context.putImageData(imageData, 0, 0);
  }
  
  function ValueToPixel(value){
      //red, green, blue, alpha
      return [value*255, value*255, value*255, 255];
  }
  </code></pre>