Loading...
Logo
Processing Forum

Working on a starfield

in Programming Questions  •  11 months ago  
Hey guys I'm trying to work on a moving star field at the moment I want it to kinda move on the Y axis and repeat right now I have a simple while to repeat the my ellipses going to the right and have random blinking to give them that twinkle like stars was wondering how would I animated them to move up the Y axis and then repeat over to give it the feel of upward movement
Copy code
  1. //Global Varibles
    float y = 50; //vertical location of each star
    float x = 10; //intial horizontal location of the first line
    float y1 = 50; //vertical location of each star
    float x1 = 50; //intial horizontal location of the first line
    float Cid = 5; //width of the ellipse
    float spacing = 20; //How far apart is each star
    float spacing1 = 10; //How far apart is each star
    float dia = 5; //height of
    each star
    float endStars = 500;
    //colorGroup variables that we are going to use random to play with
    float r;
    float g;
    float b;
    float a;
    //Global Varibles

    void setup(){
    size(500,500);
    smooth();
    background(0);
    ellipseMode(CENTER); // setting up the ellipse in center
    }
    void draw(){
    starField(0,50,4,4);
    }
    void starField(float x, float y,float cid,float dia){
    r = random(255);
    g = random(255);
    b = random(255);
    a = random(255);
    while (x <= endStars){
    fill(r,g,b,a);
    ellipse(x,y,Cid,dia);
    x = x + spacing;
    }
    }

Replies(17)

Here's something I created ages ago - a simple right to left starfield but you can also 'nudge' the stars with your mouse - it might be of use:

Copy code
  1. int iLoop1;
    int iNumStars = 100;
    int[][] iStars = new int[iNumStars][4];

    void setup() {


      size(320, 240); 

      //init array
      for (iLoop1=0; iLoop1<iNumStars; iLoop1++) {   

        iStars[iLoop1][0]=int(random(width));
        iStars[iLoop1][1]=int(random(height));
        iStars[iLoop1][2]=int(random(1, 4));
        iStars[iLoop1][3]=int(128 + random(127));   
      }
    }


    void draw() {
      //clear
      background(0);

      //update all stars
      updatestars();
     
      //draw 'em
      for (iLoop1=0; iLoop1<iNumStars; iLoop1++) {
         fill(iStars[iLoop1][3]);
         ellipse(iStars[iLoop1][0], iStars[iLoop1][1], 4, 4);
      }
     
    }


    void updatestars() {

      int iMX=mouseX;
      int iMY=mouseY;
     
      for (iLoop1=0; iLoop1<iNumStars; iLoop1++) {
        //speed
        iStars[iLoop1][0] = iStars[iLoop1][0] - iStars[iLoop1][2];

        //be pushed by mouse
        // if near in X
        if (abs(iMX-iStars[iLoop1][0]) < 20){
          //move faster ('near') stars more
          //if near and above cursor
          if ((iMY > iStars[iLoop1][1]) && (abs(iMY - iStars[iLoop1][1]) < 20)) iStars[iLoop1][1]= iStars[iLoop1][1] - 2 * iStars[iLoop1][2];
          //if near and below cursor
          if ((iMY < iStars[iLoop1][1]) && (abs(iMY - iStars[iLoop1][1]) < 20)) iStars[iLoop1][1]= iStars[iLoop1][1] + 2 * iStars[iLoop1][2];     
        }
       
        //off-screen - reset
        if (iStars[iLoop1][0] < 0) {

          iStars[iLoop1][0] = width;
          iStars[iLoop1][1] = int(random(height));     
          iStars[iLoop1][2] = int(random(1, 3));
          iStars[iLoop1][3] = int(128 + random(127));         
        }
      }
    }
Thanks man ^^ ill check it out looking forward too playing with also, quick question i don't know what brakes you are using at the int[][] iStars = new int[iNumStars][4]; could you like explain it to me just a break down of that line.
btw its really cool ^^ just looking at it in processing and i love it

the line says have a 2D array (which is a grid like a chess board)
it has iNumStars lines and in each line 4 columns to store data of the type int for each star.

so 400 virtual cells for the data.

as you can see:

