Combine overlay graphics in draw

elcougario · October 14, 2019, 12:22am

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

glv · October 14, 2019, 12:36am

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

elcougario · October 14, 2019, 12:44am

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

elcougario · October 14, 2019, 12:46am

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.

glv · October 14, 2019, 1:43am

This will do the trick:
https://processing.org/tutorials/rendering/
https://processing.org/reference/PGraphics.html
https://processing.org/reference/createGraphics_.html
https://processing.org/reference/image_.html

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

elcougario · October 14, 2019, 1:53am

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

elcougario · October 14, 2019, 1:59am

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.

elcougario · October 14, 2019, 2:28am

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

elcougario · October 14, 2019, 2:33am

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

glv · October 14, 2019, 2:46am

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

Generate an array of 1000 stars in setup(),
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
    }
  }

elcougario · October 14, 2019, 1:21pm

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.

glv · October 14, 2019, 1:49pm

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.

elcougario · October 14, 2019, 4:40pm

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

Topic		Replies	Views
Small help with a small draw Coding Questions	1	514	September 30, 2019
The Fault in my Stars (or drawing on top of looping background) Coding Questions	2	559	December 6, 2019
Trying to visualize data Coding Questions	34	283	October 31, 2022
Make clouds move Coding Questions	4	3576	March 9, 2020
Problems with translate Coding Questions homework	4	391	May 16, 2020

Combine overlay graphics in draw

Related topics