XNA changing 200 or so tiles pixels - xna-4.0

Hey guys i thought this was going to be a 1second thing to do, currently i have a tileset for a 2d game and depending on the terrain it calls these tile sets. and the tile sets are colour coded pink is the material and blue is the material adjacent to the tile.
so far when terrain changes or on load up i draw the tiles on the screen and any new tiles as i move. this is all fine and works very well, but when i have like 50 grass tiles that need to be changed from pink to green and 75 dirt tiles which need to be changed from pink to grey i have a issue.
it only appears the first tile is changed then every other tile infront or before that tile is the same colour as the first colour.
ill give you an example in code what im doing
Color[] storePixels = new Color[50 * 50];
for(int y = 0; y < 100; y ++)
{
for(int x = 0; x < 100; x++)
{
tileTexture[y,x].GetData(storePixels);
for(int i = 0; i < storePixels.Length; i ++)
{
if(tileMaterial[y,x] == "DIRT")
{
storePixels[i] = new Color(100,100,100);
}
if(tileMaterial[y,x] == "GRASS")
{
storePixels[i] = new Color(0,255,0);
}
}
tileTexture[y,x].SetData(storePixels);
}
}
To me i cant see why this wont work. i assume maybe i need to reset the storePixels which i have tried but still it does not create green if its grass or grey if its dirt.
Please let me know if you know why this is not working thank you for your time and thank you in advance :)
OK! i figured it out im calling the same Image in my content folder
for(int y = 0; y < 100; y ++)
{
for(int x = 0; x < 100; x ++)
{
tileTexture[y,x] = Content.Load<Texture2D>("tile");
}
}
so now we are getting somewere we know why the problem is being cuassed as i change the Texture2D through SetData() it actually changes this tile texture2D directly and everything else that calls it will always be changed.
i cannot call it in a loop, i only call it at startup i could try store a copy of the texture2D and then change it.
i dunno does anyone have any further solutions to help solve this problem? thanks for you time :)

for(int y = 0; y < 100; y++)
{
for(int x = 0; x < 100; x++)
{
spriteBatch.Draw(tileTexture[y,x],rectangle,Color.White);
}
}
this is how i am drawing my grid

