CL Newsletter, April 2022 - Live Builds and Mirrored Sketches

Resources CL Newsletter Archive
,
1

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.

Image of a button used to add a sketch component to an activity screen.

Image of a menu used to select the type of background for the sketch.

A screenshot of a sketch component with a graph background and the text

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.

A gif showing the adding of points using a table. The table columns are labeled x1 and y1 and the points form a square at (-5,5), (5,5), (5,-5), and (-5,-5).

A gif showing the conversion from a table into a polygon using polygon(x1,y1).

A gif showing the newly created polygon being changed by dragging.

Once the path is created, style it correctly:

Turn on lines and turn off shading or points (depending on which tool you used).

The settings menu of the polygon showing the lines set to black, and the fill turned off.

An image of the black polygon with no fill

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).

The settings menu of the same image but with a line thickness of 15

The same polygon, but with thicker lines.

Next, duplicate your shape and set the new width to about 5 less than your first (in our case, 10).

The settings menu of a new polygon that uses the same points but has a line thickness of 10

an image of the new (orange) polygon laid on top of the thicker black polygon.

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.

The expression list shows two identical polygons except for their color and line thickness, and a variable

An image of the final product. The orange polygon is turned to white and the grid is removed. Whats left looks like a track using black lines.

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.

The sketch component settings menu with only the pencil tool selected.

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.