# Combine overlay graphics in draw

**URL:** <https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676>\
**Category:** Coding Questions\
**Created:** [October 14, 2019, 12:22am UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676 "2019-10-14T00:22:48Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![elcougario](https://avatars.discourse-cdn.com/v4/letter/e/d26b3c/32.png) [@elcougario](https://discourse.processing.org/u/elcougario)\
**Post date:** [October 14, 2019, 12:22am UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676/1 "2019-10-14T00:22:48Z")

</div>

Hey guys, i’ve been working on this for a while, and I’m having difficulties inserting one of my functions into the loop, without it messing the rest or simply not showing. I just want to put dots over everything, but I can’t figure it out. If you could try to figure it out I would be so relieved haha. Thanks in advanced. I just like want stars to show up at the top or everywhere

```auto

//Global Variables

int c,r; //rows/coloms
int space=10; //space
 int w=1920; //width of
  int h=1080;//height of
  
  float[][] tgrid;
  float cloud=0;

void setup(){
  size(1920,1080,P3D);
  c=w/space;
  r=h/space; 
   tgrid=new float [c][r];
  

 }

void draw(){
  
 cloud-=0.04; //cloud speed
  
  float moveY=cloud;
 for(int y=0; y<r;y++){
   float moveX=2;
    for(int x=0; x<c;x++){
      tgrid[x][y]=map(noise(moveX,moveY),0,1,-150,150); 
      moveX +=0.05;
    }
    moveY +=0.05;
 }
  
  
  background(0);
   stroke(#4C6FEA);
   noFill();
   
   translate(width/2,height/2);
   rotateX(PI/2.6);
   translate(-w/2,-h/2);
  for (int y=0; y<r-1;y++){
    beginShape(TRIANGLES);
    for(int x=0; x<c;x++){ 
      vertex(x*space,y*space,tgrid[x][y]);
      vertex(x*space,(y+1)*space,tgrid[x][y+1]);
    }
    endShape();
           
    }
    
 starField(10,10,250,0,0);    
    
   
   
 //myLine(140, 200, 1, 100, 1000, 1920, 100);
 myLine(#FFE079, 10, 20, -100, 0, 0, 30);
 

}

void myLine(int colour, int transparency, int weight, int size, int midpointX, int midpointY, int separation){

 for(int y = 0; y < 2000; y = y + separation) 
  {
 for (int x = 0; x < 2000; x = x + separation) 
  {
    stroke(colour, transparency);
    strokeWeight(weight);
    line(midpointX, midpointY, x + size , y + size);
      }
    }
}
//I'm trying to put this function in as well but I have no idea how. I just want points to appear and disappear, or simply point that appear on my screen over the rest.

void starField(float xstar, float ystar, int rstar, int gstar, int bstar, int fRate1, int fRate2) {

 frameRate(fRate1);
  fill(0,30);
  rect(0,0,width,height);
 rameRate(fRate2);
fill(rstar,gstar,bstar);
  noStroke();
  ellipse(random(width),random(height),xstar,ystar);
}

```

---

<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:** [October 14, 2019, 12:36am UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676/2 "2019-10-14T00:36:31Z")

</div>

> [@elcougario](#):
>
> starField(10,10,250,0,0);

> [@elcougario](#):
>
> void myLine(int colour, int transparency, int weight, int size, int midpointX, int midpointY, int separation)

The function is expecting 7 variables and you are passing only 5 variables.

🙂

---

<div class="post-metadata">

**Author:** ![elcougario](https://avatars.discourse-cdn.com/v4/letter/e/d26b3c/32.png) [@elcougario](https://discourse.processing.org/u/elcougario)\
**Post date:** [October 14, 2019, 12:44am UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676/3 "2019-10-14T00:44:49Z")

</div>

Hi,  
thanks for replying!

It is not showing up either way. I might need to take a variable away since my fill rectangle is going to high the other functions…

i still don’t get it to work

thankss

---

<div class="post-metadata">

**Author:** ![elcougario](https://avatars.discourse-cdn.com/v4/letter/e/d26b3c/32.png) [@elcougario](https://discourse.processing.org/u/elcougario)\
**Post date:** [October 14, 2019, 12:46am UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676/4 "2019-10-14T00:46:22Z")

</div>

If you make it work without the starfield function you could see that its like a cloud moving and some lines in the back. I just want stars to show on the screen gradually.

---

<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:** [October 14, 2019, 1:43am UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676/5 "2019-10-14T01:43:28Z")

</div>

This will do the trick:  
[https://processing.org/tutorials/rendering/](https://processing.org/tutorials/rendering/)  
[https://processing.org/reference/PGraphics.html](https://processing.org/reference/PGraphics.html)  
[https://processing.org/reference/createGraphics\_.html](https://processing.org/reference/createGraphics_.html)  
[https://processing.org/reference/image\_.html](https://processing.org/reference/image_.html)

Create a PGraphic object of a starfield and use that in draw().

🙂

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9e5a4d0804037346426efa98bf2a6ff5903ef486.png)

---

<div class="post-metadata">

**Author:** ![elcougario](https://avatars.discourse-cdn.com/v4/letter/e/d26b3c/32.png) [@elcougario](https://discourse.processing.org/u/elcougario)\
**Post date:** [October 14, 2019, 1:53am UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676/6 "2019-10-14T01:53:11Z")

</div>

ok i’ll try that but i’ve never used this method.

---

<div class="post-metadata">

**Author:** ![elcougario](https://avatars.discourse-cdn.com/v4/letter/e/d26b3c/32.png) [@elcougario](https://discourse.processing.org/u/elcougario)\
**Post date:** [October 14, 2019, 1:59am UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676/7 "2019-10-14T01:59:11Z")

</div>

I am kind of new to all of this, thanks a lot for the help. I don’t get how you put it in the code. ☹

---

<div class="post-metadata">

**Author:** ![elcougario](https://avatars.discourse-cdn.com/v4/letter/e/d26b3c/32.png) [@elcougario](https://discourse.processing.org/u/elcougario)\
**Post date:** [October 14, 2019, 2:28am UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676/9 "2019-10-14T02:28:44Z")

</div>

I understand the use of PGraphics now, but i’m still doing it wrong ☹

```auto

//Global Variables

int c,r; //rows/coloms
int space=10; //space
 int w=1920; //width of display
  int h=1080;//height of display
  
  float[][] tgrid;
  float cloud=0;

PGraphics myLine;
PGraphics cloudfunction;
PGraphics starField;

void setup(){
  size(1920,1080,P3D);
  c=w/space;
  r=h/space; 
   tgrid=new float [c][r];
  myLine= createGraphics(width,height);
  cloudfunction= createGraphics(width,height);
  starField=createGraphics(width,height);
  

 }

void draw(){
  
 // for(int i=0;i<350;i++);

cloudfunction.beginDraw();

 cloud-=0.04; //cloud speed
  
  float moveY=cloud;
 for(int y=0; y<r;y++){
   float moveX=2;
    for(int x=0; x<c;x++){
      tgrid[x][y]=map(noise(moveX,moveY),0,1,-150,150); 
      moveX +=0.05;
    }
    moveY +=0.05;
 }
  
  
  background(0);
   stroke(#4C6FEA);
   noFill();
   
   translate(width/2,height/2);
   rotateX(PI/2.6);
   translate(-w/2,-h/2);
  for (int y=0; y<r-1;y++){
    beginShape(TRIANGLES);
    for(int x=0; x<c;x++){ 
      vertex(x*space,y*space,tgrid[x][y]);
      vertex(x*space,(y+1)*space,tgrid[x][y+1]);
    }
    endShape();
           
    }
    cloudfunction.endDraw();
    image(cloudfunction,width,height);
    
    
    starField.beginDraw();
 starField(10,10,250,0,10,10,10);  
 starField.endDraw();
 image(starField,width,height);
    
   
   
 //myLine(140, 200, 1, 100, 1000, 1920, 100);
 myLine.beginDraw();
 myLine(#FFE079, 10, 20, -100, 0, 0, 30);
 myLine.endDraw();
 image(myLine,width,height);
 
 //saveFrame("ball-####.jpg");
}

void myLine(int colour, int transparency, int weight, int size, int midpointX, int midpointY, int separation){

  
 for(int y = 0; y < 2000; y = y + separation) 
  {
 for (int x = 0; x < 2000; x = x + separation) 
  {
    stroke(colour, transparency);
    strokeWeight(weight);
    line(midpointX, midpointY, x + size , y + size);
      }
      
  }

      
}

void starField(float xstar, float ystar,int rstar, int gstar, int bstar, int fRate1,int fRate2) {

 frameRate(fRate1);
  fill(0,30);
  rect(0,0,width,height);
 frameRate(fRate2);
    fill(rstar,gstar,bstar);
 noStroke();
 ellipse(random(width),random(height),xstar,ystar);
}

```

---

<div class="post-metadata">

**Author:** ![elcougario](https://avatars.discourse-cdn.com/v4/letter/e/d26b3c/32.png) [@elcougario](https://discourse.processing.org/u/elcougario)\
**Post date:** [October 14, 2019, 2:33am UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676/10 "2019-10-14T02:33:33Z")

</div>

Would it be possible for me to compare my code with yours to see where my mistake is?🙂

---

<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:** [October 14, 2019, 2:46am UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676/11 "2019-10-14T02:46:09Z")

</div>

This may be simpler and does not use PGraphics; I did something similar with a PGraphics object.

1. Generate an array of 1000 stars in setup(),
2. Display stars in draw() and update number of stars to display (from 0 to 999) every 2 seconds (120 frames).

```auto
float [][] stars;
int count = 0;

void setup()
  {
  size(500, 500);  
  stars = new float [1000][3];
  for (int i = 0; i<1000; i++)
    {
    stars[i][0] = ?; // random x
    stars[i][1] = ?; // random y
    stars[i][2] = ?; // random strokeWeight
    }
  }

void draw()
  {
  background(0);
  
  if (frameCount%120==0) //every 2 seconds
    count++;
  starfield2(count);
  if (count>=999) count = 999;  
  }

void starfield2(int starCount)
  {
  stroke(255);
  for (int i = 0; i<starCount; i++)
    {
    ? //strokeweight from array
    ? // point from array
    }
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f53c640c0a36bd6bff46b13d67b2154796077c63.png)

---

<div class="post-metadata">

**Author:** ![elcougario](https://avatars.discourse-cdn.com/v4/letter/e/d26b3c/32.png) [@elcougario](https://discourse.processing.org/u/elcougario)\
**Post date:** [October 14, 2019, 1:21pm UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676/12 "2019-10-14T13:21:09Z")

</div>

Ok I just cannot seem to manage to combine everything together, thanks for the help though. I can’t get my code to work with the wave and the myLine funtcion all at once.

---

<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:** [October 14, 2019, 1:49pm UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676/13 "2019-10-14T13:49:11Z")

</div>

> [@elcougario](#):
>
> I just want to put dots over everything, but I can’t figure it out.

> [@elcougario](#):
>
> I just like want stars to show up at the top or everywhere

I suggested that you:

> [@glv](#):
>
> Create a PGraphic object of a starfield and use that in draw().

I am using original code you provided below.  
I added a template to create the starfield that I showed in the picture.

```auto
//Global Variables

int c,r; //rows/coloms
int space=10; //space
 int w=1920; //width of
  int h=1080;//height of
  
  float[][] tgrid;
  float cloud=0;

PGraphics pg;

void setup(){
  size(1920,1080,P3D);
  c=w/space;
  r=h/space; 
   tgrid=new float [c][r];
  
  pg = createGraphics(width, height, P2D);
  starfield();
 }

void draw(){
  
 cloud-=0.04; //cloud speed
  
  float moveY=cloud;
 for(int y=0; y<r;y++){
   float moveX=2;
    for(int x=0; x<c;x++){
      tgrid[x][y]=map(noise(moveX,moveY),0,1,-150,150); 
      moveX +=0.05;
    }
    moveY +=0.05;
 }
  
  background(0);
   stroke(#4C6FEA);
   noFill();
   
  
  image(pg, 0, 0); 
   
   translate(width/2,height/2);
   rotateX(PI/2.6);
   translate(-w/2,-h/2);
  for (int y=0; y<r-1;y++){
    beginShape(TRIANGLES);
    for(int x=0; x<c;x++){ 
      vertex(x*space,y*space,tgrid[x][y]);
      vertex(x*space,(y+1)*space,tgrid[x][y+1]);
    }
    endShape();
           
    }
    
 // starField(10,10,250,0,0);    
 myLine(140, 200, 1, 100, 1000, 1920, 100);
 myLine(#FFE079, 10, 20, -100, 0, 0, 30);
 

}

void myLine(int colour, int transparency, int weight, int size, int midpointX, int midpointY, int separation){

 for(int y = 0; y < 2000; y = y + separation) 
  {
 for (int x = 0; x < 2000; x = x + separation) 
  {
    stroke(colour, transparency);
    strokeWeight(weight);
    line(midpointX, midpointY, x + size , y + size);
      }
    }
}

void starfield()
  {
  pg.beginDraw();
  pg.background(0);

 // Code to generate a PGraphic with 1000 random stars removed
  
  pg.circle(width/2, height/2, 50);
  pg.endDraw();
  }

//I'm trying to put this function in as well but I have no idea how. I just want points to appear and disappear, or simply point that appear on my screen over the rest.

//void starField(float xstar, float ystar, int rstar, int gstar, int bstar, int fRate1, int fRate2) {

// frameRate(fRate1);
// fill(0,30);
// rect(0,0,width,height);
// rameRate(fRate2);
//fill(rstar,gstar,bstar);
// noStroke();
// ellipse(random(width),random(height),xstar,ystar);
//}

```

> [@elcougario](#):
>
> I just want stars to show on the screen gradually.

I will leave the remainder of this project with you.

You can complete the code in the template as an exercise if you wish.

I also provide other suggestions; decision is yours as this is your project.

I changed the subject.

🙂

---

<div class="post-metadata">

**Author:** ![elcougario](https://avatars.discourse-cdn.com/v4/letter/e/d26b3c/32.png) [@elcougario](https://discourse.processing.org/u/elcougario)\
**Post date:** [October 14, 2019, 4:40pm UTC](https://discourse.processing.org/t/combine-overlay-graphics-in-draw/14676/14 "2019-10-14T16:40:22Z")

</div>

Thanks a lot, I figured out something that suited me with the help of PGraphics!!