This is a very simplified program showing my problem. I need to draw to an image that is rotated. I can't use any of processing's line or point functions because of different type brushes in the real program. I have to draw directly to the pixel data. This program plots 4 black pixels under the mouse when its pressed. It works fine on the image that isn't rotated , but I need to know how to translate the x and y position so it works when the image is rotated. Here's the simple program: I also posted this on the new forum. I don't know which forum is seeing the most users.

PImage img;
float rotation = 0.0;
final float deg45 = 45 * PI /180;

void setup(){
     size(800,800);
     img = createImage(800,800,ARGB);
     img.loadPixels();
     for (int i=0; i < img.pixels.length;i++){
          img.pixels[i] = 0xFFFFFFFF;
     }
     img.updatePixels();
}
void draw(){
     background(0);
     if(rotation != 0.0){     
          pushMatrix();
          translate(img.width/2,img.height/2);
          rotate(rotation);
          translate(-img.width/2,-img.height/2);
     }
     int mx = mouseX;
     int my = mouseY;
     if(mousePressed){
          blot(mx,my);          
     }
     image(img,0,0);
     if(rotation != 0.0)     
          popMatrix();
}
void blot(int x,int y){
     img.loadPixels();
     img.pixels[y * img.width + x] = 0xFF000000;
     img.pixels[y * img.width + x+1] = 0xFF000000;
     img.pixels[y * img.width + img.width + x] = 0xFF000000;
     img.pixels[y * img.width + img.width + x+1] = 0xFF000000;
     img.updatePixels();
}
void keyPressed(){
     if(key == ' '){
          if(rotation == deg45)
               rotation = 0.0;
          else rotation = deg45;
     }
     else if ( key == 'c'){
          img.loadPixels();
          for (int i=0; i < img.pixels.length;i++){
               img.pixels[i] = 0xFFFFFFFF;
          }
          img.updatePixels();          
     }

}

My attempt using JAVA2D renderer instead of P2D, extending from @koogs. There is only one small difference when calling the copy() function.

Kf

final color C1=color(0, 20, 220);
final color C2=color(250, 250, 0);

PGraphics textLayer;
PImage bc;

int recX, recY;
int recW = 30;
int recH = 60;

void setup() {
  size(800, 600);  

  // grid of numbers
  textLayer = createGraphics(width, height);
  textLayer.beginDraw();
  textLayer.textSize(16);
  textLayer.clear();  // transparent
  textLayer.fill(255, 0, 0);
  int i = 0;
  for (int y = 0; y < height; y += 50) {
    for (int x = 0; x < width; x += 50) {
      textLayer.text(i, x, y);
      textLayer.text(i, x+1, y);  //Offset by 1px to create bold effect
      i++;
    }
  }
  textLayer.endDraw();

  //Background img
  bc=createImage(width, height, ARGB);
  bc.loadPixels();
  for (int k=0; k<bc.pixels.length; k++) {
    bc.pixels[k]=lerpColor(C1, C2, (k%width)*1.0/width);
  }
  bc.updatePixels();

  randomise();
}

void draw() {
  background(bc);

  copy(textLayer.get(), (int)random(textLayer.width), 
    (int)random(textLayer.height), 
    recW, 
    recH, 
    (int)random(width), (int)random(height), recW, recH);

  noLoop();
}

void mousePressed() {
  randomise();
  loop();
}

void randomise() {
  recX = (int)random(width / 2);
  recY = (int)random(height / 2);
  recW = (int)random(width/2, width);
  recH = (int)random(height/2, height);
}

This is a code that demonstrate the second concept above. Check this for reference: https://processing.org/reference/PImage_mask_.html

Kf

final color C1=color(250, 0, 0);
final color C2=color(250, 250, 0);

final int SHOWBACKGROUNDONLY=0;
final int SHOWIMAGE=1;
final int SHOWMASKEDIMAGE=2;

PImage bc;
PGraphics pg;
PGraphics mask;

int state=SHOWBACKGROUNDONLY;

float recX = 0;
float recY = 30;
float recW = 30;
float recHigh = 60;

void setup() {
  //fullScreen();
  size(600, 400);
  mask = createGraphics(width, height);
  pg = createGraphics(width, height);

  bc=createImage(width, height, ARGB);
  bc.loadPixels();
  for (int i=0; i<bc.pixels.length; i++) {
    bc.pixels[i]=lerpColor(C1, C2, (i%width)*1.0/width);
  }
  bc.updatePixels();

  pg.beginDraw();
  pg.background(0);
  pg.fill(255);
  pg.noStroke();
  for (int i=1; i<20; i++) {
    pg.text("hello world", random(0, width), random(0, height));
  }
  pg.ellipse(width/2, height/2, width*0.3, 25);
  pg.endDraw();

  noLoop();
  surface.setTitle("Current state="+state);
}

void draw() {
  background(color(0, 102, 153));

  if (state==SHOWBACKGROUNDONLY)
    return;


  if (state==SHOWMASKEDIMAGE)
    bc.mask(pg);

  image(bc, 0, 0);
}

void mousePressed() {
  redraw();

  state=(state+1)%3;
  surface.setTitle("Current state="+state);
}

Nice. The steganographic complimentary signal / steganographic aspect is very interesting.

One nice thing about your rect() approach (as opposed to built-in scaling or scaling through direct pixel manipulation) is that you can easily swap out other shapes or transforms for rendering. For example....

// Scale Pixels to Shapes
// 2018-05-18 Processing 3.3.6
// forum.processing.org/two/discussion/26524/creating-scalable-noise-patterns-from-existing-images#latest

PImage img;
boolean shapeType;
int SCALE = 16;

void setup() {
  size(512, 512);
  img = loadImage("https" +  "://processing.org/img/processing3-logo.png");
  img.resize(32, 32);
  noStroke();
  ellipseMode(CORNER);
}

void draw() {
  background(192);
  img.loadPixels();
  for ( int y=0; y<img.width; y++) {
    for ( int x=0; x<img.width; x++) {
      fill(img.get(x, y));
      if(shapeType){
        rect(x*SCALE, y*SCALE, SCALE, SCALE);
      }
      else {
        ellipse(x*SCALE, y*SCALE, SCALE, SCALE);
      }
    }
  }
  noLoop();
}

void keyPressed(){
  shapeType = !shapeType;
  redraw();
}

For example:

Thanks for sharing you solution, @Sam1945.

Am I right in understanding based on your description that your code looked something like this?

// Scale Pixels to Shapes
// 2018-05-18 Processing 3.3.6
// forum.processing.org/two/discussion/26524/creating-scalable-noise-patterns-from-existing-images#latest

PImage img;
boolean shapeType;
int SCALE = 8;

void setup() {
  size(512, 512);
  img = loadImage("https" +  "://processing.org/img/processing3-logo.png");
  img.resize(64, 64);
  noStroke();
  img.loadPixels();
  for ( int y=0; y<img.width; y++) {
    for ( int x=0; x<img.width; x++) {
      fill(img.get(x, y));
      rect(x*SCALE, y*SCALE, SCALE, SCALE);
    }
  }
}

Or by "rect object" to you mean a PShape?, e.g.

createShape(RECT, 0, 0, 5, 5);

Not quite what I was going for but should get you along your way. Even this reduced version runs very slowly, so to do this per pixel on large images it would need to be done in a shader.

String http = "http://";
PImage img;
final int w = 400, h = 300;
final int max = (w-1)*(h-1);
int dotSize = 3;
int skip = 3;
float time = 0;

ArrayList<Organism> critters = new ArrayList<Organism>();

class Organism {
  color c;
  PVector loc, finish;
  Organism(color nc, int x, int y) {
    c = nc;
    loc = new PVector(x, y);
  }

