We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Programs › interface design (translate and mouseOver)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
interface design (translate and mouseOver) (Read 564 times)
jher
interface design (translate and mouseOver)
Feb 4th, 2008, 11:57pm  
I am building a grid based game. When you mouse over a cell in the grid I want that cell to expand and then rotate 180 degrees to expose content. The examples of the rotate method used translate. However I can not seem to be able to lay out multiple cells in this way. Instead of the cells rotating on their center axis, they seem to rotate on an axis way to their left.

Can anyone point me in the right direction here. Are the processing books on the website good for teaching these concepts?

Thanks
Alex
Back to top
 
 
mflux
Re: interface design (translate and mouseOver)
Reply #1 - Feb 5th, 2008, 1:50am  
Order of operations is very important here.

You should translate to your grid position, and -then- rotate. After those two you can then draw your rectangle shape (or whatever it is) but make sure you draw it at 0,0 now because we're using trasnforms to position things, not with the draw method itself.

I hope that clears it up.
Back to top
 
Portfolio
fluxhavoc  
jher
Re: interface design (translate and mouseOver)
Reply #2 - Feb 6th, 2008, 4:20pm  
Ok, so I am translating to my x and y position and then drawing my rect at 0,0. The problem is, before the selected cell rotates, I want to expand it so that it is larger than all the other cells.

I am doing this by increasing the z parameter of the translate(). The problem is, now instead of zooming up the cells zoom left or right depending on which side of the gird they are on. Is there a better way to zoom in on an object so that it does not slide left or right?

Thanks!
Back to top
 
 
JohnG
Re: interface design (translate and mouseOver)
Reply #3 - Feb 6th, 2008, 7:15pm  
If it's a rect, can't you just draw it bigger, i.e. make the width/height parameters larger? Though you may have to do a tiny z translate to get it in front of the other rects, and a slight up/left translate to counter the fact that rects grow from the top left corner in the default mode.
Back to top
 
 
jher
Re: interface design (translate and mouseOver)
Reply #4 - Feb 6th, 2008, 7:23pm  
John,

I am making rects, and that is my exact question. I have to tweak the z translate so taht the selected cell is in front of the other cells so that when it rotates it doesnt look wierd. I am trying to figure out how to perfectly alter the x and y parameters as I alter the z parameter so that I draw the enlarged selected cell at the right spot and keep the rotation of that cell on the center of its axis.

Thanks
Back to top
 
 
mflux
Re: interface design (translate and mouseOver)
Reply #5 - Feb 7th, 2008, 6:57am  
Sounds like you're running into a parallax / perspective problem.

What JohnG said is correct. You can draw bigger boxes, or scale them bigger right before you draw. This is a cleaner solution than moving in the Z.

Another solution is to kill perspective altogether by using ortho().
Back to top
 
Portfolio
fluxhavoc  
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›