title: Fizzbuzz using shapes (p5.js)
body: <p>I am currently trying to create a fizzbuzz using shapes but cannot get the divisible by 3 and 5 square to show up correctly. Ive searched for answers but no one seems to have tried this.</p>
  
  <p><strong>Write a program that draws 25 black circles to the screen, oriented horizontally. Please accomplish this with a for loop that starts at zero, and increments an iterand forward by one each iteration.</strong></p>
  
  <p>However,</p>
  
  <p><strong>When the iterand is divisible by 3, draw a purple circle instead 
  When the iterand is divisible by 5, draw a green square instead 
  When the iterand is divisible by 3 AND 5, draw a blue square instead</strong> </p>
  
  <pre><code>function setup() {
  createCanvas(1500, 1500);
  ellipseMode(CENTER);
  }
  
  function draw() {
    background(200);
    var y = 100;
    // 25 black squares
    for (let x = 0; x &lt; 1250; x += 50) {
      fill(0);
      ellipse(x, y, 50, 50);
      // sets the purple circle
      if (x % 3 === 0) {
        fill(153, 31, 240);
        ellipse(x, y, 50, 50);
      }
      // sets the green squares should be on top
      if (x % 5 === 0) {
        fill(0, 255, 0);
        square(x + 25, y - 25, 50);
      }
      // sets the last blue square
      // issue is the is supposed to be only one at the 15 mark
      if (x % 3 == 0 &amp;&amp; x % 5 == 0) {
        fill(0, 0, 255);
        square(x + 25, y - 25, 50);
      }
    }
  }
  </code></pre>