  float colorDifference(Organism o) {
    float d = 1+abs(red(c) - red(o.c)) +
      abs(green(c) - green(o.c)) +
      abs(blue(c) - blue(o.c));
    return pow(1.0/d,0.8);
  }

  void planFinish(ArrayList<Organism> others) {
    finish = loc.copy();
    for (Organism o : others) {
      finish.sub ( finish.copy().sub(o.loc).normalize().mult(colorDifference(o)));
    }
  }

  void move() {
    loc.lerp(finish, time);
  }

  void draw() {
    fill(c);
    ellipse(loc.x, loc.y, dotSize, dotSize);
  }
}

void settings() {
  size(w, h);
}

void setup() {
  img = loadImage(http + "image.shutterstock.com/z/stock-photo-red-glossy-shiny-bird-fiery-throated-hummingbird-panterpe-insignis-colorful-bird-sitting-on-660194176.jpg");
  img.resize(w, h);
  img.loadPixels();
  print("loading");
  for (int x = 0; x < w-1; x+=skip) {
    print(".");
    for (int y = 0; y < h-1; y+=skip) {
      critters.add(new Organism(img.pixels[x+y*w], x, y));
    }
  }
  ellipseMode(CENTER);
  noStroke();
  for (Organism critter : critters) {
    critter.planFinish(critters);
  }
}

void draw() {
  time = frameCount/10000.0;
  clear();
  for (Organism critter : critters) {
    critter.move();
    critter.draw();
  }
  //saveFrame("frames/####.png");
}

Edit: Made some fixes that got it working more like how I thought it should, however aesthetically I kind of prefer the first version.

String http = "http://";
PImage img;
final int w = 400, h = 300;
final int max = (w-1)*(h-1);
int dotSize = 3;
int skip = 5;
float time = 0;

ArrayList<Organism> critters = new ArrayList<Organism>();

class Organism {
  color c;
  PVector loc, finish, origin;
  Organism(color nc, int x, int y) {
    c = nc;
    loc = new PVector(x, y);
    origin = loc.copy();
  }

  float colorDifference(Organism o) {
    float d = 1+abs(red(c) - red(o.c)) +
      abs(green(c) - green(o.c)) +
      abs(blue(c) - blue(o.c));
    return pow(1.0/d,0.66);
  }

  void planFinish(ArrayList<Organism> others) {
    finish = loc.copy();
    for (Organism o : others) {
      finish.sub ( finish.copy().sub(o.loc).normalize().mult(colorDifference(o)));
    }
  }

  void move() {
    loc.lerp(finish, time);
  }

  void draw() {
    fill(c,170);
    ellipse(loc.x, loc.y, dotSize, dotSize);
  }
}

void settings() {
  size(w, h);
}

void shuffleCritters(){
  int s = critters.size();
  ArrayList<Organism> tempc = critters;
  critters = new ArrayList<Organism>();
  for (int i = 0; i < s;i++){
    Organism q = tempc.get(floor(random(tempc.size())));
    critters.add(q);
    tempc.remove(q);
  }
}

void setup() {
  println("getting img");
  img = loadImage(http + "image.shutterstock.com/z/stock-photo-red-glossy-shiny-bird-fiery-throated-hummingbird-panterpe-insignis-colorful-bird-sitting-on-660194176.jpg");
  img.resize(w, h);
  img.loadPixels();
  println("initalize points");
  for (int x = 0; x < w-1; x+=skip) {
    for (int y = 0; y < h-1; y+=skip) {
      critters.add(new Organism(img.pixels[x+y*w], x, y));
    }
  }
  ellipseMode(CENTER);
  noStroke();
 println("shuffle points");
  shuffleCritters();
   println("calc finish");
   int i = 0;
  for (Organism critter : critters) {
    critter.planFinish(critters);
    i++;
    if (i%100==0)println((int)(100*((float)i/critters.size())) + "%");
  }
}

void keyPressed(){
  time = 0;
   for (Organism critter : critters) {
    critter.loc = critter.origin.copy();
  }
}

void draw() {
  time += 0.001;
  clear();
  for (Organism critter : critters) {
    critter.move();
    critter.draw();
  }
  //saveFrame("frames/####.png");
}

last one

import java.util.*;
import java.awt.*;

String http = "http://";
PImage img;
final int w = 400, h = 300;
final int max = (w-1)*(h-1);
float dotSize = 1.5;
int skip = 3;
float time = 0;

ArrayList<Organism> critters = new ArrayList<Organism>();

class Organism implements Comparable<Organism>{
  color c;
  PVector loc, finish, origin;
  Organism(color nc, int x, int y) {
    c = nc;
    loc = new PVector(x, y);
    origin = loc.copy();
  }

  float colorDifference(Organism o) {
    float d = 1+abs(red(c) - red(o.c)) +
      abs(green(c) - green(o.c)) +
      abs(blue(c) - blue(o.c));
    return pow(1.0/d,0.8);
  }

  void planFinish(ArrayList<Organism> others) {
    finish = loc.copy();
    for (Organism o : others) {
      finish.sub ( finish.copy().sub(o.loc).normalize().mult(colorDifference(o)));
    }
  }

  void move() {
    loc.lerp(finish, time);
  }

  void draw() {
    fill(c);
    ellipse(loc.x, loc.y, dotSize, dotSize);
  }

    public int compareTo(Organism o) {
    int r = (int)red(c);
    int g = (int)green(c);
    int b = (int)blue(c);
    float[] hsv = new float[3];
    Color.RGBtoHSB(r,g,b,hsv);
    float h1 = hsv[0];

     r = (int)red(o.c);
     g = (int)green(o.c);
     b = (int)blue(o.c);
     hsv = new float[3];
    Color.RGBtoHSB(r,g,b,hsv);
    float h2 = hsv[0];

      if (h2<h1) return 1;
      if (h2>h1) return -1;
      return 0;
    }

}

 void shuffleCritters(){
  int s = critters.size();
  ArrayList<Organism> tempc = critters;
  critters = new ArrayList<Organism>();
  for (int i = 0; i < s;i++){
    Organism q = tempc.get(floor(random(tempc.size())));
    critters.add(q);
    tempc.remove(q);
  }
}

void settings() {
  size(w, h);
}

void setup() {
  img = loadImage(http + "image.shutterstock.com/z/stock-photo-red-glossy-shiny-bird-fiery-throated-hummingbird-panterpe-insignis-colorful-bird-sitting-on-660194176.jpg");
  img.resize(w, h);
  img.loadPixels();
  print("loading");
  for (int x = 0; x < w-1; x+=skip) {
    for (int y = 0; y < h-1; y+=skip) {
      critters.add(new Organism(img.pixels[x+y*w], x, y));
    }
  }
  ellipseMode(CENTER);
  noStroke();
    shuffleCritters();
    Collections.sort(critters);

  int i = 0;
  for (Organism critter : critters) {
    critter.planFinish(critters);
    i++;
    if (i%100==0)println((int)(100*((float)i/critters.size())) + "%");
  }
}

void keyPressed(){
  time = 0;
   for (Organism critter : critters) {
    critter.loc = critter.origin.copy();
  }
}

void draw() {
  time += 0.001;
  clear();
  for (Organism critter : critters) {
    critter.move();
    critter.draw();
  }
 // saveFrame("frames/####.png");
}

TheCodingTrain channel did two videos recently on water and fire effects. He did them in just processing, I'm doing it in processing with shaders.

For the water, I didn't have any issues converting it (posted in comment below). For the fire, I'm having issues getting it to perform like expected. It's almost working but not quite.

Edit: I fixed it, here is the working code. The original code from the video ran at 25 fps on my machine, and this shader version does 1000fps easy.

fireShader.pde

PShader fire;
PGraphics buffer1,buffer2, cooling;
int w = 400, h = 400;
float ystart = 0.0;
int speed = 1000;

