# Combine overlay graphics in draw

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

``````
//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);
}
``````
1 Like

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

1 Like

Hi,

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

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.

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

1 Like

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

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.

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

``````

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

``````
1 Like

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

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).
``````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
}
}
``````

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.

I suggested that you:

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

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

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.

1 Like

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