Last month we had the opportunity to test out an idea for an activity build-along with some Desmos fellows. And while we still have lots to work on, we had a great time working on a really fun build that we’d like to share with you today. What follows in this month’s newsletter is an abbreviated transcript of our build-along.
Sketching With Mirrors
You’ve tried it before—attempt to trace a shape using a mirrored image. Today, we’re building something very similar using sketch transformations in Desmos.
Part 1: Make The Graph Background
Start by adding a sketch component with a graph background, then edit the graph.
The first part you’ll want to create is the path. For that, use a table.
Create a table and add a point for each vertex.
Use the polygon tool or set your last row to the same location as your first row to form a closed shape.
Want to adjust points visually? Long click your second column and turn on drag.
Once the path is created, style it correctly:
Turn on lines and turn off shading or points (depending on which tool you used).
You’ll want to make a double-lined path but don’t want to overcomplicate things. So instead, start by making your line really thick (we like 15 px).
Next, duplicate your shape and set the new width to about 5 less than your first (in our case, 10).
Your center “channel” is a second color. Let's make it look like the background. Create a color for white (we like hsv(0,0,1)). Set your top layer to white and turn off your axes and gridlines.
Part 2: Clean Up the Sketch Options
The line tool makes things too easy, and the math and text tools don’t make much sense here. Click on the ellipsis menu and deselect those options.
Part 3: Create a Sketch Background
First, make the actual sketch invisible so that the student will only see the mirrored image.
You can do this by making only one color available.
And by making that color totally translucent by setting its opacity to 0.
Next, grab the sketch layer so that you can transform it.
Start by merging the current stroke with what has already been sketched.
Bring it back into view by setting its opacity to 1.
If you want to preview your layer, try setting it as the background. At this stage, it should look like a regular sketch:
Lastly, transform your new sketch layer to create a mirror effect.
Take your combined sketch layer and apply a transformation function to it: The transform function has two components (one for x and one for y), each made up of a two variable simpleFunction.
You’ll want to mirror the image horizontally, so set the x-transformation to “-x”.
You’ll want your y-values to stay the same, so leave it as “y”.
Set the new layer as your background and you’re done! To see all of this in action, copy, edit, and open the sketch component's scripting window in this activity.
While we can’t say for sure if we’ll ever be able to run this event at a larger scale, we’re certainly excited about the prospect. If and when we do, we’ll be sure to let you know, so stay tuned! If you’re interested in the Desmos fellowship you can fill out this form to get the latest information on upcoming cohorts when it becomes available.
