График не является графиком

Я создал программу на JavaScript P5.js для построения графиков. Все работает, кроме точек, которые не отображаются на дисплее, а когда они появляются, они не следуют тенденции графика.

function setup() {
  H = 800;
  W = 800;
  wFreq = 20;
  hFreq = 20;
  wDist = H / hFreq;
  hDist = W / wFreq;
  uLength = 10;
  
  createCanvas(W, H);
}

function formula(x) {
  return x*x
}

function draw() {
  background(220);
  translate(0, 0)
  
  rect(0, H/2, W, 0);
  rect(W/2, 0, 0, H);
  
  translate(0, H/2);
  for(i = W/2; i -= 1; i > 0) {
    rect((i-0.5) * wDist /2, -uLength/2, 0, uLength);
  }
  
  translate(W/2, -H);
  for(i = H/2; i -= 1; i > 0) {
    rect(-uLength/2,i * (hDist -1) /(4*(10/hFreq)), uLength, 0);
  }
  
  translate(200, 200);
  for(i = -wFreq; i += 1; i < wFreq) {
      rect(i*wDist, formula(i), 1, 1);
  }
}