Copy code
  1.     iStars[iLoop1][0]=int(random(width));
  2.     iStars[iLoop1][1]=int(random(height));
  3.     iStars[iLoop1][2]=int(random(1, 4));
  4.     iStars[iLoop1][3]=int(128 + random(127));   

for each star,
  • column 0 is x-pos,
  • col 1 y-pos,
  • col 2 speed and
  • col 3 its color

it's one solution to store data.
You could use this for the enemies in your other program.
Later you replace the approach with objects of a class.

Got it thank Chrisir sorry I'm still pretty noobish >.<
Right I still haven't replace the enemies yet into an array I feel a little intimidated I wont lie about it, but breaking it down more and seeing it I'm getting a better understanding especially playing around with his star field right by breaking the code apart and trying to change stuff and see what happens.


no need to apologize!!

You're most welcome!


Hello wilcapriv ! Just some additional tips!

To better identify the stars characteristics, as -> 0 & 1 meaning xPOS & yPOS , 2 is speed and 3 is color ; how about using static final constants ?
This way, it becomes crystal clear what each field in stars[][] mean!
For example:
Copy code
    private static final byte xPOS = 0, yPOS   = 1;
    private static final byte SPD  = 2, COLOUR = 3;
    
    private static final byte numSTARS = 100;
    private static final int[][] stars = new int[numSTARS][4];
    
    private static final byte maxSPEED = 4;
    
    void setup() {
    
        size(320, 240);
        frameRate(60);
        ellipseMode(CENTER);
    
        for (byte num=0; num<numSTARS; num++) {
            stars[num][xPOS]   = (int) random(width);
            stars[num][yPOS]   = (int) random(height);
            stars[num][SPD]    = (int) random(1, maxSPEED);
            stars[num][COLOUR] = (int) random(128) + 128;
        }
    }
    
Another alternative, which is a lil' more efficient speed-wise, is to have separate 1D arrays instead of just one 2D array.
Copy code
    private static final byte numSTARS = 100;
    private static final byte maxSPEED = 4;
    
    private static final int[] starsX = new int[numSTARS];
    private static final int[] starsY = new int[numSTARS];
    
    private static final int[] starsSpeed = new int[numSTARS];
    private static final int[] starsColor = new int[numSTARS];
    
    void setup() {
    
        size(320, 240);
        frameRate(60);
        ellipseMode(CENTER);
    
        for (byte num=0; num<numSTARS; num++) {
            starsX[num] = (int) random(width);
            starsY[num] = (int) random(height);
    
            starsSpeed[num] = (int) random(1, maxSPEED);
            starsColor[num] = (int) random(128) + 128;
        }
    }
    
lol I'm even more confuse at the moment, I'm trying to go in a make them move up the y axis instead of the x-axis and i keep getting errors >.<.
Ok guy's i took the first code and added notes to show where I'm confuse at and maybe make easier for you guys to break it down and explain it to me better like i said i have a general idea whats going on I'm trying to achieve the same effect going from the bottom of the sketch to the top.

