Python – Creativity in Mathematics

On Coding XII: Python

It has been some time since I wrote an installment of On Coding. It’s time to address one of my more recent programming adventures: Python. I started learning Python about two-and-a-half years ago when I began teaching at the University of San Francisco.

One of my colleagues introduced me to the Sage environment (now going by “CoCalc”) as a place to do Mathematica-like calculations, albeit at a smaller scale. Four features were worthy of note to me: 1) you could do graphics; 2) you could write code (in Python); 3) you could run the environment in your browser without downloading anything; and 4) it was open source.

For me, this was (at the time) the perfect environment to develop tools for creating digital art which I could freely share. Yes, I had thousands of lines of Mathematica code, but Mathematica is fairly expensive. I wanted an environment which would be easily accessible to students (and my blog followers!), and Sage fit the bill.

So that’s why I started learning Python — it was the language I needed to learn in order to use Sage.

For me, two things were a challenge. The first was how heavily typed Python is. In Mathematica, the essential data structure is a list, just like in LISP. For example,

{1, 2, 3}

is a list. But that list may also represent a vector in three-dimensional space — even though it would look exactly the same. It may also represent a set of numbers, so you could calculate

Intersection[{1, 2, 3}, {3, 4, 5}].

In Python you can create a list, tuple, or set, as follows:

list([1, 2, 3]), tuple([1, 2, 3]), set([1, 2, 3]).

And in Python, these are three different objects, none equal to any other. I don’t necessarily want to start a discussion of typed vs. untyped languages, but when you’re so used to using an untyped language, like Mathematica, you are constantly wondering if the argument to some random Python function is a list, tuple, or….

Second, Python has a “return” statement. In languages like LISP and Mathematica, the value of the last statement executed is automatically returned. In Python, you have to specify that you want a value returned by using a return statement. I forget this all the time.

And while not a huge obstacle, it does take a little while to get used to integer division. In Python, 3/4 = 0, since when you divide integers, the value of the fraction is the quotient when considered as integer division. But 3/4. = 0.75, since adding the decimal point after the 4 indicates the number is a floating point number, and so floating-point arithmetic is performed.

Of course, if you’ve been reading recent posts, you know I’ve moved from Sage entirely to Processing in my Mathematics and Digital Art course. You can read more about that decision here — but one key feature of Processing is that there’s a Python mode, so I was able to take work already done in Sage and adapt it for Processing.

It turns out that this was not as easy as I had hoped. The essential difficulty is that in Sage, the bounding box of your image is computed for you, and your image is appropriately scaled and displayed on the screen. In Processing, you’ve got to do that on your own, as well as work in a space where x– and y-coordinates are in units of pixels, which is definitely not how I am used to thinking about geometry.

I am finding out, however — much to my delight and surprise — that there are quite a few functional programming aspects built into Python. I suspect there are many more than I’m familiar with, but I’m learning them a little at a time.

For example, I am very fond of using maps and function application in Mathematica to do some calculations efficiently. Rather than use a loop to, say, add the squares of the numbers 1– 10, in Mathematica, you would say

