-
-
Notifications
You must be signed in to change notification settings - Fork 455
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Question] Need to better understand several ways to setup/animate in Twojs #648
Comments
I'll get into all of these answers as separate posts. This post will be about The difference between
|
@jonobr1 thank you!, can't wait for the new post! BTW, would you mind to put usage of clone into the post? I guess the |
When to use method two.render()? In home page animation example we don't have to call two.render(), instead we have the following code:Kind of like two.bind('update', onUpdate);
let elapsed = 0;
function onUpdate(frameCount, timeDelta) {
elapsed += timeDelta;
} If you're not using the out of the box animation, like a physics library or just drawing one frame, then you should use const two = new Two({
width: 300,
height: 200
}).appendTo(document.body);
const rect = new Two.Rectangle(two.width / 2, two.height / 2, 50, 50);
two.add(rect);
// Nothing will show up on canvas until...
two.render(); |
The velocity, It seems that I have to call position.add(velocity) to make the object moving. Still, I don't understand why in other way (two.bind('update', update)) we don't need to use velocity (Just calling two.play())Velocity isn't a Two.js construct, I just use const two = new Two({
fullscreen: true,
autostart: true
}).appendTo(document.body);
const rect = new Two.Rectangle(0, 50, 50, 50);
// First way with two.js functions
two.bind('update', onUpdate);
function onUpdate(frameCount, timeDelta) {
rect.position.x += 1;
}
// Second way: using your own requestAnimationFrame
loop();
function loop() {
rect.position.x += 1;
requestAnimationFrame(loop);
} No need to use a velocity object to move things across the screen. We just say move 1 pixel every frame. The benefit of using const velocity = new Two.Vector(1, 0);
two.bind('update', onUpdate);
function onUpdate(frameCount, timeDelta) {
rect.position.add(velocity);
// Or subtract to move it to the left instead of the right
} There's not really a "right" or "wrong" way, but many ways to achieve the same thing. |
would you mind to put usage of clone into the post?Clone is a method to create an object and copy all of its current properties at the time of invocation. Again, it's shorthand. E.g: const circle = new Two.Circle(two.width / 2, two.height / 2, 50);
const anotherCircle = circle.clone();
const yetAnotherCircle = new Two.Circle();
yetAnotherCircle.position.copy(circle.position);
yetAnotherCircle.radius = circle.radius; Each of these instances have the same position and radius. It was just one line of code for |
Several questions to understand the process of initializing/animating objects in twojs
First of all thank you for creating this awesome library! I'm studying the examples to make twojs work in my project, specifically the webgl rendering mode. Here are some of the questions list below, although I can run the examples and make several tweaks here and there, but I believe a better understanding will make my life easier:
The difference between
new Two.XXXX
andtwo.makeXXXX
, when to choose which.When to use method
two.render()
? In home page animation example we dont have to calltwo.render()
, instead we have the following code:It looks like there are two ways of initialize and control the animation, also in one of the way we don't need to call
requestAnimationFrame
, it is quite confusing because there is no documentation explains the reason behind the scene. Sorry I'm quite new to the twojs and animation library. But if there are narrative chapters explain the logic then it will become much easier to grasp.velocity
, It seems that I have to callposition.add(velocity)
to make the object moving. Still, I don't understand why in other way (two.bind('update', update)
) we dont need to use velocity (Just calling two.play())The text was updated successfully, but these errors were encountered: