Here’s the activity. Doenet
In part a, we want students to drag three points to the graph of the function. We made that happen using attractTo, but because of the scale involved, I find it pretty hard to drag to “nice” points, like when s=10, 20, 30, etc, and I would like that to happen if possible.
I tried attractToGrid, but I don’t know how to combine it with attracting to the function, which is more important. I don’t want to attract to points off the graph of the function, especially if those points are close by. I tried making the dy small, large, and nonexistent, and I don’t think any of it worked the way I’d like. It also seems weird to use a grid when all I care about are the x-values, and the y-values corresponding to those x-values are not evenly spaced.
Can I have it attract to the function and to “nice” points on the function?
A few points that could be helpful.
-
When attracting to objects with dissimilar graph scales, you mostly likely want to use the attribute relativeToGraphScales in your attract components. This changes the definition of the threshold attribute to be in terms of a fraction of the total scale of the graph in that direction.
-
You can apply multiple constraints in sequence. When that happens, each constraint is applied in turn, but each constraint is ignored once it is applied. In other words, only the last constraint is actually satisfied. The previous constraints just help determine where the point ends up.
-
When constraining or attracting to a function, by default a point will only move vertically. (You can set an attribute nearestPointAsCurve on the function to change that behavior).
Putting those together, as long as you don’t specify nearestPointAsCurve, you can have a <constrainToGrid> (or <attractToGrid>) followed by a <attractTo> with the function. The point will end up with an x-coordinate determined by the grid and y-coordinate that makes it on the function.
Alternatively, you can have an <attractTo> with the function followed by an <attractTo> containing some particular points on the function that are special targets. Then, the point will be attracted to the function and will be further attracted to those special points if brought near them. (This approach could be used with nearestPointAsCurve if you like that behavior better, which can be nicer if the function gets quite steep.)
I was having a hard time with the first option you listed. I didn’t use nearestPointAsCurve, but I could have sworn it was not only jumping vertically, and not all the “nice” points were being found.
So it’s inelegant, but I went with your second suggestion of attracting to the function and then also attracting to a list of 8 or so “nice” points, and I think that is behaving as I would like it to.
Thanks for your help!
Chrissy
Great, I’m glad you got it to work!
<attractToGrid> and <constrainToGrid> don’t have anything equivalent to relativeToGraphScales. You have to manually change dx, dy, xthreshold, and ythreshold.
Here’s an example where points are attracted to a grid of 10 apart in the x direction but essentially ignore the grid in the y-direction. You could argue this is cleaner, but the disadvantage compared to your approach is that points are attracted to that grid in x even if not on the function.
<point name = "A" styleNumber="2"> (10,0.5)
<attractToGrid dy="0.01" dx="10" xthreshold="1" />
<attractTo threshold="0.05" relativeToGraphScales>$T</attractTo>
</point>
<point name = "B" styleNumber="2"> (20,0.5)
<attractToGrid dy="0.01" dx="10" xthreshold="1" />
<attractTo threshold="0.05" relativeToGraphScales>$T</attractTo>
</point>
<point name = "C" styleNumber="2"> (30,0.5)
<attractToGrid dy="0.01" dx="10" xthreshold="1" />
<attractTo threshold="0.05" relativeToGraphScales>$T</attractTo>
</point>