Jump to content
GreenSock

GNR, ACDC

Creating CPU scheduling simulation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello everyone, let me say at the beginning that this is a fantastic animation platform, since I've been only working a little bit with jquery animate, this is way easier to work with, good job. :)

 

And now here comes my problem. So I'm trying to make a CPU scheduling animation, pretty much the same thing as here on this link: http://courses.cs.vt.edu/csonline/OS/Lessons/Processes/index.html

 

My problem here is that I'm not really sure can this even be done.

 

So let's say I have 10 processes which are represented as a small images, and animation is just moving those images across screen, nothing to fancy.

 

My idea is very simple and it goes like this:

  - take process from ready queue and animate it to the CPU

  - there wait for few seconds and animate it to waiting queue

  - there also wait for few second and animate it back to waiting queue

  - repeat this untill all processes are finished (bool variable)

 

Ofcourse when one process finishes in CPU other from ready queue is comming in.

And when process is in waiting queue, the rest of simulation should be running.

 

So if I wouldn't have waiting queue this would be very easy animation to do, but with it in game it gives me troubles.

 

My possible solution to this would be using 2 timelines, one which would animate processes in ready queue and to the CPU, and other timeline which would animate them from CPU to the waiting queue and back to the ready queue. The problem is I'm not sure how to do it.

 

Can anybody give me some tips or link to some tutorial where something similar is done, it would be much help. Tnx

Link to comment
Share on other sites

Hi,

 

Just to clarify some concepts, you mean like animating some elements from one box to another, being that process the CPU animation?.

 

If that's the idea just one timeline would do it and it shouldn't be to complicated. But also you have to ponder whether the sequence is always the same or not; if you're going to animate the same objects or not, because that changes how the timeline is populated.

 

If you could provide that info it would be great and it'll help to decide the best way to go forward.

 

Cheers

Rodrigo.

Link to comment
Share on other sites

Tnx for reply. :)

Yes, that's what i thought. Just a few elements (small pictures) that are being animated from one box to another. Each small picture respresents process.

My graphic idea currently accepts from 1 to 10 processes.

Here's how it looks like, but it's just for now, those strange arrows I made in paint represent path for processes.

Here's the picture: http://s16.postimg.org/k7i84nudh/exa.png

 

My idea is that for each process algorithm generates random numbers. Those numbers are how long the process stays in CPU and how long process stays in waiting queue. And one more number is how many times process needs to get something from memory before we can terminate it.

 

And yes, it should animate same element more then once, let's say for example that there are 2 processes. While 1st is in CPU, 2nd is waiting in ready queue. When 1st leaves CPU it goes to waiting queue where it waits and goes back in ready queue (how many times this repeats is random). Also when 1st leaves CPU 2nd one goes there and so on.

 

My biggest problem here is how to synchronize everything, for example, how to continue running simulation while processes are waiting in waiting queue.

 

Hope you could just give me some tips on how to do this.

Link to comment
Share on other sites

I have one more question. Is it possible to start 2 tweens at the same time, and then next tween in timeline that should go to animate him when faster of thees 2 finishes. Here's an example:

tl = new TimelineMax();

tl.to(name1, 1, {some properties});
tl.to(name2, 5, {some properties});
tl.to(name3, 1, {some properties});
tl.to(name4, 1, {some properties});
.
.
.
tl.to(name100, 1, {some properties});

So basically I want tweens for selectors name2 and name3 to start at the same time, and then I want when name3 finishes that timeline continues with name4, name5 etc normally, while it is 

simultaneously playing tween2 which lasts for 5 seconds.

 

I could do it by adding relative labels to all tweens after tween 3 but it seems to me there is easier way.

And I could do it with callback from 1st tween but that's not the option (because I'm using loops and all variables change even before 1st tween finishes).

  • Like 1
Link to comment
Share on other sites

Hi,

 

The best way,considering your scenario, are labels. You add the tweens that beign simultaneously at the same label. Now if you want to add several tweens to the main timeline that play in sequence but at the same time you need two timelines, a master timeline and a nested one that contains the other tweens and put both at the same label.

var masterTL = new TimelineMax(),
    tl1 = new TimelineMax(),
    elem1 = $("div#elem1"),
    elem2 = $("div#elem2"),
    elem3 = $("div#elem3"),
    elem4 = $("div#elem4");

masterTL
    .to(elem1, 5, {vars}, 'label1')
    .add(tl1, 'label1');

tl1
    .to(elem2, 1, {vars})
    .to(elem3, 1, {vars})
    .to(elem4, 1, {vars});

You can see it here:

See the Pen byruJ by rhernando (@rhernando) on CodePen

 

Another choice would be to put a simple tween instance in a timeline at a certain label and the first tween of the timeilne at the same label, like this:

