Processing - Merging layers

Have you ever wanted to take two layers in Processing and merge them into a composite image.

Well like most things it's simple enough when you know how.

Thanks to H. ADAM LENZ for his tutorial page PIXEL PUSHING WITH PROCESSING

The fist step in understanding this process is to understand that when loading an image into processing what you are doing is loading an array of pixels. And that we can address any individual pixel on the screen by addressing the pixel data held in an array.

See below for an example of using this technique to look up pixel values and change them, IN this case from Black to Yellow.

Processing is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production.

Processing Home Page

// https://hadamlenz.wordpress.com/2014/07/21/pixel-pushing-with-processing/

PImage img; //declare the image
void setup() {
size(300, 300);
img = loadImage("grid.gif"); //load the image, but do not display yet

color checkColor = color(#000000); //the color to check for
color setColor = color(#FFFF00); //the color to replace it with (Yellow in this example)

  //pixel array method
  img.loadPixels(); //address the pixels directly, hello pixels!!!
  for (int p=0; p<img.width*img.height; p++) {
    //loop through all the pixels
    if (img.pixels[p]==checkColor) {
      //if the pixel has the color we are checking for
      img.pixels[p]=setColor; //replace it with the new color
    }
  }
  img.updatePixels(); //then update the pixels
  image(img, 0, 0); //now show the image
  save("new-grid.gif");
}

Becomes

All black pixels are replaced with yellow ones

The next example uses the PGraphics to create 2 layers and then merges the layers together

// Merging 2 layers in Processing
// Based on code from
// https://hadamlenz.wordpress.com/2014/07/21/pixel-pushing-with-processing/

// Create 2 layers pg1 & pg2

PGraphics pg1;
PGraphics pg2;

void setup() {
size(400, 400);
pg1 = createGraphics(400, 400);
pg2 = createGraphics(400, 400);

noSmooth();
// this is required in this example to turn off anti-aliasing because I am in this example
// matching only exact values of colour and not a range of colours which are produced on the
// boundary of lines when smooth(); is turned on

}

void draw() {
  noLoop();
  pg1.beginDraw(); // pg1 will be the foreground
  pg1.background(100);
  pg1.stroke(0);
  pg1.strokeWeight(3);
  pg1.line(0, 0, width /2, height /2);
  pg1.fill(255);
  pg1.ellipse(width/2, height /2, width /3, height /3); // draw a white circle
  pg1.endDraw(); // Draw the first layer Note this is not displayed yet
  pg1.save("pg1a.gif"); // Save the first layer as a gif file

  // Draw the "background"
  pg2.beginDraw();
  pg2.background(#0000FF); // blue background
  pg2.stroke(255, 255, 0); // yellow lines
  pg2.strokeWeight(30); // nice thick line
  pg2.line(0, 0, width /2, height /2); // draw a yellow line to the center of the screen
  pg2.endDraw();

  //pixel array method for searching for one colour and replacing it with another
  pg1.loadPixels();//address the pixels directly, hello pixels!!!
  for (int p = 0; p <pg1.width * pg1.height; p++) {

//loop through all the pixels
if (pg1.pixels[p]==#000000) {

      //if the current pixel is black
      pg1.pixels[p]=#FF0000; //replace it with the new color Red
    }

  {
      // Make White on PG1 "transparent" and "show" pg2 pixels through it.
      if (pg1.pixels[p]==#FFFFFF) {
          pg1.pixels[p] = pg2.pixels[p]; //replace the foreground pixel with the background pixel
      }
    }
  }

  pg1.updatePixels();  //then update the pixels
  image(pg1, 0, 0);  //now show the image

pg1.save("pg1b.gif"); // save the resultant image
pg2.save("pg2.gif"); // save the background image
}

The Foreground layer the white in this image will become "Transparent"

The background image

The final result.

Note we have performed 2 actions first we replaced all black pixels with red ones

then we returned the pixels from the background layer instead of keeping the original white pixels. So we see the background "trough" the white circle

Note if we turn smooth(); on the result is not as successful because the search we performed were for pure black and pure white pixels as you can see below there is a "halo" of almost white and almost black pixels around the edges.

I have not considered the best way to deal with this yet but it will require searching for a range of almost white and almost black pixels and replacing them.

APA citation:
Russell, R. (2017, January 15, 12:26 am). Processing code snippits.
Retrieved July 31, 2024, from
http://www.rupert.id.au/processing/snippits.php

Last refreshed: July 31 2024. 07:12.07 pm

rupert dot russell at acu dot edu dot au

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.

1360 Visits since November 17, 2016