Building Textures from Waves: Debugging in Task-Specific Programming (Precalculus TSP Part 2 of 5)

September 23, 2019 at 3:00 am 10 comments

The second prototype I built for Task Specific Programming in Precalculus is about using wave functions for building textures. As I mentioned in my last blog post, my goal is to use computing to make precalculus less abstract and more relevant. I want to provide a programming experience that can be used in five minutes which can be integrated into a precalculus class. In this prototype, I explicitly designed for inquiry and debugging. What would debugging look like in task-specific programming when the goal is learning precalculus and not programming or computer science?

I’m going to describe this one bottom-up. Wave functions are a common topic in a precalculus class (like in this YouTube lecture). These are typically taught in the form:

A sin(B(x-C)) + D


Amplitude sin(frequency(x-horizontalShift)+ verticalShift

I built a tool where the student specifies a wave function, then that wave is used to define a texture in terms of gray, red, green, or blue components.

This equation is plotted (lower right hand corner) where the X-axis controls the darkness. Each pixel is evaluated left-to-right, and it’s X-position is plugged into this formula. The Y value mapped to a gray scale. The plot should (if it all worked right, and it doesn’t really in this example) line up with the texture so that darkness and lightness maps to rise and fall in the darkness level of the texture.

Let’s set the “Challenge” section aside for just a few minutes.

We can map equations to other colors, and swap sine for cosine, and use the X or Y components of the pixel to determine the color. Like in the first prototype, each wave function appears on a separate card in a deck.

You can have an arbitrary number of these cards. When you get to the front page of the deck, you have a program of all the wave functions. These are then composed to create a more complex texture.

What does debugging look like here?

With this prototype, I thought more about the student’s process than I did with the image filter tool. In my work with both precalculus and social studies teachers, I’m increasingly thinking about inquiry, and I see debugging as a form of inquiry. You have some output, and you’re trying to understand it — and by “understand,” I mean being able to explain how the parts constitute the whole. The impetus to inquire (i.e., to debug) is that the output you have is not the output you expect or want. So, if we want to support inquiry as debugging, we have to support starting from a goal — an example, a requirement, or a set of tests.

I’m inspired by Diana Franklin’s group’s work on La Playa, a Scratch-like programming environment for 4th-6th grade students (see paper here). In La Playa, the programming tool opens up onto a starter file. The student could ignore it and just do open-ended programming, but more likely, the starter file guides the student and serves as a scaffold.

I made a prominent Challenge texture on the front page (and the challenge image appears on every wave card afterward). Can you make this? If you need a Hint, press the Hint button for a suggestion about is needed to make this texture.

In general, my challenge textures don’t really work. I built a bunch of cool textures to use as hints, like below, but the composition of color waves is one of the more complicated parts here — I talk more about it in Part 5 of the series.  But on the other hand, I showed some of these textures to researchers in culturally-relevant curricula who said that they reminded them of woven cloths from the cultures that they study.  Could we use wave functions in a form of culturally-relevant curriculum that blends precalculus and computing?

Imagine that you have a texture that you generated on the first page, and now you want to understand how your existing waves contribute to this texture, e.g, to figure out which equations need to be changed. One tool is the Pop button on the front Texture Program page. This pops out the texture into a separate window.

Now, you can drag the texture over the individual wave textures to understand how the pieces compose into the whole.

Each wave has a checkbox, so that the wave can be removed from the texture (without deleting), then put back in.

The idea is that a student can apply basic debugging principles: Compare to the example, find how this statement/computational-unit impacts the final outcome (like a print statement), and remove the statement/unit (like with a comment) to see the effect on the final outcome.

Multiple-linked representations

As I’ve shown this to math teachers, one of the things they like here are the multiple linked representations. We’ve got the equation:

When the student hovers, they get an explanation for each of the terms:

The plot and the texture, and if you press the “Points” button, you see exactly which points were plotted — both x,y on the graph, but also the computed x and y before they were mapped to the discrete points:

When I showed this to teachers, they wanted it to support more exploration. For example, they told me that students struggle to understand the difference between 3sin(x) and sin(3x). I was thinking that a useful addition to this tool would be a Bret Victor inspired scrubbing gesture over each of the terms in the wave function (as in his fabulous Learnable Programming essay, or in the Scrubbing Calculator). I want to be able to click on the “3” above, drag up, then move the cursor left or right to make that number less or more. As I scrub, I want to see the plot change and the texture change — but with some kind of shadow/echo so that I can compare the “3” plot/texture to the new values for “C.” Students can’t generally keep the original curve “in their head” when seeing the new one, so they need both to be visible to understand the effect of the equation change.

I built these in Livecode. The source file is available here. I’m also making binaries available for Macintosh and for Windows. (Yes, I can provide Linux, if someone’s interested.) These are provided with no warranty or guarantee — these barely do what I describe, and probably have lots of other mistakes, holes, weaknesses, and vulnerabilities. They’re slow as molasses. I strongly discourage you from using my prototypes with students. As I describe in Part 4 of this series, this is nowhere near where it needs to be in order to be useful.

Entry filed under: Uncategorized. Tags: , .

Precalculus Task-Specific Programming for Building Image Filters from Matrix Operations (Precalculus TSP Part 1 of 5) Task Specific Programming vs Coding: Designing programming like we design other user interfaces (Precalculus TSP Part 3 of 5)

10 Comments Add your own

  • 1. alanone1  |  September 23, 2019 at 3:36 am

    “For example, they told me that students struggle to understand the difference between 3sin(x) and sin(3x)”

    You could hardly pick a greater indictment of the way “math” is usually taught than this sentence. (And the YouTube video you supplied the link to shows this even more so.)

    There’s a long accurate biting diatribe that this inspires. But to just pick one comment and observation from it: if you have to explain what the parameters do in a formula, then it must be done very slowly so that a form translates into meaning (rather than something like an attached annotation that is just more surface verbiage to try to remember). This is partly from several aspects of cognitive load that are overwhelming here if you haven’t really learned it — very like dealing with complex constructions in a foreign language you have just gotten in contact with.

    The struggle with the difference between “3sin(x) and sin(3x)” is partly because the teachers don’t have a good sense (or memory) of what it’s like to be presented with forms with the same components but in two different syntax organizations that they don’t have parsers for. In this case, the human visual system just treats these as a scene of images — and a test that will work is to see if the kids can recall the components (they will generally do a good job here).

    I haven’t tried to teach this particular example, but my intuition from working with beginners says: “follow Jerry Bruner and have them work with their hands on this before getting more complicated”. So having to execute the formulas by hand will force asking what subcombinations actually mean in terms of arithmetic. Getting the kids to do their own graphing is another “hand” operation that will engage them more closely — and like Julia Nishijima with her first graders — it will slow them down so that they can’t just try to remember and guess.

    I think in this case, the computer should be left out until it is a convenience for what is now working between the students’ ears. (I think this is a good general principle for things mathematical — it’s the greatest when you understand, but it does too much when you don’t understand to help you understand.)

    A comment from the video is; “No one explains the horrors of the sinusoidal fuction as good as you.” [sic] The commenter can only feel “horrors” if his previous schooling has been “non-mathematical”, and doubly so to feel the video is good (it isn’t).


    • 2. Mark Guzdial  |  September 23, 2019 at 8:58 am

      Hi Alan,

      I have pages and pages of notes on how teachers try to help students understand trigonometry and periodicity. One teacher walked through her process of using the unit circle, then graphing the sine wave, and labeling the points in coordinates like 3*pi/2 as well as cartesian coordinate real numbers — all of this by hand, with pen and paper. The graphing calculators come later. And these are precalculus teachers, so presumably, the students already saw a lot of this in trigonometry. The teachers I talked to were reluctant to use any kind of technology at all.

      I see myself as providing a context, a reason for exploring trigonometry and periodicity. It feels like the intro CS students I started working with in the early 2000’s. They could learn programming. They just didn’t see why they should. So, I gave them Media Computation. I’m trying to think of contexts that make precalculus more concrete through the use of computation.


      • 3. alanone1  |  September 23, 2019 at 10:01 am

        Hi Mark

        I’m not worried about what you are doing, but about what the teachers and the curricula are doing.

        This reminded me that my focus on elementary school has left me with no clear idea on what the next years are like in math teaching these days.

        So I’m going to try to learn more about what they are trying to do in recent years before more commenting.

  • 4. gasstationwithoutpumps  |  September 23, 2019 at 11:43 am

    I’ve found that engineering students generally have only fuzzy understanding of trigonometry (and then generally as a pile of identities to memorize).

    I don’t think that the greyscale or color rendition of the functions really helps all that much, though. I think it works for you, Mark, because you are used to thinking of color as a function of location, but for the students it probably adds one more level of abstraction to confuse them.

    If you do need to compare two functions, because “Students can’t generally keep the original curve ‘in their head’ when seeing the new one, so they need both to be visible to understand the effect of the equation change,” the split one of your boxes so that the top half is the old formula and the bottom half the new formula (assuming you are looking at a function of x). That would be much easier to understand than a “shadow” and matches what many color-choosing tools do so some students may already be familiar with the format.

    • 5. Mark Guzdial  |  September 23, 2019 at 11:44 am

      I’m sure you’re right. These are the directions we’re going with the redesigns.

    • 6. alanone1  |  September 23, 2019 at 11:56 am

      I think your suggestion is a good one.

      I was more intrigued by the non-trig part of this: “For example, they told me that students struggle to understand the difference between 3sin(x) and sin(3x)”

      In this confusion example, the “sin” could be “any function” (so “sin” could even be a distractor).

      I wonder if the standard curriculum starts with visualizations of single parameter relationships — as graphs etc — and then shows how these are written as black boxes.

      You’ve commented often about your college students generally not be very good at reading graphs, so perhaps long ago the students were not helped in fruitful ways.

      What do you think from your experience?

      • 7. gasstationwithoutpumps  |  September 23, 2019 at 12:22 pm

        Many of my students treat all functions as linear functions. They also refer to constant functions as linear, so it is clear that they have never mastered the concept of linearity, or (more likely) been given the wrong concept that all straight lines are linear functions.

        Of course, many of them can’t add or multiply fractions either, so the problem predates precalculus. My students are bioengineers, so their comfort with math is lower than most engineers, though higher than most biologists. They are used to equating learning with rote memorization of terminology (a strong component of biology and organic chem courses), which does not serve them well in electronics.

        The biggest math problem for the electronics course is that most of the students have no notion at all of complex numbers, which are essential for understanding the behavior of capacitors and inductors. I have the students do a lot of plotting of functions like |R + 1/(j𝜔C)| (using gnuplot, not by hand), which seems to help a little. We also spend some time on Euler’s formula and do almost everything with exponentials, rather than with trig functions.

  • […] In the last two posts, I described a prototype task-specific programming tool for building image filters from matrix manipulations, and for building textures out of wave functions. […]

  • […] part series about Precalculus Task-Specific Programming. I presented two prototypes in Parts 1 and 2, and discussed what I’m exploring about programming in Part […]

  • […] described two prototypes for task-specific programming in precalculus (matrix transformations and wave functions), and explored the implications of task-specific programming for research about programming, in […]


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Trackback this post  |  Subscribe to the comments via RSS Feed

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 9,052 other followers


Recent Posts

Blog Stats

  • 2,030,111 hits
September 2019

CS Teaching Tips

%d bloggers like this: