Is it possible to animate a line

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: FourthWorld, heatherlaine, Klaus, kevinmiller

uelandbob
Posts: 72
Joined: Mon Dec 29, 2014 3:28 pm

Is it possible to animate a line

Post by uelandbob » Thu Jan 01, 2015 4:29 pm

Is it possible to draw a line in LC from a point A (say 100,100) to a point B (say 200,200) in a certain time (say 1 second)

So this animation should start as a single point at point A, and then grow as a line until it reaches point B after 1 second.
uelandbob@gmail.com

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

Re: Is it possible to animate a line

Post by Simon » Thu Jan 01, 2015 8:33 pm

Code: Select all

local amActive,tCount
on mouseUp
   put true into amActive
   put 0 into tCount
   growLine
end mouseUp

command growLine
   if amActive = true then 
      add 1 to tCount
      set the points of grc 1 to 100,100 & cr & (100 + tCount),100
      if tCount >= 100 then put false into amActive
      send growLine to me in 20 millisec
   end if
end growLine
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

uelandbob
Posts: 72
Joined: Mon Dec 29, 2014 3:28 pm

Re: Is it possible to animate a line

Post by uelandbob » Thu Jan 01, 2015 9:51 pm

Hi Simon,

Thanks for your solution, it is very good :D

I had to tweak it though. It was very difficult to get any precision in the when it came to timing (I am used to program with Cocoa and iOS and LC is VERY SLOW in comparison) . On the one hand we want many points, but on the other hand the line segments can't be to long otherwise the frames per second will be too low and the animation will look choppy. Any how here is my tweak

Code: Select all

local amActive, tCount

on mouseUp
   put true into amActive
   put 0 into tCount
   put the tick
   growLine
end mouseUp

command growLine
   if amActive = true then 
      add 1 to tCount
      set the points of graphic "Line" to 100,100 & cr & (100 + 1.5*tCount),(100 +1.5* tCount)
      if tCount >= 60 then put false into amActive
      send growLine to me in 1 ticks
   else
      put cr after msg
      put the ticks after msg
   end if
end growLine
I also added this line in the message box so I could reset the whole thing and test a new

Code: Select all

 set the points of graphic "Line" to 100,100 & cr & 100,100
uelandbob@gmail.com

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 10102
Joined: Fri Feb 19, 2010 10:17 am

Re: Is it possible to animate a line

Post by richmond62 » Thu Jan 01, 2015 10:31 pm

That seems a bit complicated to me.

I made a stack with a graphic "LYNE" and a very simple script:

on mouseUp
put 1 into KK
repeat until KK=680
set the width of grc "LYNE" to (100 + KK)
set the left of grc "LYNE" to 10
wait 2 ticks
add 1 to KK
end repeat
end mouseUp
linear.livecode.zip
(663 Bytes) Downloaded 245 times
Last edited by richmond62 on Fri Jan 02, 2015 8:47 am, edited 1 time in total.

uelandbob
Posts: 72
Joined: Mon Dec 29, 2014 3:28 pm

Re: Is it possible to animate a line

Post by uelandbob » Thu Jan 01, 2015 11:02 pm

Thanks for your solution richmond62

Is it possible to draw a line with your method from point 100,100 to point 200,200 in 1 second?
uelandbob@gmail.com

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 10102
Joined: Fri Feb 19, 2010 10:17 am

Re: Is it possible to animate a line

Post by richmond62 » Fri Jan 02, 2015 9:17 am

One possible problem I can see there is that a 'tick' is a sixtieth of a second, and what you
really need to effect that is someway of measuring hundredths of seconds.

I would be inclined to use milliseconds.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 10102
Joined: Fri Feb 19, 2010 10:17 am

Re: Is it possible to animate a line

Post by richmond62 » Fri Jan 02, 2015 9:25 am

Easy:

on mouseUp
set the width of grc "LYNE" to 1
set the topleft of grc "LYNE" to 100,100
put 1 into KK
repeat until KK=100
set the width of grc "LYNE" to (KK)
set the left of grc "LYNE" to 100
wait 10 milliseconds
add 1 to KK
end repeat
end mouseUp
linear_2.livecode.zip
(678 Bytes) Downloaded 219 times

uelandbob
Posts: 72
Joined: Mon Dec 29, 2014 3:28 pm

Re: Is it possible to animate a line

Post by uelandbob » Fri Jan 02, 2015 9:47 am

Thanks for your answer richmond62

but when I run your stack it draws a line from 100,100 to 200,100, not to 200,200 as I need. Is it possible to modify your script so that line is drawn i other direction than horizontal?

Also when I run your code it takes more then one second to draw the line.
uelandbob@gmail.com

Dixie
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 1336
Joined: Sun Jul 12, 2009 10:53 am

Re: Is it possible to animate a line

Post by Dixie » Fri Jan 02, 2015 10:25 am

Hi...

