## Need to be pointed in the right direction(s)

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller

rstevenson
Posts: 11
Joined: Thu Oct 26, 2006 8:15 pm

### Need to be pointed in the right direction(s)

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

dunbarx
VIP Livecode Opensource Backer
Posts: 7314
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

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

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

rstevenson
Posts: 11
Joined: Thu Oct 26, 2006 8:15 pm

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

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.

Rob

dunbarx
VIP Livecode Opensource Backer
Posts: 7314
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

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

Rob.

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

Craig

Simon
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am
Location: Palo Alto

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

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
Attachments
Resize a rect in any direction.zip
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

rstevenson
Posts: 11
Joined: Thu Oct 26, 2006 8:15 pm

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

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

openworld
Posts: 63
Joined: Sat Sep 11, 2010 3:56 am
Location: Virginia, USA
Contact:

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

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

openworld
Posts: 63
Joined: Sat Sep 11, 2010 3:56 am
Location: Virginia, USA
Contact:

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

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

rstevenson
Posts: 11
Joined: Thu Oct 26, 2006 8:15 pm

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

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

bn
VIP Livecode Opensource Backer
Posts: 3461
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

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

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

openworld
Posts: 63
Joined: Sat Sep 11, 2010 3:56 am
Location: Virginia, USA
Contact:

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

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
Attachments

bn
VIP Livecode Opensource Backer
Posts: 3461
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

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

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

bn
VIP Livecode Opensource Backer
Posts: 3461
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

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

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

openworld
Posts: 63
Joined: Sat Sep 11, 2010 3:56 am
Location: Virginia, USA
Contact:

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

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...

and this --

Best,

Mark

bn
VIP Livecode Opensource Backer
Posts: 3461
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

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

Hi Mark,

after watching the videos all I can say: