How to combine codes so that my camera is in black and white

twild

Hi, i'm new to these forums and hope somebody might be able to help me. I have the following code which uses a camera and displays it as a series of points taking the colour of pixels from the display. (Hope that makes sense, not sure how I can describe it effectively, sorry)

class CPoint
{
  //VARIABLES
  float x,y;
  float diameter;
  color pcolor;

  //CONSTRUCTOR
  //CPoint(x,y,diameter,color)
  CPoint(float CPx, float CPy, float CPdiam, color CPcolor)
  {
    x=CPx;
    y=CPy;
    diameter=CPdiam;
    pcolor=CPcolor;
  }

  //DISPLAYING FUNCTION
  void display()
  {
    pushMatrix();
    translate(x,y);
    noStroke();
    fill(pcolor);
    ellipse(0,0,diameter,diameter);
    popMatrix();
  }
}


import processing.video.*;

float cdiam=15;
color ccolor=color(252,245,15);
int npoints=20;
float xdivider;
float ydivider;
PImage picture;

Capture firstcam;

//Object array
CPoint[][] cpoints=new CPoint[npoints][npoints];

//SETUP
void setup()
{

  size(640,360);
  noStroke();
  smooth();

  String[]devices=Capture.list();
  println(devices);
  firstcam=new Capture(this,devices[3]);
  firstcam.start();

  xdivider=width/(npoints+1);
  float xc=xdivider;
  ydivider=height/(npoints+1);
  float yc=ydivider;

  for (int j=0; j<npoints; j++)
  {
    for (int i=0; i<npoints;i++)
    {

      cpoints[i][j]=new CPoint(xc,yc,cdiam,ccolor);
      xc=xc+xdivider;
    }
    xc=xdivider;
    yc=yc+ydivider;
  }
  frameRate(12);
}

//DRAW
void draw()
{
  background(0);
  if(firstcam.available()==true)
  {
      firstcam.read();

    for (int j=0; j<npoints; j++)
    { 
      for (int i=0; i<npoints; i++)
      {
        int imgX=int(cpoints[i][j].x);
        int imgY=int(cpoints[i][j].y);

        ccolor=firstcam.get(imgX,imgY);

        cpoints[i][j].pcolor=ccolor;
        cpoints[i][j].display();
      }
    }
  }
}

I also have a code to turn an image black and white below:

PImage opera;
int pixelcount;
color pixelcolor;
color newcol;


void setup()
{
  size(800,600);
  colorMode(HSB,360,100,100);
}

void draw()
{
  opera=loadImage("OperaHse.jpg");
  pixelcount=opera.width*opera.height;
  opera.loadPixels();

  for (int pos=0;pos<pixelcount; pos++)
  {
    pixelcolor=opera.pixels[pos];

    float H=hue(pixelcolor);
    float S=saturation(pixelcolor);
    float B=brightness(pixelcolor);

    //Black and White
    H=0;
    S=0;

    newcol=color(H,S,B);
    opera.pixels[pos]=newcol;
  }

  image(opera,0,0,width,height);
}

(Opera referred to the image which was Sydney Opera House)

I've tried combining the two so the image from the camera is in black and white, but I'm struggling. I hope somebody might be able to help me.

Thanks in advance

TfGuy44

filter(GRAY);

???

benja

Would be easier to understand where you are struggling if you posted how you tried to combine those sketches.

It is actually not that difficult. You can use the first sketch as a starting point.
Then look where is the color of the CPoints defined? This is the place where you have to convert that color into grayscale.

Now have a look at the second sketch, how is the color converted? Do you understand what's going on there? Then you can use the same priciple for you first sketch.

A hint: The second sketch uses HSB as color-mode, it would be a good idea to use that for your sketch too.

Hope that helps to get started. Feel free to ask if you still have problems.

koogs

i'd just stick lines 23-31 from the second bit of code between lines 14 and 15 of the first bit and rename the variables to match what's there.

twild

Hi, thanks for your quick replies.

Sorry, here is the code when i've tried to combine:

class CPoint
{
  //VARIABLES
  float x,y;
  float diameter;
  color pcolor;

  //CONSTRUCTOR
  //CPoint(x,,diameter,color)
  CPoint(float CPx, float CPy, float CPdiam, color CPcolor)
  {
    x=CPx;
    y=CPy;
    diameter=CPdiam;
    pcolor=CPcolor;
  }

