Develop Reference

Make my rectangle randomly fall down from my screen?

I am trying to make a game and am almost done with the code. But I can't make my rectangle randomly fall down from my screen.
I am coding a car game that is supposed to dodge the other cars. But is not working. can someone help me?
int carx = 200;
int cary = 0;
float speedx = 0;
float speedy = 0;
float accy = 0.1;
color rod = color(255, 0, 0);
color vit = color(255);
final int START_STATE = 1;
final int PLAY_STATE = 2;
final int GAMEOVER_STATE = 3;
final int RESTART = 4;
int state = START_STATE;
void setup() {
size(400, 700);
}
void draw() {
switch (state) {
case START_STATE:
drawStart();
break;
case PLAY_STATE:
drawPlay();
break;
case GAMEOVER_STATE:
drawGameOver();
case RESTART:
drawrestart();
}
}
void init() {
carx = 200;
cary = 0;
speedx = 0;
speedy = 0;
accy = 0.1;
}
void drawStart() {
background(0);
textAlign(CENTER, CENTER);
textSize(16);
text("Click the mouse button to start the game", width / 2, height / 2);
if (mousePressed) {
state = PLAY_STATE;
}
}
void drawGameOver() {
textAlign(CENTER, CENTER);
textSize(20);
text("you have crashed your car", width / 2, height / 2);
if (mousePressed) {
state = PLAY_STATE;
init();
}
}
void drawrestart() {
textAlign(CENTER, CENTER);
textSize(15);
text("press mouse to restart", 200, 400);
if (keyPressed) {
state = RESTART;
}
}
void drawPlay() {
background(0);
if (get(carx, cary) == vit) {
speedy = -1 * speedy;
}
fill(rod);
rect(carx, cary, 50, 30);
if (get(mouseX, 600) == color(255, 0, 0)) {
state = GAMEOVER_STATE;
}
fill(#FFFFFF);
rect(mouseX, 600, 30, 50);
carx += speedx;
cary += speedy;
speedy += accy;
}

The code you have at the moment only has one rectangle fall down from the top for each 'round' of the game. I'm not sure if you wanted to have multiple blocks falling; I think that would be a good next step.
For now, here's a simple hack which will cause the block to fall from a random position each time, like you requested.
At the very start of your code, outside of the functions, place:
boolean randomise;
Then, within void init() you should add:
randomise = true;
Finally, add this section into drawPlay(), right at the start of the function:
if (randomise){
carx = int(random(width-50));
randomise = false;
}
Note that a new random x co-ordinate will only generate every time you set the boolean 'randomise' to true again. So if you generate a new iteration with more than one block falling inside the drawPlay() function, you should bear this in mind and adjust the code accordingly.
------- [EDIT] -------
Hi, glad that this helped.
I've actually noticed another little issue which I will help you fix.
Currently, you are checking at mouseX to see whether there has been a collision. This works (mostly), but if the right side of the player's white car drives through the left edge of a red falling block, then the game continues as though nothing has happened. What should occur is that the game is over because a collision is detected. You want to find out if any part of the two shapes have overlapped.
To do this, you should alter the code like so. In drawPlay(), replace:
if (get(mouseX, 600) == color(255, 0, 0)) {
state = GAMEOVER_STATE;
}
with:
if (get(mouseX, 600) == color(255, 0, 0) || get(mouseX + 30, 600) == color(255, 0, 0)) {
state = GAMEOVER_STATE;
}
This is an OR statement - checking whether either side of the player's car has collided. This way, every time they bump into each other, the game will end.
Now for your question: how to add multiple cars?
There are a few ways you could go about this, but I'll show you the most straightforward.
In drawPlay(), you want to add this little if statement:
if (cary > height){
init();
}
Basically what we're doing here is checking if the previous red block/car has fallen off the bottom of the sketch. If it has, i.e. if the red block's y co-ordinate is larger than the height of the whole sketch, we call init() again. This will reset everything, including making randomise true. Once randomise is true, the previous code you added will select a random start point for the block, and it will fall all over again.
I hope you've understood everything I explained - whilst my code will fix your problem, the best way to learn is to try to solve things by yourself. Check out Dan Shiffman's videos on YouTube. These are a great starting place to get to grips with Processing - hopefully you'll be more confident writing your own code after following along with his examples :)

Use random to generate a random x coordinate:
carx = (int)random(0, width-50);
Reset the position and the speed of the care, once the car reached to bottom of the window:
void drawPlay() {
if (cary > height) {
carx = (int)random(0, width-50);
cary = 0;
speedy = 0;
}
// [...]

NullPointerException from within Processing's libraries when creating a PShape

I have the following Processing program:
//using Papplet instead of STDraw to visually represent my grid, created by Mahmed Ibrahim
import java.awt.Color;
import processing.core.*;
import processing.core.PApplet;
public class C4Grid extends PApplet {
PShape s;
PShape[][] circleSpaces;
boolean[][] circleSpacesFilled;
boolean[][] circleHasYelowPiece;
boolean[][] circleHasRedPiece;
final float SPACES_BETWEEN_ROWS = 110;
final float SPACES_BETWEEN_COLUMNS = 130;
public C4Grid(){}
public void setup() {
System.out.println("it got to here where it breaks");
size(1000, 1000, P2D);
// Making the shape of the grid using vertices
// so I'm manually drawing my polygon.
s = createShape();
s.beginShape();
s.fill(34, 56, 100);
s.tint(34, 56, 100);
s.stroke(0);
s.strokeWeight(5);
s.vertex(400, 400);
s.vertex(400, -440);
s.vertex(360, -440);
s.vertex(360, -400);
s.vertex(-360, -400);
s.vertex(-360, -440);
s.vertex(-400, -440);
s.vertex(-400, 420);
s.vertex(-420, 420);
s.vertex(-420, 440);
s.vertex(-360, 440);
s.vertex(-360, 420);
s.vertex(-380, 420);
s.vertex(-380, 400);
s.vertex(380, 400);
s.vertex(380, 420);
s.vertex(360, 420);
s.vertex(360, 440);
s.vertex(420, 440);
s.vertex(420, 420);
s.vertex(400, 420);
s.vertex(400, 420);
s.vertex(400, -440);
s.vertex(400, 400);
s.endShape();
System.out.println("it got to here where it breaks");
// using a 2D array to create a grid of circles
// which will represent the spaces on the grid
circleHasYelowPiece = new boolean[7][6];
circleHasRedPiece = new boolean[7][6];
circleSpacesFilled = new boolean[7][6];
circleSpaces = new PShape[7][6];
for (int row = 0; row < 7; row++) {
for (int column = 0; column < 6; column++) {
circleSpaces[row][column] = createShape(ELLIPSE, -380 + (row) * SPACES_BETWEEN_ROWS,
-370 + (column) * SPACES_BETWEEN_COLUMNS, 100, 100);
circleSpaces[row][column].disableStyle();
stroke(0);
strokeWeight(5);
circleSpacesFilled[row][column] = false;
circleHasRedPiece[row][column] = false;
circleHasYelowPiece[row][column] = false;
}
}
}
public void draw() {
translate(width / 2, height / 2);
shape(s);
for (int row = 0; row < 7; row++) {
for (int column = 0; column < 6; column++) {
shape(circleSpaces[row][column]);
}
}
}
public boolean piecePlaced(int column, Color pieceColor) {
column = column - 1; // the choice are form 1-7 but in an array its 0-6;
boolean moveDone = false;
int i = 5;
Color red = new Color(255, 0, 0);
while (i >= 0) {
if (circleSpacesFilled[column][i] == false) {
circleSpacesFilled[column][i] = true;
if (pieceColor.equals(red)) {
circleHasRedPiece[column][i] = true;
circleSpaces[column][i].fill(255, 0, 0);
circleSpaces[column][i].tint(255, 0, 0);
} else {
circleHasYelowPiece[column][i] = true;
circleSpaces[column][i].fill(255, 255, 0);
circleSpaces[column][i].tint(255, 255, 0);
}
return true;
}
}
return false;
}
}
When I run it, I get this NullPointerException. Notice that the exception is coming from within Processing's libraries - it's not directly caused by my own code!
The 3 lines that are suspect are:
currentGame = new C4Game(player1Is,player2Is,player1Color,player2Color);
theGrid = new C4Grid(); theGrid.setup();
s= createShape(); near the top of setup()
currentGame, theGrid, and s are all non-null (I've checked countless times).
Even when I test each line in isolation, I get an error in anything that related to the PShape class. I got rid of every PShape object and it worked, but is there a way to fix it so I can use PShape as part of my code?

When I run your code, I don't get a NullPointerException. I get an error that says this:
When not using the PDE, size() can only be used inside settings().
Remove the size() method from setup(), and add the following:
public void settings() {
size(1000, 1000, "processing.opengl.PGraphics2D");
}
And the error says it all. When you're using Processing as a library, you can't call the size() function from the setup() function. Call it from the settings() function instead.
If I make that change, your code runs fine:

How to get clear mask of users in simple-openni?

I am trying to extract user silhouette and put it above my images. I was able to make a mask and cut user from rgb image. But the contour is messy.
The question is how I can make the mask more precise (to fit real user). I've tried ERODE-DILATE filters, but they don't do much. Maybe I need some Feather filter like in Photoshop. Or I don't know.
Here is my code.
import SimpleOpenNI.*;
SimpleOpenNI context;
PImage mask;
void setup()
{
size(640*2, 480);
context = new SimpleOpenNI(this);
if (context.isInit() == false)
{
exit();
return;
}
context.enableDepth();
context.enableRGB();
context.enableUser();
context.alternativeViewPointDepthToImage();
}
void draw()
{
frame.setTitle(int(frameRate) + " fps");
context.update();
int[] userMap = context.userMap();
background(0, 0, 0);
mask = loadImage("black640.jpg"); //just a black image
int xSize = context.depthWidth();
int ySize = context.depthHeight();
mask.loadPixels();
for (int y = 0; y < ySize; y++) {
for (int x = 0; x < xSize; x++) {
int index = x + y*xSize;
if (userMap[index]>0) {
mask.pixels[index]=color(255, 255, 255);
}
}
}
mask.updatePixels();
image(mask, 0, 0);
mask.filter(DILATE);
mask.filter(DILATE);
PImage rgb = context.rgbImage();
rgb.mask(mask);
image(rgb, context.depthWidth() + 10, 0);
}

It's good you're aligning the RGB and depth streams.
There are few things that could be improved in terms of efficiency:
No need to reload a black image every single frame (in the draw() loop) since you're modifying all the pixels anyway:
mask = loadImage("black640.jpg"); //just a black image
Also, since you don't need the x,y coordinates as you loop through the user data, you can use a single for loop which should be a bit faster:
for(int i = 0 ; i < numPixels ; i++){
mask.pixels[i] = userMap[i] > 0 ? color(255) : color(0);
}
instead of:
for (int y = 0; y < ySize; y++) {
for (int x = 0; x < xSize; x++) {
int index = x + y*xSize;
if (userMap[index]>0) {
mask.pixels[index]=color(255, 255, 255);
}
}
}
Another hacky thing you could do is retrieve the userImage() from SimpleOpenNI, instead of the userData() and apply a THRESHOLD filter to it, which in theory should give you the same result as above.
For example:
int[] userMap = context.userMap();
background(0, 0, 0);
mask = loadImage("black640.jpg"); //just a black image
int xSize = context.depthWidth();
int ySize = context.depthHeight();
mask.loadPixels();
for (int y = 0; y < ySize; y++) {
for (int x = 0; x < xSize; x++) {
int index = x + y*xSize;
if (userMap[index]>0) {
mask.pixels[index]=color(255, 255, 255);
}
}
}
could be:
mask = context.userImage();
mask.filter(THRESHOLD);
In terms of filtering, if you want to shrink the silhouette you should ERODE and bluring should give you a bit of that Photoshop like feathering.
Note that some filter() calls take arguments (like BLUR), but others don't like the ERODE/DILATE morphological filters, but you can still roll your own loops to deal with that.
I also recommend having some sort of easy to tweak interface (it can be fancy slider or a simple keyboard shortcut) when playing with filters.
Here's a rough attempt at the refactored sketch with the above comments:
import SimpleOpenNI.*;
SimpleOpenNI context;
PImage mask;
int numPixels = 640*480;
int dilateAmt = 1;
int erodeAmt = 1;
int blurAmt = 0;
void setup()
{
size(640*2, 480);
context = new SimpleOpenNI(this);
if (context.isInit() == false)
{
exit();
return;
}
context.enableDepth();
context.enableRGB();
context.enableUser();
context.alternativeViewPointDepthToImage();
mask = createImage(640,480,RGB);
}
void draw()
{
frame.setTitle(int(frameRate) + " fps");
context.update();
int[] userMap = context.userMap();
background(0, 0, 0);
//you don't need to keep reloading the image every single frame since you're updating all the pixels bellow anyway
// mask = loadImage("black640.jpg"); //just a black image
// mask.loadPixels();
// int xSize = context.depthWidth();
// int ySize = context.depthHeight();
// for (int y = 0; y < ySize; y++) {
// for (int x = 0; x < xSize; x++) {
// int index = x + y*xSize;
// if (userMap[index]>0) {
// mask.pixels[index]=color(255, 255, 255);
// }
// }
// }
//a single loop is usually faster than a nested loop and you don't need the x,y coordinates anyway
for(int i = 0 ; i < numPixels ; i++){
mask.pixels[i] = userMap[i] > 0 ? color(255) : color(0);
}
//erode
for(int i = 0 ; i < erodeAmt ; i++) mask.filter(ERODE);
//dilate
for(int i = 0 ; i < dilateAmt; i++) mask.filter(DILATE);
//blur
mask.filter(BLUR,blurAmt);
mask.updatePixels();
//preview the mask after you process it
image(mask, 0, 0);
PImage rgb = context.rgbImage();
rgb.mask(mask);
image(rgb, context.depthWidth() + 10, 0);
//print filter values for debugging purposes
fill(255);
text("erodeAmt: " + erodeAmt + "\tdilateAmt: " + dilateAmt + "\tblurAmt: " + blurAmt,15,15);
}
void keyPressed(){
if(key == 'e') erodeAmt--;
if(key == 'E') erodeAmt++;
if(key == 'd') dilateAmt--;
if(key == 'D') dilateAmt++;
if(key == 'b') blurAmt--;
if(key == 'B') blurAmt++;
//constrain values
if(erodeAmt < 0) erodeAmt = 0;
if(dilateAmt < 0) dilateAmt = 0;
if(blurAmt < 0) blurAmt = 0;
}
Unfortunately I can't test with an actual sensor right now, so please use the concepts explained, but bare in mind the full sketch code isn't tested.
This above sketch (if it runs) should allow you to use keys to control the filter parameters (e/E to decrease/increase erosion, d/D for dilation, b/B for blur). Hopefully you'll get satisfactory results.
When working with SimpleOpenNI in general I advise recording an .oni file (check out the RecorderPlay example for that) of a person for the most common use case. This will save you some time on the long run when testing and will allow you to work remotely with the sensor detached. One thing to bare in mind, the depth resolution is reduced to half on recordings (but using a usingRecording boolean flag should keep things safe)
The last and probably most important point is about the quality of the end result. Your resulting image can't be that much better if the source image isn't easy to work with to begin with. The depth data from the original Kinect sensor isn't great. The Asus sensors feel a wee bit more stable, but still the difference is negligible in most cases. If you are going to stick to one of these sensors, make sure you've got a clear background and decent lighting (without too much direct warm light (sunlight, incandescent lightbulbs, etc.) since they may interfere with the sensor)
If you want a more accurate user cut and the above filtering doesn't get the results you're after, consider switching to a better sensor like KinectV2. The depth quality is much better and the sensor is less susceptible to direct warm light. This may mean you need to use Windows (I see there's a KinectPV2 wrapper available) or OpenFrameworks(c++ collections of libraries similar to Processing) with ofxKinectV2

I've tried built-in erode-dilate-blur in processing. But they are very inefficient. Every time I increment blurAmount in img.filter(BLUR,blurAmount), my FPS decreases by 5 frames.
So I decided to try opencv. It is much better in comparison. The result is satisfactory.
import SimpleOpenNI.*;
import processing.video.*;
import gab.opencv.*;
SimpleOpenNI context;
OpenCV opencv;
PImage mask;
int numPixels = 640*480;
int dilateAmt = 1;
int erodeAmt = 1;
int blurAmt = 1;
Movie mov;
void setup(){
opencv = new OpenCV(this, 640, 480);
size(640*2, 480);
context = new SimpleOpenNI(this);
if (context.isInit() == false) {
exit();
return;
}
context.enableDepth();
context.enableRGB();
context.enableUser();
context.alternativeViewPointDepthToImage();
mask = createImage(640, 480, RGB);
mov = new Movie(this, "wild.mp4");
mov.play();
mov.speed(5);
mov.volume(0);
}
void movieEvent(Movie m) {
m.read();
}
void draw() {
frame.setTitle(int(frameRate) + " fps");
context.update();
int[] userMap = context.userMap();
background(0, 0, 0);
mask.loadPixels();
for (int i = 0; i < numPixels; i++) {
mask.pixels[i] = userMap[i] > 0 ? color(255) : color(0);
}
mask.updatePixels();
opencv.loadImage(mask);
opencv.gray();
for (int i = 0; i < erodeAmt; i++) {
opencv.erode();
}
for (int i = 0; i < dilateAmt; i++) {
opencv.dilate();
}
if (blurAmt>0) {//blur with 0 amount causes error
opencv.blur(blurAmt);
}
mask = opencv.getSnapshot();
image(mask, 0, 0);
PImage rgb = context.rgbImage();
rgb.mask(mask);
image(mov, context.depthWidth() + 10, 0);
image(rgb, context.depthWidth() + 10, 0);
fill(255);
text("erodeAmt: " + erodeAmt + "\tdilateAmt: " + dilateAmt + "\tblurAmt: " + blurAmt, 15, 15);
}
void keyPressed() {
if (key == 'e') erodeAmt--;
if (key == 'E') erodeAmt++;
if (key == 'd') dilateAmt--;
if (key == 'D') dilateAmt++;
if (key == 'b') blurAmt--;
if (key == 'B') blurAmt++;
//constrain values
if (erodeAmt < 0) erodeAmt = 0;
if (dilateAmt < 0) dilateAmt = 0;
if (blurAmt < 0) blurAmt = 0;
}

Swing auto repaints JPanel after button clicked

I'm having this weird issue with Swing.
I am drawing few points and lines between them, directly on JPanel.
I'm just calling:
g.drawLine(pointAX, pointAY, pointBX, pointBY);
Where g is Graphics object taken from panel.getGraphics()
And this works alright, gives me nice output.
But then I'm trying to move it and I use ActionListener on my button, which does:
panel.revalidate();
panel.repaint();
drawPanel();
moveVector(moveX, moveY);
drawPoints();
drawConnections(connections);
The other methods:
drawPanel just draws some lines, so it's easier to see:
private void drawPanel(){
Graphics g = panel.getGraphics();
zeroX = panel.getWidth() / 2;
zeroY = panel.getHeight() / 2;
g.setColor(Color.GRAY);
for(int i = zeroX + 10; i < panel.getWidth(); i += 10){
g.drawLine(i, 0, i, panel.getHeight());
}
for(int i = zeroX + 10; i > 0; i -= 10){
g.drawLine(i, 0, i, panel.getHeight());
}
for(int j = zeroY - 10; j < panel.getHeight(); j += 10){
g.drawLine(0, j, panel.getWidth(), j);
}
for(int j = zeroY - 10; j > 0; j -= 10){
g.drawLine(0, j, panel.getWidth(), j);
}
g.setColor(Color.BLACK);
g.drawLine(zeroX, 0, zeroX, panel.getHeight());
g.drawLine(0, zeroY, panel.getWidth(), zeroY);
panel.paintComponents(g);
}
drawPoints looks like this
private void drawPoints() {
for(int i = 0; i < points.size(); i++){
int x = Integer.parseInt(points.get(i)[1]);
int y = Integer.parseInt(points.get(i)[2]);
drawPoint(x, y);
}
}
private void drawPoint(int x, int y) {
Graphics g = panel.getGraphics();
for (int i = -1; i < 2; i++) {
g.drawLine(zeroX + x + i, zeroY + y - 1, zeroX + x + i, zeroY + y);
}
panel.paintComponents(g);
}
g.setColor(Color.BLACK);
g.drawLine(zeroX, 0, zeroX, panel.getHeight());
g.drawLine(0, zeroY, panel.getWidth(), zeroY);
panel.paintComponents(g);
}
and drawConnections:
private void drawConnections(ArrayList<String[]> lines) {
for (String[] arr : lines) {
String x = arr[1];
String y = arr[2];
drawConnection(x, y);
}
}
private void drawConnection(String pointA, String pointB) {
int pointAX = 0, pointAY = 0, pointBX = 0, pointBY = 0;
Graphics g = panel.getGraphics();
for (String[] arr : points) {
if (arr[0].equals(pointA)) {
pointAX = Integer.parseInt(arr[1]);
pointAY = Integer.parseInt(arr[2]);
} else if (arr[0].equals(pointB)) {
pointBX = Integer.parseInt(arr[1]);
pointBY = Integer.parseInt(arr[2]);
}
}
g.drawLine(zeroX + pointAX, zeroY + pointAY, zeroX + pointBX, zeroY + pointBY);
panel.paintComponents(g);
}
What I don't understand here is that everything looks OK. I did debug and it looks ok and at the end of listener call, when everything is painted (although it paints over the old one instead of clearing it) it suddenly clears everything and nothing is visible at all.

You need to implement all the drawing in paintComponent(Graphics) in your JPanel class (or methods that are called from it). Calling getGraphics on the panel instance and using the Graphics object is not always guaranteed to work. It's also strange that you call panel.repaint() and immediately afterwards try to do additional drawing using the graphics object from the panel, that additional drawing should just be done in paintComponent(Graphics).
Using paintComponent(Graphics) will ensure your painting is done at the right time, and that the panel's graphics will be cleared (if you call the super method at least).

panel.repaint does not immediately repaint the panel, but it tells Swing that this panel should be repainted in the near future (see API docs: https://docs.oracle.com/javase/7/docs/api/javax/swing/JComponent.html#repaint(long,%20int,%20int,%20int,%20int). So your custom painting will be cleared once the panel repaints itself.
Create a custom component by inheriting from JPanel and overwriting the method paintComponent with your custom painting code. Then, whenever the panel needs to be repainted, your code is called, and not only the user pressed a button.

Something in my initiation is causing the app to crash. I'm fresh out of ideas if anyone can help I will be greatfull

The catlog says that the first for cycle completes and the crash happens at the second one.
This is the init method for a very simple game.
private void init()
{
Resources res = this.getResources();
int x=R.drawable.crystal0000;
for(int i=0;i<=100;i++)// This for completes
{
Bitmap b=BitmapFactory.decodeResource(res, x+i);
Log.d("crystalframes loaded", Integer.toString(i));
crystalframes[i]=Bitmap.createScaledBitmap(b, 20, 20, false);
}// Nothing after this points goes trough
x = R.drawable.frame0;
for (int i = 0; i < 10; i++) {
Bitmap t = BitmapFactory.decodeResource(res, x + i);
Log.d("frame", Integer.toString(i));
frames[i] = Bitmap.createScaledBitmap(t, 40, 40, false);
}
x = R.drawable.rframe0;
for (int i = 0; i < 10; i++) {
Bitmap t = BitmapFactory.decodeResource(res, x + i);
Log.d("frame", Integer.toString(i));
frames[i + 10] = Bitmap.createScaledBitmap(t, 40, 40, false);
}
// Code continues from the here but the crash is caused somewhere
in these lines

Probably you created crystalframes like this:
crystalframes = new Bitmap[100];
But you need size of 101, because you did:
for(int i=0;i<=100;i++)// This for completes
Also you could be running out of memory.