Last month, John Rowe led an insightful tutorial on creating Function Carnival–style activities. Check out the video for a full tutorial. In this newsletter, we’ll share with you step-by-step how to put together the parts that make the whole interaction work.
xValuesAt and yValuesAt
These two members look at the sketch and return a list of x- or y-values at any given point.
xValuesAt makes a list of all of the x-values in a sketch at a particular y-value.
yValuesAt makes a list of all of the y-values in a sketch at a particular x-value.
| To use these members, first create a numberList sink in the component in which you want them to appear. | |
| Set the sketch component you want to look at as the source, followed by the member you’d like to use (we’re using yValuesAt). | |
| Follow with parentheses, indicating the x-value that you would like to look for sketches. |
You can even use a variable to make a list of intersections that will vary based on a slider:
Setting Up the Graph
If you’ve ever had the chance to play with images in graphs, you’ll know that you can take a function or a value, and use it to control the location, size, and orientation of an image. In the tutorial, John controls all three of these to create the complete interaction. We’ll give examples of each of the three, separated into their own screens so that you can see how each works independently. Click here or on any of the images to go to the activity.
| The first image is the target image. This image doesn’t have any connection to the sketch itself, but instead moves along a predefined path. |
|
| The second image is positioned according to the list of yValuesAt at the current time. Setting the y-coordinate of the image to this list will create as many images as there are elements in the list, giving you that effect you see when sketching multiple locations at a particular time value. |
|
| The final image relates to the current location of your cursor. This allows students to be precise with the location of the target rather than having to guess prior to sketching. |
|
currentX and currentY
currentX and currentY are members that report the current location of your cursor when it’s hovered over the sketch component. It will track the location of the cursor regardless of whether you are actively sketching or not. To use these members, create a number in your graph and a source in your sketch component, and append with the desired member.
In the example below, can you see that the cannon person connected to currentY matches the y-coordinate of the cursor and the other does not?
The Animation Cover
Rather than include a separate button to play the animation, why not use something built in? Animation covers for graphs not only keep everything neat and tidy in a single component, but also allow for scrubbing along the bottom of the graph component. Here’s how to set one up.
You’ll need two lines of code: one to set the duration of the animation, and the other to connect the time variable to the animation time.
The first line sets the length of the animation. Use the animationDuration sink and assign value for the length. We recommend you keep this to a constant. Varying the length of the animation can cause some strangeness with the scrubber.
The second line connects to the time variable to determine the time of the animation cover (without the need for pressing a button). Create a number sink for whatever variable you use for time (we use t_0), and as a source, assign this.animationTime.
When you put it all together you end up with a simple yet powerful interaction. Now that you understand how each part works, try watching the full tutorial. You’ll be surprised to see how quickly the pieces can come together to complete the screen. In addition, don’t limit yourself to the height of an object. Try using it to modify things like size or shape, and check out some cool applications of this from @kurt_salisbury.