Starry background

next steps: add motion, add restart and incremental-draw functions

view this project on my website: brianpabbott.com/processing/starry-background

view this project on github: br1anabb0tt/starry_bg

my github home: br1anabb0tt.github.io

Your browser does not support the canvas tag.

Static and dynamic starry background

click on image, then press [ENTER] to start proliferation of stars, press [SPACEBAR] to pause/resume

version history

Source code: starry_bg (or see below)

Built with Processing and Processing.js


/* @pjs preload="http://brianpabbott.com/processing/images/starry-bg.png"; */

float largePoint;
boolean pause = false;

void setup() {
  size(640, 360);
  largePoint = 4;
  noStroke();
  PImage img;
  img = loadImage("http://brianpabbott.com/processing/images/starry-bg.png");
  background(img);
  noLoop(); // so stars start appearing only on keypress function below
}

void draw() {
  if (pause == false) {
    int starX = int(random(width));
    int starY = int(random(height));
    fill(255, 255, 255);
    ellipse(starX, starY, largePoint, largePoint);
  }
}

void keyPressed(){
  if (keyCode == ENTER) { // press ENTER to start
    loop();   
  } else if(key == ' ') { // press spacebar to pause/resume
    if(pause == false) {
      pause = true;
    } else {
      pause = false;
    }
  }
}