PImage background() call not working

Processing Coding Questions
1

I am working my way through Ira Greenberg’s original version of “Processing: Creative Coding and Computational Art.” On page 195 there is an example of using the PImage class for draw lines using pixels. The code is fairly simple and does not even use the setup and draw functions. My problem is that I cannot get the sketch to work by making a white background and black lines. I have to change it to make a black background and white lines. Take note that the background call should make it white but turns out black. I cannot find a relevant example online. Here is the code with the changed code specified on lines 5, 9, and 10.

/* program: p195_lines_with_pixels.pde
This program shows how to create lines with pixels. This seems like it has been covered.
However, this program uses the PImage library. /
size(500, 300);
background(255); // not working as specified
// used by diagonal lines
float slope = float(height)/float(width);
PImage img = createImage(width, height, RGB);
//color c = color(0, 0, 0); // original code
color c = color(255, 255, 255); // it works now but I do not know why - and inverted color
// horizontal line
for(int i=0; i<width; i++){
img.set(i, height/2, c);
}
// vertical line
for(int i=0; i<height; i++){
img.set(width/2, i, c);
}
// diagonal line (TL-BR)
for(float i=0; i<width; i++){
img.set(int(i), int(islope), c);
}
// diagonal line (BL-TR)
for(float i=0; i<width; i++){
img.set(int(i), int(height-i*slope), c);
}
image(img, 0, 0);

2

By looking at some other examples online, for instance in the PImage tutorials found on the Processing site, I figured out what was going on. The original code does not work as intended with current Java and Processing. And, as per usual, making mistakes can often lead to figuring out how things work. Code placement in the sketch can affect how the sketch looks. Specifying the slope as a global variable did not work properly at this time and I ended up putting it in the draw function. The sketch could not find the height and width when slope was specified as a global variable.

And when using image(img, 0, 0), that places the image at the 0, 0 starting point. So, if you have an image that is less than the window size, you can see that it does not fill the whole window. This is what lead me to realize that the slope was not getting the correct values when it was initialized. It was a 1/1 slope when it should have been less. Below is the code that I ended up writing to work with this example:

/* program: p195_lines_with_pixels_3.pde
This program uses the PImage class to work with images. It allows for direct manipulation
of pixles in the image. You can use an image from an external source or create an image
in the sketch. Here, the image had to be created in the sketch.
This sketch was originally written as an example in Ira Greenberg's book, "Processing:
Coding and Computational Art," 1st ed, 2007. So, the code had to be changed a little, I
imagine because some things have changed with Java and Processing over the years. The
current year is 2022. See the original code below */
// used by diagonal lines
// float slope = float(height)/float(width);
/* I think that part of the problem is that the image created below actually creates an
image that is black, not a white background. So, the image created is overlaying the
image of the background. Maybe the PImage class had a transparency to it in 2007. */
//PImage img = createImage(width, height, RGB);
PImage img; // create img here, intialize it below
color c = color(0, 0, 0);
color cBackground = color(255, 255, 255);

void setup(){
  size(500, 300);
  background(255); // technically not necessary here as the image fills the window
}

void draw(){
  // create the image called img
  PImage img = createImage(width, height, RGB);
  // fill the image with white pixels
  float slope = float(height)/float(width);
  for(int i=0; i<width; i++){
    for(int j=0; j<height; j++){
      img.set(i, j, cBackground);
    }
  }
  // horizontal line
  for(int i=0; i<width; i++){
    img.set(i, height/2, c);
  }
  // vertical line
  for(int i=0; i<height; i++){
    img.set(width/2, i, c);
  }
  // diagonal line (TL-BR)
  for(float i=0; i<width; i++){
    img.set(int(i), int(i*slope), c);
  }
  // diagonal line (BL-TR)
  for(float i=0; i<width; i++){
    img.set(int(i), int(height-i*slope), c);
  }
  image(img, 0, 0);
}
3 Likes