branch: dashedComponent
Closed this issue · 12 comments
From the design meeting (7/25), it was decided that I should experiment with LineArrowNode to create a dashed arrow node for the following reasons:
- It should be emphasized that the components are scalars, not vectors
- It can be confusing to students to distinguish between the two (correct me if this is wrong)
I am creating a branch for this so that I can easily test the two at the same time.
implementation
- At first, I thought it was going to be a lot harder but since
RootVectorNodeextendsNodeit should be fairly simple. In RootVectorNode, i am going to add an option to dash the arrow node, and if it is true, use LineArrowNode as the arrowNode.ComponentVectorNodewill set this option to true, which will change the appearance of both the component of normal vectors and sum vectors.
@ariel-phet, with my commit above, I attempted to use a line arrow node. However, LineArrowNode throws and error when the magnitude of the arrow is 0 and components can be 0. Therefore, LineArrowNode cannot be used. Not sure what to do instead.
Update, I have now realized that I can set the visibility to false when the magnitude is 0. But overall, using LineArrowNode is not elegant in terms of the code.
Here are a couple of screenshots of what it looks like:
Decided with @arouinfar that this doesn't look good, but we can experiment with shorter spacing and longer dashes. We would like to discuss with @ariel-phet on the future of this.
From the design meeting, we were able to get the dashed to look more like this:
Since it still doesn't look great on the axis:
a 'white background' behind the arrow is ideal.
White Background
If a background arrow is added behind the arrow, it makes the code significantly worse. Not only would we have to only do it on components, but we would have to update its positioning, and it feels like it is wrong.
Possible Solution
At this point, I think it might be good to make a custom module for arrow's on vector addition.
This is what is done in Gas Properties for the width icon:
Here is the module:
https://github.com/phetsims/gas-properties/blob/master/js/common/view/DimensionalArrowsNode.js
Pros
- This would make having dashed components clean. Custom options would be the same across arrows and would modularize code.
- It would have a full triangle at the tip regardless of if it is dashed
cons
- this would be specific to Vector Addition, and would be an effective 'copy and paste' of functionality, besides one small detail.
I am going to hold off on implementing this solution because of the cons.
Correct me if I'm wrong. But it looks like the only thing that LineArrowNode doesn't support that is needed is the "closed" (triangular) arrow head. Rather than create more sim-specific code, perhaps we should add an option to LineArrowNode to specify the head type? I'm not sure what the 2 head types should be called (@ariel-phet might know), but something like:
headType: 'open' // 'open' or 'closed'Gas Properties DimensionalArrowsNode was a little more involved, because it had other pieces to it. But yes, if this feature had existed, it could have used LineArrowNode with headType: 'closed' and doubleHead: true.
If this option is added, then Vector Addition would only need to use LineArrowNode.
This would solve most of the problems.
The only other problem I can think of at the top of my head is having the white background.
@pixelzoom, and if this is the solution, would it also be possible to revise LineArrowNode to automatically set itself to invisible when it's a zero vector.
In "Hookes law" you have some logic that sets it the displacement arrow to invisible when the displacement is 0, and I would need something similar for VA. It would be nice if it did this automatically and we could remove this logic in both sims.
@brandonLi8 sorry for the delay, but it's going to be Thursday at the earliest before I can provide a proper response for this.
Dashed component vectors were successfully added in #177. So this is branch is not longer needed and has been deleted. Closing.
For https://github.com/phetsims/special-ops/issues/198, this branch needs to be deleted again. Reopening and self assigning.
Re-deleted using GitHub UI. Closing.