void setup() {
  size(800, 400, P2D);
  buffer1 = createGraphics(w, h, P2D);
  buffer2 = createGraphics(w, h, P2D);
  cooling = createGraphics(w, h, P2D);
  cool();
  fire = loadShader("fire.glsl");
  fire.set("resolution", w*2, h);
  fire.set("buffer1", buffer1);
  fire.set("buffer2", buffer2);
  fire.set("cooling", cooling);
  frameRate(100);
}

void cool() {
  cooling.loadPixels();
  float xoff = 31.1; 
  float increment = 0.12;
  noiseDetail(3, 1.06);
  for (int x = 0; x < w; x++) {
    xoff += increment; 
    float yoff = ystart; 
    for (int y = 0; y < h; y++) {
      yoff += increment; 
      float n = noise(xoff, yoff);     
      float bright = pow(n, 2) * 22;
      cooling.pixels[x+y*w] = color(bright);
    }
  }
  cooling.updatePixels();
  ystart += increment;
}

void startFire() {
  buffer1.beginDraw();
  buffer1.resetShader();
  buffer1.noStroke();
  buffer1.fill(255);
  buffer1.rect(mouseX,mouseY,100,5);
  buffer1.rect(0,h-4,w,4);
  buffer1.endDraw();
}

void swapBuffers(){  
  PGraphics temp = buffer1;
  buffer1 = buffer2;
  buffer2 = temp;
}

void draw() {
  fire.set("time", (frameCount % speed)/(float)speed);
  startFire();
  background(0);
  buffer2.beginDraw();
  buffer2.shader(fire);
  buffer2.rect(0, 0, w, h);
  buffer2.stroke(0);
  buffer2.endDraw();
  swapBuffers();
  image(buffer2, 0, 0);
  image(cooling, w, 0);
  text((int)frameRate,2,10);
}

fire.glsl

#ifdef GL_ES
precision highp float;
#endif

#define PROCESSING_COLOR_SHADER

uniform float time;
uniform vec2 mouse;
uniform float dissipation;
uniform vec2 resolution;
uniform sampler2D buffer1;
uniform sampler2D buffer2;
uniform sampler2D cooling;

float decode(vec4 color) {
    return (color.r + color.g + color.b)/3.0;
}

vec4 encode(float r){
    int k = int(floor(r*255));
    int d = int(round(k % 3));
    float up = 1.0/255.0;

    if (d==0) return vec4(r,r,r,1.0);
    if (d==1) return vec4(r,r,r+up,1.0);
    if (d==2) return vec4(r,r+up,r+up,1.0);
}

void main( void ) {
    vec2 position = ( gl_FragCoord.xy / resolution.xy );
    vec2 pixel = 1./resolution;
        float k = -1.;
        float sum = 0;


        sum += decode(texture2D(buffer1, position + pixel * vec2(1., k)));
        sum += decode(texture2D(buffer1, position + pixel * vec2(-1, k)));
        sum += decode(texture2D(buffer1, position + pixel * vec2(0., 1+k)));
        sum += decode(texture2D(buffer1, position + pixel * vec2(0., -1+k)));

        sum *= 0.25;
        position.y = 1-position.y;
        position.y += time;
        if (position.y > 1.0) position.y = (position.y - 1.0);

        sum -= decode(texture2D(cooling, position + pixel * vec2(0., k)))/2.0;
        gl_FragColor = encode(sum);
}

Modify as you like.

String http = "http://";
PImage img;

void setup() {
  size(400, 300);
  img = loadImage(http + "i.imgur.com/WKueMZ2.jpg");
  imageMode(CENTER);
  image(img, 200, 150);
}

void draw() {
  loadPixels();
  for ( int t= 0; t < 100000; t++) {
    int o = random(1)<.5?1:width;
    int a = o+int(random(pixels.length-o));
    int b = a-o;
    if ( brightness(pixels[a]) >= brightness(pixels[b]) ) {
      color c = pixels[a];
      pixels[a] = pixels[b];
      pixels[b] = c;
    }
  }
  updatePixels();
}

String http = "http://";
PImage img;

void setup() {
  size(400, 300);
  img = loadImage(http + "i.imgur.com/WKueMZ2.jpg");
  imageMode(CENTER);
  image(img, 200, 150);
}

void draw() {
  loadPixels();
  for ( int t= 0; t < 100000; t++) {
    int a = width+int(random(pixels.length-width));
    int b = a-width;
    if ( pixels[a] < pixels[b] ) {
      color c = pixels[a];
      pixels[a] = pixels[b];
      pixels[b] = c;
    }
  }
  updatePixels();
}

Here's a starting point for you. Notice that what's happening here is that each frame 100000 random pixels are being selected and compared with the pixel above them. The "darker" pixel moves upwards.

Hi @cansik, thank you for your answer.

I first though it was because of the missing pushMatrix/popMatrix as well but pushing the transformation matrix doesn't solve the problem.

When drawing on a canvas:

• I get 2 pictures at 2 different locations
• One with the bloom effect (left), the other (right) without it
• The first one doesn't rotate when moving the camera, the second do
• The 3D disappears on both pictures (flattened 3D delaunay)

sketch.pyde

add_library('peasycam')
add_library('triangulate')
add_library('PostFX')
from java.util import ArrayList

step, threshold = 5, 100
liste = ArrayList()

def setup():
    global img, triangles, fx, canvas
    size(1800, 1000, P3D)
    smooth(8)

    fx = PostFX(this)
    cam = PeasyCam(this, 1600)
    sobel = loadShader('sobelFrag.glsl')
    img = loadImage("test75.jpg")

    canvas = createGraphics(width, height, P3D)

    pg = createGraphics(img.width, img.height, P2D)
    pg.beginDraw()
    pg.image(img, 0, 0)
    pg.filter(GRAY)
    pg.filter(sobel)
    pg.loadPixels()
    for x in range(0, pg.width, step):
        for y in range(0, pg.height, step):
            i = x + y * pg.width
            col = img.pixels[i]
            b = pg.pixels[i] & 0xFF
            if b > threshold:
                liste.add(PVector(x, y , brightness(col) * .5))

    for e in range(0, pg.width, int(pg.width/20)):
        liste.add(PVector(e, 0, 0))
        liste.add(PVector(e, pg.height, 0))
    for e in range(0, pg.height, int(pg.height/20)):
        liste.add(PVector(0, e, 0))
        liste.add(PVector(pg.width, e, 0))

    pg.endDraw()
    triangles = Triangulate.triangulate(liste)


def draw():
    background(0)

    canvas.pushMatrix()
    canvas.translate(-img.width/2, -img.height/2)
    canvas.beginDraw()
    canvas.beginShape(TRIANGLES)
    canvas.noStroke()
    for t in triangles:
        x = int((t.p1.x + t.p2.x + t.p3.x) / 3)
        y = int((t.p1.y + t.p2.y + t.p3.y) / 3)
        i = x + y * img.width
        col = img.pixels[i]
        canvas.fill(col)
        canvas.vertex(t.p1.x, t.p1.y, t.p1.z)
        canvas.vertex(t.p2.x, t.p2.y, t.p2.z)
        canvas.vertex(t.p3.x, t.p3.y, t.p3.z)
    canvas.endShape() 
    canvas.endDraw()
    canvas.popMatrix()

    blendMode(BLEND)
    image(canvas,0,0)

    blendMode(SCREEN)

    fx.render(canvas).bloom(0.5, 20, 40).compose()

I have an issue involving the script above so I hope you won't mind me asking a question on this thread again.

I'm trying to add a bloom effect (from the PostFX library...again) to the sketch but for some reason I have 2 canvas being displayed on the screen:

• one at the right location (center) but without the bloom effect