  //DISPLAYING FUNCTION
  void display()
  {
    pushMatrix();
    translate(x,y);
    noStroke();
    fill(pcolor);
    ellipse(0,0,diameter,diameter);
    popMatrix();
  }
}



    import processing.video.*;

    float cdiam=10;
    color ccolor=color(252,245,15);
    int npoints=25;
    float xdivider;
    float ydivider;

    PImage picture;
    int pixelcount;
    color pixelcolor;
    color newcol;

    Capture firstcam;

    //Object array
    CPoint[][] cpoints=new CPoint[npoints][npoints];

    //SETUP
    void setup()
    {
      size(640,360);
      noStroke();
      smooth();

      colorMode(HSB,360,100,100);


      String[]devices=Capture.list();
      println(devices);
      firstcam=new Capture(this,devices[3]);
      firstcam.start();

      xdivider=width/(npoints+1);
      float xc=xdivider;
      ydivider=height/(npoints+1);
      float yc=ydivider;

      for (int j=0; j<npoints; j++)
      {
        for (int i=0; i<npoints;i++)
        {
          cpoints[i][j]=new CPoint(xc,yc,cdiam,ccolor);
          xc=xc+xdivider;
        }
        xc=xdivider;
        yc=yc+ydivider;
      }
      frameRate(12);
    }

    //DRAW
    void draw()
    {
      background(0);
      if(firstcam.available()==true)
      {
          firstcam.read();

        for (int j=0; j<npoints; j++)
        { 
          for (int i=0; i<npoints; i++)
          {
            int imgX=int(cpoints[i][j].x);
            int imgY=int(cpoints[i][j].y);

            ccolor=firstcam.get(imgX,imgY);

            cpoints[i][j].pcolor=ccolor;
            cpoints[i][j].display();
          }
        }

          pixelcount=picture.width*picture.height;  //I get a "NullPointerException" error at this point
          picture.loadPixels();

          for (int pos=0;pos<pixelcount; pos++)
        {
          pixelcolor=picture.pixels[pos];

          float H=hue(pixelcolor);
          float S=saturation(pixelcolor);
          float B=brightness(pixelcolor);

          //Black and White - Brightness only
          H=0;
          S=0;

          newcol=color(H,S,B);
          picture.pixels[pos]=newcol;
        } 
      }
    }

It will begin to run the code and then I get an error. I think I have a problem where the image loads and then it uploads the pixels to reload the new image after desaturating the image? Or am i completely wrong?

Thanks

koogs

ok, that won't work because you modify the points' colours outside the constructor too. you need to also convert these new colours to b&w.

would be better if the colour was an argument to CPoint.display(). or if you had a setter for the pixel colour.

twild

Sorry, not sure I follow.

Is that Point.display() in void draw()?

benja

I think the methods work fine, the error occurs because you never load a picture, but still try to access it.
But you don't need the picture anyway if you want to work with the webcam.

Look at line 98: You pick a color from the webcam-image there. This is what you have to convert into black&white. How that is done is the part from your second sketch line 23 and following. No need to loop over the pixels of a picture again.

twild

Benja,

Look at line 98: You pick a color from the webcam-image there. This is what you have to convert into black&white. How that is done is the part from your second sketch line 23 and following. No need to loop over the pixels of a picture again.

Have I taken this to literally - here is the draw loop:

//DRAW
void draw()
{
  background(0);
  if(firstcam.available()==true)
  {
      firstcam.read();

    for (int j=0; j<npoints; j++)
    { 
      for (int i=0; i<npoints; i++)
      {
        int imgX=int(cpoints[i][j].x);
        int imgY=int(cpoints[i][j].y);

        ccolor=firstcam.get(imgX,imgY);

        float H=hue(pixelcolor);
        float S=saturation(pixelcolor);
        float B=brightness(pixelcolor);

        //Black and White
        H=0;
        S=0;

        newcol=color(H,S,B);
        picture.pixels[pos]=newcol;
      }

      image(picture,0,0,width,height);

      cpoints[i][j].pcolor=ccolor;
      cpoints[i][j].display();
      }
    }
  }

Error is cannot find anything named "pos"

Sorry, think i'm confusing myself now.

Really appreciate the help!

benja

It seems that you don't fully undestand what the codes you posted were doing.

I tried to simplify your original code, maybe it is easier to understand now. It is still colored, but i hope it might help you to make the next step.

import processing.video.*;

float diam=15;     // diamter of ellipses
int numCols = 32;  // number of columns
int numRows = 18;  // number of rows

Capture cam;       // the webcam

//SETUP
void setup()
{
  size(640, 360);

  // initialize webcam (the index can be different on your system)
  cam=new Capture(this, Capture.list()[3]);
  cam.start();

  // HSB color mode
  colorMode(HSB);  
  noStroke();
}

//DRAW
void draw()
{
  // only do somthing, when a new frame from the webcam is available
  if (cam.available())
  {
    background(0);

    // get new frame from webcam
    cam.read();

    // two loops to iterate over rows and columns
    for (int row=0; row<numRows; row++)
    { 
      for (int col=0; col<numCols; col++)
      {
        // calculate position of ellipse
        int x = 10 + col*20;
        int y = 10 + row*20;

        // get the color at this position from the webcam image
        color ccolor=cam.get(x, y);

        float brightness = brightness(ccolor);


        /* --------------------------

          now we have the brightness
          and could use it to create a new color

         -------------------------- */


        // set fill-color
        fill(ccolor);
        // draw ellipse
        ellipse(x, y, diam, diam);
      }
    }
  }
}

The block-comment marks the place where you could make a change to convert ccolor into black&white. You already have the brightness and can use color() to create a new color.