Curved text possible?

Getting into LiveCode for iOS? Ask your questions here.

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

williamdesmet
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 66
Joined: Tue Jun 26, 2012 7:07 pm

Curved text possible?

Post by williamdesmet » Wed Apr 27, 2022 4:11 pm

Hi There,

I am in the need for curved text.
User input via a text field need to have a copied curved text output.
Is this even possible in Livecode?
I was thinking of text to the points of a path? Something like that?


Greetings William

williamdesmet
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 66
Joined: Tue Jun 26, 2012 7:07 pm

Re: Curved text possible?

Post by williamdesmet » Wed May 18, 2022 9:25 am

I made an example with use of the browser widget
https://forums.livecode.com/viewtopic.php?f=120&t=37027

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Curved text possible?

Post by richmond62 » Wed May 18, 2022 9:57 am

Whoops:
-
Screen Shot 2022-05-18 at 11.56.36 AM.png
-
Mind you, it did seem relatively logical.
-
Screen Shot 2022-05-18 at 11.58.44 AM.png
Screen Shot 2022-05-18 at 11.58.44 AM.png (10.66 KiB) Viewed 6078 times

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Curved text possible?

Post by richmond62 » Wed May 18, 2022 10:19 am

Screen Shot 2022-05-18 at 12.17.54 PM.png
-
You may not be having much fun, but I'm having
a whale of a time. 8)

Removed stack as 'improved' version posted below.
Last edited by richmond62 on Wed May 18, 2022 12:16 pm, edited 1 time in total.

stam
Posts: 2634
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Curved text possible?

Post by stam » Wed May 18, 2022 11:41 am

The difference Richmond is that while the letters are positioned on a 'path', the letter orientation is always vertical in your solution.
@williamdesmet has posted an example above where the letters both follow a path and also change their orientation to be perpendicular to the path, by using the browser widget... that's pretty much the expected behaviour i think.

I guess you need to both position the glyph AND rotate it?

S.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Curved text possible?

Post by richmond62 » Wed May 18, 2022 11:49 am

The difference
Indeed; I am not as stupid as I look, and realise that to produce 'proper'
curved text my way you would have to mess around with the SINES and
COSINES to tilt the letter images.

As I stated: I was just having some fun: but, to be honest, the other way is more effective and
probably less labour-intensive. 8)

AND the letters are in reverse order. LOL.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Curved text possible?

Post by richmond62 » Wed May 18, 2022 12:15 pm

cheapThrills.jpg
cheapThrills.jpg (9.13 KiB) Viewed 6033 times
-
AND, as long as you are happy having letters with SHAGGY EDGES . . .
-
Screen Shot 2022-05-18 at 2.13.24 PM.png
Screen Shot 2022-05-18 at 2.13.24 PM.png (15.62 KiB) Viewed 6034 times
-
Removed stack as 'improved' version posted below.
Last edited by richmond62 on Thu May 19, 2022 5:41 pm, edited 1 time in total.

williamdesmet
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 66
Joined: Tue Jun 26, 2012 7:07 pm

Re: Curved text possible?

Post by williamdesmet » Wed May 18, 2022 4:29 pm

Nice Richmond!
I wish I knew math like you. It looks doable this way.
For now I am staying with the browser widget.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Curved text possible?

Post by richmond62 » Wed May 18, 2022 6:13 pm

I wish I knew math like you.
I find that hilarious for a number of reasons:

1. When it came to Calculus I folded up like a hedgehog under attack.

2. The Maths in that stack is so simple that it involves the sort of thing I learnt when I was about 13.

Code: Select all

on mouseUp
   put empty into fld "PTZ"
   put empty into fld "DEGZ"
   set the vis of grc "PP" to true
   put 1.57 into ZZ
   repeat until ZZ > 4.71
      put COS(ZZ) into COZ
      put SIN(ZZ) into SIZ
      put (SIZ * 100) + 200 into BSIZ
      put (COZ * 100) + 200 into BCOZ
      put (((ZZ - 1.57) * 100) + 1) into ZZ100
      put BSIZ & "," & BCOZ into line ZZ100 of fld "PTZ"
      put ((ZZ * 57.325) - 180) into line ZZ100 of fld "DEGZ"
      set the points of grc "PP" to fld "PTZ"
      add 0.1 to ZZ
   end repeat
   put fld "ff" into FX
   put 21 into LOX
   repeat until FX is empty
      put the last char of FX into fld "gg"
      delete the last char of FX
      import snapshot from fld "gg"
      put line LOX of fld "PTZ" into XYZ
      set the loc of the last control to XYZ
      put line LOX of fld "DEGZ" into ABC
      set the angle of the last control to ABC
      add 30 to LOX
   end repeat
   set the vis of grc "PP" to false
