Sailboat Animation: Turn tiller to left with mouse, boat turns to right & vice versa

I am trying to create an animation that will show the basics of steering a sailboat. The idea is that there will be a top view of the boat with the tiller and rudder very pronounced. I want the learner to be able to click and drag the tiller one direction or the other, while the tiller is dragging I want the rudder and the boat to rotate the proper direction. Example, I want the boat to go left I will push the tiller to starboard and the rudder will rotate clockwise and the boat will turn left. There doesn't need to be forward motion by the boat in my head, I think that as long as the boat rotates it would be fine. An开发者_开发知识库y help or resources would be appreciated.

I think what you really need to think about is modeling. Create a non-UI representation of a sailboat. Build your code such that moving the tiller (without the mouse... just through the interface of your model) causes the model of your boat to move. Actors and attributes of the model might include:

• Direction and Force of the wind vector
• Direction of the tiller
• Direction of the sail
• Direction of the tiller
• Direction and Force of the boat vector
• Size/Shape of the sail
• Length of the boat
• Coefficient of friction between the boat and the water
• Mass of the boat
• Size of the waves

Of course, the the further you go in the factors of your model refine its behavior more and more. I recommend adding unit tests to drive this behavior. Stop at whatever level of refinement makes most sense for the fidelity of your model.

Once you have a good model in place, it becomes much more simple and straight-fowrward to hook it up to graphical assets. For instance, you can rotate the boat or tiller graphic based on the angles you have exposed in your model using a rotation transform. The same would be true of the angle of sail, or the speed that you move your water animation.

This approach allows you to design the animations separate from the behavior of the boat.

Good luck!

Well - as long as you know the basics of programmatically transforming displayObjects, this shouldn't be too tough to do

I might go about it like this:

Create the graphics for your different elements. You are essentially going to be controlling the rotation property of these objects, so your translation points need to be set correctly at the point of rotation.

Once that is set up, its as simple as adding a mouse down event listener to the tiller, and testing for the delta change in mouseX until mouse up is registered.

During the animation cycle (while the mouse is down), just apply varying degrees of rotation (based on mouseX delta change) on your three objects. IE: If the mouse is dragged left, rotate the tiller to match, the rudder in the opposite direction, and the parent (the boat) also to the left.

This, obviously is very rudimentary, but should create a reasonable analogue of your intent...

Hope that helps