createGraphics combined with text and second()

p5.js Coding Questions
1

Hi,
For debugging purposes, I’d like to display the time value in my canvas.
To do so, I’d like to use createGraphics combined with text();
Unfortunately it looks like I can’t send the value from second() to my pg. It works with a rectangle but not with text. What am I doing wrong?

Here is a boiled down code sample:

function setup() {
  createCanvas(800, 800);
  pg = createGraphics(400, 400);
}
function draw() {
  let myValue = second();
  console.log(myValue);
  pg.text(myValue)
  image(pg, 500, 700);
}
2

This runs on my system:

function setup() {
  createCanvas(800,600);
  background(209);
  pg = createGraphics(100, 50);
}

function draw() {
  let myValue = second();
  console.log(myValue);
  fill(0);
  pg.background(225);
  pg.textSize(42);
  pg.textAlign(CENTER);
  pg.text(myValue, pg.width/2,40)
  image(pg, 10, 30);
}
3

try

pg.text(myValue, 20, 20 );

to tell it where to put the text. https://p5js.org/reference/#/p5/text

also make sure you have the fill() color different from your background so you can see it. and be sure it’s not under your image().

4

Thanks, it works now.

I’d have a follow-up question, is it normal that I can’t “reset” (meaning deleting everything) in my pg using pg.clear(); ?

Here is my code:

function draw() {

let myValue = second();
pg = createGraphics(400, 400);
pg.text(myValue,100,100);
image(pg, 600, 700);
pg.clear();

}

I’m not sure why my pg is adding on top of the previous one despite the clear()

I’ve read the reference many times and reviewed code examples but I’m still confused. Apologies for the stupid question

5

Hello,

See:

https://p5js.org/reference/#/p5/clear

:slight_smile:

6

I would use pg.background() instead. I’ve never used clear().

1 Like
7

" This function clears everything to make all of the pixels 100% transparent" I’m not sure how to interpret this as my understanding is it reducing the alpha of everything which theoretically should do what I’d like to do

8

I’ve used this approach as well (replacing clear() by background()) but I still have the pg layering on top of every other ones

function draw() {

let myValue = second();
pg = createGraphics(400, 400);
pg.text(myValue,100,100);
image(pg, 600, 700);
pg.background(c2);
}

9

If you don’t want to see any text, then set the string to “” (which is empty).

10

thanks for the suggestion. I’ve already tried this one and still have the “seconds” value being displayed on the canvas on top of all previous ones

let myValue = second();
pg = createGraphics(400, 400);
pg.text(myValue,100,100);
image(pg, 600, 700);
pg.text(“”,100,100);

pg.clear();

11

You can’t have it both ways; it’s one or the other. eg, if(showSeconds){pg.text(myValue,)}else{pg.text("",)}

12

ok so I guess my approach isn’t suitable.

I was naively thinking I could:

*create a pg
*assign a text value withing the pg
*display the pg in each frame
*having the pg deleted after each frame
*rinse and repeat

At the end of the day what I’m trying to accomplish is to display the seconds on my canvas while it’s running.

13

I don’t understand. It already automatically ‘erases’ the second with each cycle of draw(); you don’t have to do it manually. Did you run the example that I posted?

14

Hello @goldorak,

Take a look at this and examine line by line:

function setup() 
  {
  createCanvas(200, 200);
  pg = createGraphics(100, 50);
  }

function draw() 
  {
  background(0, 255, 0);
  let myValue = second();  
    
  pg.clear(); // Make this a comment or remove to to see what happens
  pg.fill(0);
  pg.textSize(48);
  pg.textAlign(CENTER, CENTER);
  pg.text(myValue, pg.width/2, pg.height/2);
    
  imageMode(CENTER);  
  image(pg, width/2, height/2);
  }

image
image625×750 51 KB

15

You don’t need a PGraphics just to show the time.

function draw() {
  background(0);
  push();
  // translate() or scale()
  // draw some stuff
  pop();
  // set font color and size
  text( millis()/1000, 10, 10 );
}
16

If you use pg.background(0, 255, 0); you don’t need the pg.clear();

17

I used pg.clear() to create a transparent background for the pg buffer to overlay on top of the sketch canvas background (color or image).

Another example:

let img;
let url = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/A_beautiful_view%2C_Kel%2C_Kashmir.jpg/480px-A_beautiful_view%2C_Kel%2C_Kashmir.jpg";

function preload()
  {
  img = loadImage(url);    
  }

function setup() 
  {
  createCanvas(200, 200);
  pg = createGraphics(60, 60);  
  }

function draw() 
  {
  background(img);
    
  let myValue = second();  
    
  pg.clear(); // Creates a transparent background
  pg.fill(255, 255, 0);
  pg.textSize(36);
  pg.textAlign(CENTER);
  pg.text(myValue, pg.width/2, pg.height/2);
    
  image(pg, width-60, 10);
  }

image

:)

18

I used pg.clear() to create a transparent background

Good to know. I was thinking of two separate backgrounds; one for the text box and a separate one for the sketch. Thanks for clarification.

19

Thank you for your patience.

I’ve managed to identify the issue, it’s coming from blendMode(DARKEST);

See example below:

function setup()
{
createCanvas(200, 200);
pg = createGraphics(100, 50);
}

function draw()
{
background(0, 255, 0);
let myValue = second();

rect(30,30,40,40)
blendMode(DARKEST);

pg.clear();
pg.fill(0);
pg.textSize(48);
pg.textAlign(CENTER, CENTER);
pg.text(myValue, pg.width/2, pg.height/2);

image(pg, width/2, height/2);
}

As soon as I use a blend mode my pg is adding second values on top of the others.

Is this a bug or just a mistake that I can’t understand?

Thanks

20

the solution to this is to use a dedicated pg for each element of my canvas.

Thanks again for your support.

1 Like