• the other one, smaller, at the bottom right corner with the bloom effect

Do you guys have an idea what I'm doing wrong here ?

add_library('peasycam')
add_library('triangulate')
from java.util import ArrayList

step, threshold = 5, 100
liste = ArrayList()

def setup():
    global img, triangles, fx
    size(1800, 1000, P3D)
    smooth(8)

    cam = PeasyCam(this, 1600)
    sobel = loadShader('sobelFrag.glsl')
    img = loadImage("image_file_name.jpg")
    fx = PostFX(this)

    pg = createGraphics(img.width, img.height, P2D)
    pg.beginDraw()
    pg.image(img, 0, 0)
    pg.filter(GRAY)
    pg.filter(sobel)
    pg.loadPixels()
    for x in range(0, pg.width, step):
        for y in range(0, pg.height, step):
            i = x + y * pg.width
            col = img.pixels[i]
            b = pg.pixels[i] & 0xFF
            if b > threshold:
                liste.add(PVector(x, y , brightness(col) * .5))

    for e in range(0, pg.width, int(pg.width/20)):
        liste.add(PVector(e, 0, 0))
        liste.add(PVector(e, pg.height, 0))
    for e in range(0, pg.height, int(pg.height/20)):
        liste.add(PVector(0, e, 0))
        liste.add(PVector(pg.width, e, 0))

    pg.endDraw()
    triangles = Triangulate.triangulate(liste)

    beginShape(TRIANGLES)
    noStroke()

def draw():
    background(0)

    translate(-img.width/2, -img.height/2)
    for t in triangles:
        x = int((t.p1.x + t.p2.x + t.p3.x) / 3)
        y = int((t.p1.y + t.p2.y + t.p3.y) / 3)
        i = x + y * img.width
        col = img.pixels[i]
        fill(col)
        vertex(t.p1.x, t.p1.y, t.p1.z)
        vertex(t.p2.x, t.p2.y, t.p2.z)
        vertex(t.p3.x, t.p3.y, t.p3.z)
    endShape() 

    fx.render().bloom(0.5, 20, 40).compose()

Took the code a lot further, it runs multiple pipes and the collision pgraphic is minimally sized for speed.

For me, I go from 1000fps to ~600fps when checking for collision;

FX2D runs much faster but is more limited, holds at 1000fps for me. To convert replace P2D with FX2D on line 12 and remove the P2D 3rd argument entirely on line 53.

color blue = color(0, 0, 255, 255), 
  transparent = color(0, 0, 0, 0);

PImage pipe = loadImage("http://" + "flappycreator.com/default/tube2.png");
PImage bird = loadImage("http://" + "flappycreator.com/default/bird_sing.png");

Sprite sbird;
ArrayList<Sprite> spipes;
float fps = 0;

void setup() {
  size(800, 800, P2D);
  //bird.resize((int)(bird.width*2), ((int)bird.height*2));
  spipes = new ArrayList<Sprite>();
  for (int i = 0; i < 6; i++) {
    Sprite sPipe = new Sprite(pipe, color(255, 0, 0, 200));
    sPipe.loc = new PVector(i*120+50, 500+random(250));
    spipes.add(sPipe);
  }
  sbird = new Sprite(bird, color(0, 255, 0, 200));
  frameRate(1000);
  noCursor();
}

void draw() {
  clear();
  sbird.loc = new PVector(mouseX,mouseY);
  sbird.draw();
  for (Sprite s : spipes) {
    s.draw();
    PixelCollision check = sbird.pixelCollision(s);
    if (check!=null) {
      image(check.pg, check.loc.x, check.loc.y);
      stroke(0,255,0,255);
      noFill();
      rect( check.loc.x, check.loc.y, check.pg.width, check.pg.height);
      noStroke();
      stroke(255);
      fill(255,0,255,255);
      ellipse(check.hit.x, check.hit.y, 5, 5);
    }
  }
  fill(255);
  fps = (fps*119 + frameRate)/120.0;
  text((int)fps + " fps", 10, 10);
}

class PixelCollision {
  PGraphics pg;
  PVector loc;
  PVector hit;
  PixelCollision(int w, int h, PVector nloc) {
    pg = createGraphics(w, h, P2D);
    loc = nloc.copy();
  }
}

class Sprite {
  PImage img;
  PVector loc = new PVector(0, 0);
  color tint;
  Sprite(PImage pimg, color colTint) {
    img = pimg;
    tint = colTint;
  }

  void draw() {
    draw(g);
  }

 boolean overlap(Sprite s) {
    if ((loc.x < s.loc.x+s.img.width) && (loc.x+img.width > s.loc.x) &&
      (loc.y < s.loc.y+s.img.height) && (loc.y+img.height > s.loc.y)) {
      return true;
    }
    return false;
  }

  void draw(PGraphics pg) {
    pg.pushMatrix();
    pg.translate(loc.x, loc.y);
    pg.image(img, 0, 0);
    //pg.rect(0, 0, bird.width, bird.height);
    pg.popMatrix();
  }

  PixelCollision pixelCollision(Sprite s) {
    PixelCollision pc = null;
    if (overlap(s)) {

      float x = max(loc.x, s.loc.x);
      float y = max(loc.y, s.loc.y);
      float w =  min(loc.x+img.width, s.loc.x+s.img.width);
      float h =  min(loc.y+img.height, s.loc.y+s.img.height);

      pc = new PixelCollision( ceil(w-x), ceil(h-y), new PVector(x, y));
      PGraphics pg = pc.pg;
      pg.beginDraw();
      pg.clear();

      pg.tint(tint);
      pg.image(img, -(x-loc.x), -(y-loc.y));

      pg.tint(s.tint);
      pg.image(s.img, -(x-s.loc.x), -(y-s.loc.y));

      pg.endDraw();
      pg.loadPixels();
      int i = 0;
      for (; i < pg.width*pg.height-1; i++) {
        color c = pg.pixels[i];
        if ((red(c)>0)&&(green(c)>0)) {
          //pg.pixels[i] = blue;
          break;
        }
      }
      if (i== pg.width*pg.height-1) pc.hit = null;
      else pc.hit = new PVector(x+ (i%pg.width), y + floor((i-(i%pg.width))/pg.width));
      /* for (; i < pg.width*pg.height; i++) { // uncomment this and above to show collisions, slows code
       color c = pg.pixels[i];
       if ((red(c)>0)&&(green(c)>0)) {
       pg.pixels[i] = blue;
       }
       }
       pg.updatePixels(); */
    }
    if ((pc != null) && (pc.hit == null)) return null;
    return pc;
  }
}

Here's an example of some pixel based collision. Perhaps I should point out this way of doing it on the CPU is very slow and not really good for a commercial game, needs to be done in shaders.

A solution to this might be to check for bounding box collisions, create a collision pgraphics that is only the size of the overlap (far less pixels), and draw your images there offset.

Basically, you draw your image twice. Once to the screen, once tinted and transparent to a collision pgraphics. Then we check all the pixels in the collision pgraphics for pixels that contain both the bird(tinted to be only red) and the pipe(tinted to be only green).

PGraphics pgCollision;
color blue = color(0, 0, 255, 255),
      transparent = color(0,0,0,0);


PImage pipe = loadImage("http://" + "flappycreator.com/default/tube2.png");
PImage bird = loadImage("http://" + "flappycreator.com/default/bird_sing.png");

void setup() {
  size(800, 800, P2D);
  pgCollision = createGraphics(width, height, P2D);
}

