PGraphics set different colormode not working

Question

I have the following code:

import processing.video.*;
import oscP5.*;
import netP5.*;

//sending the data to wekinator
int numPixelsOrig, numPixels, boxWidth = 64, boxHeight = 48, numHoriz = 640/boxWidth, numVert = 480/boxHeight;
color[] downPix = new color[numHoriz * numVert];
PGraphics buffer;
Capture video;
OscP5 oscSend;


//recieving data from the wekinatorino
ArrayList<Blob> blobs = new ArrayList<Blob>();
int amt = 5;
int cons1 = 200, cons2 = 150;
float xspeed, yspeed, radius;


float p1, p2, p3, p4, p5, p6;

OscP5 oscRecieve;
NetAddress dest;

void setup() {
  colorMode(RGB, 100);
  size(600, 600, P2D);

  buffer = createGraphics(600, 600, P3D);
  buffer.beginDraw();
  buffer.colorMode(HSB, 100);
  buffer.endDraw();

  String[] cameras = Capture.list();

  if (cameras == null) {
    video = new Capture(this, 640, 480);
  } 
  if (cameras.length == 0) {
    exit();
  } else {
    video = new Capture(this, 640, 480);
    video.start();
    numPixelsOrig = video.width * video.height;
  }

  oscSend = new OscP5(this, 9000);
  oscRecieve = new OscP5(this, 12000);
  dest = new NetAddress("127.0.0.1", 6448);
}

void draw() {
  //println(blobs.size());
  if (video.available() == true) {
    video.read();

    video.loadPixels(); 
    int boxNum = 0;
    int tot = boxWidth*boxHeight;
    for (int x = 0; x < 640; x += boxWidth) {
      for (int y = 0; y < 480; y += boxHeight) {
        float red = 0, green = 0, blue = 0;

        for (int i = 0; i < boxWidth; i++) {
          for (int j = 0; j < boxHeight; j++) {
            int index = (x + i) + (y + j) * 640;
            red += red(video.pixels[index]);
            green += green(video.pixels[index]);
            blue += blue(video.pixels[index]);
          }
        }
        downPix[boxNum] = color(red/tot, green/tot, blue/tot);
        fill(downPix[boxNum]);
        int index = x + 640*y;
        red += red(video.pixels[index]);
        green += green(video.pixels[index]);
        blue += blue(video.pixels[index]);
        noStroke();
        rect(x, y, boxWidth, boxHeight);
        boxNum++;
      }
    }
    if (frameCount % 2 == 0)
      sendOsc(downPix);
  }

  if (blobs.size() < amt) {
    blobs.add(new Blob(new PVector(random(100 + (width - 200)), random(100 + (height- 200))), new PVector(-3, 3), random(100, 300)));
  }

  for (int i = blobs.size() - 1; i >= 0; i--) {
    if (blobs.size() > amt) {
      blobs.remove(i);
    }
  }
  buffer.beginDraw();
  buffer.loadPixels();
  for (int x = 0; x < buffer.width; x++) {
    for (int y = 0; y < buffer.height; y++) {
      int index = x + y * buffer.width;
      float sum = 0;
      for (Blob b : blobs) {
        float d = dist(x, y, b.pos.x, b.pos.y);
        sum += 10 * b.r / d;
      }
      buffer.pixels[index] = color(sum, 255, 255); //constrain(sum, cons1, cons2)
    }
  }

  buffer.updatePixels();
  buffer.endDraw();

  for (Blob b : blobs) {
    b.update();
  }

  //if () {

  //xspeed = map(p1, 0, 1, -5, 5);
  //yspeed = map(p2, 0, 1, -5, 5);
  //radius = map(p3, 0, 1, 100, 300);
  //cons1 = int(map(p4, 0, 1, 0, 255));
  //cons2 = int(map(p5, 0, 1, 0, 255));
  //amt = int(map(p6, 0, 1, 1, 6));
  //for (Blob b : blobs) {
  //  b.updateAlgorithm(xspeed, yspeed, radius);
  //}
  //}
  image(buffer, 0, 0);
}

void sendOsc(int[] px) {
  //println(px);
  OscMessage msg = new OscMessage("/wek/inputs");
  for (int i = 0; i < px.length; i++) {
    msg.add(float(px[i]));
  }
  oscSend.send(msg, dest);
}

void oscEvent(OscMessage theOscMessage) {
  if (theOscMessage.checkAddrPattern("/wek/outputs")==true) {
    if (theOscMessage.checkTypetag("fff")) { 
      p1 = theOscMessage.get(0).floatValue();
      p2 = theOscMessage.get(1).floatValue();
      p3 = theOscMessage.get(2).floatValue();
      p4 = theOscMessage.get(2).floatValue();
      p5 = theOscMessage.get(2).floatValue();
      p6 = theOscMessage.get(2).floatValue();
    } else {
    }
  }
}


void mousePressed() {

  xspeed = random(-5, 5);
  yspeed = random(-5, 5);
  radius = random(100, 300);
  cons1 = int(random(255));
  cons2 = int(random(255));
  amt = int(random(6));
  for (Blob b : blobs) {
    b.updateAlgorithm(xspeed, yspeed, radius);
  }
}


class Blob {

  PVector pos;
  PVector vel;
  float r;

  Blob(PVector pos, PVector vel, float r) {
    this.pos = pos.copy();
    this.vel = vel.copy();
    this.r = r;
  }

  void update(){
    pos.add(vel); 
    if (pos.x > width || pos.x < 0) {
      vel.x *= -1;
    }
    if (pos.y > height || pos.y < 0) {
      vel.y *= -1;
    }
  }

  void updateAlgorithm(float vx, float vy, float nr){
    vel.x = vx;
    vel.y = vy;
    r = nr;
  }
}

Then I create some graphics in the buffer element. but the graphics aren't using my HSB color mode with the result i only see blue and white... so how do i correct my code, or change the colorMode for a PGraphics element to HSB?

Answer 1

According to the PGraphics reference:

The beginDraw() and endDraw() methods (see above example) are necessary to set up the buffer and to finalize it

therefore you should try this:

buffer = createGraphics(600, 600, P3D);
buffer.beginDraw();
buffer.colorMode(HSB, 100);
buffer.endDraw();

Here's a full test sketch to run and compare:

PGraphics buffer; 
void setup(){
   colorMode(RGB, 100);
   size(600, 600, P2D);

   //draw test gradient in RGB buffer
   noStroke();
   for(int i = 0 ; i < 10; i++){
     fill(i * 10,100,100);
     rect(0,i * 60,width,60);
   }

   buffer = createGraphics(600, 600, P3D);
   buffer.beginDraw();
     buffer.colorMode(HSB, 100);
   buffer.endDraw();

   //draw test gradient in HSB buffer
   buffer.beginDraw();
     buffer.noStroke();
     for(int i = 0 ; i < 10; i++){
       buffer.fill(i * 10,100,100);
       buffer.rect(0,i * 60,width,60);
     }
   buffer.endDraw();
   //finally render the buffer on screen, offset to the right for comparison
   image(buffer,300,0);
}