That code is a bad idea...
you can work with only one white texture...
WhiteTex = new Texture2D(GraphicsDevice,1,1);
WhiteTex.SetData<Color>(new Color[] {Color.White };
you can draw tiles this way...
Enum MaterialTypes { Dirt, Grass }
static readonly Dictionary<int, Color> MaterialTypeToColor = new Dictionary() { {0, new Color(100,100,100)}, {1, new Color(0,255,0) }};
for(int y = 0; y < 100; y ++)
{
for(int x = 0; x < 100; x++)
{
batch.Draw(whiteTex, new Rectangle(x*50,y*50, 50,50), null, (MaterialTypeToColor[ (int) tileMaterial[y,x]]);
}
}

Related

Kinect Depth Histogram in Processing

I'm trying to create a histogram displaying the distances scanned by a Kinect vs. their occurrences. I've adapted the Histogram example code to create a depth histogram, but it's currently displaying the depth at each pixel (from left to right) multiple times across the depth image width.
What I'm looking to do is reorder the depth information so that it ranges from the lowest value (that isn't 0) to the highest on the x axis, and shows their occurrences on the y. I'm using Processing, so I'm unsure if this is the right site to be posting on, but I've tried on the posting forum and not gotten any help. If anyone can show me where I'm going wrong, that'd be awesome. My current code is below, and a screenshot of my current output can be found here
import SimpleOpenNI.*;
SimpleOpenNI kinect;
void setup() {
size(1200, 580);
kinect = new SimpleOpenNI(this);
kinect.enableDepth();
}
void draw () {
kinect.update();
PImage depthImage = kinect.depthImage();
image (depthImage, 11, 0);
int[] depthValues = kinect.depthMap();
int[] hist = new int[716800];
for (int x = 11; x < depthImage.width; x++) {
for (int y = 0; y < depthImage.height; y++) {
int i = x + y * 640;
hist[i] = depthValues[i];
}
}
int histMax = max(hist);
stroke(20);
for (int i = 0; i < depthImage.width; i += 2) {
int which = int(map(i, 0, depthImage.width, 0, histMax));
int y = int(map(hist[which], 0, histMax, depthImage.height, 0));
line(i, depthImage.height, i, y);
}
}
I think you're asking two questions here.
How to get the histogram to go from 0-N:
Use Processing's sort() function to sort the array.
hist = sort(hist); // sorts your array numerically
How to get the histogram to fill the screen:
I'm not entirely sure why it's drawing twice, but I think you can clean up your code quite a bit.
// how far apart are the bars - set based on screen dimensions
int barSpacing = width / hist.length;
for (int i=0; i<hist.length; i++) {
// get value and map into usable range (note 10 not 0 for min)
int h = int(map(hist[i], 0,histMax, 10,height));
// set x position onscreen
int x = i * barSpacing;
// draw the bar
line(x,height, x,height-h);
}

How do I get a random number to stay fixed with slick?

I'm a beginner in Java as well as with the slick tools. I want to make a game that has different coloured cubes randomly placed within a certain area of the window.
I use two for-loops and call for a random number in render. I get the cubes placed exactly as I want, but the problems is that they flicker in all colours. I guess it has to do with how I call for a random number and that it gets updated with FPS?!
Please help me!!
public void render(GameContainer gc, StateBasedGame sdg, Graphics g) throws SlickException {
//set background
Image background = (new Image("res/background.png")).getScaledCopy(800, 500);
g.drawImage(background, 0, 0);
//set gamescape
blue = (new Image("res/blue.png")).getScaledCopy(20,20);
green = (new Image("res/green.png")).getScaledCopy(20,20);
red = (new Image("res/red.png")).getScaledCopy(20,20);
int xvalue = 300;
int yvalue = 400;
for (int a = 1; a < 20; a++) {
for (int i = 1; i < 10; i++) {
r = rand.nextInt(3);
if(r==0){g.drawImage(blue,xvalue,yvalue);}
else if(r==1){g.drawImage(red, xvalue, yvalue);}
else{g.drawImage(green, xvalue, yvalue);}
xvalue = xvalue+20;
}
yvalue = yvalue - 20;
xvalue = xvalue -180;
}
}
Your problem is that you generate a new random number each time you redraw the scene.
To resolve this, you may have to create an array in which you store the generated color of each cube. And each time you redraw your images, you just read each color value in the array.

Area of scanned (2D) figure

Lets say I have 100 one-colored A4 sheets of paper, that are cut into different shapes and figures (2D), scanned, saved as an image file, and then needs to be sorted in ascending order of area.
Is there an effective way to find the area of the figures and arrange them?
If all pictures have the same size and all shapes the same color (that´s the situation if I don´t missunderstand your question), you can calculate the average color value.
The nearer the calculated color comes to the figures´s color, the bigger is the shape on the Image.
Some code:
private Color GetAverageImageColor(Image img)
{
double[] rgb = new double[3];
Color col;
Bitmap bmp = new Bitmap(img);
for(int y = 0; y < bmp.Size.Height; y++)
{
for(int x = 0; x < bmp.Size.Width; x++)
{
col = bmp.GetPixel(x, y);
rgb[0] += col.R;
rgb[1] += col.G;
rgb[2] += col.B;
}
}
for (int i = 0; i < 3; i++)
{
rgb[i] /= (bmp.Size.Height * bmp.Size.Width);
rgb[i] = Math.Round(rgb[i]);
}
return Color.FromArgb((int) rgb[0], (int) rgb[1], (int) rgb[2]);
}

Pixel reordering is wrong when trying to process and display image copy with lower res

I'm currently making an application using processing intended to take an image and apply 8bit style processing to it: that is to make it look pixelated. To do this it has a method that take a style and window size as parameters (style is the shape in which the window is to be displayed - rect, ellipse, cross etc, and window size is a number between 1-10 squared) - to produce results similar to the iphone app pxl ( http://itunes.apple.com/us/app/pxl./id499620829?mt=8 ). This method then counts through the image's pixels, window by window averages the colour of the window and displays a rect(or which every shape/style chosen) at the equivalent space on the other side of the sketch window (the sketch when run is supposed to display the original image on the left mirror it with the processed version on the right).
The problem Im having is when drawing the averaged colour rects, the order in which they display becomes skewed..
Although the results are rather amusing, they are not what I want. Here the code:
//=========================================================
// GLOBAL VARIABLES
//=========================================================
PImage img;
public int avR, avG, avB;
private final int BLOCKS = 0, DOTS = 1, VERTICAL_CROSSES = 2, HORIZONTAL_CROSSES = 3;
public sRGB styleColour;
//=========================================================
// METHODS FOR AVERAGING WINDOW COLOURS, CREATING AN
// 8 BIT REPRESENTATION OF THE IMAGE AND LOADING AN
// IMAGE
//=========================================================
public sRGB averageWindowColour(color [] c){
// RGB Variables
float r = 0;
float g = 0;
float b = 0;
// Iterator
int i = 0;
int sizeOfWindow = c.length;
// Count through the window's pixels, store the
// red, green and blue values in the RGB variables
// and sum them into the average variables
for(i = 0; i < c.length; i++){
r = red (c[i]);
g = green(c[i]);
b = blue (c[i]);
avR += r;
avG += g;
avB += b;
}
// Divide the sum of the red, green and blue
// values by the number of pixels in the window
// to obtain the average
avR = avR / sizeOfWindow;
avG = avG / sizeOfWindow;
avB = avB / sizeOfWindow;
// Return the colour
return new sRGB(avR,avG,avB);
}
public void eightBitIT(int style, int windowSize){
img.loadPixels();
for(int wx = 0; wx < img.width; wx += (sqrt(windowSize))){
for(int wy = 0; wy < img.height; wy += (sqrt(windowSize))){
color [] tempCols = new color[windowSize];
int i = 0;
for(int x = 0; x < (sqrt(windowSize)); x ++){
for(int y = 0; y < (sqrt(windowSize)); y ++){
int loc = (wx+x) + (y+wy)*(img.width-windowSize);
tempCols[i] = img.pixels[loc];
// println("Window loc X: "+(wx+(img.width+5))+" Window loc Y: "+(wy+5)+" Window pix X: "+x+" Window Pix Y: "+y);
i++;
}
}
//this is ment to be in a switch test (0 = rect, 1 ellipse etc)
styleColour = new sRGB(averageWindowColour(tempCols));
//println("R: "+ red(styleColour.returnColourScaled())+" G: "+green(styleColour.returnColourScaled())+" B: "+blue(styleColour.returnColourScaled()));
rectMode(CORNER);
noStroke();
fill(styleColour.returnColourScaled());
//println("Rect Loc X: "+(wx+(img.width+5))+" Y: "+(wy+5));
ellipse(wx+(img.width+5),wy+5,sqrt(windowSize),sqrt(windowSize));
}
}
}
public PImage load(String s){
PImage temp = loadImage(s);
temp.resize(600,470);
return temp;
}
void setup(){
background(0);
// Load the image and set size of screen to its size*2 + the borders
// and display the image.
img = loadImage("oscilloscope.jpg");
size(img.width*2+15,(img.height+10));
frameRate(25);
image(img,5,5);
// Draw the borders
strokeWeight(5);
stroke(255);
rectMode(CORNERS);
noFill();
rect(2.5,2.5,img.width+3,height-3);
rect(img.width+2.5,2.5,width-3,height-3);
stroke(255,0,0);
strokeWeight(1);
rect(5,5,9,9); //window example
// process the image
eightBitIT(BLOCKS, 16);
}
void draw(){
//eightBitIT(BLOCKS, 4);
//println("X: "+mouseX+" Y: "+mouseY);
}
This has been bugging me for a while now as I can't see where in my code im offsetting the coordinates so they display like this. I know its probably something very trivial but I can seem to work it out. If anyone can spot why this skewed reordering is happening i would be much obliged as i have quite a lot of other ideas i want to implement and this is holding me back...
Thanks,

How can I return to the original image after change the color pixels on my image in processing?

In the program below, I try to change the pixel colors form a image with the click of the mouse, however, I'm trying to return to the original image with the second click but I haven't been able to find the rigth argument to do it...
PImage pic;
void setup(){
pic=loadImage("road.jpg"); // Loading the image from a folder "date" attached to the sketch
size (pic.width,pic.height);
image(pic,0,0);
}
void draw(){
}
void mousePressed(){
loadPixels();
pic.loadPixels();
for (int y = 0; y < height; y++ ) {
for (int x = 0; x < width; x++ ) {
int loc = x + y*width;
if(red(pixels[loc]) >170 && red(pixels[loc])<215){
pixels[loc]=color(187,0,0); //changing the pixels color from red to green
}
}
}
for (int y = 0; y < height; y++ ) {
for (int x = 0; x < width; x++ ) {
int loc = x + y*width;
if(green(pixels[loc]) >120 && green(pixels[loc])<160){
pixels[loc]=color(0,192,0); //changing the pixels color form green to red
}
}
}
// I belive that here I have to add an argument that returns to the original image
updatePixels();
}
I will appreciate any help.
Thanks.
What I typically do for this sort of thing is to create /two/ images, one being the file (target) and the other being a blank Image.
PImage target;
PImage destination;
target = loadImage("file.jpg");
destination = createImage(target.width, target.height, RGB);
And then I copy the target's information into the destination's pixels. If I want to switch back, I can just call target; I'm able to freely swap back and forth by saving them as two separate images.
For an example, check out a sketch of mine on openprocesing: http://openprocessing.org/visuals/?visualID=49301

Resources