# Loop(), noLoop(), redraw()

**URL:** <https://discourse.processing.org/t/loop-noloop-redraw/12534>\
**Category:** Coding Questions\
**Created:** [July 6, 2019, 8:30am UTC](https://discourse.processing.org/t/loop-noloop-redraw/12534 "2019-07-06T08:30:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 6, 2019, 8:30am UTC](https://discourse.processing.org/t/loop-noloop-redraw/12534/1 "2019-07-06T08:30:55Z")

</div>

Having read the documentation on the p5.js site, I’m still a little confused as to how to use the redraw() function and the loop function. What I’m trying to achieve is something which allows me to stop the draw function if the mouse has been still for a certain amount of time, and to loop again only if mouse is moved. The issue is that if I create a if statement style scenario in a function called in in draw ie;

```auto
if(dx===0&&dy===0){
      mousecounter--;
    }
    else{
      mousecounter = 340;
    }
    if(mousecounter<=0){
      mousecounter = 0;
      noLoop();
    }
    else{
      loop();
    }

```

the alternative being to call redraw or loop in mouseMoved() however this causes the animation to not be fluid, Has anybody found an acceptable solution to this.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [July 6, 2019, 9:12am UTC](https://discourse.processing.org/t/loop-noloop-redraw/12534/2 "2019-07-06T09:12:40Z")

</div>

sorry, without a timer,  
i combined the provided redraw example  
with the mouseMoved()  
[https://p5js.org/reference/#/p5/redraw](https://p5js.org/reference/#/p5/redraw)  
[https://p5js.org/reference/#/p5/mouseMoved](https://p5js.org/reference/#/p5/mouseMoved)

```auto
let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  line(x, 0, x, height);
}

function mouseMoved() {
  x += 1;
  if ( x > width ) x = 0;
  redraw();
}

```

that could be a first step

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 6, 2019, 3:09pm UTC](https://discourse.processing.org/t/loop-noloop-redraw/12534/3 "2019-07-06T15:09:23Z")

</div>

Thanks Kll, I shall have a look at this back at uni.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 6, 2019, 3:49pm UTC](https://discourse.processing.org/t/loop-noloop-redraw/12534/4 "2019-07-06T15:49:06Z")

</div>

> [@paulgoux](#):
>
> What I’m trying to achieve is something which allows me to stop the draw function if the mouse has been still for a certain amount of time, and to loop again only if mouse is moved.

> **[Pause If Mouse Not Moving - GoToLoop - OpenProcessing](https://openprocessing.org/sketch/735601)**
>
> Sketch pauses within 3s if mouse isn't moving

```auto
/**
 * Pause If Mouse Not Moving (v1.0.0)
 * GoToLoop (2019-Jul-06)
 *
 * https://Discourse.Processing.org/t/loop-noloop-redraw/12534/4
 * https://www.OpenProcessing.org/sketch/735601
 */

const DELAY = 3000; // 3 seconds,
      FPS = 60, BG_CHANGE = FPS >> 2, // 15 frames
      FILL = 0xff, OUTLINE = 'blue', BOLDNESS = 5,
      ALL_COLORS = 0x1000, TXT_SIZE = 0200,
      LF = '\n', HASH = '#';

let pauseMillis = DELAY, bg = OUTLINE;

function setup() {
  'use strict';
  createCanvas(800, 600);
  frameRate(FPS);
  fill(FILL).stroke(OUTLINE).strokeWeight(BOLDNESS);
  textSize(TXT_SIZE).textAlign(CENTER, CENTER);
}

function draw() {
  'use strict';
  bg = frameCount % BG_CHANGE && bg || HASH + hex(~~random(ALL_COLORS), 3);
  background(bg);

  const currMillis = ~~millis(),
        txt = frameCount + LF + currMillis + LF + pauseMillis;

  text(txt, width >> 1, height >> 1);
  currMillis >= pauseMillis && noLoop();
}

function mouseMoved() {
  'use strict';
  pauseMillis = ~~millis() + DELAY;
  return loop();
}

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 7, 2019, 3:51pm UTC](https://discourse.processing.org/t/loop-noloop-redraw/12534/5 "2019-07-07T15:51:16Z")

</div>

Thanks for all your replies, i shall give this a try.

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hellonearthis/32/3482_2.png) [@hellonearthis](https://discourse.processing.org/u/hellonearthis)\
**Post date:** [July 16, 2019, 2:11pm UTC](https://discourse.processing.org/t/loop-noloop-redraw/12534/6 "2019-07-16T14:11:12Z")

</div>

I had not looked at the redraw before, I like how an apps UI could use it to render only the bit's it needed to and not all the it's 60fps