LiveCode Forums

Posted: **Tue Jul 16, 2013 7:54 pm**

Hi,

I need some kind soul to point me towards whatever part of this forum I'll need to review to get hints on how to do the following...

1. Draw a triangle (or quadrilateral) which the user can manipulate by dragging any of the corners to resize/reshape it.

2. Have a circumcircle of the triangle automatically drawn and updated as the triangle changes shape. (A circumcircle is a circle which passes through all 3 vertices of the triangle.) I need the circumcircle to update continuously as the triangle is resized, not just after the resize is over.

So I'm guessing I'll need to read up on drawing graphics, math libraries, and interactivity.

I'm an old hand at HyperCard but haven't used any version of Rev/LiveCode so my skills are rusty but not invisible. I'll be working in the OS X version of LiveCode Community v6.1.

Thanks

Rob

Posted: **Tue Jul 16, 2013 8:21 pm**

Hi.

Welcome to the new world. I started with HC in '87.

Well if you draw an equilateral triangle, the distance from its center to one of its vertices is in the ratio of 1/sqrt(3). That would be the radius of your circle. You can set the centers of those objects to each other.

Note that the number of sides of a polygon is a property of that polygon, so you can make triangles all day by making polygons with three sides. Check out the style "regular" for graphics.

Craig Newman

Posted: **Wed Jul 17, 2013 1:46 am**

Thanks Craig,

I'll need to think of a way to pin the circle to the vertices, since I want the user to be able to change the shape of the triangles at will. I likely need to explore the geometry of circumcircles to see how they're calculated, and then write a routine to do that in my stack -- Oops! project.

Thanks for the tip about polygons. I'll have to do some exploring of graphics I guess.

I found two sample projects: "fun sliders", and "Randomize Animation". These two should help me to see what's involved.

Lots of fun ahead!

Rob

Posted: **Wed Jul 17, 2013 5:14 am**

Rob.

LC is no CAD program.

But three points define any circle. There are a couple of ways to determine the equation of a circle from three points, and I think for LC the best way is to consider that a circumscribed circle and triangle pair are connected in that the sides of the triangle are also chords of the circle. So you can construct the perpendicular bisector of any two of those sides, and where they cross will be the center of your circle. The distance from that center to any of the vertices will be the radius.

Note that the "points" function will not work with a regular polygon. At least I do not see it working, and need to find out about that. But it will work with a freehand polygon, and this can be set up as a triangle, by defining four points, as in:

120,120
180,120
200,200
120,120

Write back with your progress.

Craig

Posted: **Wed Jul 17, 2013 5:38 am**

Hi Rob,
I downloaded a stack maybe a month ago but I can't find the original post.
I'd very much like to give credit to the author.
Maybe it will help:

Simon

Posted: **Wed Jul 17, 2013 3:06 pm**

Thanks folks, for the hints and also for the sample stack. I can see I'm digging myself a fairly deep hole here, but it'll be a great way to get back up to speed on programming.

Rob

Posted: **Thu Aug 01, 2013 4:28 am**

Hello all,

I'm also a long-time Hypercard/Supercard scripter, now eager to use Livecode for an open source app.

The aim of the app is to help people visualize narratives, based on a (hopefully!) universal fractal storyline pattern.

The main challenge now is drawing and grouping equilateral triangles that map to the following narrative elements:

- Attractor
- Challenge
- Opportunity (a state change to resolve the tension)
- Strategy
- Test
- Decision

Each of the six elements above will be shown in the app as an equilateral triangle. Each element, in turn, will be associated with a distinctive color – yellow, red, orange, purple, blue, or green.

I'd love for a Livecode script to draw six triangles that fit together – much like pie slices – to form a hexagon that represents the whole narrative.

The transparency (blendlevel) of each colored segment will indicate the degree to which the story's author(s) – or invited reviewers – considers that element of the story to be complete.

My hope is to come up with a script in Livecode that will:

- rapidly draw six triangles to form a hexagonal shape

- fill each triangle with its associated color (each color will have an initial blendlevel of an almost transparent 90 percent)

