Poster Generator: Sketch should not automatically redraw (p5js + p5gui)

p5.js Libraries
1

Hey guys,

I’m trying to build a simple pattern generator to create posters for some design idea. I’m using mainly p5.js and also the p5.gui library to have an interface to control some functions.

During this process I came across one problem I couldn’t solve so far. I have a text input field, and everytime I type something it also automatically updates the whole draw function, which changes the background pattern. But I somehow want to find a way, to only update my whole sketch with the created reload button.

I also tried to make another simpflified version of the generator to see if I did something wrong along the way, but seems I still can’t figure it out. Here is how the code looks in simplified version with only the base functions:

//GUI options
var forms = ['rectangle', 'ellipse', 'triangle'];
var sentence = 'Here comes your text';

//reload button
var reload;

//grid
var col = 10;
var row = 10;

function setup() {
  //Creating Canvas
  createCanvas(600,800);

  //Creating the GUI
  gui = createGui('Random Pattern', width/2+50, 50);
  gui.addGlobals('forms', 'sentence');

  //Reload button
  reload = createButton('Reload');
  reload.position(50,20);
  reload.mousePressed(redraw);

  //not drawing the whole time
  noLoop();
}

function draw() {

  //General Style
  background(220,220,220);
  textSize(50);
  fill(180);
  noStroke();

  //Drawing in a Grid
  for (var i = 0; i < col; i++) {
    for (var j = 0; j < row; j++) {

        var xval = int(random(13));
        var yval = int(random(17));
        var x = xval * 50;
        var y = yval * 50;


        switch (forms) {
          case 'rectangle':
          push();
          fill(0);
          noStroke();
          rect(x,y,50,50);
          pop();
          break;

          case 'ellipse':
          push();
          translate(25,25);
          noStroke();
          fill(255);
          ellipse(x,y,50,50);
          pop();
          break;

          case 'triangle':
          push();
          noStroke();
          fill(155,155,155);
          triangle(x,y+50,x+25,y,x+50,y+50);
          pop();
          break;
        }
    }
  }


  text(sentence.toUpperCase(), 50, 200, 500, 400);


}

Maybe someone had a similar problem already or has an idea how to solve this?

1 Like
2

Hello schiiischiii,

I’m certain there is a cleaner solution, but if the draw function is causing the issue just don’t use it :wink:

//GUI options
var forms = ['rectangle', 'ellipse', 'triangle'];
var sentence = 'Here comes your text';

//reload button
var reload;

//grid
var col = 10;
var row = 10;

function setup() {
  //Creating Canvas
  createCanvas(600,800);

  //Creating the GUI
  gui = createGui('Random Pattern', width/2+50, 50);
  gui.addGlobals('forms', 'sentence');

  //Reload button
  reload = createButton('Reload');
  reload.position(50,20);
  reload.mousePressed(redraw); 
  
  //Draw the poster beforehand  
  drawPoster();
  
  //not drawing the whole time
  noLoop();
}

function draw() {
}

function drawPoster() {
  //General Style
  background(220,220,220);
  textSize(50);
  fill(180);
  noStroke();
  //Drawing in a Grid
  for (var i = 0; i < col; i++) {
    for (var j = 0; j < row; j++) {

        var xval = int(random(13));
        var yval = int(random(17));
        var x = xval * 50;
        var y = yval * 50;


        switch (forms) {
          case 'rectangle':
          push();
          fill(0);
          noStroke();
          rect(x,y,50,50);
          pop();
          break;

          case 'ellipse':
          push();
          translate(25,25);
          noStroke();
          fill(255);
          ellipse(x,y,50,50);
          pop();
          break;

          case 'triangle':
          push();
          noStroke();
          fill(155,155,155);
          triangle(x,y+50,x+25,y,x+50,y+50);
          pop();
          break;
        }
    }
  }
  text(sentence.toUpperCase(), 50, 200, 500, 400);
}

Managed to get the reload button working as well, although it might be good practise if you try it yourself first.

Tiemen over & out

3 Likes
3

I was about to suggest a separate createGraphics(): :woozy_face:

But just having a separate drawing callback for createButton() should work the same, besides being much easier to pull out: reload.mousePressed(drawPoster); :bulb:

Indeed, the library “p5.gui” replaces the original p5 methods noLoop() & loop() w/ its own: :space_invader:

And its internal QSGui::noLoop() actually invokes draw(): :open_mouth:

2 Likes
4

Oh wow! Haha since this is my first project in p5 I was really stuck the whole day on that point, didn’t came to this solution somehow :smiley:

Thank you really much, that makes total sense now that I see this. And when I put the drawPoster function to the button.keyPressed it also works perfect. So I can now implement it into the rest of my code :slight_smile:

@GoToLoop I didn’t know the p5.gui replaces actually things of the normal p5.js, since I am not really a programmer and not so familiar with all this yet. But good to know for the future :slight_smile:

I just noticed one thing, also when I change text now and press reload, there is still the thing that the pattern will ofc change. So guess have to figure out a way to avoid that, that in this case only the text really changes.

5

Neither did I until now. I had to look into its source code for it. :open_book:

Actually, I had never used this library yet! :sleepy:

But did some experiments w/ the DatGUI, which BtW, p5.GUI is a wrapper for it: :flushed:
Workshop.ChromeExperiments.com/examples/gui/

1 Like
6

Ah okay, so the project would also work with DatGUI maybe. Will have a look into it tomorrow and see if I try this as well.

So far I got now already a step further and have nearly the function I want. Just have to fix somehow the way I write the text onto the poster. So that if there is a pattern I like and then I decide to change the text, the pattern won’t change at all. I wrote a small extra function for that now as well, but ofc like this the text just overwrites the old one and both are visible. So will try to figure that out as well and see if I can give a updated example when it is running correctly.

//GUI options
var forms = ['rectangle', 'ellipse', 'triangle'];
var sentence = 'Here comes your text';

//reload button
var reload;

//grid
var col = 10;
var row = 10;

function setup() {
  //Creating Canvas
  createCanvas(600,800);

  //Creating the GUI
  gui = createGui('Random Pattern', width/2+50, 50);
  gui.addGlobals('forms', 'sentence');

  //Reload button
  reload = createButton('Reload');
  reload.position(50,20);
  reload.mousePressed(checkit);

  //draw the poster the first time
  drawPoster();

  //not drawing the whole time
  noLoop();
}

function draw() {

}

// comparison
var compare;

// check value of input and write or draw + write
function checkit() {
  if (sentence == compare) {
    drawPoster();
  } else {
    console.log(sentence);
    //background(220);
    text(sentence.toUpperCase(), 50, 200, 500, 400);
    compare = sentence;
  }
}

function drawPoster() {
  //General Style
  background(220,220,220);
  textSize(50);
  fill(180);
  noStroke();

    //Drawing in a Grid
    for (var i = 0; i < col; i++) {
      for (var j = 0; j < row; j++) {

          var xval = int(random(13));
          var yval = int(random(17));
          var x = xval * 50;
          var y = yval * 50;


          switch (forms) {
            case 'rectangle':
            push();
            fill(0);
            noStroke();
            rect(x,y,50,50);
            pop();
            break;

            case 'ellipse':
            push();
            translate(25,25);
            noStroke();
            fill(255);
            ellipse(x,y,50,50);
            pop();
            break;

            case 'triangle':
            push();
            noStroke();
            fill(155,155,155);
            triangle(x,y+50,x+25,y,x+50,y+50);
            pop();
            break;


          }
      }
    }
    //Writing the text
    text(sentence.toUpperCase(), 50, 200, 500, 400);

}
2 Likes