title: How to make an image appear cyclically on each click with p5js
body: <br>
  I am new to the amazing world of creative coding and p5js. I want to create a website for my design studio with a p5js effect that I can't find the solution for. I searched everywhere and I can't find anyone with the same problem as me, that's why I'm posting my very first message here. <br>Here's the idea: in a canvas, I would like that with each mouse click, a different image can appear. Currently, my code allows to display images randomly but I would like to be able to set a cyclic order of appearance : work0.png, work1.png, work2.png... and it starts again.
  <br>If someone has seen this problem somewhere or could explain it to me I would be very grateful. Thanks !
  <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 works = []
  
  function preload() {
    
    for (let i = 0; i &lt; 5; i++) {
      works[i] = loadImage("work" + i + ".png")
    }
  }
  
  function setup() {
    canvas = createCanvas(windowWidth, windowHeight);
    canvas.position(0, 0);
    canvas.style('z-index', '1');
  }
  
  function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
    canvas.position(0, 0);
    canvas.style('z-index', '1');
  }
  
  function draw() {
  cursor(CROSS);
  }
  
  function mouseClicked() {
    imageMode(CENTER);
    let r = floor(random(0, 6));
        image(works[r], mouseX, mouseY, 500, 600);
  }</code></pre>
  </div>
  </div>
  </p>