Алгоритм построения пирамиды с квадратами

Question

Я пытаюсь построить пирамиду с использованием квадратов в HTML5 Canvas, у меня есть алгоритм, который работает наполовину, единственная проблема заключается в том, что после трех дней и некоторых недостатков математических способностей я не знаю, t удалось найти правильную формулу.

Вот что у меня есть, проверьте комментарии кодов, чтобы вы могли видеть, какую часть алгоритма мы должны изменить.

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var W = 1000; var H = 600; 
var side = 16; 

canvas.width = W; 
canvas.height = H; 

     function square(x, y) { 
      ctx.fillStyle = '#66FF00'; 
      ctx.fillRect(x, y, side, side); 
      ctx.strokeStyle = '#000'; 
      ctx.strokeRect(x, y, side, side); 
     } 

     function draw() { 
      ctx.fillRect(0, 0, W, H); 
      ctx.save(); 

      for(var i = 0; i < 30; i++) { 
       for(var j = 0; j < i + 1; j++) { 
        square(
         //Pos X  
         //This is what we have to change to 
         //make it look like a pyramid instead of stairs 
         W/2 - ((side/2) + (j * side)), 


         //Pos Y 
         side * (i + 1) 
        ); 
       } 
      } 

      ctx.restore(); 
     } 

     //STARTS DRAWING 
     draw(); 

Это код работает в jsfiddle так что мы можем попробовать:

https://jsfiddle.net/g5spscpu/

Желаемый результат:

Ну, я хотел бы если кто-то может дать мне руку, мой мозг горит.

Answer 1

Вы должны использовать индекс i в формуле для позиции X с:

W/2 - ((side/2) + ((j - i/2) * side)) 

см https://jsfiddle.net/9esscdkc/