title: pixel/sandbox simulator optimizations
body: <p>I've been working on this project for a few days now, it's a pixel simulator, and the only element I have right now is sand. I'm in the process of fine tuning the physics for sand as a base for other elements. I've noticed something though, the program starts to slow down significantly after placing sand for a while, and I'm looking for any improvements or things I could do differently in my code to make it run better. Any help is appreciated. Thanks!</p>
  <p>Code for the main file:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let alter = true;
  
  particles = []
  
  function setup() {
    let canvas = createCanvas(windowWidth, windowHeight);
    frameRate(120);
  }
  
  function sandColor() {
    r = Math.floor(Math.random() * (255 - 230 + 1) + 230)
    g = Math.floor(Math.random() * (230 - 200 + 1) + 230)
    b = Math.floor(Math.random() * (150 - 130 + 1) + 130)
    return color(r, g, b)
  }
  
  function drect(c, x, y, l, w) {
    noStroke();
    fill(c);
    rect(x, y, l, w);
  }
  
  class Particle {
    constructor(p, c, x, y, s) {
      this.p = p;
      this.c = c;
      this.x = x;
      this.y = y;
      this.s = s;
    }
  
    draw() {
      drect(this.c, this.x, this.y, this.s, this.s);
    }
  }
  
  function check(x, y) {
    found = false;
    let p;
    for (i in particles) {
      if (particles[i].x == x &amp;&amp; particles[i].y == y) {
        found = true;
        p = particles[i].p;
      }
    }
    if (found) {
      return [found, p]
    } else {
      return [found];
    }
  }
  
  function draw() {
  
    drect(color(37, 150, 190), 0, 0, windowWidth, windowHeight)
  
    tw = 4;
    th = 4;
  
    for (var i in particles) {
      particles[i].draw()
    }
  
    alter = !(alter)
    if (!alter) {
  
      for (i in particles) {
        if (particles[i].p == 's') {
          let down = false
          if (!check(particles[i].x, particles[i].y + 4)[0]) {
            particles[i].y += 4;
            down = true;
          }
          if (!down) {
            let r = Math.floor(Math.random() * 2) + 1;
            if (r == 1) {
              if (!check(particles[i].x - 4, particles[i].y + 4)) {
                particles[i].y += 4;
                particles[i].x -= 4;
              } else {
                if (!check(particles[i].x + 4, particles[i].y + 4)) {
                  particles[i].y += 4;
                  particles[i].x += 4;
                }
              }
            }
          }
        }
      }
  
      if (mouseIsPressed) {
        for (let i = 0; i &lt; 6; i++) {
          for (let j = 0; j &lt; 6; j++) {
            let p = 's'
            let c = sandColor()
            let x = (Math.floor(mouseX / tw)) * tw + (i * 4) - 9;
            let y = (Math.floor(mouseY / th)) * th + (j * 4) - 9;
            let s = 4;
  
            let sand = new Particle(p, c, x, y, s)
            let d = true;
            for (var m in particles) {
              if (particles[m].x == x &amp;&amp; particles[m].y == y &amp;&amp; particles[m].p == "s") {
                d = false;
              }
            }
            if (d) {
              drect(c, x, y, s, s)
              particles.push(sand)
            }
          }
        }
      }
    }
  }
  
  function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
  }
  
  document.addEventListener('contextmenu', event =&gt; event.preventDefault());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Hosted example and full source code here: <a href="https://replit.com/@LoganStottle202/pixsim?v=1" rel="nofollow noreferrer">https://replit.com/@LoganStottle202/pixsim?v=1</a></p>