how to get image in the place of rectagles

suhit

how to get image in the place of rectagles

in Contributed Library Questions • 1 year ago

i am very new to processing and trying to archieve following task where i am using kinect camera and openkinect library by shiffman, I have designed the grid (8 colums and 6 rows for ex) based to movement in front of cam the grid shows the colored rectagle. the perticular grid shows the movement is happening in perticular grid. In my problem in place of rectagle filled with color i want portion of another image to get more visible on the movement grid. please help me.. :-)

following is the code I am using for for project

import processing.opengl.*;

import org.openkinect.*;

import org.openkinect.processing.*;

Kinect kinect;

int kAngle = 0;

final int VIDEO_WIDTH = 640;

final int VIDEO_HEIGHT = 480;

// Anzahl der Quadranten in der Breite

final int VIDEO_COLS = 8;

// Anzahl der Quadranten in der Höhe

final int VIDEO_ROWS = 6;

/*PImage prevImage;

PImage presentImage;

int threshold = 20;

int offset; */

float[] activity = new float[VIDEO_COLS * VIDEO_ROWS];

float[] buffer1 = new float[VIDEO_WIDTH * VIDEO_HEIGHT];

float[] buffer2 = new float[buffer1.length];

float[] buffer3 = new float[buffer1.length];

PImage bldg;

PImage myImg;

int index;

int val=255;

void setup()

{

size(640, 480, OPENGL);

frameRate(30);

kinect = new Kinect(this);

kinect.start();

kinect.enableDepth(true);

kinect.enableRGB(true);

kinect.tilt(kAngle);

tint(255, val);

bldg = loadImage("building.jpg");

// myImg = loadImage("denmark.jpg");

}

void draw()

