browse OpenProcessing

Njardur
Hexagon Mouse
creationEnviroment
browse all>

browse the portfolio of Cym Net

Hexagon Mouse
Bouncing Ball Animation
Simple Bouncing Ball Animation
Shuffle Squares
see more>
Hexagon Mouse

Hexagon Mouse

uploaded by
Cym Net
hexagonMouse is a little exercise to draw a hexagon, to fill up a background with a pattern of hexagons and to make a mouseover hexagon.

Change the size of the hexagon to change the pattern.
Embed Code
Fave'd by 1 users
Sketch added to your favorites in your portfolio.
You must login/register to add this sketch to your favorites.

comments

source code

Comments

Dirk van Oosterbosch
03 Dec 2009, 05:17
Hi Cym,

your problem seems to be the translate() calls. When you use multiple translations in one draw() loop, all these translations gets added to each other.

If you change the code like you describe, (don't use a transparency in line 75 and change the order of drawBackgroundHexagons() and drawMouseHexagons()), you can witness that if you go over the hexagons a the top, the hexagons totally at the bottom light up. This could already put you on the track to realize that the drawing *does* happen, but at just the *wrong location*.

The fix would be to wrap the translate() calls in a pushMatrix(); // your translations; popMatrix(); block.
PushMatrix means that you're pushing the translations that follow on the "translation stack". And with popMatrix you pop these off the stack again. When you reach the drawMouseHexagons() code, you want to be sure the stack is empty, so you're translations are not affected by previous translations.

I hope this clear things and solves your problem. I'll attach or upload the fixed code here.

Also a nice improvement of your code would be to make a Hexagon class that knows how to draw itself and respond to mouse events (hover or click).

best
dirk
Dirk van Oosterbosch
03 Dec 2009, 05:18
Hi Cym,

your problem seems to be the translate() calls. When you use multiple translations in one draw() loop, all these translations gets added to each other.

If you change the code like you describe, (don't use a transparency in line 75 and change the order of drawBackgroundHexagons() and drawMouseHexagons()), you can witness that if you go over the hexagons a the top, the hexagons totally at the bottom light up. This could already put you on the track to realize that the drawing *does* happen, but at just the *wrong location*.

The fix would be to wrap the translate() calls in a pushMatrix(); // your translations; popMatrix(); block.
PushMatrix means that you're pushing the translations that follow on the "translation stack". And with popMatrix you pop these off the stack again. When you reach the drawMouseHexagons() code, you want to be sure the stack is empty, so you're translations are not affected by previous translations.

I hope this clear things and solves your problem. I'll attach or upload the fixed code here.

Also a nice improvement of your code would be to make a Hexagon class that knows how to draw itself and respond to mouse events (hover or click).

best
dirk
Dirk van Oosterbosch
03 Dec 2009, 05:20
Sorry, double post and no code yet. Some of the javascripts here are messing things up.
Dirk van Oosterbosch
03 Dec 2009, 05:25
The fixed code can be found here:
http://dogtime.wikidot.com/hexagons-with-push-and-popmatrix

(Sorry to post cross-site, but since this sketch is just consisting of one file and might be under more revisions, I reckoned the wiki is more convenient.)
You need to login/register to comment.