How to redraw() on loop

p5.js Libraries
1

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.

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

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

function mousePressed() {
  redraw();
}
1 Like
2

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

So, no redraw() is needed

3

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

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();
}
4

or live-coding?

http://yining1023.github.io/p5PlayGround/

1 Like
5

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?

1 Like
6

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

7

Is this what you are trying to do?

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());
}
1 Like
8

That would be

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

Append as a new function at the end of the sketch


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));
}
9

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

10

Sharing an example that will initialize frameCount and a timer based on millis() on a mousePressed() event.

An example to scrutinize:

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);
  }

:)

1 Like
11

thanks @glv! resetting the frameCount solved my problem.

2 Likes