One of our guiding principles at Desmos is believing that every student is brilliant. Little kids have brilliant ideas about how the world works. Bigger kids have brilliant ideas about numbers, shapes, and patterns. As teachers, our job is to discover each student’s brilliance—to figure out the brilliant ideas students already know, to celebrate and connect those ideas, and to help students develop their brilliance even further.
So one of our jobs here at Desmos is to develop experiences that give students opportunities to be brilliant. With many curricula, students only have the possibility of replicating the teacher’s or textbook author's brilliance. At Desmos, we aspire to activities and interactives that showcase each student’s own brilliance.
We're going to take you behind the scenes of some of those showcase experiences—how we designed them and how we changed them from early to later drafts. We’ll also show you how to create a showcase experience yourself!
Turtle Time Trials
There’s no doubt that the crescendo of this lesson is Screen 8: Create Your Own Turtle Race. We’re taking it to the next level: you’re going to learn how to create your own create-your-own-screen! Don’t worry, that’s about as confusing as it will get. From here on in, we’ll go at turtle pace.
1. The Screen Setup
We love this graph-and-sketch combo, a side-by-side setup that allows us to
have turtles racing on the left and their positions graphed out on the right. With
this layout, there’s no room for a note component, so the text is actually
written in the CL of the screen using the subtitle: sink. The play button and
slider comes from the graph sink, animationDuration:, which is turned on by
setting the runtime of the animation.
2. The Graph Setup
- The Track: Depending on how extravagant you want your track to be, the setup can either be really quick . . . or not so quick. We recommend just dragging in an image of a racing track. Here’s one we’ve made.
- Moving Points: You’re gonna need some points that move horizontally (these will be the turtles on your track!). We recommend you use a similar setup to what we have here.
- Sketch Background: You also want to have a nice graph setup for your sketch. Here’s the one we used in our example.
3. The CL Setup
This is the surprisingly easy part of the process. We are going to pull the yvalue of the sketch over time and assign that value to the x-value of the movable point in the graph component.
- Sketch (right-hand side):
- The CL we’re going to use will do two main things:
- First, it gives us moving points that show the position over time.
- Second, it gives us a moving vertical line that shows the position of the turtles.
- To create the moving points, we’re going to define the x-coordinate of each point using time (we use t_0) and the y-coordinate as the corresponding y-values at that time.
this.sketch.yValuesAt(graph1.animationTime)will give you the yvalues of everything sketched as time passes. Filter this by color to separate them out into multiple lists to assign to different turtles:
numberList("y_1"):this.sketch.filterByColor(colors.red).yValu esAt(graph1.animationTime).- For the moving line, we will define a value in the sketch to be the
animationTime from the graph. Use
number("t_0"): graph1.animationTime. We can then use an equation like x=t_0 and change the style of the line to a dashed line and set it’s range to be {y>0}. Check out our example here. - Graph (left-hand side):
- Nothing will happen without our timer! Use the
animationDurationsink to set it up. - Then, mimic what we’ve done on the sketch, but instead of
defining y-values, define x-values. The y-values from the sketch will
relate to the horizontal position of the turtles. Use something like
this for x_1, x_2, x_3 and x_4:
numberList("x_1"):sketch1.sketch.filterByColor(colors.red).yV aluesAt(this.animationTime)
4. Plating Up
Some extra garnishes you might want to add to the dish might include: availableColors, initialTool, axes labels, graph timer, images. Points are way cooler as turtles, so you’ll want to add some turtle images. Just set the center of each image in the graph to be the same as your moving points. The only complexity are the turtles’ cute little legs. Need an example? We got you.