var masterTL = new TimelineMax(),
    elem1 = $("div#elem1"),
    elem2 = $("div#elem2"),
    elem3 = $("div#elem3"),
    elem4 = $("div#elem4"),
    tn1 = TweenMax.to(elem1, 5, {vars});

masterTL
    .to(elem2, 1, {vars}, 'label1')
    .to(elem3, 1, {vars})
    .to(elem4, 1, {vars})
    .add(tn1, 'label1');

You can see it working here:

See the Pen GyFfr by rhernando (@rhernando) on CodePen

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi,
 
Well regarding your original post, I gave a little more thought to it and I think that the best way to do the queues-cpu processing sequence is to create a single timeline for each of the processes in your app. Then you put all the timelines in a master timeline with the add method (check the api reference to see how it works for an array of tweens/timelines). Why?, because each process has it's own loop process and control a lot of different dynamically-created loops from just one timeline is something that escapes my abilities right now (honestly I can't think how to do it), so it's easier to add to a master timeline different timelines with their own flux control.
 
Now the actual process will require a bit of work but nothing too hard and can definitely be done with GSAP.
 
For creating each timeline use a function that takes the particular process and a random number creation function to set delays and repeats, and finally add that particular timeline to the master timeline.
 
The following code is a very rough approach to it, I'm going to presume that you're using JQuery, but it can be done in pure JS:
 

var masterLine = new TimelineMax(),
    waitQueueduration,
    waitQueueDelay,
    readyQueueduration,
    readyQueueDelay,
    cpuduration,
    processes = $(".process"),
    tl = [];//this empty array will contain all the timelines

//generate a random duration
function randomDuration()
{
    duration = Math.round( Math.random() * number );//here you have to add the number
    return duration;
}

//generate a random delay time
function randomDelay()
{
    delay = Math.round( Math.random() * number );//here you have to add the number
    return delay;
}

$.each(processes, function(index)
{
    waitQueueduration = randomDuration();//duration of the waiting queue tween
    waitQueueDelay = randomDelay();//delay of the waiting queue tween

    readyQueueduration = randomDuration();//duration of the ready queue tween
    readyQueueDelay = randomDelay();//delay of the ready queue tween

    cpuduration = randomDuration();//duration of the CPU tween

    tl[index].to($(this), time, {vars})//waiting queue
    tl[index].to($(this), time, {vars})//ready queue
    tl[index].to($(this), time, {vars})//CPU
});

masterLine.add(tl);

In that matter also this is a follow up of my previous reply, if you use the add method to insert an array of tweens/timelines inside a parent-timeline they all start and play at the same time, like this:

var masterTL = New TimelineMax(),
    tl1 = new TimelineMax(),
    tl2 = new TimelineMax(),
    tl3 = new TimelineMax(),
    tl4 = new TimelineMax();

tl1.to(/*code here*/);
tl2.to(/*code here*/);
tl3.to(/*code here*/);
tl4.to(/*code here*/);

masterTL.add([tl1, tl2, tl3, tl4]);

All the nested tweens/timelines will start and play simultaneously, to see how can you work different sequences and callbacks look at the api docs, the add method is a very useful tool for this situations.
 
Hope this helps,
Cheers,
Rodrigo.

Link to comment
Share on other sites

Woa, tnx you very much Rodrigo. Tnx for your effort and time.

I'm gonna try now to build my application with this new knowledege, and hopefully I won't get stucked anymore.

I like this idea of nesting as many timelines as I want, and I'm gonna try to work around thist to see what happens.

I'll post in this thread when I finish work, and maybe even do some tutorial on this, we'll see when I finish. Cheers

Link to comment
Share on other sites

You're welcome.

 

In order to see more about building sequences, Carl made an excellent video tutorial, you can see it here:

http://bit.ly/12aZMXA

 

I'll be waiting to see the finished app and if more questions arise just keep asking.

 

Cheers,

Rodrigo

Link to comment
Share on other sites

Hey, here's me again :)

 

Ok, I thought your example would be good to me but when I played with it a little it doesn't do what I want. Let me explain, here's the code you gave me:

See the Pen GyFfr by rhernando (@rhernando) on CodePen

and it works fine, but here's just one small adjustment and it's not good for my situation:

See the Pen yfsaj by anon (@anon) on CodePen

 

the problem here is that last element waits for first to finish.

 

So, is it possible to just add some tween or timeline to existing timeline at a certain point (with label) so that inserted tween or timeline don't mess with the next items to be inserted.

Or could you just use the time of a label and start some other tween/timeline at that time. Hopefully you have understood me.

Tnx

Link to comment
Share on other sites

Hi,

 

Yes but you have to add those tweens/timelines at the end of the parent timeline, because if you add another instance after that the latter will have to wait until the end of the parent timeline to play, so in the code of your pen you have this:

masterTL
  .to(elem2, 1, {left:350}, 'label1')
  .to(elem3, 1, {left:300})
  .add(tn1, 'label1')
  .to(elem4, 1, {left:350});