void draw() {
  clear();

  // draw tinted semi-transparent images
  pgCollision.beginDraw();
  pgCollision.clear();
  pgCollision.tint(255, 0, 0, 200); // draw bird as transparent red
  drawBird(pgCollision);
  pgCollision.tint(0, 255, 0, 200); // pipes as transparent green
  drawPipe(pgCollision);
  pgCollision.endDraw();
  noTint();

  // check all pixels for ones that contain both red and green
  pgCollision.loadPixels();
  for (int i = 0; i < width*height; i++) {
    color c = pgCollision.pixels[i];
    if ((red(c)>0)&&(green(c)>0))
      pgCollision.pixels[i] = blue; // collision detected
      else pgCollision.pixels[i] = transparent; // optional, slow
  }
  pgCollision.updatePixels();  

  drawPipe(g);
  drawBird(g);
  image(pgCollision, 0, 0);
}

void drawPipe(PGraphics pg) {
  pg.image(pipe, 200, 600);
}

void drawBird(PGraphics pg) {
  pg.image(bird, mouseX, mouseY);
}

I'm fairly new to processing but I've been progressing well with learning how to use it. I've been working on a simple flappy bird esque game and what I want to do is to have the bird and "pipes" collisions be recognized on a pixel-level, ive seen Peter Lagers code for pp_collision but i can't seem to get it to work for the obstacles. can someone tell me how to incorporate the classes into pp_collision(PImage imgA, float aix, float aiy, PImage imgB, float bix, float biy)

for souls https://i.imgur.com/PZm7ivN.png and https://i.imgur.com/wvOkeEZ.png . I would love to know how to get collisions on a pixel level for animated sprites (ie. the souls array) as well but its secondary which is why i commented its code out.

//int numFrames = 2;  // The number of frames in the animation
//int currentFrame = 0;
//PImage[] souls = new PImage[numFrames];


int gameState; //0 = startscreen, 1 = in-game, 2 = game over, 3 = restart-screen
int o = 240;


Ghost ghost;
Obstacle[] obstacles = new Obstacle[2];
Score score;
// Game states
boolean gameStarted = false;
boolean gameOver = false;
boolean gameRestart = false;


void setup() {
  //frameRate(30);
  fullScreen(FX2D);
  //size(1280, 720, FX2D);

  ghost = new Ghost(width/2, height/2);
  obstacles[0] = new Obstacle(width, random(100, height-100));
  obstacles[1] = new Obstacle(width*1.5+25, random(100, height-100));
  score = new Score();

  //startTimer = new Timer (0);

  //for (int k = 0; k < numFrames; k++) {
   // String imageName = "Soul_" + nf(k, 2) + ".png";
   // souls[k] = loadImage(imageName);
  //}
}


void draw() {
  background(175); 

  if (gameState==0) {
    gameRestart = true;
    drawMenuScreen();
    score.highscores();
    //startTimer.countUp();
    //fill (255);
    //text (startTimer.getTime(), 60, 60);
  } 
  if (gameState==0 && mousePressed) {
    if (gameRestart == true)
      //timerReset();
    score.reset();
    gameState = 1;
  }


  if (gameState==1) { 
    gameStarted = true;
    gameRestart = false;
    ghost.draw();
    for (Obstacle o : obstacles) { 
      o.draw();
      //Souls();
    }
    score.draw();
    detectCollision();

    if (gameState==1 && mousePressed) {
      //startTimer.countUp();
      //fill (255);
      //text (startTimer.getTime(), 60, 60);
    }
    if (gameState==1 && mousePressed) {
      ghost.jump();
    }
  }


  if (gameState==2) {
    //startTimer.countUp();
    //fill (255);
    //text (startTimer.getTime(), 60, 60);
    gameStarted = false;
    gameRestart = false;
    drawGameOver();
    ghost.reset();
    for (Obstacle obs : obstacles) { 
      obs.reset();
    }
  }
  //if (gameState==2 && startTimer.getTime()>=3.5) {
  if (gameState==2 && mousePressed) {
    if (gameStarted == false && gameRestart == false);
    //timerReset();
    gameState=3;
  }


  if (gameState==3) {
    gameRestart = true;
    drawMenuScreen();
    score.highscores();
  } 
  if (gameState==3 && mousePressed) {  
    if (gameRestart == true)
      score.reset();
    gameState = 1;
  }
}






 class Score {
  private int score = 0;
  private int highscore;
  private boolean scoreIncreased = false;

// Methods for increasing scores. If score is NOT increased

  void highscores(){
    if (score>highscore)
      highscore=score;
      else if (gameState==0 || gameState==3) {
      textAlign(CENTER);
      fill(255);
      textSize(width/60);
      text("HIGHSCORE: " + highscore, width/2, height/2 + height/8.25);
    }  
  }

  void increase() {
    if (!scoreIncreased) {
      score += 1;
      scoreIncreased = true;
    }
  }

  void reset() {
    score = 0;
    scoreIncreased = false;
  }

  void allowScoreIncrease() {
    scoreIncreased = false;
  }


  void draw() {
    pushStyle();
    if (gameState==2) {
      textAlign(CENTER);
      fill(0);
      textSize(width/60);
      text("SCORE: " + score, width/2, height/2 + 65);
    } 
      else if (gameState==1) {
      //rectMode(CORNER);
      textAlign(CENTER);
      fill(255);
      textSize(width/60);
      text("Score: " + score, width/2, 40);
    }
    popStyle();
  }
}



 class Obstacle {
  float initX;
  float topX;
  float topY;
  float w = 120; // original was 50
  PImage obstacle1, obstacle2;

  Obstacle(float initialTopX, float initialTopY) {
    initX = initialTopX;
    topX = initialTopX;
    topY = initialTopY;
    obstacle1 = loadImage("https://" + "i.imgur.com/9Dnn4sI.png");
    obstacle2 = loadImage("https://" + "i.imgur.com/d83OfMi.png");
  }


  void draw() {
    pushStyle();
    imageMode(CORNERS);
    image(obstacle1, topX, topY, topX+w, height-1);
    image(obstacle2, topX, 0, topX+w, topY - 180);
    popStyle();

     // Controls speed of object x movements (namely for obstacles)
    // topX -= 4.25;
    topX -= 9.5;
  }

  void reset() {
    topX = initX;
    topY = random(100, height-100);
  }

  void reposition() {
    topX = width;
    topY = random(100, height-100);
  }
 } 




class Ghost {
  float x;
  float y;
  float size = 85;
  float vy = 0;
  float ay = 0.63;
  PImage ghost;

  Ghost(float initialX, float initialY) {
    x = initialX;
    y = initialY;
    ghost = loadImage("https://" + "i.imgur.com/GPRyMO7.png");
  }

  void draw() {
    pushStyle();
    imageMode(CENTER);
    image(ghost, x, y, size, size);
    popStyle();


    y += vy;
    vy += ay;
  }

  void reset() {
    y = 200;
    vy = 0;
  }

  void jump() {
    vy = -9.5;
  }
}






// void Souls(){   
//   currentFrame = (currentFrame+1) % numFrames;  // Use % to cycle through frames
//   image(souls[(currentFrame) % numFrames], width/2, height/2);
//}




void drawGameOver() {
  pushStyle();
  fill(200, 200, 200, 200);
  noStroke();
  rect(-20, -20, width + 40, height + 40);
  score.draw ();
  popStyle();
}

void drawMenuScreen() {
  fill(0);
  noStroke();
  rect(-20, -20, width + 40, height + 40);
  ;
}



void detectCollision() {
  // Did the ghost come out of the screen?
  if (ghost.y > height || ghost.y < 0) {
    gameState=2;
  }

  for (Obstacle obstacle : obstacles) {
    if (ghost.x - ghost.size/2.0 > obstacle.topX + obstacle.w) {
      score.increase();
    }

    if (obstacle.topX + obstacle.w < 0) {
      obstacle.reposition();
      score.allowScoreIncrease();
    }

    //if (obstacle.detectCollision(ghost)) {
      //gameState=2;
    //}
  }
}