{

background(0);

// tint(255,0);

image(bldg,0,0);

if (true) {

int pxPerCol = VIDEO_WIDTH / VIDEO_COLS;

int pxPerRow = VIDEO_HEIGHT / VIDEO_ROWS;

PImage img = kinect.getVideoImage();

// image(img, 0,0);

// 'activity' array auf 0 setzen

for (int i=0; i < activity.length; i++) {

activity[i] = 0;

}

for (int i=0; i < img.pixels.length; i++) {

int x = (int) ((i % img.width) / pxPerCol);

int y = (int) ((i / img.width) / pxPerRow);

index = y * VIDEO_COLS + x;

color col = img.pixels[i];

float sum = red (col) + green (col) + blue (col);

float deltaPixel = (buffer1[i] + buffer2[i] + buffer3[i]) / 3 - sum;

if (deltaPixel < 0) {

deltaPixel *= -1;

}

activity[index] += deltaPixel;

buffer3[i] = buffer2[i];

buffer2[i] = buffer1[i];

buffer1[i] = sum;

}

for (int i=0; i < activity.length; i++) {

activity[i] /= pxPerCol* pxPerRow;

// PImage cimg = get((i % VIDEO_COLS) * pxPerCol, (i / VIDEO_COLS) * pxPerRow, pxPerCol, pxPerRow);

// tint(255, 255);

// image(cimg, (i % VIDEO_COLS) * pxPerCol, (i / VIDEO_COLS) * pxPerRow);

val = 255;

// fill(0, 10);

// rect(0, 0, width, height);

stroke (255, 20);

fill (0, 255, 230, activity[i]);

//ambientLight(255, 255, 255);

//fill(200, activity[i]);

rect((i % VIDEO_COLS) * pxPerCol, (i / VIDEO_COLS) * pxPerRow, pxPerCol, pxPerRow);

}

fill(255);

text("TILT: " + kAngle, 10, 20);

}

void keyPressed() {

if (key == CODED) {

if (keyCode == UP) {

kAngle+=15;

}

else if (keyCode == DOWN) {

kAngle-=15;

}

kAngle = constrain(kAngle, 0, 30);

kinect.tilt(kAngle);

}

void quit() {

kinect.quit();

super.stop();

}

Replies(14)

jbum

Re: how to get image in the place of rectagles

1 year ago

If you have a rectangle at x,y,w,h,

and you want to display instead, a rectangle from an image, taken from the same coordinates, you can use copy.

copy(srcImage, x,y,w,h, x,y,w,h);

Look up copy in the reference for more info.

suhit

Re: how to get image in the place of rectagles

1 year ago

thanks for the help, but copy fuction displays the intire image on the display window which I dont want. What I would like to do is dynamically image should displayed on the rectanlge grids which are having movement. Please see the code, to get the idea. :-)

jbum

Re: how to get image in the place of rectagles

1 year ago

> copy fuction displays the intire image on the display window

You must be using it incorrectly.

If you pass the correct parameters to copy, it will copy only the region of pixels you are interested in.

suhit

Re: how to get image in the place of rectagles

1 year ago

what you are saying is correct but somehow I have not able to d that could you help me with code also.

I am posting the code with simple webcam, please correct me if I am wrong anywhere

import processing.video.*;

final int VIDEO_WIDTH = 1024;

final int VIDEO_HEIGHT = 768;

final int VIDEO_COLS = 8;

final int VIDEO_ROWS = 6;

float[] activity = new float[VIDEO_COLS * VIDEO_ROWS];

float[] buffer1 = new float[VIDEO_WIDTH * VIDEO_HEIGHT];

float[] buffer2 = new float[buffer1.length];

float[] buffer3 = new float[buffer1.length];

Capture cam = null;

PImage img;

PImage myImg;

int val = 255;

void setup () {

//size(screen.width,screen.height,P3D);

size (VIDEO_WIDTH, VIDEO_HEIGHT);

cam = new Capture (this, VIDEO_WIDTH, VIDEO_HEIGHT, 15);

frameRate (15);

img = loadImage("building.jpg");

myImg = loadImage("denmark.jpg");

}

void draw () {

background(255);

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

if (cam.available ()) {

cam.read ();

int index;

int pxPerCol = VIDEO_WIDTH / VIDEO_COLS;

int pxPerRow = VIDEO_HEIGHT / VIDEO_ROWS;

//image (cam, 0, 0);

// 'activity' array auf 0 setzen

for (int i=0; i < activity.length; i++) {

activity[i] = 0;

}

for (int i=0; i < cam.pixels.length; i++) {

int x = (int) ((i % cam.width) / pxPerCol);

int y = (int) ((i / cam.width) / pxPerRow);

index = y * VIDEO_COLS + x;

/* float r = red(img.pixels[index]);

float g = green(img.pixels[index]);

float b = blue(img.pixels[index]);

sum = r+g+b;

cam.pixels[index] = color(r,g,b); */

color col = cam.pixels[i];

float sum = red (col) + green (col) + blue (col);

float deltaPixel = (buffer1[i] + buffer2[i] + buffer3[i]) / 3 - sum;

if (deltaPixel < 0) {

deltaPixel *= -1;

}

activity[index] += deltaPixel;

buffer3[i] = buffer2[i];

buffer2[i] = buffer1[i];

buffer1[i] = sum;

}

for (int i=0; i < activity.length; i++) {

activity[i] /= pxPerCol* pxPerRow;

fill(0, 9);

rect(0, 0, width, height);

stroke (255, 20);

fill (0, 255, 230, activity[i]);

// fill(255, activity[i]);

rect ((i % VIDEO_COLS) * pxPerCol, (i / VIDEO_COLS) * pxPerRow, pxPerCol, pxPerRow);

//tint(255, activity[i]);

//copy(myImg, (i % VIDEO_COLS) * pxPerCol, (i / VIDEO_COLS) * pxPerRow, pxPerCol, pxPerRow, (i % VIDEO_COLS) * pxPerCol, (i / VIDEO_COLS) * pxPerRow, pxPerCol, pxPerRow);

}

jbum

Re: how to get image in the place of rectagles

1 year ago

The problem I think is with your use of tint(), which I'm still trying to figure out. This works though - I'm only triggering the copy if activity is greater than a threshhold. I'll see if I can figure out how to make tint do what you want...

if (activity[i] > 127) {

copy(myImg, (i % VIDEO_COLS) * pxPerCol, (i / VIDEO_COLS) * pxPerRow, pxPerCol, pxPerRow,

(i % VIDEO_COLS) * pxPerCol, (i / VIDEO_COLS) * pxPerRow, pxPerCol, pxPerRow);

}

suhit

Re: how to get image in the place of rectagles

1 year ago

Thanks jbum for the help. i was ust trying tint() to get the effect. without tint it is working pefectly.

jbum

Re: how to get image in the place of rectagles

1 year ago

This works faster and is cleaner.

I am using a video buffer which corresponds to the dimensions of your large blocks (8x6) or whatever. This greatly simplifies the code because there is a 1:1 ratio to video pixels and blocks, and speeds up video processing.

I'm using mask/blend to achieve the tint effect you were going for.

import processing.video.*;
final int DISPLAY_WIDTH = 1024;
final int DISPLAY_HEIGHT = 768;
final int VIDEO_WIDTH = 8;
final int VIDEO_HEIGHT = 6;
final int numVidPixels = VIDEO_WIDTH * VIDEO_HEIGHT;
final int pxPerCol = DISPLAY_WIDTH / VIDEO_WIDTH;
final int pxPerRow = DISPLAY_HEIGHT / VIDEO_HEIGHT;
Capture cam = null;
PImage img;
PImage myImg;
int val = 255;
PGraphics myMask;
void setup () {
//size(screen.width,screen.height,P3D);
size (DISPLAY_WIDTH, DISPLAY_HEIGHT, P3D);
cam = new Capture (this, VIDEO_WIDTH, VIDEO_HEIGHT, 15);
frameRate (15);
img = loadImage("buliding.jpg");
myImg = loadImage("denmark.jpg");
myMask = createGraphics(myImg.width, myImg.height, P2D);
}
public void captureEvent(Capture c) {
cam.read();
}
void draw () {
background(255);
image(img, 0, 0, width, height);
for (int i=cam.pixels.length-1; i >= 0; i--) {
int x = (int) (i % cam.width);
int y = (int) (i / cam.width);
color col = cam.pixels[i];
float b = brightness( col );
myMask.beginDraw();
myMask.background(b);
myMask.endDraw();
myImg.mask(myMask);
blend(myImg, x * pxPerCol, y * pxPerRow, pxPerCol, pxPerRow,
x * pxPerCol, y * pxPerRow, pxPerCol, pxPerRow, BLEND);
}
}

suhit

Re: how to get image in the place of rectagles

1 year ago

thanks Jbum you are rockstar dude... but the code showing NullpointerException when running the code..i am not able to figure out why it is happening.

jbum

Re: how to get image in the place of rectagles

1 year ago

I misspelled "building.jpg". I was using different image names while testing.

suhit

Re: how to get image in the place of rectagles

1 year ago

ya i corrected the image name and is working perfectly. One more thing I want is that the mask image is apearing to fast, what i would like is 2 get the image little slowly and that is why i was trying tint() fuction. is it possible some way although what I wanted it is working as per the plan. all thanks to you. :-)

jbum

Re: how to get image in the place of rectagles

1 year ago

You can scale the brightness value, via map. If you want a temporal delay, then use an array to store brightness values, and average or lerp with the current values.

suhit

Re: how to get image in the place of rectagles

1 year ago

I have created array to store brightness values but i am little confuse about hot to take avarage or lerp the brighness values with current values.

Here is the code which I have added

float [] brightArray = new float[cam.pixels.length];
for(int i = 0; i< cam.pixels.length; i++){
brightArray[i] = brightness(col);
}
for (int j = 0; j< brightArray.length; j++){
float sum = 0;
sum = brightArray[i]+sum;
}

How to average these brightness values and to compare with the current values. Correct me if i am doing wrong

jbum

Re: how to get image in the place of rectagles

1 year ago

brightArray should be a global variable, declared up top.

float [] brightArray;

Initialize the brightness array once, in setup.

brightArray = new float[cam.pixels.length];

Then, in the draw routine I last posted, replace these two lines

color col = cam.pixels[i];

float b = brightness( col );

With this:

color col = cam.pixels[i];

// instead of 5, try values form 2-20 for shorter-longer delays

float b = (brightness(col) - brightArray[i])/5;

brightArray[i] = b;

suhit

Re: how to get image in the place of rectagles

1 year ago

Thank you...its working the way I wanted...cheers

Top Reply