- assign a unique short name to each of the six triangles, based on the name of its fill color

- group the six triangles so that they can be dragged together to new locations on the screen.

Are there any scripts (or chunks) that can help on this? Deeply appreciate any sample code or links to help shorten my Livecode learning curve.

Best,

Mark Frazier

Posted: **Fri Aug 02, 2013 11:15 pm**

I've just found and adapted a great polygon-generating script by Lloyd Rieber of the University of Georgia –– it rapidly creates and fills in a hexagon.

Is there a way to tweak the script below, so that it will generate an equilateral triangle that can then be copied (in "pie slice" fashion) six times to fill out the hexagon, as described in the above comment?

on mouseUp
global tpoints
if exists(grc "HexagonCanvas" of this card) then delete grc "HexagonCanvas"
lock screen
create grc "HexagonCanvas"
set the loc of grc "HexagonCanvas" to "140,140"
set the opaque of grc "HexagonCanvas" to true
-- resize the new grc
get the rect of grc "HexagonCanvas"
add 80 to item 4 of it
set the rect of grc "HexagonCanvas" to it
put the topleft of grc "HexagonCanvas" into TL
put the topright of grc "HexagonCanvas" into TR
put the bottomleft of grc "HexagonCanvas" into BL
put the bottomright of grc "HexagonCanvas" into BR
put the width of grc "HexagonCanvas" into twidth
put the height of grc "HexagonCanvas" into theight
put trunc(twidth/4) into twidthquart
put trunc(theight/2) into theighthalf
#=========set the points for the "free" hexagon polygon==================
put empty into tpoints
put (item 1 of TL + twidthquart, item 2 of TL) into tpoints
# for the first line of tpoints "put into"
put Cr& (item 1 of TL, item 2 of TL + theighthalf) after tpoints
put CR& (item 1 of BL + twidthquart, item 2 of BL) after tpoints
put CR& (item 1 of BR - twidthquart, item 2 of BR) after tpoints
put Cr& (item 1 of BR, item 2 of BR - theighthalf) after tpoints
put CR& (item 1 of TR - twidthquart, item 2 of TR) after tpoints
put CR& (item 1 of TL + twidthquart, item 2 of TL) after tpoints
set the points of grc "HexagonCanvas" to tpoints
set the style of grc "HexagonCanvas" to "polygon"
set the backgroundColor of grc "HexagonCanvas" to blue
set the blendlevel of grc "HexagonCanvas" to "60"
choose browse tool
end mouseup

Posted: **Sat Aug 03, 2013 12:04 am**

I haven't tried this, but I think it will get you started in the right direction.

Draw one triangle and fill it with a colour. Since you want a hexagon made of six of them, the triangles will be equilateral and the angles will all be 60°

Now draw the other five similarly, but using different colours.

Each of them will need to share a common vertex, which will be the center of the hexagon. So set the location of one vertex of each of them to that point. Now to spread them around...