Can you help with incorporating the collision detection method below to the work on the ghost class and the obstacles array in my code

  obstacle2 = loadImage("up2.png");
  obstacle1x = (width - obstacle1.width)/2;
  obstacle1y = (height/3 - obstacle1.height)/2;
//  obstacle2x = (width - obstacle2.width)/4;
//  obstacle2y = (height - obstacle2.height)/4;
//    f2x = (width - ghost.width)/2;
//      f2y = (height - ghost.height)/2;
}

void draw(){
  background(0);
  image(obstacle1,obstacle1x,obstacle1y);
  obstacle1x = obstacle1x-2;
  if (obstacle1x <= -150){
    obstacle1x = 900;}
  image(ghost,mouseX,mouseY);
  if(pp_collision(obstacle1,obstacle1x,obstacle1y,ghost,mouseX,mouseY)){
    stroke(255,64,64);
    strokeWeight(1);
    noFill();
    rect(obstacle1x,obstacle1y,obstacle1.width,obstacle1.height);
    rect(mouseX,mouseY,ghost.width,ghost.height);
  }
}

final int ALPHALEVEL = 20;

boolean pp_collision(PImage imgA, float aix, float aiy, PImage imgB, float bix, float biy) {
  int topA, botA, leftA, rightA;
  int topB, botB, leftB, rightB;
  int topO, botO, leftO, rightO;
  int ax, ay;
  int bx, by;
  int APx, APy, ASx, ASy;
  int BPx, BPy; //, BSx, BSy;

  topA   = (int) aiy;
  botA   = (int) aiy + imgA.height;
  leftA  = (int) aix;
  rightA = (int) aix + imgA.width;
  topB   = (int) biy;
  botB   = (int) biy + imgB.height;
  leftB  = (int) bix;
  rightB = (int) bix + imgB.width;

  if (botA <= topB  || botB <= topA || rightA <= leftB || rightB <= leftA)
    return false;

  // If we get here, we know that there is an overlap
  // So we work out where the sides of the overlap are
  leftO = (leftA < leftB) ? leftB : leftA;
  rightO = (rightA > rightB) ? rightB : rightA;
  botO = (botA > botB) ? botB : botA;
  topO = (topA < topB) ? topB : topA;


  // P is the top-left, S is the bottom-right of the overlap
  APx = leftO-leftA;   
  APy = topO-topA;
  ASx = rightO-leftA;  
  ASy = botO-topA-1;
  BPx = leftO-leftB;   
  BPy = topO-topB;

  int widthO = rightO - leftO;
  boolean foundCollision = false;

  // Images to test
  imgA.loadPixels();
  imgB.loadPixels();

  // These are widths in BYTES. They are used inside the loop
  //  to avoid the need to do the slow multiplications
  int surfaceWidthA = imgA.width;
  int surfaceWidthB = imgB.width;

  boolean pixelAtransparent = true;
  boolean pixelBtransparent = true;

  // Get start pixel positions
  int pA = (APy * surfaceWidthA) + APx;
  int pB = (BPy * surfaceWidthB) + BPx;

  ax = APx; 
  ay = APy;
  bx = BPx; 
  by = BPy;
  for (ay = APy; ay < ASy; ay++) {
    bx = BPx;
    for (ax = APx; ax < ASx; ax++) {
      pixelAtransparent = alpha(imgA.pixels[pA]) < ALPHALEVEL;
      pixelBtransparent = alpha(imgB.pixels[pB]) < ALPHALEVEL;

      if (!pixelAtransparent && !pixelBtransparent) {
        foundCollision = true;
        break;
      }
      pA ++;
      pB ++;
      bx++;
    }
    if (foundCollision) break;
    pA = pA + surfaceWidthA - widthO;
    pB = pB + surfaceWidthB - widthO;
    by++;
  }
  return foundCollision;
}

To run the script you'll need Peasycam and Triangulate libraries (download) + the sobel fragment shader below from the PostFx library (only needed for edge detection). I first had my own sobel operator to detect the edges but found that @cansik's shader implementation was much more accurate and efficient.

Also please note that this sketch is in Python.

sobelFrag.glsl

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D texture;

varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform vec2 resolution;

void main(void) {
  float x = 1.0 / resolution.x;
  float y = 1.0 / resolution.y;
  vec4 horizEdge = vec4( 0.0 );
  horizEdge -= texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y - y ) ) * 1.0;
  horizEdge -= texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y     ) ) * 2.0;
  horizEdge -= texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y + y ) ) * 1.0;
  horizEdge += texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y - y ) ) * 1.0;
  horizEdge += texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y     ) ) * 2.0;
  horizEdge += texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y + y ) ) * 1.0;
  vec4 vertEdge = vec4( 0.0 );
  vertEdge -= texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y - y ) ) * 1.0;
  vertEdge -= texture2D( texture, vec2( vertTexCoord.x    , vertTexCoord.y - y ) ) * 2.0;
  vertEdge -= texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y - y ) ) * 1.0;
  vertEdge += texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y + y ) ) * 1.0;
  vertEdge += texture2D( texture, vec2( vertTexCoord.x    , vertTexCoord.y + y ) ) * 2.0;
  vertEdge += texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y + y ) ) * 1.0;
  vec3 edge = sqrt((horizEdge.rgb * horizEdge.rgb) + (vertEdge.rgb * vertEdge.rgb));

  gl_FragColor = vec4(edge, texture2D(texture, vertTexCoord.xy).a);
}

sketch.pyde

add_library('peasycam')
add_library('triangulate')
from java.util import ArrayList

step, threshold = 5, 100
liste = ArrayList()

def setup():
    global img, triangles
    size(1800, 1000, P3D)
    smooth(8)

    cam = PeasyCam(this, 1600)
    sobel = loadShader('sobelFrag.glsl')
    img = loadImage("image_file_name.jpg")

    pg = createGraphics(img.width, img.height, P2D)
    pg.beginDraw()
    pg.image(img, 0, 0)
    pg.filter(GRAY)
    pg.filter(sobel)
    pg.loadPixels()
    for x in range(0, pg.width, step):
        for y in range(0, pg.height, step):
            i = x + y * pg.width
            col = img.pixels[i]
            b = pg.pixels[i] & 0xFF
            if b > threshold:
                liste.add(PVector(x, y , brightness(col) * .5))

    for e in range(0, pg.width, int(pg.width/20)):
        liste.add(PVector(e, 0, 0))
        liste.add(PVector(e, pg.height, 0))
    for e in range(0, pg.height, int(pg.height/20)):
        liste.add(PVector(0, e, 0))
        liste.add(PVector(pg.width, e, 0))

    pg.endDraw()
    triangles = Triangulate.triangulate(liste)

    beginShape(TRIANGLES)
    noStroke()

def draw():
    background(0)

    translate(-img.width/2, -img.height/2)
    for t in triangles:
        x = int((t.p1.x + t.p2.x + t.p3.x) / 3)
        y = int((t.p1.y + t.p2.y + t.p3.y) / 3)
        i = x + y * img.width
        col = img.pixels[i]
        fill(col)
        vertex(t.p1.x, t.p1.y, t.p1.z)
        vertex(t.p2.x, t.p2.y, t.p2.z)
        vertex(t.p3.x, t.p3.y, t.p3.z)
    endShape() 

Cheers !

This is something I had up on this forum since last summer, but it was in a question thread so I thought I should share this here in the proper category as well.

Current version: v1.2

This LaTeX listings template will color your Processing code as you see them in the Processing editor. You can just post your code like you normally would using the listings package, and you will automatically get your code in the proper colors. Except one minor inconvenience, that I will explain here.

For a function name that is the same as an already defined keyword (Such as "boolean" and "boolean()"), you have to use [escapechar = "char"] and \color{"color"}{"text"} to color them properly. Example:

