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

edited January 2016 in Library Questions

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

Answers

  • edited January 2016
    filter(GRAY);
    

    ???

  • 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.

  • 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.

  • edited January 2016

    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

  • 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.

  • edited January 2016

    Sorry, not sure I follow.

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

  • 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.

  • edited January 2016

    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!

  • Answer ✓

    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.

Sign In or Register to comment.