LiveCode Forums.

Posted: **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.

Posted: **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

Posted: **Thu Jan 01, 2015 9:51 pm**

Hi Simon,

Thanks for your solution, it is very good

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

Posted: **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 244 times

Posted: **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?

Posted: **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.

Posted: **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 218 times

Posted: **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.

Posted: **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...

Posted: **Fri Jan 02, 2015 10:37 am**

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

Posted: **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 240 times

Posted: **Fri Jan 02, 2015 11:35 am**

Hi Dixie,

The best solution yet

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

Posted: **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

Posted: **Fri Jan 02, 2015 11:09 pm**

Hi Jim,

A nice solution

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

Posted: **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

LiveCode Forums.

Is it possible to animate a line

Is it possible to animate a line

Re: Is it possible to animate a line

Re: Is it possible to animate a line

Re: Is it possible to animate a line

Re: Is it possible to animate a line

Re: Is it possible to animate a line

Re: Is it possible to animate a line

Re: Is it possible to animate a line

Re: Is it possible to animate a line

Re: Is it possible to animate a line

Re: Is it possible to animate a line

Re: Is it possible to animate a line

Re: Is it possible to animate a line

Re: Is it possible to animate a line

Re: Is it possible to animate a line