Drawing order again

Programming Questions

v.k.

in Programming Questions • 3 years ago

I'm trying to make a chain reaction system. But i'm stuck much earlier in the code...

I've built a grid of "squares objects" to begin. Then i'm adding movement.

So, for now, there is one "test square" that moves, following mouse clicks.

The goal is to make all the squares moving ones, triggered by others.

But, before that, i realized that, if one clicks to the left and/or to the bottom of the screen, my square goes under the others, and disappears.

I've being reading other topic about similar issue. But i think my problem goes a little different.

I'm using a bi-dimensional Array of objects, and their index (array[index][index2]) are, how i handle them.

I have tried to use the suggestion in the other topic to sort them in an ArrayList by Y position.

I'm not sure if just because i don't really know how to use ArrayList properly or because the approach is not suitable for that case. But is not working so far.

My first problem with sorting is the bi-dimension, An ArrayList can't have 2 dimensions, can it?

I understood that it can't so i'm having some trouble to go from one to two dimension...

But i did it, not sure if it's really correct, but it runs.

And then as the, for instance, square[1][2] moves, it is sorted and then it is not the square[1][2] anymore!!!

Hummm... Don't know...lots of ways to go...

So this are the stuff that crosses my mind about all that:

I can keep trying the sort approach. But i need to sort by Y and X positions (how?) and also i need to have a different way to "refer" to each square than their index. Maybe a kind of an ID for each one so i can interact with them besides their sort order. Also i need to improve mine 2d to 1d conversion (i've done this once, iknow it can work ok).

Also as i said ArrayList is hard for me (not much in processing reference and the java reference is harder to understand),

so i can't call an object method straight to an ArrayList element (i can't figure the proper grammar there is that "casting" and i get confused). For instance arrayList.get(i).method() is not working properly. So i'm sorting and sending them back to an array to call the methods. This could not be the only way and probably is an estupid detail i'm missing.

Other thought is to use PGraphics, to draw everything that moves... But again, i remember to have difficulties to cal custom methods in PGraphics. Other day, before i start this, i saw a topic about this, but can't find it again.

That is it. Any help will be very appreciated.

Here is the code WITHOUT the sort try( no ArrayList), cause it was TO quick and TO dirt to post. I'm improving it and posting later.

Also, I'm an apprentice and a hobbyist, all i learned was by myself digging in the internet. So ANY kind of comments about my code are very welcome.

the sketch (and code) is also @:

http://www.kubrusly.com/vicente/processing/drawingOrder/

Quad[][]all = new Quad[80][80];
void setup()
{
size (800,800);
for (int i=0;i<80;i+=1)// populate the array
{
for (int a=0;a<80;a+=1)
{
all[i][a]=new Quad(i*10,a*10);
}
}
background (0);
}
void draw()
{
for (int i=0;i<80;i+=1)
{
for (int a=0;a<80;a+=1)
{
all[i][a].q();
all[i][a].calcVel();
}
}
}//<<< end of Draw loop
void mousePressed()
{
all[20][30].setDest(mouseX,mouseY);
}
//----
class Quad
{
float posx, posy;
float destx, desty;
int velx, vely;
boolean chegou;
Quad()// constructor vazio
{
}
Quad(float inp_x, float inp_y)// constructor
{
this.posx =inp_x;
this.posy =inp_y;
this.destx=this.posx;
this.desty=this.posy;
}
void q() // draws
{
rect(this.posx,this.posy,10,10);
}
float qPosx()// ret posX
{
return this.posx;
}
float qPosy()//ret posY
{
return this.posy;
}
void calcVel()
{
if (this.posx > this.destx)
{
this.velx= -1;
}
else
if (this.posx < this.destx)
{
this.velx= 1;
}
else
if(this.posx == this.destx)
{
this.velx=0;
}
if (this.posy > this.desty)
{
this.vely= -1;
}
else
if (this.posy < this.desty)
{
this.vely= 1;
}
else
if(this.posy == this.desty)
{
this.vely=0;
}
if (this.destx != this.posx || this.desty != this.posy)
{
this.posx = this.posx+this.velx;
this.posy = this.posy+this.vely;
this.chegou = false;
}else{this.chegou=true;}
}
void setDest (float inp_destx, float inp_desty)
{
this.destx =inp_destx;
this.desty =inp_desty;
}
}//<<<< FIM class Qad

Replies(8)

doodle

Re: Drawing order again

3 years ago

I think I can offer a little help on some of your questions.

One way to store the x y location could be by using Pvectors you can also create your own class and then have an array of objects.

class tile{

int x_loc;
int y_loc;
int id;

tile(){
}

}

Also I am not sure why an arrayList would be needed. If there was a fixed set of elements to manipulate.

also while your working on the project use less boxes! Its seems silly but it will feel less overwhelming looking at a 10 x 10 tile set and using a larger set would be as simple as increasing the array sizes and the for loops.

PhiLho

Re: Drawing order again

3 years ago

Note: some people like this notation, but in general, you can drop the "this." in your class: a class accesses its members without needing to indicate they belong to itself...

With regard to your remarks:
- As said, you don't need an ArrayList if you have a fixed, known number of objects. You can use Arrays.sort() to sort an array. But indeed a mono-dimensional one. You can always use a mono-dimensional array to simulate a bi-dimensional one, thought (see the pixels[] array), and you might need to copy the data to sort (or, rather, its references) to preserve original order.
- You don't give a link to the thread you mention, so we don't know what is discussed there. And I fear I haven't understood what is exactly the problem you try to solve...
- If you need to sort objects, you have to make them Comparable. Another can of worms...

v.k.

