LiveCode Forums.

Posted: **Sat Nov 16, 2013 12:52 pm**

As you can see, this is made up of a number of graphic circles, then on top of each circle is a button(blend level is at 100) that draws a line from the location of the circle below it to a the location of a random circle.

I would like to make it a bit more interesting by animating the location of the circles/buttons (the buttons need to remain on top of the circles to i'm guessing I would group them?)

I want the dots to look like they are floating, so I want to add some random, slow movement but I don't want them to overlap.

Any thoughts on the best way to go about doing this?

Thanks

EDIT:

I've started experimenting and I have come across a few issues using this code:

Code: Select all

on mouseUp
   put 100,110 & return & 150,200 & return & 20,400 & return & 200,20 & return & 250,300 into PList
   set the moveSpeed to 20
    move group "testgroup" to Plist
end mouseUp

1. The "testgroup" stops each time the line is shown - I want continuous movement with the line moving with the group as well.
2. I still can't figure out how to get random floating motion

I thought about moving each of the dots/buttons along a path, I don't know if it is possible to generate a random curve (a closed shape so that it can loop).

Posted: **Sat Nov 16, 2013 5:27 pm**

Hi,

A couple of points. (ugh, pun?)

1- Why have a button locked above the circle graphic? A graphic is a perfectly ordinary object, which can have a script and respond to, say, mouseUp events. You can lose all those buttons, and the management will be simpler.

2- Draw a freehand curve. Name it "F1". Write, in one of your circle graphic scripts (as per #1 above):

Code: Select all

on mouseUp
   set the moveSpeed to 20
    move me to the points of grc "F1"
end mouseUp

Homework: Can you take this single handler to the card level and modify it with the "target" function to cover all the circles?

3- Read up on the "intersect" function. This has the power to prevent any circle from overlaying another. This will take some practice, but you will be well served for the effort. There are several recent threads here that deal with just this. Search "intersect" in this forum.

4- Is it that you want the lines to track the circles as they move? Nice effect if so, and simple. Do try to make this happen.

5- Did you draw the lines by hand in your example? Do try to make this happen under script control, using the "points" of a line graphic. Now what would those points be set to?

Write back often. This should be fun...

Craig Newman

Posted: **Sat Nov 16, 2013 7:14 pm**

..........

Posted: **Sat Nov 16, 2013 9:47 pm**

Hi, both your answers have been useful but I am struggling to work out how to

track the circles as they move

. I can get the line to join the locations of 2 circles however, as soon as they start to move the line stays still.

Also, Craig - Do you mean I can just transfer the mouseUp script from each of the buttons into the script of the dots and then delete the buttons?

Thanks again

Callum

Posted: **Sat Nov 16, 2013 10:07 pm**

Do you mean I can just transfer the mouseUp script from each of the buttons into the script of the dots and then delete the buttons?

Exactly. There is nothing special about a button and a "mouseUp" event, in spite of how common and natural that relationship is. I hope you know what I mean.

As the circles move, reset the points of the line to the locs of the circles. This has to be updated as the circles change position.

Craig

EDIT:

I would be very interested in seeing how you marry a particular line to its circle pairs. By a naming convention that naturally includes the associated circles? Or the other way around, that includes the associated line? If you think about this, a great deal of coding might be simplified if there was a natural way to reference these "married" objects to each other, since they will need to track each others locs on the fly.

Posted: **Sat Nov 16, 2013 10:25 pm**

I would be very interested in seeing how you marry a particular line to its circle pairs. By a naming convention that naturally includes the associated circles? Or the other way around, that includes the associated line? If you think about this, a great deal of coding might be simplified if there was a natural way to reference these "married" objects to each other, since they will need to track each others locs on the fly.

If I understand you correctly, the way I am marrying a line to its circle pairs is as follows:

Code: Select all

repeat with y = 1 to 27
      put y into line y of temp
   end repeat
   sort temp by random(10000) 
   
   repeat with y = 1 to 27
   set the points of graphic "Line 5" to the loc of graphic "tCircle5" & return & the loc of graphic ("tCircle" &  line y of temp)
       end repeat

So one end of a line (in this case it's line 5) is assigned to a particular circle (tCircle5) and the other end of the line is assigned to a random circle and this changes every 30- 90 ticks. So the result is something like this: https://vimeo.com/79552738

Posted: **Sat Nov 16, 2013 11:38 pm**

Hi.

Just so. To create a natural link in the naming will allow you to "see" what is happening.

Still not sure you are getting your action the way you want. Try this. On a new card, make two circle graphics, THEN one line graphic, and a button. In the button script:

Code: Select all

on mouseUp
   set the loc of grc 1 to "100,100"
   set the loc of grc 2 to "300,300"
   repeat 100
      wait 1
      set the left of grc 1 to the left of grc 1 + 2
      set the left of grc 2 to the left of grc 2 - 2
      set the points of grc 3 to the loc of grc 1 & return & the loc of grc 2
   end repeat
end mouseUp

Anything useful here?

Craig

Posted: **Sat Nov 16, 2013 11:56 pm**

Anything useful here?

That's exactly what I was after, now I just need to animate the dots with a random, slow, floating, movement.

The easiest way to desribe this is probably with a video: https://vimeo.com/25781176#

I thought each dot could be contained in a rect, the dot's don't need to travel in straight lines so that removes the need for long complex code calculating the bounce angle etc.
They just need to seemingly float around in an area

Posted: **Sun Nov 17, 2013 5:32 pm**

I came across a good example here : http://www.tactilemedia.com/ called "swarm"

The script for the card is:

Code: Select all

on preOpenStack
  set loc of this stack to the screenLoc
end preOpenStack


local pRate = 5

on initBalls
  repeat with N = 1 to 50
    set the uXdir of grc ("_ball" & N) to item random(2) of (pRate,-pRate)
    set the uYdir of grc ("_ball" & N) to item random(2) of (pRate,-pRate)
  end repeat
end initBalls

on moveBalls
  if not the hilite of btn 1 then exit moveBalls
  repeat with N = 1 to 50
    if left of grc ("_ball" & N) < 2 then set the uXdir of grc ("_ball" & N) to pRate
    if right of grc ("_ball" & N) > width of this stack - 2 then set the uXdir of grc ("_ball" & N) to -pRate
    if top of grc ("_ball" & N) < 2 then set the uYdir of grc ("_ball" & N) to pRate
    if bottom of grc ("_ball" & N) > height of this stack - 2 then set the uYdir of grc ("_ball" & N) to -pRate
    put loc of grc ("_ball" & N) into tLoc
    add the uXdir of grc ("_ball" & N) to item 1 of tLoc
    add the uYdir of grc ("_ball" & N) to item 2 of tLoc
    set loc of grc ("_ball" & N) to tLoc
  end repeat
  send "moveballs" to me in 10 milliseconds
end moveBalls

And the script for the button is:

Code: Select all

on mouseUp
  set hilite of me to not the hilite of me
  if the hilite of me then
    initBalls
    moveBalls
  end if
end mouseUp

Could I create something like this but much slower with lines constantly fading in and out joining each dot to a random dot?

Posted: **Sun Nov 17, 2013 10:58 pm**

Just started hacking some stuff together(only experimenting with one line at the moment), Below is the button script followed by the card script. Aspects of it work but I don't think i've put it all together correctly as Livecode seems to freeze up when I try and run it..

Code: Select all

on mouseUp
   startTiming
  set hilite of me to not the hilite of me
  if the hilite of me then
    initBalls
    moveBalls
  end if
end mouseUp

on startTiming
   lock screen for visual effect
   repeat with y = 1 to 27
      put y into line y of temp
   end repeat
   sort temp by random(10000) 
   
   repeat 100 with y = 1 to 27
   wait 1
   set the points of grc "Line" to the loc of graphic "_ball1" & return & the loc of grc ("_ball" & line y of temp)
     end repeat
     
   
   If the optionKey is down then
      
      exit to top
   end if
   send "startTiming" to me in random(90) + 30 ticks
unlock screen with visual effect dissolve very fast
end startTiming

Code: Select all

on preOpenStack
  set loc of this stack to the screenLoc
end preOpenStack


local pRate = 6

on initBalls
  repeat with N = 1 to 50
    set the uXdir of grc ("_ball" & N) to item random(2) of (pRate,-pRate)
    set the uYdir of grc ("_ball" & N) to item random(2) of (pRate,-pRate)
  end repeat
end initBalls

on moveBalls
  if not the hilite of btn 1 then exit moveBalls
  repeat with N = 1 to 50
    if left of grc ("_ball" & N) < 2 then set the uXdir of grc ("_ball" & N) to pRate
    if right of grc ("_ball" & N) > width of this stack - 2 then set the uXdir of grc ("_ball" & N) to -pRate
    if top of grc ("_ball" & N) < 2 then set the uYdir of grc ("_ball" & N) to pRate
    if bottom of grc ("_ball" & N) > height of this stack - 2 then set the uYdir of grc ("_ball" & N) to -pRate
    put loc of grc ("_ball" & N) into tLoc
    add the uXdir of grc ("_ball" & N) to item 1 of tLoc
    add the uYdir of grc ("_ball" & N) to item 2 of tLoc
    set loc of grc ("_ball" & N) to tLoc
  end repeat
  send "moveballs" to me in 10 milliseconds
end moveBalls

Posted: **Mon Nov 18, 2013 5:28 pm**

Did you test your code performance while using the improved graphics architecture?

Check this tutorial:
http://lessons.runrev.com/s/lessons/m/4 ... chitecture

"The engine determines what to cache based on the per-object layerMode property. This is one of static, dynamic or scrolling."

Posted: **Mon Nov 18, 2013 10:28 pm**

..........

Posted: **Tue Nov 19, 2013 1:33 am**

Hi,

Thats really nice and its exactly the type of movement i'm after, however, I understand that its is all one polygon and my project is a combination of separate line and circles.

Is there an aspect of the script that could be applied to each circle to get that nice drifting motion and still allow me to do this ( https://vimeo.com/79710415 ) to the lines.

Thanks!

Posted: **Tue Nov 19, 2013 1:57 am**

..........

Posted: **Wed Nov 20, 2013 4:03 pm**

This is my stack script (below). The part I am having troube with is refering to a particular dot in your example. At the moment I am saying: Get line x and set the points of it to the location of dot 1 and the location of dot 2. So that it joins two dots together. In your example, which part of the script refers to the 'dots' ? Thanks!

Code: Select all

global tStartTimingMessageID

on startTiming
      
     repeat with z = 1 to 27
       put random(60) + 25 into randomWait
         wait for randomWait milliseconds
            repeat with y = 1 to 27
                  put y into line y of temp
            end repeat
            sort temp by random(10000)
            repeat with y = 1 to 27
                  set the points of graphic ("Line "  & z) to the loc of graphic ("tCircle" & z) & return & the loc of graphic ("tCircle" &  line y of temp)
            end repeat
                set the visible of graphic ("Line "  & z)  to not the visible of graphic ("Line "  & z)
      end repeat
   
       send "startTiming" to me in random(30) + 10 ticks
      put the result into tStartTimingMessageID
    
end startTiming

LiveCode Forums.

Floating animation

Floating animation

Re: Floating animation

Re: Floating animation

Re: Floating animation

Re: Floating animation

Re: Floating animation

Re: Floating animation

Re: Floating animation

Re: Floating animation

Re: Floating animation

Re: Floating animation

Re: Floating animation

Re: Floating animation

Re: Floating animation

Re: Floating animation