Plus @@ (#^2& /@ Range[10])

The “#^2&” is a pure function, and the “/@” applies the function to the numbers 1–10 and puts them in a list. Then the function “Plus” is applied, which adds the numbers together.

There is a similar construct in Python. The same sum of 385 can be computed by using

sum([(n + 1)**2 for n in range(10)])

OK, this looks a little different, but it’s just the syntax. Rather than the “#” character for the variable in the pure function, you provide the variable name. The “for” here is called list comprehension in Python, though it is just a map. Of course you need “(n + 1),” since Python always starts at 0, so that “range(10)” actually refers to the numbers 0–9. And the “sum” function can take a list of numbers as well. But from a conceptual level, the same thing is going on.

The inherent “return” in any Mathematica function does find its way into Python as well. Let’s take a look at a simple example: we’ll write a function which computes the maximum of two numbers.

Now you’d probably think to write:

Day117python1

This is the usual way of defining “max.” But there’s another way do to this in Python.

If you ask Python to

print 3 > 2,

you’ll see “True.” But you can also tell Python to

print (3 > 2) + 7

and get “8.” What’s going on here is that depending on the context, “3 > 2” can take on the value “True” or “1.” Likewise, “3 < 2” can take on either the value “False” or the value “0.”

This allows you to completely sidestep making Boolean checks. Consider the following definition.

Day117python2

This also works! If in fact a >= b, you return the value 1 * a + 0 * b, which gives you a — the maximum value when a >= b. And when a < b, you return b. Note that when a = b, both are the maximum, so we could just as well have written

Day117python3

I think this is a neat feature of Python, which does not have a direct analogue in Mathematica. I am hoping to learn many other intriguing features like this as I dive deeper into Python.

Python is my newest language, and I have yet to become “fluent.” I still sometimes ask the internet how to do simple things which would be at my fingertips in Mathematica. But I do love learning new languages! Maybe in a year or so I’ll update my On Coding entry on Python with a flurry of new and interesting things I’ve learned….

Bridges: Mathematics and Art II

As I mentioned in my first post about Bridges 2016 (see Day038), one of my students, Nick, had artwork and a short paper accepted, and also received a $1000 travel scholarship! This week, I’d like to share his work with you. His paper is called Polygon Spirals. Here is the abstract (all quotes are taken directly from Nick’s paper):

Logarithmic spirals may be classically constructed with a chain of similar triangles that share the same center of similitude. We extend this construction to chains of $n$ -gons with centers on a logarithmic spiral with turning angle $\pi/n,$ and scale factors with interesting properties. Finally, polygon spirals of this kind are used to produce a variety of artistic images.

I first learned of Nick’s interest in this type of spiral when he was in my Calculus II class, where he introduced a similar idea for his Original Problem assignment (see Day013). I encouraged him to continue with this project and submit his work to Bridges 2016. Here is Nick’s motivation in his own words:

The investigation of polygon spirals began by studying curves that arise when regular polygons with an odd number of sides are strung together. When polygons are strung together into a band by gluing them together along their sides, then the choice of what subsequent edge pairs are being used will define a turning angle introduced at each joint. In this paper we focus on bands made with minimal turning angles and with a consistent turning direction. Each odd $n$ -gon defines its own turning angle, $\pi / n.$ Moreover, by introducing a constant scale factor that modifies each subsequent polygon, a large variety of logarithmic spirals can be generated.

My original inspiration came from observing spirals of opposite handedness emerging from adjacent faces of the same polygon. The natural question that arose was which ratio to pick so that the two polygon chains would fall in phase, as in Figure 2. In other words, I needed to find the ratio such that every crossing point of the two logarithmic spirals coincided with the center of a polygon along each band. In this case, the two bands would share a polygon every period. I found this to be achieved when the golden ratio was applied to pentagons, which spurred a determination of the analogous ratio for generalized $n$ -gons that corresponds to the sharing of every $n^{\rm th}$ polygon. The construction hinges on similar triangles whose vertices are the center of a polygon, the center of one of that polygon’s children, and the center of similitude.

spiral — Figure 3: Logarithmic similar triangles

Referring to Figure3 (illustrated in the case $n=5$ ), $\alpha=\pi/n$ and $\beta=3\pi/n,$ so that $\gamma=\pi/n.$ Now the triangle with angles labelled $\alpha,$ $\beta,$ and $\gamma$ is isosceles because $\alpha = \gamma.$ Moreover, the ratio between the longer and shorter sides is the same for all triangles since the spiral is logarithmic. If the shorter sides are of unit length, half of the base is $\cos (\pi/n),$ making the base, and thus the ratio, equal to $2\cos (\pi/n).$

Once the ratio has been found, spirals can be nested by applying a rotation of $\pi/n.$ Completing this process yields $n$ nested $n$ -gon spirals.

With the ratio found above, it is not hard to show that the equation for one of the logarithmic spirals with this ratio, passing through the centers of the $n$ -gons, has the equation:

$r = (2\cos (\pi/n)) ^{n \theta/{\pi}}.$

With most Bridges papers, there is a mix of mathematics and art. In fact, the first criterion listed on the Bridges website for art submissions is “Math content (this is a mathematically sophisticated audience.)” The second is “Esthetic appeal,” so artistry is important, too. What follows is Nick’s discussion of how he used the mathematical ideas discussed above to create digital art.

Begin with a base polygon, and consider producing spirals from every face at every iteration. Although this would create too dense a pattern, it is possible to produce an interesting subset of this set of polygons using a random algorithm. This algorithm assigns a probability that a spiral is generated from each face of the $n$ -gon, and this probability is randomly altered and then inherited by each child. The colors are also inherited and altered every generation. In Figure 5, the detailed texture is actually built of many small pentagons at a deep iteration. Off to the right can be seen a randomly generated pair of pentagonal arms falling into phase.

Figure 6 is a tiling of pentagons that features nested rings of pentagons with the property that any two adjacent pentagons differ in size by a ratio of the golden ratio. Figure 7 is an overlay of nonagon spirals with ratios between 0 and 1. This image captures the vast breadth of possible spirals based on a given $n$ -gon, and the fascinating way that they interact.

Figure 8 was randomly generated by the same algorithm which produced Figure 5, however with nonagons rather than pentagons. This picture illustrates the infinite detail of a fractal set based on interacting nonagon spirals.

Quite an amazing sequence of images! Nick took a Python programming class his first semester, and so was well-versed in basic coding. As a mathematics major, he had the necessary technical background, and being a double major in art as well helped him with the esthetics.

So yes, it took a lot of work! But the results are well worth it. Nick’s success illustrates what motivated undergraduates can accomplish given the appropriate encouragement and support. Let’s see more undergraduates participate in Bridges 2017!

Mathematics and Digital Art IV

This week will complete the series devoted to a new Mathematics and Digital Art (MDA) course I’ll be teaching for the first time this Fall. During the semester, I’ll be posting regularly about the course progression for those interested in following along.

Continuing from the previous post, Weeks 7 and 8 will be devoted to polyhedra. While not really a topic under “digital art,” so much of the art at Bridges and similar conferences is three-dimensional that I think it’s important that students are familiar with a basic three-dimensional geometric vocabulary.

Moreover, I’ve taught laboratory-based courses on polyhedra since the mid 1990’s, and I’ve also written a textbook for such a course. So there will be no problem coming up with ideas. Basic topics to cover are the Platonic solids (and proofs that there are only five), Euler’s formula, and building models with paper (including unit origami) and Zometools.

There are also over 50 papers in the Bridges archive on polyhedra. One particularly interesting one is by Reza Sarhangi about putting patterns on polyhedra (link here). Looking at this paper will allow an interested student to combine the creation of digital art and the construction of polyhedra.

At the end of Week 7, the proposal for the Final Project will be due. During Week 8, I’ll have one of the days be devoted to a construction project, which will give me time to go around to students individually and comment on their proposals.

This paves the way for the second half of the semester, which is largely focused on Processing and work on Final Projects.

In Weeks 9 and 10, the first two class periods will be devoted to work on Processing. I recently completed a six-part series on making movies with Processing (see Day039–Day044), beginning with a very simple example of morphing a dot from one color to another.

These blog posts were written especially for MDA, so we’ll begin our discussion of Processing by working through those posts. You’ll notice the significant use of IFS, which is why there were such an important emphasis during the first half of the course. But as mentioned in the post on Day044, the students in my linear algebra course got so excited about the IFS movie project, I’m confident we’ll have a similar experience in MDA.

The third class in Weeks 9 and 10 will be devoted to work on the Final Project. Not only does taking the class time to work on these projects emphasize their importance, but I get to monitor students’ progress. Their proposals will include a very rough week-by-week outline of what they want to accomplish, so I’ll use that to help me gauge their progress.

What these work days also allow for is troubleshooting and possibly revising the proposals along the way. This is an important aspect of any project, as it is not always possible to predict one’s progress — especially when writing code is involved! But struggling with writing and debugging code is part of the learning process, so students should learn to be comfortable with the occasional bug or syntax error. And recall that I’ll have my student Nick as an assistant in the classroom, so there will be two of us to help students on these work days.

Week 11 will be another Presentation Week, again largely based on the Bridges archives. However, I’ll give students more latitude to look at other sources of interest if they want. Again, we’re looking for breadth here, so students will present papers on topics not covered in class or the first round of presentations.

I wanted to have a week here to break up the second half of the semester a bit. Students will still include this week in their outline — they will be expected to continue working on their project as well. But I am hoping that they find these Presentation Weeks interesting and informative. Rather like a mini-conference in the context of the usual course.

Weeks 12 and 13 will essentially be like Weeks 9 and 10. Again, given that most students will not have written any code before this course, getting them to make their own movies in Processing will take time. There is always the potential that we’ll get done with the basics early — but there is no shortage of topics to go into if needed. But I do want to make sure all students experience some measure of success with making movies in Processing.

Week 14 will be the Final Project Presentation Week. This is the culminating week of the entire semester, where students showcase what they’ve created during the previous five weeks. Faculty from mathematics, computer science, art, and design will be invited to these presentations as well. I plan to have videos made of the presentations so that I can show some highlights on my blog.

Week 15 is reserved for Special Topics. There are just two days in this last week, which is right before Final Exams. I want to have a low-key, fun week where we still learn some new ideas about mathematics and art after the hard work is already done.

So that’s Mathematics and Digital Art! The planning process has been very exciting, and I’m really looking forward to teaching the course this fall.

Just keep the two “big picture” ideas in mind. First, that students see a real application of mathematics and programming. Second, students have a positive experience of mathematics — in other words, they have fun doing projects involving mathematics and programming.

I can only hope that the course I’ve designed really does give students such a positive experience. It really is necessary to bolster the perception of mathematics and computer science in society, and ideally Mathematics and Digital Art will do just that!

Mathematics and Digital Art III

Now that the overall structure of the course is laid out, I’d like to describe the week-by-week sequence of topics. Keep in mind this may change somewhat when I actually teach the course, but the progression will stay essentially the same.

Week 1 is inspired by the work of Josef Albers (which I discuss on Day002 of this blog). Students will be introduced to the CMYK and RGB color spaces, and will begin by creating pieces like this: Albers2

We’ll use Python code in the Sage environment (a basic script will be provided), and learn about the use of random number generation to create pattern and texture. This may be many students’ first exposure to working with code, so we’ll take it slowly. As with many of the topics we’ll discuss, students will be asked to read the relevant blog post before class. While we’ll still have to review in class, the idea is to free up as much class time as possible for exploration in the computer lab.

Week 2 will revolve around creating pieces like Evaporation,

Day011Evaporation2bWeb

which I discuss on Day011 and Day012. Again, we’ll be in the Sage environment (with a script provided). Here, the ideas to introduce are basic looping constructs in Python, as well as creating a color gradient.

Weeks 3–5 will be all about fractals. This is an ambitious three weeks, so we’ll begin with iterated function systems (IFS), which I discuss extensively on my blog (see Day034, Day035, and Day036 for an introduction).

Two

The important mathematical concept here is affine transformation, which will likely be unfamiliar to most students. Sure, they may understand a matrix as an “array of numbers,” but likely do not see a matrix as a representation of a linear transformation.

But there is such a wealth of fascinating images which can be created using affine transformations in an IFS, I think the effort is worth it. I’ve done something similar with a linear algebra course for computer science majors with some success.

I’ll start with the well-known Sierpinski triangle, and ask students to think about the self-similar nature of this fractal. While the self-similarity may be simple to explain in words, how would you explain it mathematically? This (and similar examples) will be used to motivate the need for affine transformations.

In parallel with this, we’ll look at a Python script for creating an IFS. There is a bit more to this algorithm than the others encountered so far, so we’ll need to look at it carefully, and see where the affine transformations fit in. I’ll create a “dictionary” of affine transformations for the class, so they can see and learn how the entries of a matrix influence the linear/affine transformations.

Having students understand IFS in these three weeks is the highest priority, since they form the basis of our work with Processing later on in the semester. As with any course like this, so much depends on the students who are in the course, and their mathematical background knowledge.

With this being said, it may be that most of these weeks will be devoted to affine transformations and IFS. With whatever time is left over, I’ll be discussing fractal images based on the same algorithm used to produce the Koch curve/snowflake (which I discuss on Day007, Day008, Day009, and Day027).

Day007Starburst

The initial challenge is to get students to understand a recursive algorithm, which is always a challenging new idea, even for computer science majors. Hopefully the geometric nature of the recursion will help in that regard.

If there is time, we’ll take a brief excursion into number theory. Without going into too many details (see the blog posts mentioned above for more), choosing angles which allow the algorithm to close up and draw a centrally symmetric figure depends on solving a linear diophantine equation like

$ax+by\equiv c\quad ({\rm mod}\ m).$

It turns out that the relevant equation may be solved explicitly, yielding whole families of values which produce intricate images. Here is one I just created last week for a presentation on this topic I’ll be giving at the Symmetry Festival 2016 in Vienna this July:

Koch_336_210_218

There is quite a bit of number theory which goes into setting up and solving this equation, but all at the elementary level. We’ll just go as far as we have time to.

Week 6 will be the first in a series of three Presentation Weeks. This week will be devoted to having students select and present a paper or two from the Bridges archive. This archive contains over 1000 papers given at the Bridges conferences since 1998, and is searchable.

The idea is to expose students to the breadth of the relationship between mathematics and art. Because of the need to explain both the mathematics and programming behind the images we’ll create in class, there necessarily will be some sacrifice in the breadth of the course content. Hopefully these brief presentations will remedy this to some extent.

With three 65-minute class periods and 13 students, it shouldn’t be difficult to allow everyone a 10-minute presentation during this week. It is not expected that a student will understand every detail of a particular paper, but at least communicate the main points.

Presentations will be both peer-evaluated and evaluated by me. As these are first-year students, it is understood that they may not have given many presentations of this type before. It is expected that they will improve as the semester progresses.

I realize that some of these ideas are repeated from last week’s post, but I did want to make these two posts covering the week-by-week sequence of topics self-contained. I also wanted to give enough detail so that anyone considering offering a similar course has a clear idea of what I have in mind. Next week, we’ll finish the outline, so stay tuned!

Mathematics and Digital Art II

This week, I want to talk more about the overall structure of the Mathematics and Digital Art (MDA) course I’ll be teaching in the fall. I won’t have time to address specifics about content today, but I’ll begin with that next week.

As I mentioned last week, because I can’t require students to bring a laptop to class, MDA will meet in a computer laboratory. Here is my actual classroom:

CO214_10182013

Each day, there will be some time in class — usually at least half the 65-minute period — for students to work at their comptuers. This is a typical 16-week course meeting three times a week. (Though courses at USF are four credits, hence the longer class time each day.)

Because the course is project-based, there are homework assignments and projects due, but no exams. There may be an occasional homework quiz on the mathematics, where I let students use their notes. I prefer this method to collecting homework, since there are always issues of too much copying. Because I typically change the numbers in homework quiz problems, it is difficult to do well on this type of quiz if all you do is copy your homework from someone else.

Instead of a Final Exam, there is a major project due at the end of the course. So the first half of the semester — roughly eight weeks — covers a breadth of topics so that students have lots of options when writing a proposal for their Final Project.

Their proposals are due mid-semester, so I have time to evaluate and discuss them, as well as make suggestions. I try to make sure each project is appropriate for each student — enough to challenge them, but not frustrate them. Of course there is flexibility for projects to undergo changes along the way, but the proposal allows for a very concrete starting point.

In the second half of the semester, most weeks will include one day for working on Final Projects. Not only does this emphasize the importance of the projects, but it also lets me see their progress and perhaps alter the direction they’re going if necessary.

The other main focus of the second half of the semester is the use of Processing to make movies. Because most students will not have studied programming before, I need to make sure there is plenty of time for them to be successful. We’ll need to take it slowly.

Of course this means that students will not be able to include the use of Processing in their course proposals, but that doesn’t mean they can’t adapt their project along the way to include the use of Processing if they want to. This is a necessary trade-off, however, since front-loading the course with a discussion of Processing would mean sacrificing the breadth of topics covered. I like the students to see as much as possible before they write their Final Project proposals.

This is the broad structure of the course. There are a few other aspects of MDA which also deserve mention. Three weeks of the course are devoted to presentations. The idea here is twofold. First, there is the clear benefit of developing students’ public speaking abilities.

Second, because students will be giving presentations on papers from the Bridges archive (the archive of all papers presented in the Bridges conferences since 1998), they will need to find a paper on a topic of interest to themselves at a level they can understand. As there are over 1000 papers here, along with an ability to search using keywords, this should not pose a siginificant problem. Of course should a student have another source about mathematics and art they are keen to share, this would be acceptable as well.

Because the class size is small (13 students), it will feasible to have all students present in each of the three weeks. The first Presentation Week on Bridges papers will be about the sixth week of the semester, and the second will be about the eleventh week.

The third Presentation Week will be at the fourteenth week of the semester, but this time will be focused on Final Projects. I will invite mathematics, computer science, and art/design faculty to these presentations as well, and of course will let the students know this in advance. All presentations will be both peer-evaluated and evaluated by me.

There is also a plan to bring guest speakers from the Bay area into the classroom. I know a handful of mathematical artists in the area, so bringing in two or three speakers over the course of a semester would be feasible. This is one of the design features of the First-Year Seminar, incidentally — expose students to the larger San Francicso/Bay area community.

In addition, I can have a student assistant in the classroom as well. Nick, my student who is also going to the Bridges conference in Finland this year, will serve in that role. We’ve spent a semester in a directed study to prepare for the Bridges 2016 conference, so he has unique qualifications. I’ll talk more about Nick in a future post.

When teaching a programming course with a laboratory component, it is difficult to be able to get around to help all students in any given class period. Certainly some questions students ask have simple answers (as in a syntax fix), but others will require sitting down with a student for several minutes.

So it will be great to have Nick as an assistant, since that will allow two of us to circulate around the classroom during the laboratory part of the class. The benefit to students will be obvious, and with the small class size, I’m confident they’ll get the attention they need.

Finally, I left the last week (just two class periods) open for special topics. Given all the demands of a first-semester student just before Final Exam week, I thought it would be nice for them to have a short breather. I’ll take suggestions for topics from the students, with the Bridges papers they presented on as a good starting point.

So that’s what the course looks like, broadly. Next week, I’ll begin a week-by-week discussion of the mathematical/artistic content of the course. I also intend to post weekly or biweekly while the course is going on — course design is a lot easier in theory than in practice, and I’ll be able to share pitfalls and triumphs in real time!

Mathematics and Digital Art I

Last week I discussed a movie project I had my linear algebra students do which involved the animation of fractals generated by iterated function systems. This week, I’d like to discuss a new classroom project — a Mathematics and Digital Art course I’ll be teaching this Fall at the University of San Francisco!

The idea came to me during the Fall 2015 semester when we were asked to list courses we’d like to teach for the Fall 2016 semester. I noticed that one of my colleagues had taught a First-Year Seminar course — that is, a course with a small enrollment (capped at 16) focused on a topic of special interest to the faculty member teaching the course. The idea is for each first-year student to get to know one faculty member fairly well, and get acclimated to university life.

So I thought, Why not teach a course on mathematics and art? My department chair urged me to go for it, and so I drafted a syllabus and started the process going. Here’s the course description:

What is digital art? It is easy to make a digital image, but what gives it artistic value? This question will be explored in a practical, hands-on way by having students learn how to create their own digital images and movies in a laboratory-style classroom. We will focus on the Sage/Python environment, and learn to use Processing as well. There will be an emphasis on using the computer to create various types of fractal images. No previous programming experience is necessary.

I have two”big picture” motivations in mind. First, I want the course to show real applications of mathematics and programming. Too many students have experienced mathematics as completing sets of problems in a textbook. In this course, students will use mathematics to help design digital images. I’ll say more about this in later posts.

And second, I want students to have a positive experience of mathematics. This course might be the only math course they have to take in college, and I want them to enjoy it! Given prevailing attitudes about mathematics in general, I think it is completely legitimate to have “students will begin to enjoy mathematics” as a course goal.

I also think that every student should learn some programming during their college career. Granted, students will start by tweaking Python code I give to them, just like with the movie project. Some students won’t progress much beyond this, but I am hopeful that others will. Given the type of course this is, I really can’t have any prerequisites, so I’m assuming I will have students who either haven’t taken a math course in a year or two, and/or have never written a line of code before.

I’ll go into greater detail in the next few posts about content and course flow, but today I’ll share three project ideas which will drive much of the mathematics and programming content. The first revolves around the piece Evaporation, which I discuss on Day011 and Day012 of my blog.

Day011Evaporation2bWeb

Creating a piece like this involves learning the basics of representing colors digitally, as well as basic programming ideas like variables and loops.

The second project revolves around the algorithm which produces the Koch curve, which I discuss in some detail on Day007, Day008, Day009, and Day027 of my blog.

Day007koch-45-175

By varying the usual angles in the Koch curve algorithm, a variety of interesting images may be produced. Many exhibit chaotic behavior, but some, like the image above, actually “close up” and are beautifully symmetric.

It turns out that entire families of images which close up may be generated by choosing pairs of angles which are solutions to a particular linear Diophantine equation. So I’ll introduce some elementary number theory so we can look at several families of solutions.

The third (and largest) project revolves around creating animated movies of iterated function systems, as I described in the last six posts.

This involves learning about linear and affine transformations in two dimensions, and how fractals may be described by iterated function systems. The mathematics is at a bit higher level here, but students can still play with the algorithms to generate fractal images without having completely mastered the linear algebra.

But I think it’s worth it, so students can learn to create movies of fractals. In addition, fractals are just cool. I think using IFS is a good way not only to show students an interesting application of mathematics and programming, but also to foster an enjoyment of mathematics and programming as well. I had great success with my linear algebra students in this regard.

I’d like to end this post with a few words on the process of creating a course like Mathematics and Digital Art at USF. Some of these points might be obvious, others not — and some may not even be relevant at your particular school.

Start early! In my case, the course needed to be first approved by the Dean, then next by a curriculum committee in order to receive a Core mathematics designation, and then finally by the First-Year Seminar committee. The approval process took four months.
Consider having your course in a computer lab. At USF, I could not require students to bring a laptop to class, since it could be the case that some students do not have their own personal computer. I hadn’t anticipated this wrinkle.
Don’t reinvent the wheel! One reason I’m writing about Mathematics and Digital Art on my blog is to make it easier for others to design a similar course. I’ll be talking more about content and course flow in the next few posts, so feel free to use whatever might be useful. And if would help, here is my course syllabus.

As I mentioned, next week’s post will focus more on the actual content of the course. Stay tuned!

Making Movies with Processing VI

The last post in this series will address how I used Processing in the classroom this past semester. Although my experience has been limited so far, the response has been great!

In the Spring 2016 semester, I used Processing in my Linear Algebra and Probability course, which is a four-credit course specifically for CS majors. The idea is to learn linear algebra first from a geometrical perspective, and then say that a matrix is simply a representation of a geometrical transformation.

I make it a point to generalize and include affine transformations as well, as they are the building blocks for creating fractals using iterated function systems (IFS). The more intuition students have about affine transformations, the easier it is for them to work with IFS. (To learn more about IFS, see Day034, Day035, and Day036 of my blog.)

If you’ve noticed, many of the movies I’ve discussed deal with IFS. Within the first three weeks of the class (here is the link to the course website), I assign a project to create a single fractal image using an IFS. I use the Sage platform as it supports Python and is open source, and all of my students were supposed to have taken a Python course already. All links, prompts, and handouts for this project may be found on Days 5 and 6 of the course website.

This sets up the class for a Processing project later on in the semester. The timing is not critical; as it turns out the project was due during the Probability section of the course (the last third) as most students had other large projects due a bit earlier. A sample movie provided to the students may be found on Day 22 of the course website, and the project prompt may be found on Day 33.

The basic idea was to use a parameter to vary the numbers in a series of affine transformations used to create a fractal using an IFS. As the parameter varied, the fractal image varied as well. This allowed for an animation from an initial fractal image to a final fractal image.

My grading rubric was fairly simple: each feature a student added beyond my bare-bones movie bumped their grade up. Roughly speaking, four additional features resulted in an A for the assignment. These might include use of color, background image, music, text, etc.

I was inspired by how eagerly students took on this assignment! They really got into it. They appreciated using mathematics — specifically linear algebra — in a hands-on application. I do feel that it is important for CS majors to understand mathematics from an applied viewpoint as well as a theoretical one. Very few CS majors will go on to become theoretical computer scientists.

We did take some class time to watch movies which students uploaded to my Google drive. All had their interesting features, but some were particularly creative. Let’s take a look at a few of them.

Here is Monica’s description of her movie:

My fractal movie consists of a Phoenix, morphing into a shell, morphing into the yin-yang symbol, and then morphing apart. I chose my background color to be pure black to create contrast between the orange and yellow colors of my fractal. The top fractal, which starts out as yellow, shifts downward the whole time. On the other hand, the bottom fractal, which starts out orange, shifts upward. In both cases, a small number of the points from each fractal get stuck in the opposite fractal and begin to shift with it. This leaves the two fractals at the end of the movie intertwined. I created text at the bottom of the fractal movie, which says “Phoenix.” I wanted to enhance the overall movie and give it a name. Lastly, I added music to my fractal movie. I picked the song “Sweet Caroline” by Neil Diamond.

Ethan says this about his movie:

The inspiration for this fractal came from a process of trial and error. I knew I wanted to have symmetry and bright color, but everything else was undecided. After creating the shape of the fractal, I decided to create a complete copy of the fractal and rotate one copy on top of the other. After seeing what it looked like with a simple rotation, I decided something was missing so I had the copied image rotate and either shrink or grow, depending on a random variable. In this movie the image shrinks. I used transitional gradients because I wanted to add more color without it looking too busy or cluttered.

Finally, this is how Mohamed describes his video:

This video starts as a set of four squares scaled by 0.45, and each square has either x increased by 0.5, y increased by 0.5, both increased by 0.5, or neither increased by 0.5. The grays and blacks as the video starts show the random points plotted as the numbers fed into the function are increasing, while the blues and whites show the points as the numbers fed into the function are decreasing. I chose to do this because we often see growth of functions in videos, but we do not see the regression back to its original form too often….

I was very pleased how creative students got with the project, and how enthusiastic they were about their final videos. I have another project underway where I use Processing — a Mathematics and Digital Art course I’ll be teaching this Fall semester. I’ll be talking about this course soon, so be sure to follow along!

Making Movies with Processing V

Last week, we saw how to use linear interpolation to rotate a series of fractal images. It was not unusually difficult, but it was important to call functions in the right sequence in order to make the code as simple as possible.

This week we’ll explore different ways to use color. Using color in digital art is a broad and complex topic, so we’ll only scratch the surface today.

The first movie shows how the different parts of the Sierpinski triangles corresponding to different affine transformations of the iterated function system can be drawn in different colors.

Recall that the points variable stored all the points to be drawn in any given fractal image. Since the points are drawn all at once, it is difficult to say which of the three transformations generated a particular point. But this is important because we want the color of a point to correspond to the transformation used to generate it.

One idea is to use three variables to store the points, and have these variables correspond to the three affine transformations. Here is the code — we’ll discuss it in detail in a moment.

CodeSnippet5

We use variables points1, points2, and points3 to store the points generated by each of the three affine transformations. Note that the use of append is now within each if statement, not after all the if statments. This is because we want to remember which points are generated by which transformation, so we can plot them all the same color.

As a result, we now need three separate calls to the stroke and point routines. Recall that in Processing, a call to the stroke command changes the color of everything drawn after that stroke command is called. So if we want to draw using three different colors, we need three calls to the stroke command.

Of course it follows that we need three calls to the point routine, since once we change the color of what is drawn, we need to make sure the correct set of points is that color. In this case, all the points in points1 are yellow, those in points2 are red, and those in points3 are blue.

Again, not unusually complicated. You just have to make sure you know how each function in Processing works, and the appropriate order in which to call the functions you use.

On to the next color experiment! It’s been a few weeks since we used linear interpolation with color. You’ll see in the movie below that the yellow triangle gradually turns to red, the blue triangle changes to yellow, and the red triangle becomes blue.

Let’s see how we’d use linear intepolation to accomplish this. Below is the only code which needs to be altered — the stroke and point commands. Also, I left out the rotate function so the changing of the colors would be easier to follow.

CodeSnippet6

We’ll focus on how to change the red triangle to blue in this example, which occurs for the points in the variable points2. The other color changes are handled similarly. All we need to do is use linear interpolation on each of the RGB values of the colors we are looking at.

For example, red has an R value of 255, but blue has an R value of 0. Now when p = 0 the triangle is red, and when p = 1, the triangle is blue. So we need to start (p, R) at (0, 255) and end at (1, 0). Creating a line between these two points results in the equation

R = (1 – p) * 255.

You can see the right-hand side of this equation as the first argument to the stroke command used to change the color for points2.

Working with the G values is easy. Since both red and blue have a G value of 0, we don’t need linear interpolation at all! Just leave the G value 0, and everything will be fine.

Finally, we look at the B value. For red, the B value is 0, but it’s 255 for blue. So we need to start (p, R) at (0, 0) and end at (1, 255). This is not difficult to do; we get the line

R = p * 255.

You’ll see the right-hand side of this equation as the third argument to the stroke command which changes the color for points2.

Just linear interpolation at work again! It’s not too difficult, once you look at it the right way.

For our last example, we’ll let the triangles “fade out,” as shown in the following movie.

Can you figure out how this is done? Linear interpolation again, but this time in the strokeWeight function. Here are the changes:

CodeSnippet7

Let’s what this if-else clause does. If the parameter p is less than 0.5, leave the stroke weight as 2. Otherwise, calculate the stroke weight to be (1 – p)*4.

What does this accomplish? Well, at p = 0.5, the stroke weight is (1 – 0.5)*4, which is 2. And at p = 1, the stroke weight is 0. This means that the stroke weight is 2 for the first half of the movie, then gradually diminishes to 0 by the end of the movie. In other words, a fade out.

Of course when you write the code, you have to reverse engineer it. If I call my stroke weight W, I want to start (p, W) at (0.5, 2) and end at (1, 0). Creating a line between these two points gives the equation

W = (1 – p) * 4.

That’s all there is to it!

I hope you’ve seen how linear interpolation is a handy tool you can use to create all types of special effects. The neat thing is that it can be applied to any function which takes numerical parameters — and those parameters can correspond to color values, angles of rotation, location, or stroke weight. The only limit to how you can incorporate linear interpolation into your movies is your imagination!

Making Movies with Processing IV

Last week, we saw how using linear interpolation allowed us to create animations of fractals. This week, we’ll explore how to create another special effect by using linear interpolation in a different way. We’ll build on last week’s example, so you might want to take a minute to review it if you’ve forgotten the details.

Let’s suppose that in addition to morphing the Sierpinski triangle, we want to slowly rotate it as well. So we insert a rotate command before plotting the points of the Sierpinski triangle, as shown here:

CodeSnippet1

First, it’s important to note that the rotate command takes angles in radian measure, not degrees. Recall from your trigonometry classes that

$360^\circ=2\pi{\rm \ radians.}$

But different from your trigonometry classes is that the rotation is in a clockwise direction. When you studied the unit circle, angles moved counter-clockwise around the origin as they increased in measure. This is not a really complicated difference, but it illustrates again how not every platform is the same. I googled “rotating in processing” to understand more, and I found what I needed right away.

Let’s recall that p is a parameter which is 0 at the beginning of the animation, and 1 at the end. So when p = 0, there is a rotation of 0 radians (that is, no rotation), and when p = 1, there is a rotation of $2\pi$ radians, or one complete revolution. And because we’re using linear interpolation, the rotation changes gradually and linearly as the parameter p varies from 0 to 1.

Let’s see what effect adding this line has. (Note: Watch the movie until the end. You’ll see some blank space in the middle — we’ll explain that later!)

What just happened? Most platforms which have a rotate command assume that the rotation is about the origin, (0,0). We learned in the first post that the origin in Processing is in the upper left corner of the screen. If you watch that last video again, you can clearly see that the Sierpinksi triangle does in fact rotate about the upper left corner of the screen in a clockwise direction.

Of course this isn’t what we want — since most of the time the fractals are out of the view screen! So we should pick a different point to rotate around. You can pick any point you like, but I though it looked good to rotate about the midpoint of the hypotenuse of the Sierpinski triangles. When I did this, I produced the following video.

So how did I do this? It’s not too complicated, but let’s take it one step at a time. We’ve got to remember that before scaling, the fractal fit inside a triangle with vertices (0,0), (0,2), and (2,0). I wanted to make it 450 pixels wide, so I scaled by a factor of 225.

This means that the scaled Sierpinski triangle fits inside a right triangle with vertices (0, 0), (0, 450), and (450, 0). Using the usual formula, we see that the midpoint of the hypotenuse of this triangle has coordinates

$\dfrac12\left((0,450)+(450,0)\right)=(225,225).$

To make (225, 225) the new “origin,” we can just subtract 225 from the x– and y-coordinates of our points, like this:

CodeSnippet2

Remember that the positive y-axis points down in Processing, which is why we use an expression like 225 – y rather than y – 225. This produces the following video.

This isn’t quite what we want yet, but you’ll notice what’s happening. The midpoint of the hypotenuse is now always at the upper left corner. As the triangle rotates, most of it is outside the view screen. But that’s not hard to fix.

All we have to do now is move the midpoint of the hypotenuse to the center of the screen. We can easily do this using the translate function. So here is the complete version of the sierpinski function, incorporating the translate function as well:

CodeSnippet3

So let’s briefly recap what we’ve learned. Rotating an image is not difficult as long as you remember that the rotate function rotates about the point (0,0). So first, we needed to decided what point in user space we wanted to rotate about – and we chose (225, 225) so the fractals would rotate around the midpoint of the hypotenuse of the enclosing right triangle. This is indicated in how the x– and y-coordinates are changed in the point function.

Next, we needed to decided what point in screen space we wanted to rotate around. The center of the screen seemed a natural choice, so we used (384, 312). This is indicated in the arguments to the translate function.

And finally, we decided to have the triangles undergo one complete revolution, so that p = 0 corresponded to no rotation at all, and p = 1 corresponded to one complete revolution. We accomplished this using linear interpolation, which was incorporated into the rotate function.

But most importantly — we made these changes in the correct order. If you played around and switched the lines containing the translate and rotate functions, you’d get a different result.

It is worth remarking that it is possible to use the rotate function first. But then the translate function would be much more complicated, since you would have to take into account where the point (384, 312) moved to. And you’d have to review your trigonometry. Here’s what the two lines would need to look like:

CodeSnippet4

As you can see, there is a lot more involved here! So when you’re thinking about designing algorithms to produce special effects, it’s worth thinking about the order in which you perform various tasks. Often there is a way that is easier than all the others — but you don’t always hit upon it the first time you try. That’s part of the adventure!

Next week we’ll look a few more special effects you can incorporate into your movies. Then we’ll look at actual movies made by students in my linear algebra class. They’re really great!

Making Movies with Processing III

This week, we begin a discussion of creating movies consisting of animated fractals. Last week’s post about the dot changing colors was at a beginning level as far as Processing goes. This week’s post will be a little more involved, but will assume a knowledge of Iterated Function Systems. I talked about IFS on Day034, Day035, and Day036. Feel free to look back for a refresher….

Today, we’ll see how to create the following movie. You’ll notice that both the beginning and final Sierpinski triangles are fractals discussed on Day034.

As a reminder, these are the three transformations which produce the initial Sierpinksi triangle:

$F_1\left(\begin{matrix}x\\y\end{matrix}\right)=\left[\begin{matrix}0.5&0\\0&0.5\end{matrix}\right] \left(\begin{matrix}x\\y\end{matrix}\right),$

$F_2\left(\begin{matrix}x\\y\end{matrix}\right)=\left[\begin{matrix}0.5&0\\0&0.5\end{matrix}\right] \left(\begin{matrix}x\\y\end{matrix}\right)+\left(\begin{matrix}1\\0\end{matrix}\right),$

$F_3\left(\begin{matrix}x\\y\end{matrix}\right)=\left[\begin{matrix}0.5&0\\0&0.5\end{matrix}\right] \left(\begin{matrix}x\\y\end{matrix}\right)+\left(\begin{matrix}0\\1\end{matrix}\right).$

Also, recall that to get the modified Sierpinski triangle at the end of the video, all we did was change the first transformation to

$F_1\left(\begin{matrix}x\\y\end{matrix}\right)=\left[\begin{matrix}0.25&0\\0&0.5\end{matrix}\right] \left(\begin{matrix}x\\y\end{matrix}\right).$

We’ll how to use linear interpolation to create the animation. But first, let’s look at the Python code for creating a fractal using an iterated function system.

ifscode

The parameter p is for the linear interpolation (which we’ll discuss later), and n is the number of points to plot. First, import the library for generating random integers — since each transformation will be weighted equally, it’s simpler just to choose a random integer from 1, 2, and 3. The variable points keeps track of all the points, while last keeps track of the most recently plotted point. Recall from earlier posts that you only need the last point in order to get the next one.

Next, the for loop just creates new points, one at a time, and appends them to points. Once an affine transformation is randomly chosen by selecting a randint in the range from 1 to 3, it is applied to the last point generated. For the purpose of writing Python code, it’s easier to use the notation

$F_2\left(\begin{matrix}x\\y\end{matrix}\right)=\left(\begin{matrix}0.5 \ast x+1\\0.5\ast y\end{matrix}\right)$

rather than matrix notation. In order to use vector and matrix notation, you’d need to indicate that (1,2) is a vector by writing

v = vector(1,2),

and similarly for matrices. Since we’re doing some fairly simple calculations, just writing out the individual terms of the result is easier and requires less code.

Once the points are all created, it’s time to plot them. You’ll recognize the background, stroke, and strokeWeight functions from last week. Nothing fancy here, since we’re focusing on algorithms today. Just a black background and small orange dots.

The last line plots the points, and is an example of what is called list comprehension in Python. First, note that the iterated function system would create a fractal which would fit inside a triangle with vertices (0,2), (0,0), and (2,0). So we need to suitably scale the fractal — in this case by a factor of 225 so it will be large enough to see. Remember that units are in pixels in Processing.

Then we need to compensate for Processing’s coordinate system. You’ll notice a similarity to what we did a few weeks ago.

What the last line does is essentially this: for every point x in the list points, adjust the coordinates for screen space, and then plot x with the point function. List comprehension is convenient because you don’t have to make a loop or other iterative construct — it’s done automatically for you.

Of course that doesn’t mean you never need a for loop. It wouldn’t be easy to replace the for loop above with a list comprehension as each new point depends on the previous one. But for plotting a bunch of points, for example, it doesn’t matter which one you plot first.

Now for the linear interpolation! We want the first frame to be the usual Sierpinski triangle, and the last frame to be our modified triangle. The only difference is that one of the constants in the first function changes from 0.5 to 0.25.

This is perfect for using linear interpolation. We’d like our parameter p to be 0.5 when p = 0, and 0.25 when p = 1. So we just need to create a linear function of p which passes through the points (0, 0.5) and (1, 0.25). This isn’t hard to do; you should easily be able to get

$0.5 - 0.25 \ast p.$

The effect of using the parameter p in this way is to create a series of fractals, each one slightly different from the one before. Since we’re taking 360 steps to vary from 0.5 to 0.25, there is very little difference from one fractal to the next, and so when strung together, the fractals make a convincing animation.

I should point out the dots look like they’re “dancing” because each time a fractal image is made, a different series of random affine transformations is chosen. So while the points in each successive fractal will be close to each other, most of them will actually be different.

For completeness, here is the code which comes before the sierpinski function is defined.

ifscodesetup2

It should look pretty familiar from last week. Similar setup, creating the parameter p, writing out the frames, etc. You’ll find this a general type of setup which you can use over and over again.

So that’s all there is to it! Now that you’ve got a basic grasp of Processing’s screen space and a few different ways to use linear interpolation, you can start making movies on your own.

Of course there are lots of cool effects you can add by using linear interpolation in more creative ways. We’ll start to take a look at some of those next week!