Set one side (for convenience we'll call this side A) of one triangle to 0° rotation, using the revRotatePoly command. Then rotate another triangle so that its side A is at 60°, and another so its side A is at 120°, and so on. The final one will slide into place and close the hexagon -- I hope.

(In thinking about this, I wonder if the triangles will rotate about their individual centers, not about their common point. If so, do the rotations before setting a particular point of each to their common center.)

Let me know how this works. I'll need to do something similar shortly, but don't have the time to work it out in detail at the moment.

Rob

Posted: **Sat Aug 03, 2013 3:03 am**

Hi Mark,

here is an adaption of the script you found to make 6 triangles

Code: Select all

on mouseUp
   
   lock screen
   put "240,340" into tLoc -- set the location = the center of the hexagon
   put item 1 of tLoc into tXLoc
   put item 2 of tLoc into tYLoc
 
   put 256 into tWidth -- change dimensions here, change only width, height is calculated
   put trunc(tWidth * 0.875) into tHeight
   
   put trunc(twidth/4) into twidthquart
   put trunc(theight/2) into theighthalf
   put trunc (tWidth/2) into tWidthhalf
   put tXLoc - tWidthhalf,  tYLoc - tHeightHalf into TL
   put tXLoc + tWidthhalf,tYLoc - theighthalf into TR
   put tXLoc - twidthhalf,tYLoc + theighthalf into BL
   put tXLoc + tWidthHalf,tYLoc + tHeightHalf into BR
   
   -- create points of first graphic
   put (item 1 of TL + twidthquart, item 2 of TL) into tpoints1
   put Cr& (item 1 of TL, item 2 of TL + theighthalf) after tpoints1
   put CR& tLoc after tPoints1
   put CR& (item 1 of TL + twidthquart, item 2 of TL) after tpoints1
   
   -- create points of second graphic
   put (item 1 of TL, item 2 of TL + theighthalf) into tpoints2
   put CR& (item 1 of BL + twidthquart, item 2 of BL) after tpoints2
   put CR& tLoc after tPoints2
   put CR& (item 1 of TL, item 2 of TL + theighthalf) after tpoints2
   
   -- create points of third graphic
   put (item 1 of BL + twidthquart, item 2 of BL) into tpoints3
   put CR& (item 1 of BR - twidthquart, item 2 of BR) after tpoints3
   put CR& tLoc after tPoints3
   put CR& (item 1 of BL + twidthquart, item 2 of BL)  after tPoints3
   
   -- create points of graphic 4
   put (item 1 of BR - twidthquart, item 2 of BR) into tpoints4
   put CR& (item 1 of BR, item 2 of BR - theighthalf) after tpoints4
   put CR& tLoc after tpoints4
   put CR& (item 1 of BR - twidthquart, item 2 of BR) after tpoints4
   
   -- create points of graphic 5
   put (item 1 of BR, item 2 of BR - theighthalf) into tpoints5
   put CR& (item 1 of TR - twidthquart, item 2 of TR) after tpoints5
   put CR& tLoc after tPoints5
   put CR& (item 1 of BR, item 2 of BR - theighthalf) after tpoints5
   
   -- create points of graphic 6
   put (item 1 of TR - twidthquart, item 2 of TR) into tpoints6
   put CR& (item 1 of TL + twidthquart, item 2 of TL) after tPoints6
   put CR& tLoc after tPoints6
   put CR&  (item 1 of TR - twidthquart, item 2 of TR) after tPoints6
   
   reset the templateGraphic
   set the style of the templateGraphic to polygon
   set the opaque of the templateGraphic to true
   set the showName of the templateGraphic to true
   set the blendlevel of the templateGraphic to 20
   
   set the backgroundColor of the templateGraphic to "blue" -- assign color
   set the points of the templateGraphic to tPoints1
   create graphic "blue" -- assign name
   
   set the backgroundColor of the templateGraphic to "green"
   set the points of the templateGraphic to tPoints2
   create graphic "green"
   
   set the backgroundColor of the templateGraphic to "yellow"
   set the points of the templateGraphic to tPoints3
   create graphic "yellow"
   
   set the backgroundColor of the templateGraphic to "red"
   set the points of the templateGraphic to tPoints4
   create graphic "red"
   
   set the backgroundColor of the templateGraphic to "azure"
   set the points of the templateGraphic to tPoints5
   create graphic "azure"
   
   set the backgroundColor of the templateGraphic to "hotpink"
   set the points of the templateGraphic to tPoints6
   create graphic "hotpink"
end mouseup

to move the 6 triangles you select them all then group them and set the script of the group to

Code: Select all

on mouseDown
   grab me
end mouseDown

kind regards
Bernd

Posted: **Sat Aug 03, 2013 7:34 pm**

Bernd and Rob,

Deepest appreciation for all your care and insights!

Bernd, your script is just elegant and works amazingly -- so much so, that it almost immediately created (after nominal tweaking) a perfectly concentric, stacked display of storyline elements.

The speed and quality of the result is visible in the screenshot attached. To create it, I had your script cycle through four times with hexagon dimensions set at 80, 160, 240, and 320 pixels respectively in the "put __ into tWidth" line of the script.

After the rush of elation, I began testing some blendlevel changes for designated triangles. That's when a new challenge arose.

The Apprecian storymaking app will seek to use blendlevels to signal which segments of a project are most in need of inputs/improvements by team members. Yet I discovered that stacking of triangles produced by the slightly modified hexagon creation script also changes the intended blendlevel. When I set a targeted triangle's blendlevel to 90 (to convey that a segment definitely needs inputs/improvements), that triangle would appear far more saturated than hoped for, because triangles in the lower layers showed through.

I'm hoping there can be a solution.

Is there a way to script creation of regular trapezoids, coinciding with edgepoints where the concentric hexagons are now intersecting?

As far as I can figure, a baseline equilateral triangle measuring 160 pixels on every side (allowing for 40 pixel trapezoidal sides on each spoke from the hexagon's center) would make it possible to:

- take the height of the baseline triangle (its apex height is 138.564065 pixels when measured from its base leg) and divide by four to create each trapezoid's height from its base, and

- generate three distinct trapezoids per original triangle (as shown in the screenshot).

Once the trapezoids for a given triangle were created, I'm hoping they could be duplicated to fill out the pie slices of the hexagon.

Or would there be a more elegant solution, perhaps with masking or cropping of the existing triangles?

In any scenario, I do hope there's a way for any graphic element in the storymaking pattern to visually communicate (via blendlevel) its status and readiness for improvement.

Hoping there may be an answer –- it's a very exciting prospect, if there is a solution, to speed cocreation of narratives and projects!

Best,

Mark

Posted: **Sat Aug 03, 2013 9:28 pm**

Hi Mark,

I don't understand what exactly you want to do.

Lets look at one segment of the hexagon. It is now made up by 4 triangles that overlap. What I don't understand is: do you need to set the blendlevel of the four individually? I.e. The innermost could have a different blendlevel from the next one and that has meaning in you diagram? E.g. the innermost could be lighter than the next one? Do you really need blendlevel to let something shine through or are you interested in the color shades.

There are certainly solutions for all this but I just don't understand the working of your Hexagon.

Kind regards
Bernd

Posted: **Sat Aug 03, 2013 11:07 pm**

Hi Mark,

here is a version of the hexagon that uses triangles only for the innermost elements. The rest is trapezoids.
So now there is no overlap in blendlevels.

See if that suits you

Code: Select all

local sLastTop1, sLastTop2, sLastTop3, sLastTop4, sLastTop5, sLastTop6

on mouseUp
   
   lock screen
   put "240,340" into tLoc -- set the location = the center of the hexagon
   
   put "80,160,240,320" into tDiameters
   
   put item 1 of tDiameters into tWidth
   
   put item 1 of tLoc into tXLoc
   put item 2 of tLoc into tYLoc
   
   put trunc(tWidth * 0.875) into tHeight
   
   put trunc(twidth/4) into twidthquart
   put trunc(theight/2) into theighthalf
   put trunc (tWidth/2) into tWidthhalf
   put tXLoc - tWidthhalf,  tYLoc - tHeightHalf into TL
   put tXLoc + tWidthhalf,tYLoc - theighthalf into TR
   put tXLoc - twidthhalf,tYLoc + theighthalf into BL
   put tXLoc + tWidthHalf,tYLoc + tHeightHalf into BR
   
   -- create points of first graphic
   put (item 1 of TL + twidthquart, item 2 of TL) into tpoints1
   put Cr& (item 1 of TL, item 2 of TL + theighthalf) after tpoints1
   put CR& tLoc after tPoints1
   put CR& (item 1 of TL + twidthquart, item 2 of TL) after tpoints1
   put line 2 of tPoints1 & cr & line 1 of tPoints1 into tLastTop1
   
   -- create points of second graphic
   put (item 1 of TL, item 2 of TL + theighthalf) into tpoints2
   put CR& (item 1 of BL + twidthquart, item 2 of BL) after tpoints2
   put CR& tLoc after tPoints2
   put CR& (item 1 of TL, item 2 of TL + theighthalf) after tpoints2
   put line 2 of tPoints2 & cr & line 1 of tPoints2 into tLastTop2
   
   -- create points of third graphic
   put (item 1 of BL + twidthquart, item 2 of BL) into tpoints3
   put CR& (item 1 of BR - twidthquart, item 2 of BR) after tpoints3
   put CR& tLoc after tPoints3
   put CR& (item 1 of BL + twidthquart, item 2 of BL)  after tPoints3
   put line 2 of tPoints3 & cr & line 1 of tPoints3 into tLastTop3
   
   -- create points of graphic 4
   put (item 1 of BR - twidthquart, item 2 of BR) into tpoints4
   put CR& (item 1 of BR, item 2 of BR - theighthalf) after tpoints4
   put CR& tLoc after tpoints4
   put CR& (item 1 of BR - twidthquart, item 2 of BR) after tpoints4
   put line 2 of tPoints4 & cr & line 1 of tPoints4 into tLastTop4
   
   -- create points of graphic 5
   put (item 1 of BR, item 2 of BR - theighthalf) into tpoints5
   put CR& (item 1 of TR - twidthquart, item 2 of TR) after tpoints5
   put CR& tLoc after tPoints5
   put CR& (item 1 of BR, item 2 of BR - theighthalf) after tpoints5
   put line 2 of tPoints5 & cr & line 1 of tPoints5 into tLastTop5
   
   -- create points of graphic 6
   put (item 1 of TR - twidthquart, item 2 of TR) into tpoints6
   put CR& (item 1 of TL + twidthquart, item 2 of TL) after tPoints6
   put CR& tLoc after tPoints6
   put CR&  (item 1 of TR - twidthquart, item 2 of TR) after tPoints6
   put line 2 of tPoints6 & cr & line 1 of tPoints6 into tLastTop6
   
   reset the templateGraphic
   set the style of the templateGraphic to polygon
   set the opaque of the templateGraphic to true
   -- set the showName of the templateGraphic to true
   set the blendlevel of the templateGraphic to 80
   
   set the backgroundColor of the templateGraphic to "blue" -- assign color
   set the points of the templateGraphic to tPoints1
   create graphic "blue" -- assign name
   
   set the backgroundColor of the templateGraphic to "green"
   set the points of the templateGraphic to tPoints2
   create graphic "green"
   
   set the backgroundColor of the templateGraphic to "yellow"
   set the points of the templateGraphic to tPoints3
   create graphic "yellow"
   
   set the backgroundColor of the templateGraphic to "red"
   set the points of the templateGraphic to tPoints4
   create graphic "red"
   
   set the backgroundColor of the templateGraphic to "azure"
   set the points of the templateGraphic to tPoints5
   create graphic "azure"
   
   set the backgroundColor of the templateGraphic to "hotpink"
   set the points of the templateGraphic to tPoints6
   create graphic "hotpink"
   
   repeat with j = 2 to 4
      
      put item j of tDiameters into tWidth
      
      put item 1 of tLoc into tXLoc
      put item 2 of tLoc into tYLoc
      
      put trunc(tWidth * 0.875) into tHeight
      
      put trunc(twidth/4) into twidthquart
      put trunc(theight/2) into theighthalf
      put trunc (tWidth/2) into tWidthhalf
      put tXLoc - tWidthhalf,  tYLoc - tHeightHalf into TL
      put tXLoc + tWidthhalf,tYLoc - theighthalf into TR
      put tXLoc - twidthhalf,tYLoc + theighthalf into BL
      put tXLoc + tWidthHalf,tYLoc + tHeightHalf into BR
      
      
      -- create points of first graphic
      put (item 1 of TL + twidthquart, item 2 of TL) into tpoints1
      put Cr& (item 1 of TL, item 2 of TL + theighthalf) after tpoints1
      put CR& tLastTop1 after tPoints1
      put CR& (item 1 of TL + twidthquart, item 2 of TL) after tpoints1
      put line 2 of tPoints1 & cr & line 1 of tPoints1 into tLastTop1
      
      -- create points of second graphic
      put (item 1 of TL, item 2 of TL + theighthalf) into tpoints2
      put CR& (item 1 of BL + twidthquart, item 2 of BL) after tpoints2
      put CR& tLastTop2 after tPoints2
      put CR& (item 1 of TL, item 2 of TL + theighthalf) after tpoints2
      put line 2 of tPoints2 & cr & line 1 of tPoints2 into tLastTop2
      
      -- create points of third graphic
      put (item 1 of BL + twidthquart, item 2 of BL) into tpoints3
      put CR& (item 1 of BR - twidthquart, item 2 of BR) after tpoints3
      put CR& tLastTop3 after tPoints3
      put CR& (item 1 of BL + twidthquart, item 2 of BL)  after tPoints3
      put line 2 of tPoints3 & cr & line 1 of tPoints3 into tLastTop3
      
      -- create points of graphic 4
      put (item 1 of BR - twidthquart, item 2 of BR) into tpoints4
      put CR& (item 1 of BR, item 2 of BR - theighthalf) after tpoints4
      put CR& tLastTop4 after tPoints4
      put CR& (item 1 of BR - twidthquart, item 2 of BR) after tpoints4
      put line 2 of tPoints4 & cr & line 1 of tPoints4 into tLastTop4
      
      -- create points of graphic 5
      put (item 1 of BR, item 2 of BR - theighthalf) into tpoints5
      put CR& (item 1 of TR - twidthquart, item 2 of TR) after tpoints5
      put CR& tLastTop5 after tPoints5
      put CR& (item 1 of BR, item 2 of BR - theighthalf) after tpoints5
      put line 2 of tPoints5 & cr & line 1 of tPoints5 into tLastTop5
      
      -- create points of graphic 6
      put (item 1 of TR - twidthquart, item 2 of TR) into tpoints6
      put CR& (item 1 of TL + twidthquart, item 2 of TL) after tPoints6
      put CR& tLastTop6 after tPoints6
      put CR&  (item 1 of TR - twidthquart, item 2 of TR) after tPoints6
      put line 2 of tPoints6 & cr & line 1 of tPoints6 into tLastTop6
      
      
      
      set the backgroundColor of the templateGraphic to "blue" -- assign color
      set the points of the templateGraphic to tPoints1
      create graphic ("blue" & j )-- assign name
      
      set the backgroundColor of the templateGraphic to "green"
      set the points of the templateGraphic to tPoints2
      create graphic ("green" & j)
      
      set the backgroundColor of the templateGraphic to "yellow"
      set the points of the templateGraphic to tPoints3
      create graphic ("yellow" & j)
      
      set the backgroundColor of the templateGraphic to "red"
      set the points of the templateGraphic to tPoints4
      create graphic ("red" & j)
      
      set the backgroundColor of the templateGraphic to "azure"
      set the points of the templateGraphic to tPoints5
      create graphic ("azure" & j)
      
      set the backgroundColor of the templateGraphic to "hotpink"
      set the points of the templateGraphic to tPoints6
      create graphic ("hotpink" & j)
      
   end repeat
   reset the templateGraphic -- lets be nice and clean up
end mouseup

Kind regards
Bernd

Posted: **Sat Aug 03, 2013 11:45 pm**

Bernd,

I'm awestruck -- the trapezoids are perfect!!!

I'll work on putting some of the key functions in place, and upload a stack that shows how the story co-creation can work with a sample project.

Again, heartfelt thanks for the lift you've provided. It feels like the difference between this...

- https://www.youtube.com/watch?v=k452b48lmKA

and this --

- https://www.youtube.com/watch?feature=p ... 2UBEv8&t=4

Best,

Mark

Posted: **Sun Aug 04, 2013 9:10 pm**

Hi Mark,

after watching the videos all I can say:

please be careful

Come home safely...

Kind regards
Bernd

LiveCode Forums

Need to be pointed in the right direction(s)

Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)

Re: Need to be pointed in the right direction(s)