Loop(), noLoop(), redraw()

p5.js Coding Questions
1

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;

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.

1 Like
2

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

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

1 Like
3

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

4 
/**
 * 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();
}
2 Likes
5

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

1 Like
6
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