# Galaga scrolling background

**URL:** https://discourse.processing.org/t/galaga-scrolling-background/26527
**Category:** Project Guidance
**Created:** [December 26, 2020, 11:44pm UTC](https://discourse.processing.org/t/galaga-scrolling-background/26527 "2020-12-26T23:44:31Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![lionR](https://avatars.discourse-cdn.com/v4/letter/l/919ad9/32.png) [@lionR](https://discourse.processing.org/u/lionR)
#### Post date: [December 26, 2020, 11:44pm UTC](https://discourse.processing.org/t/galaga-scrolling-background/26527/1 "2020-12-26T23:44:31Z")

</div>

I have to create a project in which I chose to create Galaga. I want a vertically scrolling background but don’t know how to achieve that. How would you guys go about something like that?

---

<div class="post-metadata">

### Author: ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)
#### Post date: [December 27, 2020, 8:16am UTC](https://discourse.processing.org/t/galaga-scrolling-background/26527/2 "2020-12-27T08:16:58Z")

</div>

The code below is from the [Fun Programming blog](https://funprogramming.org/) maintained by hamoid (aBe). I only changed the direction. There are a lot of tutorials there with easy directives. If you don’t understand something just go back some steps in the table of contents:

```auto
float[] x = new float[100];
float[] y = new float[100];
float[] speed = new float[100];

void setup() {
  size(500, 400);
  background(0);
  stroke(255);
  noCursor();

  int i = 0;
  while(i < 100) {  
    x[i] = random(0, width);
    y[i] = random(0, height);
    speed[i] = random(1, 5);
    i = i + 1;
  }
}

void draw() {
  background(0);

  // draw triangle
  triangle(mouseX, mouseY, mouseX+6, mouseY-30, mouseX+12, mouseY);
  
  int i = 0;
  while(i < 100) {
    float co = map(speed[i], 1, 5, 100, 255);
    stroke(co);
    strokeWeight(speed[i]);
    point(x[i], y[i]); 
    y[i] = y[i] + speed[i] / 2;
    if(y[i] > 400) {
      y[i] = 0;
    }
    i = i + 1;
  }
}

```

---

<div class="post-metadata">

### Author: ![lionR](https://avatars.discourse-cdn.com/v4/letter/l/919ad9/32.png) [@lionR](https://discourse.processing.org/u/lionR)
#### Post date: [December 31, 2020, 12:53am UTC](https://discourse.processing.org/t/galaga-scrolling-background/26527/3 "2020-12-31T00:53:34Z")

</div>

I was looking for something that uses an image rather than creating the stars in processing.

---

<div class="post-metadata">

### Author: ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)
#### Post date: [December 31, 2020, 1:05pm UTC](https://discourse.processing.org/t/galaga-scrolling-background/26527/4 "2020-12-31T13:05:42Z")

</div>

One possibility is:

```auto
// PImage img; Your actual background image
PGraphics img; // Just as an example
int y;

void setup() {
  size(500, 500);
  background(255);
  img = createGraphics(width, height);
  img.beginDraw();
  img.background(0, 0, 80);
  img.stroke(255);
  img.line(0, 0, width, height);
  img.line(width, 0, 0, height);
  for (int i = 0; i < height; i += 50) img.line(0, i, width, i);
  img.endDraw();
}

void draw() {
  image(img, 0, -height+y);
  image(img, 0, y++);
  if (y > height) y = 0;
}

```