# How to redraw() on loop

**URL:** <https://discourse.processing.org/t/how-to-redraw-on-loop/42852>\
**Category:** Libraries\
**Created:** [September 29, 2023, 4:01am UTC](https://discourse.processing.org/t/how-to-redraw-on-loop/42852 "2023-09-29T04:01:38Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [September 29, 2023, 4:01am UTC](https://discourse.processing.org/t/how-to-redraw-on-loop/42852/1 "2023-09-29T04:01:38Z")

</div>

I have a sketch on loop but want to test out different colors and sizes via p5gui quickly. Redraw seems to require noLoop(). What can i do to trigger a redraw despite the loop and select from a list of colors and sizes? Thanks.

```auto
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  circle(200,200,200*sin(millis()/1000))
}

function mousePressed() {
  redraw();
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 29, 2023, 8:24am UTC](https://discourse.processing.org/t/how-to-redraw-on-loop/42852/2 "2023-09-29T08:24:13Z")

</div>

Hm draw() runs automatically on and on 60 times per second

So, no redraw() is needed

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [September 29, 2023, 10:03am UTC](https://discourse.processing.org/t/how-to-redraw-on-loop/42852/3 "2023-09-29T10:03:19Z")

</div>

Hi @blkpanther,

actually not exactly understood what you’re trying to achieve. As @Chrisir stated above the draw function is called continuously by the standard setup.

Do you maybe looking for s.th. like this ?

Cheers  
— mnse

```auto
let size;
let colr;

function setup() {
  createCanvas(400, 400);
  noStroke();
}

function update() {
  size = random(10, width >> 1);
  push();
  colorMode(HSB, 1, 1, 1);
  colr = color(random(), 1, 1);
  pop();
}

function draw() {
  background(220);
  update();
  fill(colr);
  circle(width >> 1, height >> 1, size);
  noLoop();
}

function mousePressed() {
  loop();
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 29, 2023, 10:07am UTC](https://discourse.processing.org/t/how-to-redraw-on-loop/42852/4 "2023-09-29T10:07:51Z")

</div>

or live-coding?

[http://yining1023.github.io/p5PlayGround/](http://yining1023.github.io/p5PlayGround/)

---

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [September 29, 2023, 11:28pm UTC](https://discourse.processing.org/t/how-to-redraw-on-loop/42852/5 "2023-09-29T23:28:06Z")

</div>

> [@mnse](#):
>
> ```auto
> let size;
> let colr;
> 
> function setup() {
> createCanvas(400, 400);
> noStroke();
> }
> 
> function update() {
> size = random(10, width >> 1);
> push();
> colorMode(HSB, 1, 1, 1);
> colr = color(random(), 1, 1);
> pop();
> }
> 
> function draw() {
> background(220);
> update();
> fill(colr);
> circle(width >> 1, height >> 1, size);
> noLoop();
> }
> 
> function mousePressed() {
> loop();
> }
> 
> ```

sorry for the late of clarity. I meant to use mouseclick to reset the continuous drawing on a new color. how can i do that?

---

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [September 29, 2023, 11:29pm UTC](https://discourse.processing.org/t/how-to-redraw-on-loop/42852/6 "2023-09-29T23:29:12Z")

</div>

I am looking for reinitiate the canvas and drawing from the start, despite having a continuously drawing loop. thanks in advance.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [September 30, 2023, 4:22am UTC](https://discourse.processing.org/t/how-to-redraw-on-loop/42852/7 "2023-09-30T04:22:53Z")

</div>

Is this what you are trying to do?

```auto
let colorPicker;
let slider;

function setup() {
  createCanvas(600, 600);
  colorPicker = createColorPicker("#ed225d");
  colorPicker.position(0, 10);
  slider = createSlider(0, 400, 100);
  slider.position(80, 10);
  slider.style("width", "150px");
}

function draw() {
  background(255);
  fill(colorPicker.color());
  circle(width / 2, height / 2, slider.value());
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 30, 2023, 5:16am UTC](https://discourse.processing.org/t/how-to-redraw-on-loop/42852/8 "2023-09-30T05:16:41Z")

</div>

> [@blkpanther](#):
>
> to use mouseclick to reset the continuous drawing on a new color.

That would be

```auto
function mousePressed () {
    colr=color (random (256),random (256),random (256));
}

```

Append as a new function at the end of the sketch

```auto

let colr= 23; 

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill(colr);
  circle(200,200,200*sin(millis()/1000))
}

function mousePressed () {
    colr=color (random (256),random (256),random (256));
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 30, 2023, 5:20am UTC](https://discourse.processing.org/t/how-to-redraw-on-loop/42852/9 "2023-09-30T05:20:42Z")

</div>

> [@blkpanther](#):
>
> for reinitiate the canvas and drawing from the start, despite having a continuously drawing loop.

You could evaluate key input and when c is clicked, erase canvas using background () command

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 30, 2023, 10:26pm UTC](https://discourse.processing.org/t/how-to-redraw-on-loop/42852/10 "2023-09-30T22:26:09Z")

</div>

> [@blkpanther](#):
>
> I am looking for reinitiate the canvas and drawing from the start, despite having a continuously drawing loop

Sharing an example that will _initialize_ _frameCount_ and a _timer_ based on _millis()_ on a _mousePressed()_ event.

An example to scrutinize:

```auto
let col;

function setup() 
  {
  createCanvas(400, 400);
  console.log(frameCount);
  frameRate(2); // Slowed things down for testing
  //initialize();
  colorMode(HSB, 360, 100, 100);
  }

function draw() 
  {
  background(frameCount%360, 100, 100);
  if(frameCount == 1) start = millis()
  timer = (millis()-start)
  fill(col, 100, 100)
  circle(200,200,200*sin(timer/2000))
  //console.log(frameCount);
  
  textSize(24);
  fill('white')
  text(frameCount, 10, 30)
  text(int(timer), 10, 60)
  }

function mousePressed() 
  {
  initialize()
  col = random(360)
  }

function initialize()
  {
  //console.log(frameCount);
  //start = millis();  
  frameCount = 0;  
  //console.log(frameCount);
  }

```

`:)`

---

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [October 5, 2023, 12:01am UTC](https://discourse.processing.org/t/how-to-redraw-on-loop/42852/11 "2023-10-05T00:01:18Z")

</div>

thanks @glv! resetting the frameCount solved my problem.