Code: Select all

on mouseUp
   if there is a graphic "lineTest" then
      delete graphic "lineTest"
   end if
   
   set the name of the templateGraphic to "lineTest"
   set the style of the templateGraphic to "line"
   set the linesize of the templateGraphic to 6
   set the points of the templateGraphic to 100,100 & cr & 100,100
   create graphic
   
   --put the millisecs into tStart
   repeat with count = 100 to 200 step 2
      set the points of grc 1 to 100,100 & cr & count & comma & count
   end repeat
   
   --put "It took" && the millisecs - tStart && "milisecs to draw the line"
end mouseUp
You can work on the timing... :-)
Attachments
animateLine.livecode.zip
(1.06 KiB) Downloaded 217 times
Last edited by Dixie on Fri Jan 02, 2015 11:25 am, edited 1 time in total.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 10102
Joined: Fri Feb 19, 2010 10:17 am

Re: Is it possible to animate a line

Post by richmond62 » Fri Jan 02, 2015 10:37 am

I'm sorry, my stack takes 1000 milliseconds, which SHOULD be 1 second.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 10102
Joined: Fri Feb 19, 2010 10:17 am

Re: Is it possible to animate a line

Post by richmond62 » Fri Jan 02, 2015 10:47 am

No sooner said than done:

on mouseUp
set the points of grc "LYNE" to 100,100,100,100
set the topleft of grc "LYNE" to 100,100
put 1 into KK
repeat until KK=100
set the points of grc "LYNE" to 100,100,(KK+100),(KK+100)
wait 10 milliseconds
add 1 to KK
end repeat
end mouseUp

As you should be able to see, I use a LINE GRAPHIC here rather than the RECTANGULAR GRAPHIC I used in
my earlier offering.
linear_3.livecode.zip
(703 Bytes) Downloaded 241 times

uelandbob
Posts: 72
Joined: Mon Dec 29, 2014 3:28 pm

Re: Is it possible to animate a line

Post by uelandbob » Fri Jan 02, 2015 11:35 am

Hi Dixie,

The best solution yet :) :D

The timing is controlled by the step size in the repeat lop. With step size of 1 I get 1.6 seconds and with step size of 2 I get 0.85 seconds.

When I click on the button a small dot appeared in the upper left corner. I had to insert a set lockScreen (see code below) to make it go away.

Code: Select all

on mouseUp
    set lockScreen to true
   if there is a graphic "lineTest" then
      delete graphic "lineTest"
   end if
   
   set the name of the templateGraphic to "lineTest"
   set the style of the templateGraphic to "line"
   set the linesize of the templateGraphic to 6
   set the points of the templateGraphic to 100,100 & cr & 100,100
   
   create graphic
   set lockScreen to false
      
   put the millisecs into tStart
   repeat with count = 100 to 200 step 4
      set the points of grc 1 to 100,100 & cr & count & comma & count
   end repeat
      
   put "It took" && the millisecs - tStart && "milisecs to draw the line"
end mouseUp
uelandbob@gmail.com

jiml
Posts: 339
Joined: Sat Dec 09, 2006 1:27 am

Re: Is it possible to animate a line

Post by jiml » Fri Jan 02, 2015 10:25 pm

Would something like this work for you?

Code: Select all

on mouseUp
   choose graphic tool
   set the dragSpeed to 100
   set the style of the templateGraphic to "line"
   drag from 100,100 to 200,200
end mouseUp
Jim Lambert

uelandbob
Posts: 72
Joined: Mon Dec 29, 2014 3:28 pm

Re: Is it possible to animate a line

Post by uelandbob » Fri Jan 02, 2015 11:09 pm

Hi Jim,

A nice solution :D . Could you also draw a circle with your method? The app I had in mind was animating Euclides Elements and for that I need to animate three things (points, lines and circles)
uelandbob@gmail.com

jiml
Posts: 339
Joined: Sat Dec 09, 2006 1:27 am

Re: Is it possible to animate a line

Post by jiml » Fri Jan 02, 2015 11:36 pm

This will draw a circle that 'grows'.

Code: Select all

on mouseUp
   choose graphic tool
   set the dragSpeed to 100
   set the style of the templateGraphic to "oval"    
   drag from 100,100 to 200,200   
   reset the templategraphic
   choose browse tool
end mouseUp
This will 'trace' a circle

Code: Select all

on mouseUp
   if there is a graphic "myGraphic" then delete grc "myGraphic"
   create invisible graphic "myGraphic"
   set the style of graphic "myGraphic" to oval
   set the rect of graphic "myGraphic" to 100,100,200,200
   set the startangle of graphic "myGraphic" to 90
   set the arcangle of graphic "myGraphic" to 0
   show graphic "myGraphic"
   repeat with ang = 0 to 360 step 5
      set the arcangle of graphic "myGraphic" to ang
   end repeat
end mouseUp

Post Reply