Re: Re: Drawing order again

3 years ago

Thanks for helping. the thread is :

http://forum.processing.org/topic/drawing-order

You are right, i can sort Arrays also. Will give it a try. I've gone to ArrayList folowing the sugestion on that thread, and i did not realize that i could have sorted the array itself.

There is no difference between using "this." or not using it in this case?

I have used the Comparable from that post also :

int compareTo(Object o){

    Carriage c = (Carriage)o;
    int dy = int(y-c.y);
    if(dy == 0){
      return int(x-c.x);
    }
    return dy;
}

But I will need to sort by X and Y...

blindfish

Re: Drawing order again

3 years ago

I'd suggest your first challenge is to re-write your code so you can do as stopfocus suggested and first test it out with fewer squares. That would be a good exercise in removing all the magic numbers you use in your code. 'Magic numbers' are hard-coded, arbitrary values that when changed break the sketch. In your case 80 (and factors of 80) is used a lot. You should replace this with a variable reference so that by changing one variable you can change the size of the grid...

As for layer order; I tend to use registerDraw() a lot and you can (ab)use this to determine layer order by using a separate array for 'layers' and unregistering, sorting and re-registering objects to change the drawing order. I've posted a demo on openProcessing; but I'm not going to pretend that this is the best approach: it was really just an experiment that got out of hand :)
In your case a simpler approach - e.g. a single dimensional array, as suggested by phi.lho, - might be a better option.

v.k.

Re: Re: Drawing order again

3 years ago

Thanks for helping.

I'll do as suggested. Less squares and no "magic numbers" one dimension Array. Actually, there were no "magic numbers" at the beginning, i made them as i was getting confused with ArrayList grammar, and getting a lot of "ArrayIndexOutOfBoundsException" so to isolate the problem i made them "hard numbers". I've noticed that they do not help me some time ago when i started messing with Processing. Sorry for that. I still have the code without them...

But i have never heard of registerDraw(). I'm out of time right now to look at your code (got work...). I'll will look for it to try to understand what is your suggestion. If i have doubts, i post it here. Thanx.

Anyway, for knowing... Can an ArrayList have 2 dimensions?

bjordal

Re: Drawing order again

3 years ago

You are clearly referring to my post in this thread when you say " sort them in an ArrayList by Y position". However this method does not apply to your problem, unless are are trying to achieve a 3D like effect.

I have to ask though, how were you going to determine the drawing order of objects? In the final program (from what i can understand) all squares are going to be moving around - so some will naturally overlap some other squares so is the drawing order really that important? also if it's just the first square that you wan't to be on top then you should just redraw it at the end of the draw loop.

However i haven't done much programming lately so i thought i'd show one easy way to "sort" the drawing order. Also i am using a ArrayList because i like them and they are easy to use and on the contrary to what you said, the java docs explains everything you need to know about them (except casting), but it should be noted that what i am doing could just as easily be done with a normal array and just swapping objects position in them.

ooh btw, it should be noted that this isn't the best solution, it's just the first that i could think of.

Quad[][]all = new Quad[80][80];
ArrayList renderList;
void setup(){
size (800,800);
renderList = new ArrayList();
for (int i=0;i<80;i+=1){
for (int a=0;a<80;a+=1){
all[i][a]=new Quad(i*10,a*10);
renderList.add(all[i][a]);
}
}
background (0);
}
void draw(){
for (int i=0;i<80;i+=1){
for (int a=0;a<80;a+=1){
all[i][a].calcVel();
}
}
for(int i = 0; i<renderList.size();i++){
//draws out the renderlist, the last object in the list will be drawn on top of everything else.
((Quad)renderList.get(i)).q();
}
}
void mousePressed(){
all[20][30].setDest(mouseX,mouseY);
renderList.remove(renderList.indexOf(all[20][30]));
renderList.add(all[20][30]);
//removes the selected object and pushes it to the back of the renderlist so that it will be renderd last.
//the idea is the when you set the destination of the object[a][b] you remove it and re-add it to the list
//so that the last object to have gotten a new destination will always be on top.
}
class Quad
{
float posx, posy;
float destx, desty;
int velx, vely;
boolean chegou;
Quad(float inp_x, float inp_y)
{
posx =inp_x;
posy =inp_y;
destx=posx;
desty=posy;
}
void q(){
rect(posx,posy,10,10);
}
float qPosx(){
return posx;
}
float qPosy(){
return posy;
}
void calcVel(){
if (posx > destx){
velx= -1;
}else if (posx < destx){
velx= 1;
}else if(posx == destx){
velx=0;
}
if (posy > desty){
vely= -1;
}else if (posy < desty){
vely= 1;
}else if(posy == desty){
vely=0;
}
if (destx != posx || desty != posy){
posx = posx+velx;
posy = posy+vely;
chegou = false;
}else{
chegou=true;
}
}
void setDest (float inp_destx, float inp_desty){
destx =inp_destx;
desty =inp_desty;
}
}

v.k.

Re: Re: Drawing order again

3 years ago

Great Bjordal. Thanks for your time. It really clarified me. I'm asking my self this question "how to determine drawing order when every thing gets moving?". But for now the important thing is that the first ones to move are visible. Later the order is really less important. Also it helped me to understand how to use ArrayLists, even if i don't really need them as stated before.

I've been trying to make this a lot... :(

for(int i = 0; i<renderList.size();i++){
//draws out the renderlist, the last object in the list will be drawn on top of everything else.
((Quad)renderList.get(i)).q();
}

and now it works.

Thanks

bjordal

Re: Re: Drawing order again

3 years ago

no problem, glad i could help :)

Top Reply