end mouseUp
While the results may look impressive the maths is really fairly basic: so, for those of you who think I'm a genius
let me disabuse you:

1. First of all I created a Polygon graphic which I named "PP".

All this code does is put a load of points into a scrolling list field and put those points into the points of the graphic "PP":

Code: Select all

put empty into fld "PTZ"
   put empty into fld "DEGZ"
   set the vis of grc "PP" to true
   put 1.57 into ZZ
   repeat until ZZ > 4.71
      put COS(ZZ) into COZ
      put SIN(ZZ) into SIZ
      put (SIZ * 100) + 200 into BSIZ
      put (COZ * 100) + 200 into BCOZ
      put (((ZZ - 1.57) * 100) + 1) into ZZ100
      put BSIZ & "," & BCOZ into line ZZ100 of fld "PTZ"
      put ((ZZ * 57.325) - 180) into line ZZ100 of fld "DEGZ"
      set the points of grc "PP" to fld "PTZ"
      add 0.1 to ZZ
   end repeat
1.1. It has been set up to make a crescent of points.

1.2. The first trick is to remember that 18 degrees = π radians, and, that as far as Richmond's limited Maths goes π = 3.14. :D

1.3 The second trick is to remember that the LiveCode developers 'start their clock' as 12 o'clock, and not at
9 o'clock: hence the start at π/2 and the finish at π * 1.5.

2. I took the word out of the field "ff" and popped it into a variable called FX:

Code: Select all

put fld "ff" into FX
3. I started "popping and chopping" letters from the end of FX into the field "gg" and taking snapshots
of those letters in that field:

Code: Select all

put the last char of FX into fld "gg"
      delete the last char of FX
      import snapshot from fld "gg"
then I moved the resulting snapshots to the points on my crescent:

Code: Select all

set the loc of the last control to XYZ
      put line LOX of fld "DEGZ" into ABC
      set the angle of the last control to ABC
I derived my angle ABC from working out that 180 / π = 57.325, so I multiplied
the radian value by 57.325 to get the angle value.

NO WAY can anyone describe that as fancy Maths. 8)

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Curved text possible?

Post by richmond62 » Wed May 18, 2022 6:20 pm

The most frightening thing about this is that, while the Bulgarian teenagers
I get to work with are perfectly capable of that sort of Mathematics
(and I would think even less of their education system than I do were they not),
they seem unable to do the sort of reasoning that I did this morning when I read
the original posting so that I was able to work out the code the way I did.

Theoretical knowledge is worth bugger all if it cannot then be applied when
it is required.

The teenagers seem almost unable to transfer skills from the classroom to real
situations.

They think that I am a genius because I managed to mix some cement and bung it in a hole in the ground:
-
Application.jpeg
-
They all know that if you mix cement with water it hardens . . .

RogGuay
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 114
Joined: Fri Apr 28, 2006 12:10 am
Location: Seattle

Re: Curved text possible?

Post by RogGuay » Thu May 19, 2022 6:22 am

Very nice, Richmond! This will be a lot of fun to play with. Thank you!

Roger

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Curved text possible?

Post by richmond62 » Thu May 19, 2022 7:48 am

You're welcome.

And if you can find a way to do away with the shaggy edges to the rotated images . . . 8)

stam
Posts: 2634
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Curved text possible?

Post by stam » Thu May 19, 2022 9:37 am

richmond62 wrote:
Thu May 19, 2022 7:48 am
And if you can find a way to do away with the shaggy edges to the rotated images . . . 8)
Very well done indeed. Trigonometry is a lost art to many (myself included!)
Re: jaggies - no idea if it would help, but would it make a difference if the field “gg” had text many times larger than required and then reduced in size with the at size sizeDescription extension, to provide a higher res pic?

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Curved text possible?

Post by richmond62 » Thu May 19, 2022 9:43 am

That seems a very good suggestion indeed.

BUT, it doesn't pan out, I'm afraid:
-
SShot 2022-05-19 at 12.09.51.png
-
The rotation is performed BEFORE the shrinkage.

Stack removed as upgraded version posted below.
Last edited by richmond62 on Thu May 19, 2022 12:09 pm, edited 1 time in total.

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

Re: Curved text possible?

Post by bn » Thu May 19, 2022 10:27 am

Richmond,

to improve the jaggies you could add resizeQuality

Code: Select all

import snapshot from fld "gg"
set the resizeQuality of the last control to "best" -- added
Furthermore clicking repeatedly on button "make curved text" stacks the images, I would remove remnants from previous attempts. They add to noise.

Kind regards
Bernd

Post Reply

Return to “iOS Deployment”