# createGraphics combined with text and second()

**URL:** <https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293>\
**Category:** Coding Questions\
**Created:** [February 19, 2022, 4:23pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293 "2022-02-19T16:23:27Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![goldorak](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@goldorak](https://discourse.processing.org/u/goldorak)\
**Post date:** [February 19, 2022, 4:23pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/1 "2022-02-19T16:23:27Z")

</div>

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:

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

```

---

<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:** [February 19, 2022, 9:07pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/2 "2022-02-19T21:07:33Z")

</div>

This runs on my system:

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

```

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [February 19, 2022, 9:09pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/3 "2022-02-19T21:09:03Z")

</div>

try

`pg.text(myValue, 20, 20 );`

to tell it where to put the text. [https://p5js.org/reference/#/p5/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().

---

<div class="post-metadata">

**Author:** ![goldorak](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@goldorak](https://discourse.processing.org/u/goldorak)\
**Post date:** [February 19, 2022, 10:11pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/4 "2022-02-19T22:11:37Z")

</div>

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

---

<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:** [February 19, 2022, 10:24pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/5 "2022-02-19T22:24:53Z")

</div>

Hello,

See:

[https://p5js.org/reference/#/p5/clear](https://p5js.org/reference/#/p5/clear)

🙂

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [February 19, 2022, 10:27pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/6 "2022-02-19T22:27:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![goldorak](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@goldorak](https://discourse.processing.org/u/goldorak)\
**Post date:** [February 19, 2022, 10:27pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/7 "2022-02-19T22:27:27Z")

</div>

" 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

---

<div class="post-metadata">

**Author:** ![goldorak](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@goldorak](https://discourse.processing.org/u/goldorak)\
**Post date:** [February 19, 2022, 10:34pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/8 "2022-02-19T22:34:19Z")

</div>

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

---

<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:** [February 19, 2022, 10:43pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/9 "2022-02-19T22:43:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![goldorak](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@goldorak](https://discourse.processing.org/u/goldorak)\
**Post date:** [February 19, 2022, 10:47pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/10 "2022-02-19T22:47:48Z")

</div>

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

---

<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:** [February 19, 2022, 10:50pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/11 "2022-02-19T22:50:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![goldorak](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@goldorak](https://discourse.processing.org/u/goldorak)\
**Post date:** [February 19, 2022, 10:53pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/12 "2022-02-19T22:53:44Z")

</div>

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.

---

<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:** [February 19, 2022, 10:55pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/13 "2022-02-19T22:55:39Z")

</div>

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?

---

<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:** [February 19, 2022, 10:56pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/14 "2022-02-19T22:56:35Z")

</div>

Hello @goldorak,

Take a look at this and examine line by line:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4ea19c510d4cf8af2e0246b711673e4a0d711202.png)

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [February 19, 2022, 11:02pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/15 "2022-02-19T23:02:02Z")

</div>

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

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

```

---

<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:** [February 19, 2022, 11:02pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/16 "2022-02-19T23:02:36Z")

</div>

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

---

<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:** [February 19, 2022, 11:27pm UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/17 "2022-02-19T23:27:39Z")

</div>

> [@svan](#):
>
> If you use pg.background(0, 255, 0); you don’t need the pg.clear();

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:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2a9408166213b820874b6df25a75a2794d145e1c.jpeg)

`:)`

---

<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:** [February 20, 2022, 12:07am UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/18 "2022-02-20T00:07:06Z")

</div>

> 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.

---

<div class="post-metadata">

**Author:** ![goldorak](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@goldorak](https://discourse.processing.org/u/goldorak)\
**Post date:** [February 20, 2022, 12:30am UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/19 "2022-02-20T00:30:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![goldorak](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@goldorak](https://discourse.processing.org/u/goldorak)\
**Post date:** [February 20, 2022, 12:50am UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293/20 "2022-02-20T00:50:11Z")

</div>

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

Thanks again for your support.