\begin{lstlisting}[escapechar = ?]
boolean;
?\color{function}{boolean}?(1);
\end{lstlisting}

Copy and paste the below template if you want to use it. Alternatively, you can copy only the necessary parts. If in that case, note that \usepackage{listings} and \usepackage{color} is a must for this to work.

Also note, I have licensed this work with CreativeCommons license CC-BY-SA, so please remember to give some credit to me ;)

If you find any typos or any other errors, please tell me and I'll try to fix them as much as possible.

Download version:
http://www.mediafire.com/file/cw861uy156xftkv/article_listing_Processing_v1.2.tex
GitHub Gist:
https://gist.github.com/ebigunso/af355220e932f72d03289c576622aa29

Full template below:

\documentclass{article}

\usepackage{graphicx}
\usepackage{url}
\usepackage{verbatim}
\usepackage{listings}
\usepackage{color}

% Processing language definition template for LaTeX listings package v1.2
%
% Credits to ebigunso for creating this LaTeX listings language definition template for Processing
% This template is licensed with CreativeCommons license CC-BY-SA 4.0
% license info:
% https://creativecommons.org/licenses/by-sa/4.0/legalcode

%Define Colors
\definecolor{black}{RGB}{0,0,0}
\definecolor{gray}{RGB}{102,102,102}        %#666666
\definecolor{function}{RGB}{0,102,153}      %#006699 lightblue
\definecolor{lightgreen}{RGB}{102,153,0}    %#669900
\definecolor{bluegreen}{RGB}{51,153,126}    %#33997e
\definecolor{magenta}{RGB}{217,74,122}  %#d94a7a
\definecolor{orange}{RGB}{226,102,26}       %#e2661a
\definecolor{purple}{RGB}{125,71,147}       %#7d4793
\definecolor{green}{RGB}{113,138,98}        %#718a62

\lstdefinelanguage{Processing}{
  %keyword1&2&6
  morekeywords = [3]{abstract, break, class, continue, default, enum, extends, false, final, finally, implements, import, instanceof, interface, native, new, null, package, private, protected, public, static, strictfp, throws, transient, true, void, volatile, length, assert, case, return, super, this, throw},
  %keyword3
  morekeywords = [4]{catch, do, for, if, else, switch, synchronized, while, try},
  %keyword4
  morekeywords = [5]{width, height, pixelHight, displayHeight, displayWidth, focused, frameCount, frameRate, key, keyCode, keyPressed, mouseButton, mousePressed, mouseX, mouseY, pixels, pixelWidth, pmouseX, pmouseY},
  %keyword5
  morekeywords = [6]{Array, ArrayList, Boolean, Byte, BufferedReader, Character, Class, Double, Float, Integer, HashMap, PrintWriter, String, StringBuffer, StringBuilder, Thread, boolean, byte, char, color, double, float, int, long, short, FloatDict, FloatList, IntDict, IntList, JSONArray, JSONObject, PFont, PGraphics, PImage, PShader, PShape, PVector, StringDict, StringList, Table, TableRow, XML},
  %literal2
  morekeywords = [7]{ADD, ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT, ALPHA, ALPHA_MASK, ALT, AMBIENT, ARC, ARROW, ARGB, BACKSPACE, BASELINE, BEVEL, BLEND, BLUE_MASK, BLUR, BOTTOM, BOX, BURN, CENTER, CHATTER, CHORD, CLAMP, CLICK, CLOSE, CMYK, CODED, COMPLAINT, COMPOSITE, COMPONENT, CONCAVE_POLYGON, CONTROL, CONVEX_POLYGON, CORNER, CORNERS, CROSS, CUSTOM, DARKEST, DEGREES, DEG_TO_RAD, DELETE, DIAMETER, DIFFERENCE, DIFFUSE, DILATE, DIRECTIONAL, DISABLE_ACCURATE_2D, DISABLE_DEPTH_MASK, DISABLE_DEPTH_SORT, DISABLE_DEPTH_TEST, DISABLE_NATIVE_FONTS, DISABLE_OPENGL_ERRORS, DISABLE_PURE_STROKE, DISABLE_TEXTURE_MIPMAPS, DISABLE_TRANSFORM_CACHE, DISABLE_STROKE_PERSPECTIVE, DISABLED, DODGE, DOWN, DRAG, DXF, ELLIPSE, ENABLE_ACCURATE_2D, ENABLE_DEPTH_MASK, ENABLE_DEPTH_SORT, ENABLE_DEPTH_TEST, ENABLE_NATIVE_FONTS, ENABLE_OPENGL_ERRORS, ENABLE_PURE_STROKE, ENABLE_TEXTURE_MIPMAPS, ENABLE_TRANSFORM_CACHE, ENABLE_STROKE_PERSPECTIVE, ENTER, EPSILON, ERODE, ESC, EXCLUSION, EXIT, FX2D, GIF, GRAY, GREEN_MASK, GROUP, HALF, HALF_PI, HAND, HARD_LIGHT, HINT_COUNT, HSB, IMAGE, INVERT, JAVA2D, JPEG, LEFT, LIGHTEST, LINE, LINES, LINUX, MACOSX, MAX_FLOAT, MAX_INT, MIN_FOAT, MIN_INT, MITER, MODEL, MOVE, MULTIPLY, NORMAL, NORMALIZED, NO_DEPTH_TEST, NTSC, ONE, OPAQUE, OPEN, ORTHOGRAPHIC, OVERLAY, PAL, PDF, P2D, P3D, PERSPECTIVE, PI, PIE, PIXEL_CENTER, POINT, POINTS, POSTERIZE, PRESS, PROBLEM, PROJECT, QUAD, QUAD_STRIP, QUADS, QUARTER_PI, RAD_TO_DEG, RADIUS, RADIANS, RECT, RED_MASK, RELEASE, REPEAT, REPLACE, RETURN, RGB, RIGHT, ROUND, SCREEN, SECAM, SHAPE, SHIFT, SPAN, SPECULAR, SPHERE, SOFT_LIGHT, SQUARE, SUBTRACT, SVG, SVIDEO, TAB, TARGA, TAU, TEXT, TFF, THIRD_PI, THRESHOLD, TIFF, TOP, TRIANGLE, TRIANGLE_FAN, TRIANGLES, TRIANGLE_STRIP, TUNER, TWO, TWO_PI, UP, WAIT, WHITESPACE},
  %function1
  morekeywords = [8]{start, stop, breakShape, createPath, str, loadMatrix, parseBoolean, parseByte, parseChar, parseFloat, parseInt, saveFile, savePath, sketchFile, sketchPath, abs, acos, alpha, ambient, ambientLight, append, applyMatrix, arc, arrayCopy, asin, atan, atan2, background, beginCamera, beginContour, beginRaw, beginRecord, beginShape, bezier, bezierDetail, bezierPoint, bezierTangent, bezierVertex, binary, blend, blendColor, blendMode, blue, box, brightness, camera, ceil, clear, clip, color, colorMode, concat, constrain, copy, cos, createFont, createGraphics, createImage, createInput, createOutput, createReader, createShape, createWriter, cursor, curve, curveDetail, curvePoint, curveTangent, curveTightness, curveVertex, day, degrees, delay, directionalLight, displayDensity, dist, ellipse, ellipseMode, emissive, endCamera, endContour, endRaw, endRecord, endShape, exit, exp, expand, fill, filter, floor, frustum, fullScreen, get, green, hex, hint, hour, hue, image, imageMode, join, launch, lerp, lerpColor, lightFalloff, lights, lightSpecular, line, loadBytes, loadFont, loadImage, loadJSONArray, loadJSONObject, loadPixels, loadShader, loadShape, loadStrings, loadTable, loadXML, log, loop, mag, map, match, matchAll, max, millis, min, minute, modelX, modelY, modelZ, month, nf, nfc, nfp, nfs, noClip, noCursor, noFill, noise, noiseDetail, noiseSeed, noLights, noLoop, norm, normal, noSmooth, noStroke, noTint, ortho, parseJSONArray, parseJSONObject, parseXML, perspective, list, pixelDnsity, point, pointLight, popMatrix, popStyle, pow, print, printArray, printCamera, println, printMatrix, printProjection, pushMatrix, pushStyle, quad, quadraticVertex, radians, random, randomGaussian, randomSeed, rect, rectMode, red, redraw, requestImage, resetMatrix, resetShader, reverse, rotate, rotateX, rotateY, rotateZ, round, saturation, save, saveBytes, saveFrame, saveJSONArray, saveJSONObject, saveStream, saveStrings, saveTable, saveXML, scale, screenX, screenY, screenZ, second, selectFolder, selectInput, selectOutput, set, shader, shape, shapeMode, shearX, shearY, shininess, shorten, sin, size, smooth, sort, specular, sphere, sphereDetail, splice, split, splitTokens, spotLight, sq, sqrt, stroke, strokeCap, strokeJoin, strokeWeight, subset, tan, text, textAlign, textAscent, textDescent, textFont, textLeading, textMode, textSize, texture, textureMode, textureWrap, textWidth, thread, tint, translate, triangle, trim, unbinary, unhex, updatePixels, vertex, year},
  %function2
  morekeywords = [9]{cache, readLine, close, flush, print, println, charAt, equals, indexOf, substring, toLowerCase, toUpperCase, getDouble, getLong, getColumnTitles, getColumnTypes, getColumnType, setDouble, setLong, add, clear, div, get, hasKey, keyArray, keys, mult, remove, set, size, sortKeys, sortKeysReverse, sortValues, sortValuesReverse, sub, valueArray, values, append, array, hasValue, max, min, mult, remove, reverse, shuffle, sort, sortReverse, increment, getBoolean, getFloat, getInt, getIntArray, getJSONArray, getJSONObject, getString, getStringArray, isNull, setBoolean, setFloat, setInt, setJSONArray, setJSONObject, setString, beginDraw, endDraw, blend, copy, filter, loadPixels, mask, resize, save, updatePixels, addChild, beginContour, beginShape, disableStyle, enableStyle, endContour, endShape, getChild, getChildCount, getVertex, getVertexCount, isVisible, resetMatrix, rotate, rotateX, rotateY, rotateZ, scae, setFill, setStroke, setVertex, setVisible, translate, angleBetween, cross, dist, dot, fromAngle, heading, lerp, limit, mag, magSq, normalize, randm2D, random3D, setMag, lower, upper, addColumn, addRow, clearRows, findRow, findRows, getColumnCount, getRow, getRowcount, getStringColumn, matchRow, matchRows, removeColumn, removeRow, removeTokens, rows, trim, getColumnTitle, format, getAttributeCount, getChildren, getContent, getNam, getParent, hasAttribute, hasChildren, listAttributes, listChildren, removeChild, setContent, setName, toString},
  %function4
  morekeywords = [10]{draw, keyReleased, keyTyped, mouseClicked, mouseDragged, mouseMoved, mouseReleased, mouseWheel, settings, setup},
  keywordstyle = [3]\color{bluegreen},
  keywordstyle = [4]\color{lightgreen},
  keywordstyle = [5]\color{magenta},
  keywordstyle = [6]\color{orange},
  keywordstyle = [7]\color{green},
  keywordstyle = [8]\color{function},
  keywordstyle = [9]\color{function},
  keywordstyle = [10]\color{function},
  sensitive = true,
  morecomment = [l][\color{gray}]{//},
  morecomment = [s][\color{gray}]{/*}{*/},
  morecomment = [s][\color{gray}]{/**}{*/},
  morestring = [b][\color{purple}]",
  morestring = [b][\color{purple}]'
}
\renewcommand{\ttdefault}{pcr}
\lstset{
  language={Processing},
  basicstyle={\small\ttfamily},
  identifierstyle={\small},
  commentstyle={\small\itshape},
  keywordstyle={\small},
  ndkeywordstyle={\small},
  stringstyle={\small\ttfamily},
  frame={tb},
  breaklines=true,
  columns=[l]{fullflexible},
  numbers=left,
  xrightmargin=0em,
  xleftmargin=3em,
  numberstyle={\scriptsize},
  stepnumber=1,
  numbersep=1em,
  lineskip=-0.5ex,
}

% Use escapechar and \color{<color>}{<text>} to color function names properly, that is already defined as a different color keyword.
%
% \begin{lstlisting}[escapechar = ?]
% boolean;
% ?\color{function}{boolean}?(1);
% \end{lstlisting}

\title{}
\author{}
\date{}

\begin{document}
\maketitle
\section{}

\begin{thebibliography}{9}
\end{thebibliography}
\end{document}

is it possible to use for only one of the images in sketch?

   loadPixels();  
 for (int a = 0; a < pixels.length; a++)

  }
  }


  updatePixels(); 
}