So at the same time, in the "label1" location, tn1 and the first instance play simultaneously, then once the "elem2" tween is over the "elem3" tween begins, because it was created before the insertion of "tn1", therefore it waits to the previous instance to be over, meanwhile "tn1" keeps playing as it should. Then the "elem4" instance is at the very end of the timeline and because of that it has to wait until everything before itself to be completed and that includes "tn1".

 

But if you change your code to this:

masterTL
  .to(elem2, 1, {left:350}, 'label1')
  .to(elem3, 1, {left:300})
  .to(elem4, 1, {left:350})
  .add(tn1, 'label1');

It'll work as expected, because the "tn1" instance was inserted at the end of the timeline, but its going to start when the timeline is at the "label1" position.

 

I hope this makes it clear.

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

Yes, that is clear, but I'm looking for a solution where you could add another timeline into the parent timeline so it doesn't affect any further adding to parent's timeline. The problem with the above example is that I have to add more things to parent masterTL after I add tn1 to 'label1' and when I do that it waits for that tn1 timeline to finish before playing newly added tweens. The reason I have to add more after is loops which change some variables that would enable me to add it later.

 

So basically I'm looking for a way to just start some other timeline at the label of masterTL without actually adding it to the masterTL. I don't know is it even possible?

 

If this isn't possible this could be a good idea for developers to think about, to add let's say 'skip' properties which when set to true would animate that tween but would immediately start next tween in timeline.

Link to comment
Share on other sites

Yes, that is clear, but I'm looking for a solution where you could add another timeline into the parent timeline so it doesn't affect any further adding to parent's timeline. The problem with the above example is that I have to add more things to parent masterTL after I add tn1 to 'label1' and when I do that it waits for that tn1 timeline to finish before playing newly added tweens. The reason I have to add more after is loops which change some variables that would enable me to add it later.

Well it depends on how things are created.

 

Question, are all your tweens and timelines created before any of them begins to play or once they start there'll be more tweens/timelines added or created?. If your tweens are all created at the beginning then you should use the add method to insert an array of the tweens/timelines, take a good look at the reply #6 of this topic. If your plan is to add once the playback has began, then is a little more complicated and for that you'll have to work with labels and get labels array in order to know the labels and their respective times in the timeline.

 

So basically I'm looking for a way to just start some other timeline at the label of masterTL without actually adding it to the masterTL. I don't know is it even possible?

This is more simple, use the get label time method to find where the label is located and you can add that time as a delay for another tween/timeline and they can start together. Another option is to add callbacks whether to the timeline via the add method, also could be added to the tweens directly with onComplete callbacks.

 

If this isn't possible this could be a good idea for developers to think about, to add let's say 'skip' properties which when set to true would animate that tween but would immediately start next tween in timeline.

Well, in this one I'm not too sure. The fact is that timelines are part of the engine with the purpose of sequencing tweens, so it'll go against the flow to skip something that was included in the first place, it's like taking out the shampoo of the cabinet and going into the shower with it, for later not washing your hair, why did you take out the shampoo in the first place?. And that's why labels, the possibility to add an array of tweens/timelines, absolute positioning and callbacks are for, you can create very complex stuff with those tools.

 

Finally it would help a lot if you could set up a simple live example to see where you're getting the troubles, it hard to pin point correctly without knowing what's on your mind.

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Well my current progress has to many code lines and it's not in English so it would not be of a too much help.

Anyway I'm trying to do something and I'll report my progress later.

 

I have tried getLabelTime but it seems to not be working. Firebug says

ReferenceError: getLabelTime is not defined

My line looks like this:

label_time = getLabelTime('label1');

Have they removed it from GSAP or am I doing something wrong?

Link to comment
Share on other sites

getLabelTime is a function of TimelineLite, so you need to call the getLabelTime function directly on your timeline, like

var mytimeline = new TimelineLite();
mytimeline.add('mylabel');
mytimeline.getLabelTime('mylabel'); // 0
  • Like 1
Link to comment
Share on other sites

Ohh, stupid me, I had I hunch that it would be something so trivial. Tnx you man!

Link to comment
Share on other sites

  • 2 weeks later...

Is it possible to measure time that took one tween or few tween in some timeline?

 

I know for duration method but it returns time of a whole timeline, and I need time of one tween or few in timeline. Or it would be good to get time from one label to another.

 

Is it possible, I have searched in documentation but couldn't find anything other than duration method.

Link to comment
Share on other sites

If you know the name of your starting and ending labels it should be easy to get the time of both (using getLabelTime()) and figure out the difference.

 

Also check out the TimelineMax docs as there are a few more methods for dealing with labels dynamically: getLabelBefore(), getLabelAfter() and getLabelsArray(). Plenty of tools to figure out the time spacing between labels. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×