Copy code
  1. int iLoop1; //Variable for looping stars
    int iNumStars = 100; // Varibales for numbers of stars
    int[][] iStars = new int[iNumStars][4]; //array holding values of stars

    void setup() { //setup contains the loop for stars

    size(1000, 640); // the side of the sketch

    //init array
    for (iLoop1=0; iLoop1<iNumStars; iLoop1++) { //setting up loop for stars

    iStars[iLoop1][0]=int(random(w idth)); // Array 0 is a int holding the value of a random width location
    iStars[iLoop1][1]=int(random(h eight)); // Array 1 is a int holding the value of a random height location
    iStars[iLoop1][2]=int(random(1 , 4)); //Array 2 is holding a int value that random 1,4 not 100% sure what this means
    iStars[iLoop1][3]=int(128 + random(127));// Array holding a int for value 128 + a random number times 127? not sure what going on here
    }
    }

    void draw() { // the void draw function that starts the sketch
    //clear
    background(0);

    //update all stars
    updatestars(); // this is the function for calling stars

    //draw 'em
    for (iLoop1=0; iLoop1<iNumStars; iLoop1++) { //this is a for loop statement
    fill(iStars[iLoop1][3]); //thes using array 3 to fill in the star but again I didnt understand what array 3 was doing to behing with
    ellipse(iStars[iLoop1][0], iStars[iLoop1][1], 4, 4); // this is the ellipse that makes up the stars array 0 and 1 make up the x and y location with explains how the stars appears in different location each loop
    }

    }

    void updatestars() { //this is the function for updating stars

    int iMX=mouseX; // this is for dectection of the mousex location
    int iMY=mouseY; // this is for dectection of the mousey location

    for (iLoop1=0; iLoop1<iNumStars; iLoop1++) { //loop for speed of the stars
    //speed
    iStars[iLoop1][0] = iStars[iLoop1][0] - iStars[iLoop1][2]; //this controls the stars going left to right but once I change the - to a + they wont repeat how would i effect this to change it to go from bottom on sketch to the top
    //I know this is very important in the control of flow of stars
    //but have no idea what i have to change here to make it go up and down
    // =============================== ===========================

    //be pushed by mouse
    // if near in X
    if (abs(iMX-iStars[iLoop1][0]) < 20){
    //move faster ('near') stars more
    //if near and above cursor
    if ((iMY > iStars[iLoop1][1]) && (abs(iMY - iStars[iLoop1][1]) < 20)) iStars[iLoop1][1]= iStars[iLoop1][1] - 2 * iStars[iLoop1][2];
    //if near and below cursor
    if ((iMY < iStars[iLoop1][1]) && (abs(iMY - iStars[iLoop1][1]) < 20)) iStars[iLoop1][1]= iStars[iLoop1][1] + 2 * iStars[iLoop1][2];
    }

    //off-screen - reset
    if (iStars[iLoop1][0] < 0) { //this is is istars the variable array 0 when its less than 0 do this loop

    iStars[iLoop1][0] = width; //sets the first array back to equal the width again
    iStars[iLoop1][1] = int(random(height)); //sets array 1 to equal the height again
    iStars[iLoop1][2] = int(random(1, 3)); //I know this is part of the speed but not a 100% sure
    iStars[iLoop1][3] = int(128 + random(127));// this loop 3 is controling the fill of the star not sure how its chaging the colors
    }
    }
    }
     
You get errors when you move vertically (y-axis) or for both (y-axis & x-axis)?
It'd be nice a re-publishing of your current code.
How do i republish my code, sorry little confuse how you guys are getting you code posted.
Ok this is what I've made work so far in the code with playing around with it with help from everyone here and a friend from class who lead me in the right direction

http://www.understandingnewmedia.com/p4a/f2012/wilbert_r/exercise_5/

The star won't repeat at this point I know I have to change something in the repeat loop

The reason why the stars won't ever come back to the graphics visible screen once gone, is because you haven't implemented a code to reset the y-axis of them.
I've just included the minimum algorithm for it by extending 1 of the code examples I've already given to ya.
Check it out:
Copy code
    /*
     Moving Stars (v0.1)
     by wilcapriv (2012/Oct)
     
     http://forum.processing.org/topic/working-on-a-starfield
     */
    
    private static final byte xPOS = 0, yPOS = 1;
    private static final byte SPD  = 2, COR  = 3;
    
    private static final byte numSTARS = 100;
    private static final int[][] stars = new int[numSTARS][4];
    
    private static final byte maxSPEED = 8;
    private static final byte starSIZE = 4;
    
    private static final short gw = 1000, gh = 800;
    private static final color bgCOLOR = 0;
    
    final void setup() {
    
        size(1000, 640);
        frameRate(30);
        ellipseMode(CENTER);
    
        for (byte num=numSTARS-1; num>-1; num--) {
            stars[num][xPOS] = (int) random(gw);
            stars[num][yPOS] = (int) random(gh);
            stars[num][SPD]  = (int) random(1, maxSPEED);
            stars[num][COR]  = (int) random(128) + 128;
        }
    }
    
    final void draw() {
    
        background(bgCOLOR);
    
        for (byte num=numSTARS-1; num>-1; num--) {
            stars[num][yPOS] = ( stars[num][yPOS] + stars[num][SPD] ) % gh;
    
            fill( stars[num][COR] );
            ellipse( stars[num][xPOS], stars[num][yPOS], starSIZE, starSIZE );
        }
    }
    
Alternative horizontal movement:

stars[num][xPOS] = ( stars[num][xPOS] + stars[num][SPD] ) % gw;
Thanks man got it ^^ awesome /bow