Adding a background image to a code

Processing Coding Questions
1

I’m new to proccesing, I have a code that I made, and I’m wondering how to set the background to a image, all the attempts that I did failed.

2

Can we see the code of your best attempt(s)?

You will probably need to load the image from a file and use loadImage().

You will load the image into a PImage object.

You can draw the background as an image with either image() or background().

1 Like
3

Here is the code:

int quantity = 300;
float [] xPosition = new float[quantity];
float [] yPosition = new float[quantity];
int [] flakeSize = new int[quantity];
int [] direction = new int[quantity];
int minFlakeSize = 1;
int maxFlakeSize = 5;

PImage bg; 

void setup() 
{
  size(800, 350);
  background(11, 37, 79);
  frameRate(30);
  noStroke();
  smooth();
  bg = loadImage("simply_snow_backround.png");
  
  for(int i = 0; i < quantity; i++) {
    flakeSize[i] = round(random(minFlakeSize, maxFlakeSize));
    xPosition[i] = random(0, width);
    yPosition[i] = random(0, height);
    direction[i] = round(random(0, 1));
}

void draw() 
{
  background(bg);

  for(int i = 0; i < xPosition.length; i++) {
    
    ellipse(xPosition[i], yPosition[i], flakeSize[i], flakeSize[i]);
    
    if(direction[i] == 0) {
      xPosition[i] += map(flakeSize[i], minFlakeSize, maxFlakeSize, .1, .5);
    } else {
      xPosition[i] -= map(flakeSize[i], minFlakeSize, maxFlakeSize, .1, .5);
    }
    
    yPosition[i] += flakeSize[i] + direction[i]; 
    
    if(xPosition[i] > width + flakeSize[i] || xPosition[i] < -flakeSize[i] || yPosition[i] > height + flakeSize[i]) {
      xPosition[i] = random(0, width);
      yPosition[i] = -flakeSize[i];
    
    
  }
  
}
4

What do you expect this code to do? What does it do instead?

Can you try to start with a simpler sketch that just shows a background and nothing else? Then add one thing at a time.

5 
int quantity = 300;
float [] xPosition = new float[quantity];
float [] yPosition = new float[quantity];
int [] flakeSize = new int[quantity];
int [] direction = new int[quantity];
int minFlakeSize = 1;
int maxFlakeSize = 5;

PImage bg; 

void setup() 
{
  size(800, 350);
  background(11, 37, 79);
  frameRate(30);
  noStroke();
  smooth();
  bg = loadImage("Snow-Background.png");

  for (int i = 0; i < quantity; i++) {
    flakeSize[i] = round(random(minFlakeSize, maxFlakeSize));
    xPosition[i] = random(0, width);
    yPosition[i] = random(0, height);
    direction[i] = round(random(0, 1));
  }
}

void draw() 
{
  image(bg,0,0);

  for (int i = 0; i < xPosition.length; i++) {

    ellipse(xPosition[i], yPosition[i], flakeSize[i], flakeSize[i]);

    if (direction[i] == 0) {
      xPosition[i] += map(flakeSize[i], minFlakeSize, maxFlakeSize, .1, .5);
    } else {
      xPosition[i] -= map(flakeSize[i], minFlakeSize, maxFlakeSize, .1, .5);
    }

    yPosition[i] += flakeSize[i] + direction[i]; 

    if (xPosition[i] > width + flakeSize[i] || xPosition[i] < -flakeSize[i] || yPosition[i] > height + flakeSize[i]) {
      xPosition[i] = random(0, width);
      yPosition[i] = -flakeSize[i];
    }
  }
}

Try this. You need not to use background(bg) use image(bg,0,0) instead your program produced beautiful visuals. If you use random ice crystal sprites it would be more beautiful.