is loadPixels() a void method? ie it doesn't return anything, but it does fix the pixels array.

@GoToLoop - Thank you so much for your detailed answer. Unfortunately, I still cannot get it to work. If I put the image on a larger canvas, the whole image (square) gets colored, not just the drawings on it. If the canvas is the same size, nothing happens. In fact, the console.log for img.loadPixels() gives me 'undefined', therefore, it is not surprising that nothing happens. It makes me angry as I managed to get this same kind of code working in Hype and Processing in seconds. I wanted to port it to P5.js, and just can't do it! I just want my little notes to get colored when they come out of my trumpet!!

@TfGuy44 - Thank you for your comment, but I knew that already, and as I said above, img.loadPixels() gives me no positive result.

Maybe, but I think the int value, in this case '2' is the location of the texture or something

shader.set("cubemap", 2);

also,

glslCubeMap(int unit, PImage[] textures)

is the same to

glslCubeMap(int unit, PImage posX, PImage negX, PImage posY, PImage negY, PImage posZ, PImage negZ)

because its calling :

glslCubeMap(unit, textures[0], textures[1], textures[2], textures[3], textures[4], textures[5]);

I also tried shader.bind() and shader.unbind() around the glslCubeMap function, but again, same error :

void glslCubeMap(int unit, PImage posX, PImage negX, PImage posY, PImage negY, PImage posZ, PImage negZ) {

  shader.bind(); // new
  PGL pgl = beginPGL();
  // create the OpenGL-based cubeMap
  IntBuffer envMapTextureID = IntBuffer.allocate(1);
  pgl.genTextures(1, envMapTextureID);
  pgl.activeTexture(PGL.TEXTURE0 + unit); // Change texture unit
  pgl.enable(PGL.TEXTURE_CUBE_MAP);  
  pgl.bindTexture(PGL.TEXTURE_CUBE_MAP, envMapTextureID.get(0));
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_WRAP_S, PGL.CLAMP_TO_EDGE);
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_WRAP_T, PGL.CLAMP_TO_EDGE);
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_WRAP_R, PGL.CLAMP_TO_EDGE);
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_MIN_FILTER, PGL.LINEAR);
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_MAG_FILTER, PGL.LINEAR);

  //Load in textures
  PImage[] textures = { posX, negX, posY, negY, posZ, negZ };
  for (int i=0; i<textures.length; i++) {
    PImage texture = textures[i];
    int w = texture.width;
    int h = texture.height;
    texture.loadPixels();
    pgl.texImage2D(PGL.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, PGL.RGBA, w, h, 0, PGL.RGBA, PGL.UNSIGNED_BYTE, IntBuffer.wrap(texture.pixels));
  }

  endPGL();
  shader.unbind(); // new
}