Displaying Image on Top of Background - Cockpit view jump into hyperspace

Processing Coding Questions
1

I am trying to create a starfield with an image of a cockpit in front as if the viewer is sitting in a cockpit jumping into hyperspace. I am using Daniel Shiffman’s starfield coding challenge as the inspiration. The code uses translate to make the center of the screen the space where the stars originate from (vs. the upper, right-hand corner). For my cockpit spaceship image in draw(), I can only either put the image before the stars (but then the stars go right through to the inside of the ship) OR I put the image after the star section of code and the image is only on 1/4 of the screen because it is affected by the translate line of code. Thoughts on how to make the image full screen with the stars behind it? Here’s my code with the image full screen but stars going through it.

//Code for starfield inspired by Daniel Shiffman of The Coding Train

Star[] stars = new Star[800];
float speed;
PImage foregroundImage; //foreground image


void setup() {
  fullScreen();
  smooth();
  foregroundImage = loadImage("spaceship.png");
  for (int i = 0; i < stars.length; i++) {
    stars[i] = new Star();
  }
}

void draw() {
  speed = map(mouseX, 0, width, 0, 50);
  background(0);
  image(foregroundImage, 0, 0, width, height);
  translate(width/2, height/2);
  for (int i = 0; i < stars.length; i++) {
    stars[i].update();
    stars[i].show();  
  }
}
class Star {
  float x;
  float y;
  float z;
  
  float colR = random(0,255);
  float colG = random(0,255);
  float colB = random(0,255);
  
  float pz;
  
  Star() {
    x = random(-width, width);
    y = random(-height, height);
    z = random(width);
    pz = z;
  }
  
  void update(){
    z = z-speed;
    if (z < 1) {
      z = width;
      x = random(-width, width);
      y = random(-height, height);
      pz = z;
    }
  }
  
  void show() {
    fill(colR, colG, colB);
    noStroke();
    
    float sx = map(x/z, 0, 1, 0, width);
    float sy = map(y/z, 0, 1, 0, height);
    
    float r = map(z, 0, width, 6, 0);
    ellipse(sx,sy,r,r);
    
    float px = map(x/pz, 0, 1, 0, width);
    float py = map(y/pz, 0, 1, 0, height);
    
    pz = z;
    
    stroke(colR, colG, colB);
    line(px, py, sx, sy);
    
    px = sx;
    py = sy;
  }
}
1 Like
2

Draw the image after the star field

Surround the star field with push(); before it;
and pop(); after the for loop

3 Likes
3

So simple! Thank you so much!

1 Like
4

Hello @carlymoj ,

Some other options:

PImage img;

void setup()
  {
  size(800, 500);
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Processing_2021_logo.svg/480px-Processing_2021_logo.svg.png");
  }
  
void draw()
  {
  int c = frameCount%256;
  println(c);
  background(c); 
  translate(width/2, height/2);
  
  // 1:
  imageMode(CENTER);
  image(img, 0, 0);

  // 2: 
  //image(img, -img.width/2, -img.height/2);
  }

Reference:
https://processing.org/reference/image_.html
https://processing.org/reference/imageMode_.html

:)