Drawing Hexagons

[pink]

I am ultimately going to make a widget with a pattern of hexagons, so far I have created the "center" hexagon and will draw the rest around it... before I repeat this 36 more times, is there a simpler way than what I have below?

is it possible after creating the first polygon and filling it, to just shift the whole thing over and fill it again in a different spot? or any other alternative to calculating each point for every hex?

Thanks!

Code: Select all

public handler OnPaint()
   variable tH as Number
   variable tW as Number
   variable tS as Number
   variable tX0 as Number
   variable tX1 as Number
   variable tX2 as Number
   variable tX3 as Number
   variable tY0 as Number
   variable tY1 as Number
   variable tY2 as Number
   variable tHM as Number
   variable tWM as Number
   variable tHexPath as Path
   
   put my height into tHM
   put my width into tWM

   set the paint of this canvas to my foreground paint

   put (the minimum of tHM and tWM)/7 into tH
   put tH * 1.1547 into tW
   put tH * 0.5774 into tS
   
   put (tWM/2) - (tW/2) into tX0
   put tX0 + ((tW-tS)/2) into tX1
   put tX1 + tS into tX2
   put tX0 + tW into tX3
   
   put (tHM/2) - (tH/2) into tY0
   put tY0 + (tH/2) into tY1
   put tY0 + tH into tY2
   
   put polygon path with points [point [tX0,tY1],point [tX1,tY0],point [tX2,tY0],point [tX3,tY1],point [tX2,tY2],point [tX1,tY2]] into tHexPath
   add tHexPath to this canvas
   fill this canvas

end handler

[[-hh]]

You could try:

• Option (1).
  Compute the polygon path when an update is needed, not with every paint.
  Then use translate in OnPaint.
• Option (2), similar to LC Script.
  Compute all polygon paths when an update is needed, not with every paint.

p.s. You could also draw the hexagons as regular polygons.
See for example viewtopic.php?p=98716#p98716

[richmond62]

viewtopic.php?f=22&t=31212&p=168751&hil ... on#p168751

[[-hh]]

Here a LCB handler for computing the points of a regular N-gon.

Code: Select all

handler regularPoints(in pA as List) returns List
   -- pA = [ N, radius, xLoc, yLoc]
   variable tI as Number
   variable tP as Number
   put 2*pi/pA[1] into tP
   put [] into tM
   repeat with tI from 1 up to pA[1]
       push point [pA[3]+pA[2]*sin(tI*tP),pA[4]-pA[2]*cos(tI*tP)] onto tM
   end repeat
   return tM
end handler

Code: Select all

-- usage
variable tPath as Path
put polygon path with points regularPoints([6,100,250,250]) into tPath

[FourthWorld]

Are you making a game board?

[richmond62]

Are you making a game board?

Aren't we all?

Hence my link to the other discussion above this post.

[pink]

Hermann - Thanks, i will most definitely give that a try

Richard - Yes, making a game board, sort of a hexagonal version of 2048

[FourthWorld]

Cool. Looking forward to it.

Unless this is an exercise in LCB, in LCS you can obtain the points of a regular polygon with "the effective points".

[pink]

Hermann - is there an easy way to rotate this polygon by 90 degrees?

I tried the below code, when I add the rotate code, the hex flies off the canvas (it's not visible at all at 90 degrees, if I change it to 45 degrees, it is partially visible off to the side)

Code: Select all

  
   put polygon path with points regularPoints([6,my width/7,my width/2,my height/2]) into tHexPath
   rotate tHexPath by 90
   add tHexPath to this canvas
   fill this canvas

[richmond62]

Frankly, being a very lazy person, I'd import a vector hexagon into a widget, then clone away like crazy
and rotation would be dead easy.
-

hexStack.png (6.46 KiB) Viewed 9527 times

-

[FourthWorld]

What are the advantages of using a widget rather than the built-in graphic object?

[pink]

Honestly not sure if there is an advantage... I've been trying to replace more parts of my stacks with homemade widgets partially as a programming exercise, but also because it is can really clean up my scripts.

The game board is 37 hexagons, and to resize each one, and then position them properly relative to one another is quite a task and I haven't really gotten it to work well. (It is also perfectly plausible that I am overlooking some more simple method.)

In another app, I recreated a configurable Kanban/Scrum board as a widget, so instead of being a combination of fields and graphics that all needed to get resized and repositioned, it's now a single widget that resizes dynamically with the stack. Was hoping to do the same with the hex board.

[[-hh]]

(Just now remembered.) Here a LC Script stack that draws a hexagonal grid.
viewtopic.php?p=168657

being a very lazy person, I'd import a vector hexagon into a widget, then clone away like crazy and rotation would be dead easy.

This is mentally lazy, ignoring 4 lines of basic math (which is much more faster).

[richmond62]

This is mentally lazy

I know, I know: that was written while 5 kids were doing a 30 minute test this morning.