Smooth() repositioning p5.js sketch unexpectedly

p5.js Coding Questions
1

So I’ve been trying to get a bit of an animation going, and it’s basically finished, except for antialiasing.
The problem is whenever I try to use smooth(); my entire sketch gets positioned lower on the index.html.
I think it has something to do with the css I have baked into the index.html.
Left is before smooth(); right is after.

eg
eg1546×800 10.5 KB

the structure of the index.html is untouched except for 3 divs nested inside each other.

here is the p5 js file:

let bg;
let rez;
let inc = 0.2;
let xoff = 0;
let yoff = 0;
let incY = 0;


function setup() {
  canvas = createCanvas(windowWidth, windowHeight, WEBGL);
  rez = 40;
  canvas.position(0, 0);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function draw() {
  frameRate(30);
  clear();
  //smooth();
  var cols = width*2 / rez;
  var rows = height*4 / rez;
  var terrain = []; 
  colorMode(RGB, 100);
  translate(width/2, height/2, 50);
  rotateX(PI/2);
  translate(-width*1.5, -height*3.2, height/4);
  strokeWeight(1);
  for (let i = 0; i < rows+1; i++) {
    terrain[i] = [];
    for (let j = 0; j < cols+1; j++) {
      if (abs(j-(cols/2)) < width/300) {
        terrain[i][j] = map(noise(xoff, yoff), 0, 1, -30, 30);
      } else {
        terrain[i][j] = map(noise(xoff, yoff), 0, 1, -60, abs(j-(cols/2))*25);
      }
      xoff = xoff+inc;
    }
    xoff = 0;
    yoff = yoff + inc;
  }
  yoff = 0 + incY;
  incY -= 0.2;
  for (let i = 0; i < rows-1; i++) {
    beginShape(TRIANGLE_STRIP);
    stroke(map(i, 0, rows, 255, 0), 0, map(i, 0, rows, 0, 200));
    fill(map(i, 0, rows, 55, 15), map(i, 0, rows, 10, 0), map(i, 0, rows, 0, 55));
    for (let j = 0; j < cols-1; j++) {
      vertex(j*rez, i*rez, terrain[i][j]);
      vertex(j*rez, (i+1)*rez, terrain[i+1][j]);
    }
    endShape();
  }
}

and here is the index.html

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
    <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
    <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
    <script language="javascript" type="text/javascript" src="random_sea_p5.js"></script>
    <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
  
    <!-- This line removes any default padding and style.
         You might only need one of these values set. -->
    <style> body { padding: 0; margin: 0; } </style>
    <style> 
    .bg {
      position: relative;
      background: url(nightsky.jpg);
      height: 100%;
      background-size: cover;
      background-position: 0 0;
    }
    .stars {
      position: relative;
      background: url(stars.png);
      height: 100%;
      width: 100%;
      background-size: cover;
      background-position: 0 0;
      background-repeat: repeat-y;
      animation: animate 50s linear infinite;
    }  
    .stars2 {
      position: relative;
      background: url(stars2.png);
      height: 100%;
      width: 100%;
      rotate: 90;
      background-size: cover;
      background-position: 100% 0;
      background-repeat: repeat-y;
      animation: animate 100s linear infinite;
    }
    .sun {
      position: relative;
      background: url(sun3.gif);
      top: -5%;
      transform: scale(0.5);
      height: 100%;
      width: 100%;
      background-repeat: no-repeat;
      background-position: 50%;
    }
    @keyframes animate {
      from {
        background-position: 0 0;
      } to {
        background-position: 0 100%;
      }
    }
    </style>
  
  </head>

  <body class="bg">
    <div class="stars">
      <div class="stars2">
        <div class="sun">
        </div>
      </div>
    </div>
  </body>
</html>

Any thoughts on what the issue could be?
Thanks in advance for any response.

2

No idea but, why’d you wish to invoke smooth() & frameRate() within draw() rather than setup()? :thinking:

3

I’ll move framerate now, thanks for pointing that out