Creating Animated GIFs in Processing

Last week at our Digital Art Club meeting, I mentioned that I had started making a few animated gifs using Processing.  Like this one.

(I’m not sure exactly why the circles look like they have such jagged edges — must have to do with the say WordPress uploads the gif.  But it was my first animated gif, so I thought I’d include it anyway.)

And, of course, my students wanted to learn how to make them.  A natural question.  So I thought I’d devote today’s post to showing you how to create a rather simple animated gif.

Certainly not very exciting, but I wanted to use an example where I can include all the code and explain how it works.  For some truly amazing animated gifs, visit David Whyte’s Bees & Bombs page, or my friend Roger Antonsen’s Art page.

Here is the code that produces the moving circles.

I’ll assume you’ve done some work with Processing, so you understand the setup and draw functions, you know that background(0, 0, 0) sets the background color to black, etc.

The idea behind an animated gif which seems to be a continuous loop is to create a sequence of frames whose last frame is essentially the same as the first.  That way, when the gif keeps repeating, it will seem as though the image is continually moving.

One way to do this is with the “mod” function — in other words, using modular arithmetic.  Recall that taking 25 mod 4 means asking “What is the remainder after dividing 25 by 4?”  So if you take a sequence of numbers, such as

1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, …

and take that sequence mod 4, you end up with

1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, ….

Do you see it already?  Since my screen is 600 pixels wide, I take the x-coordinate of the centers of the circles mod 600 (that’s what the “% 600” means in Python).  This makes the image wrap around horizontally — once you hit 600, you’re actually back at 0 again.  In other words, once you go off the right edge of the screen, you re-enter the screen on the left.

That’s the easy part….  The geometry is a little trickier.  The line

x = (75 + 150 * i + 2 * frameCount) % 600

requires a little more explanation.

First, I wanted the circles to be 100 pixels in diameter.  This makes a total of 400 pixels for the width of the circles.  Now since I wanted the image to wrap around, I needed 50 pixels between each circle.  To begin with a centered image, that means I needed margins which are just 25 pixels.  Think about it — since the image is wrapping around, I have to add the 25-pixel margin on the right to the 25-pixel margin on the left to get 50 pixels between the right and left circles.

So the center of the left circles are 75 pixels in from the left edge — 25 pixels for the margin plus 50 pixels for the radius.  Since the circles are 100 pixels in diameter and there are 50 pixels between them, there are 150 pixels between the centers of the circles. That’s the “150 * i.”  Recall that in for loops, the counters begin at 0, so the first circle has a center just 75 pixels in from the left.

Now here’s where the timing comes in.  I chose 300 frames so that by showing approximately 30 frames per second (many standard frame-per-second rates are near 30 fps) the gif would cycle in about 10 seconds.  But cycling means moving 600 pixels in the x direction — so the “2 * frameCount” will actually give me a movement of 600 pixels to the right after 300 frames.  You’ve got to carefully calculate so your gif moves at just the speed you want it to.

To make displaying the colors easier, I put the R, G, and B values in lists.  Of course there are many other ways to do this — using a series of if/else statements, etc.

One last comment:  according to my online research, .png files are better for making animated gifs, while .tif files (as I’ve also used in many previous posts) are better for making movies.  But .png files take longer to save, which is why your gif will look like it’s moving slowly when you use saveFrame, but will actually move faster once you make your gif.

So now we have our frames!  What’s next?  A few of my students mentioned using Giphy to make animated gifs, but I use GIMP.  It is open source, and can be downloaded for free here.  I’m a big fan of open source software, and I like that I can create gifs locally on my machine.

Once you’ve got GIMP open, select “Open as Layers…” from the File menu.  Then go to the folder with all your frames, select them all (using Ctrl-A or Cmd-A or whatever does the trick on your computer), and then click “Open.”  It may take a few minutes to open all the images, depending on how many you have.

Now all that’s left to do is export as an animated gif!  In the File menu, select “Export As…”, and make sure your filename ends in “.gif”.  Then click “Export.”  A dialog box should open up — be sure that the “As animation” and “Loop forever” boxes are checked so your animated gif actually cycles.  The only choice to make now is the delay between frames.  I chose 30 milliseconds, so my gif cycled in about 10 seconds.  Then click “Export.”  Exporting will also take a few seconds as well — again, depending on how many frames you have.

Unfortunately, I don’t think there’s a once-size-fits-all answer here.  The delay you choose depends on how big your gif actually is — the width of your screen in Processing — since that will determine how many frames you need to avoid the gif looking too “jerky.”  The smaller the time interval between frames, the more frames you’ll need, the more space those frames will take up, and the longer you’ll need to upload your images in Gimp and export them to an animated gif.  Trade-offs.

So that’s all there is to it!  Not too complicated, though it did take a bit longer for me the first time.  But now you can benefit from my experience.  I’d love to see any animated gifs you make!

Mathematics and Digital Art: Update 1 (Fall 2017)

About a month has passed since beginning my third semester of Mathematics and Digital Art!  As with last semester, I plan on giving updates about once a month to discuss changes in the course and to showcase student work.

The main difference this semester (as I discussed a few weeks ago) was starting with Processing right from the beginning.  From my perspective, the course has run more smoothly than ever — and some of my students are already really getting into the coding aspect of creating digital art.

I do believe that beginning this way will pay off when we get to making movies.  Since we’ll already know the basics and understand the difference between user space and screen space, I can focus more on the interactive abilities of Processing — such as having features of the displayed image change by moving the mouse or pressing different keys on the keyboard.

The first two assignments were essentially the same as last semester.  We began with discussing color and the work of Josef Albers, emphasizing the fact that there is no such thing as “pure color” — colors are only perceived in relation to other colors.

Again, I was surprised by the diversity of the images students created.  Like last year, a few students experimented with a minimalist approach.  Here is what Alex generated using just a 2-by-2 grid of squares.

I should point out that outlining the geometrical objects (using the strokeWeight function) is not “pure” Albers — you aren’t really seeing one color on top of another due to the black outlines.  But I did have students submit three pieces, insisting that one of the pieces was created only by changing the parameters in the original Albers routine, as shown in the following submission.

Here is Courtney’s submission on this theme, again created only by changing parameters to the drawing routine.

Most students — I think in part due to the fact that we started discussing code even earlier than previous semesters — really pushed the geometry far beyond the simple idea of rectangles within rectangles.

While toying with various geometrical motifs, Tera found something that reminded her of a rose.  This influenced her color palette:  reds and pinks for the flowers, with a green background, meant to suggest that the flowers were in a garden.

Cissy explored the geometry as well.  Note how keeping the stroke weight at zero — so that the geometrical objects have no outline — creates a more subtle effect, especially since the randomness from the dominant color is not too pronounced.

The second art assignment, as in the previous semesters, was to explore creating textures using randomness in both color and shape.  As with the first assignment, I wanted students to submit one piece which involved only changing the parameters to a given function.  In this case, the function created a grid of gray circles, with both the intensity of the gray and the size of the circles having some degree of randomness.  I think it is important that students do some work within given constraints — it really challenges their creativity.  Here is Terry’s piece along these lines.

The second piece was based on a function which created a grid of squares of the same size, but random colors.  Here, there were no constraints — students could modify the geometry in any way they wanted to.  Several were quite creative.  For example, Sepid approached this task by choosing both shape and color to create an image reminiscent of a stained glass window.

The third piece involved a color gradient (see my previous posts on Evaporation).  If you look back at these posts, you’ll recall that a color gradient can be created by increasing the randomness of the colors as you move from the top of the image to the bottom using a power function:  $f(y)=y$ corresponds to a linear gradient, $f(y)=y^2$ corresponds to a quadratic gradient, etc.  Different effects can be created by varying the exponent.

As I was discussing this in class, one student asked what would happen if you used a negative exponent.  I had never thought about this before!  Jack used this idea in his piece, which he said reminds him of looking at a fire.

It turns out that using a negative exponent creates a gradient beginning with black on the top.  Why is this?  As the image proceeds lower down the screen, the algorithm subtracts values from the RGB parameters proportional to $y^n,$ where $y=0$ corresponds to the top of the image, and $y=1$ corresponds to the bottom of the image.

So if the exponent $n$ is positive, there is very little randomness subtracted.  But if the exponent is negative, a lot of randomness is subtracted, since now the numbers near 0 are on the denominator.  Because the RGB values only go up to 255, subtracting a large degree of randomness leaves nothing left — in other words, black.  Now some of the numbers will end up being negative  near the top– but putting all negative numbers in a color specification in Processing does in fact give you black.

Another student also worked with yellows and reds to imitate fire in another way.  Instead of making small circles, he made larger circles with quite a bit of overlap, creating a rather different effect.

And Rosalie found in interesting say to create stripes with the algorithm.  I had not seen this effect before.

So that’s it for the first update of the Fall 2017 installment of Mathematics and Digital Art.  As you can see, my students are already being quite creative.  I look forward to seeing their work develop as the semester progresses!

Bay Area Mathematical Artists, I

Yesterday was the first meeting of the Bay Area Mathematical Artists at the University of San Francisco!

It all began one balmy Friday evening in Waterloo, Ontario, Canada at the Bridges 2017 conference….the Mendlers and I hosted a pot luck dinner at our AirBnB, and we realized how many of us were from the Bay area.  In fact, we remarked upon the fact that nine of us were actually on the same flight from San Francisco to Toronto for the conference!

Bridges participants do really form a community.  There is a spirit of sharing and mutual appreciation for each others’ work.  We really do cherish those few days each year when we can all come together.  The only drawback is that Bridges comes around just once a year.

So throughout the evening, between chowing down on grilled fare and sipping a glass of beer or wine, the idea of informally gathering now and then kept cropping up.

But as we all know, ideas do not automatically become reality.  They have a tendency to wither if not watered and fertilized….so I decided to take up gardening.

I had the advantage of being associated with a University, so I could arrange a meeting space.  Location was also somewhat convenient — some of us were to the northeast in Oakland and Berkeley, and others were to the southwest in Santa Clara and Scotts Valley.  It might be nice to move around occasionally so not everyone has to drive as far all the time.  But since the meetings are on Saturdays, at least traffic is not so much of a bother.

And then come the emails!  Yes, lots of them….  The main decision to be made was deciding on a format.  I thought informal was best — I sent out a call for speakers, and put them on the docket on a first-come, first-served basis.  I wanted to take away the stress of competing for time; if there were more speakers than we had time for, we’d just start where we left off the last time.

The other reason for this is that I wanted to encourage students from my Mathematics and Digital Art class, as well as members of the newly formed Digital Art Club, to participate as well.  I think it is important to let mathematical artists of all levels have a place to share ideas and get feedback on their work.

So for our inaugural meeting, we had three speakers:  Chamberlain Fong, Karl Schaffer,  and Dan Bach.

Chamberlain’s talk was entitled The Conformal Hyperbolic Square and Its Ilk.  He discussed different ways to transform circular hyperbolic tilings (particularly those of Escher) to square images.  Chamberlain did give a version of this talk at Bridges in 2016, but included more recent results as well.  For more information, you can contact him at chamberlain@yahoo.com.

Karl Schaffer’s talk was entitled Dance’s Center of Attention Mass.  Inspired by Joseph Thie’s Rhythm and Dance Mathematics and Kasia Williams’ idea of “Center of Attention Mass,” Karl is interested in graphically showing where the center of attention is by weighting the position of each dancer on stage.  He went so far as to contact Thie — now in his 80’s — and they are actively collaborating together.

Karl is also giving the lecture/demonstration Calculated Movements at the Montalvo Art Center next March.  There is more information here.  You can reach Karl at karl_schaffer@yahoo.com.

Finally, Dan Bach’s talk was entitled 3D Math Art and iBooks Author.  Dan is keen on creating highly interactive math books which engage students of all ages.  He gave a practical talk demonstrating the software he uses, including examples of converting graphics to various different formats since it is not always a simple task to take a 3D image created by one software package and import it into another.  You can reach Dan at dan@dansmath.com.

After the talks — which included ample room for Q&A — we had a brief discussion on the future of the group.  I wanted to make it clear that while I am willing to keep things going in the current format, it is really up to the group to decide how to run our meetings.  We opted to keep things going the same way for next month — but suggestions for the future included workshops, or perhaps themed sessions, like a series of talks on polyhedra.  Participants were encouraged to think of other ways to use our time together as a topic of discussion for the next meeting.  Keeping it informal means lessening the pressure of submitting talks/papers for conferences, etc.

Then dinner!  Most of us were available for a meal afterwards.  There were two nice options nearby — a cafe with sandwiches and salads, and an Indian restaurant with a buffet.  I went with the group who preferred Indian food — and truly, a good time was had by all!  We left for dinner at about 5:30, and I finally had to break things up shortly before 8:00, since some of us had a ways to drive home.  We could clearly have kept talking for quite a while….

So our first meeting of the (tentatively named) Bay Area Mathematical Artists was a success!  There were a total of 15 of us present, including three students from USF — a very respectable number for a first time event.  We plan to meet approximately monthly, modulo the University schedule of classes and holidays.

I’ll post summaries each month of our meetings, including a brief synopsis of the talks, workshop(s), or whatever other form the meetings take.  Feel free to contact the speakers for more information about the talks they gave this weekend, and don’t hesitate to spread the word to others who might be interested!

Using Processing for the First Time

While I have discussed how to code in Processing in several previous posts, I realized I have not written about getting Processing working on your own computer.  Naturally I tell students how to do this in my Mathematics and Digital Art course.  But now that I have started a Digital Art Club at the University of San Francisco, it’s worth having the instructions readily accessible.

The file I will discuss may be used to create an image based on the work of Josef Albers, as shown below.

See Day002 of my blog,  Josef Albers and Interaction of Color, for more about how color is used in creating this piece.

As you would expect, the first step is to download Processing.  You can do that here.  It may take a few moments, so be patient.

The default language used in Processing is Java.  I won’t go into details of why I’m not a fan of Java — so I use Python mode.  When you open Processing, you’ll see a blank document like this:

Note the “Java” in the upper right corner.  Click on that button, and you should see a menu with the option “Add Mode…”  Select this option, and then you should see a variety of choices — select the one for Python and click “Install.”  This will definitely take a few minutes to download, so again, be patient.

Now you’re ready to go!  Next, find some Processing code written in Python (from my website, or any other example you want to play around with).  For convenience, here is the one I’ll be talking about today:  Day03JosefAlbers.pyde.  Note that it is an Open Office document; WordPress doesn’t let you upload a .pyde file.  So just open this document, copy, and paste into the blank sketch.  Be aware that indentation is important in Python, since it separates blocks of code.  When I copied and pasted the code from the Open Office document, it worked just fine.  But in case something goes awry, I always use four spaces for successive indents.

Now run the sketch (the button with the triangle pointing to the right).  You will be asked to create a new folder; just say yes.  When Processing runs, it often creates additional files (as we’ll see in a moment), and so keeping them all in one folder is helpful.  You should also see the image I showed above; that is the default image created by this Processing program.

Incidentally, the button with the square in the middle stops running your sketch.  Sometimes Processing runs into a glitch or crashes, so stopping and restarting your sketch is sometimes necessary.  (I still haven’t figured out why it crashes at random times.)

Next, go to the folder that you just created.  You should see a directory called “frames.”  Inside, you should see some copies of the image.

Inside the “draw” function, there is a function call to “saveFrame,” which saves copies of the frames you make.  You can call the folder whatever you want; this is convenient, since you might want to make two different images with the same program.  Just change the folder name you save the images to.

A word about the syntax.  The “####” means the frames will be numbered with four digits, as in 0001.png, 0002.png, etc.  If you need more than 10,000 frames (likely you won’t when first starting), just add more hashtags.  The “.png” is the type of file.  You can use “.tif” as well.  I use “.tif” for making movies, and “.png” for making animated gifs.  There are other file types as well; see the documentation on saveFrame for more details.

Now let’s take a look at making your own image using this program.

If you notice, there are lines labelled “CHANGE 1” to “CHANGE 6” in the setup and draw functions.  These are the only lines you need to change in order to design you own piece. You may tweak the other code later if you like.  But especially for beginning programmers, I like to make the first examples very user-friendly.

So let me talk you through changing these lines.  I won’t bother talking about the other code right now — that would take some time!  But you don’t need to know what’s under the engine in order to create some interesting artwork….

CHANGE 1:  The hashtags here, by the way, indicate a comment in your code:  when your program runs, anything after a hashtag is ignored.  This makes it easy to give hints and provide instructions in a program (like telling you what lines to change).  I created a window 800 x 600 pixels; you can make it any size you want by changing those numbers. The “P2D” just means you’re working with a two-dimensional geometry.  You can work in 3D in Processing, but we won’t discuss that today.

CHANGE 2:  The “sqSide” variable indicates how big the square are, in units of pixels.  The default unit in Processing is always pixels, so if you want to use another geometry (like a Cartesian coordinate system), you have to convert from one coordinate system to another.  I do all this for you in the code; all you need to do is say how large each square is.  And if you didn’t go back and read the Josef Albers piece, by “square,” I mean a unit like this:

CHANGE 3, CHANGE 4:  The variables “sqRows” and “sqCols” indicate, as you would expect, how many rows and columns are in the final image.  Since I have 15 rows and the squares are 30 pixels on a side, the height of the image is 450 pixels.  Since my window is 600 pixels in height, this means there are margins of 75 pixels on the top and bottom.  If your image is too tall (or too wide) for the screen, it will be cropped to fit the screen.  Processing will not automatically resize — once you set the size of the screen, it’s fixed.

CHANGE 5:  The “background” function call sets the color of the background, using the usual RGB values from 0-255.

CHANGE 6:  The first three numbers are the RGB values of the central rectangles in a square unit.  The next three numbers indicate how the background colors of the surrounding rectangles change.  (I won’t go into that here, since I explain it in detail in the post on Josef Albers mentioned above.  The only difference is that in that post, I use RGB values from 0-1, but in the Processing code here, I use values from 0-255.  The underlying concept is the same.)

The last (and seventh) number is the random number seed.  Why is this important?  If you don’t say what the random number seed is (the code does involve choosing random numbers), every time you run the code you will get a different image — the computer just keeps generating more (and different) random numbers in a sequence.  So if you find an image you really like and don’t know what the seed is, you’ll likely never be able to reproduce it again!  And if you don’t quite like the texture created by using one random seed, you can try another.  It doesn’t matter so much if you have many rows and columns, but if you try a more minimalist approach with fewer and larger squares, the random number seed makes a big difference.

OK, now you’re on your own….  This should be enough to get you started, and will hopefully inspire you to learn a lot more about Python and Processing!

Mathematics and Digital Art: Final Update

It’s hard to believe yet another academic year is over!  I do think this second semester of Mathematics and Digital Art went a little more smoothly than the first.  This shouldn’t be too surprising, though — the first time implementing any new course is a little bumpy.  Though I must admit, there were surprisingly few bumps the first time around….

Like last semester, I had students create a movie in Processing.  The main tool I had them use was linear interpolation to create animation effects.  As before, I encouraged them to use linear interpolation with any numerical parameter in their movie — how much red there is in the background color, the position of objects on the screen, or the width of points and lines, just to name a few possibilities.

Colette created some interesting visual effects.  Some students (like her) took advantage of the fact that if you don’t set the background color in the draw function in Processing, successive calls to the draw function overlap the previous ones, giving a sense of movement.

Peyton was inspired when her friends invited her to go to the beach.  Here is a screen shot of her movie, where the moon reflects off the rippling waves of the sea at Ocean Beach in San Francisco.

Next, I’d like to share a few pieces from students’ Final Projects.  Recall that Final Projects are an important part of the course — during the second half of the semester, we spend one or two days a week working on them.  This is the opportunity for students to explore any aspect of the course in more detail.

While Lainey focused on making images which reminded her of her dreams, she began with this collage including  several motifs from our coursework throughout the semester.  She was one of the few to incorporate L-systems into her Final Project.

Karina, as many students did, experimented with image processing.  She wanted to overlay multiple images at various transparencies to create a kaleidoscopic effect.  Rotating the images required that she brush up on her trigonometry….

Karla was interested in experimenting with color.  She was interested in morphing images of the Buddha.  Karla used the RGB values of the pixels in an original image, like the one shown below on the left, to determine the RGB values of the pointillistic image shown on the right.

Also like last semester, I asked students to write a final response paper about their experience with the digital course.  The responses were similar to those of last semester, so I’ll only include a few excerpts here.

I think differently about mathematics in how it relates to art. I always thought that the two would be separate entities, but this class has proved that’s not always the case.

After having taken this course this semester I really have gained an interest in art and programming that I certainly didn’t have before, even after having taken some courses in programming. I think that actually being able to see the endless things that are able to be created using programming and math is really cool….

One student made a particularly interesting remark:

I wish that I had more knowledge on how to type my own code. There were points in the semester where the art I was creating felt a bit like a coloring page where we were given a page that was already drawn and told to fill it in and try to make it our own.

Of course this is what I want to read!  I do want to inspire students to investigate programming further — but students taking this course receive a mathematics credit.  There is certainly no doubt in your mind about how passionate I am about having students learn to write code, but I do need to emphasize the mathematics of digital art.  Maybe next semester I’ll have Nick run some extra sessions on coding for those who are interested in learning more.

I also wanted to share some work from the other course I taught this semester, Linear Algebra and Probability.  I have students work with affine transformations and iterated function systems in this course as well.  Their first project is a still image using Sage, and their second project is a fractal animation using Processing.  Here is Jay’s submission.

And finally, I want to remind you that Mathematics and Digital Art is becoming a university-wide course next year.  I am working with the Fine Arts department here at USF to encourage incoming fine arts majors to earn their mathematics credit by creating digital art!  I expect the course to be quite a bit larger this Fall, and will be connecting with the Fine Arts faculty to make sure the content meets their needs as well.

In addition, I will be giving a talk at Bridges this summer (in Waterloo, (the Canadian one, that is)) about my digital art course.  I’m expecting that I’ll receive a wide range of comments and suggestions, so the course may be a little different in the fall.  That’s one nice feature of this course — it’s not a prerequisite for any other course, so there is some flexibility as far as content is concerned.

Like this semester, I’ll provide monthly updates to let you know what changes I’ve implemented, and also to showcase student work.  So stay tuned!

Mathematics and Digital Art: Update 3

It’s hard to believe it’s been a month since my last update!  This semester has been unusually busy.

At the end of my last update, I said I’d talk more about using L-systems in class.  I decided to focus on the symmetrical Koch-like images I had been working on for the past few years.  There are two reasons for this.  First, it’s fresh — and demonstrates that creating new fractal images is an active research topic; not everything is known.  Second, you need to know some elementary number theory in order to create symmetrical images.  Since none of the mathematics we studied so far was closely related to number theory, this was a great opportunity to see yet another application of a different branch of mathematics.

I started with introducing the basics of modular arithmetic.  This was new to most students, but the motivation was easy:  the direction you’re pointing after any given move is relevant to deciding if your sequence of segments closes up.  And any time you turn counterclockwise, you increment the direction by the angle you turn, but subtract 360° when you go over 360° since a turn of 360° doesn’t alter your direction.  This is just using a modulus of 360 for the direction you’re pointing.

Then, I reminded them how to find the prime factorization of numbers in order to create a 2-adic valuation.  Recall that the 2-adic valuation of a number is the exponent of the highest power of 2 which divides that number.  This is significant since the 2-adic valuation (mod 2) indicates how to turn when drawing a Koch-like curve:  a 0 represents one angle (60° for the Koch curve), and a 1 represents the other (240° for the Koch curve).  So we created charts like this:

Then finally, I showed students how to find angle pairs which created symmetrical images using a theorem in a paper I’m working on for the College Mathematics Journal.  As the proof involves significantly more mathematics at a level beyond what we could reasonably discuss in the course, I just showed them the result.  I won’t go into details here, but I’d be glad to share a draft of the paper if you’re interested and adventurous….

For their project work, they had to create images using the results of the theorem in Processing.  Karla created this image, which I find interesting since it exhibits six-fold symmetry, but the exterior elements have seven points on them.  So rarely do you encounter 6 and 7 together in geometry.

Peyton created this image, which is suggestive of a complete image, but which doesn’t include all the line segments.  But the overall symmetry of the image is clear; you can complete it in your mind’s eye.

I also asked students to create an image which did not close up, to experiment with parameters which generated a more chaotic image.  Colette created this image, which reminded her of the top of a pine tree.

Some students did have difficulty using the theorem correctly to generate images with symmetry, so next semester I’ll spend a little extra time making sure everyone’s on track.

We also had another guest speaker visit the class since the last update.  I met Gwen Fisher at the Art Exhibition in Santa Clara at the Regional MAA meeting last month, and thought she would be a great fit for our class.  What I liked about her art is that she works with beads in very mathematical ways — and her work is very different from anything we had been doing in the class.

She brought in several of examples of her beadwork to pass around.  You can see many beautiful pieces on her website, including this Wisdom Mandala piece she designed.

What was wonderful about her presentation was that Gwen discussed both the design and the execution of her pieces.  My students were very engaged, and asked lots of questions along the way.

It turns out, though, that I had seen a talk she gave two or three years ago at another conference!  Of course you can’t remember every speaker you see at every conference you attend, especially out of context.  But after seeing her talk, I realized some of the slides looked strangely familiar, and that is because I had actually seen them before….

One more bit of news.  You might remember that Mathematics and Digital Art has been offered as a First-Year Seminar course this year, meaning that only first-year students may enroll, and the maximum number of students in the course is set at 16.

Being a faculty member at the University of San Francisco, I am also working on a project with colleagues in creating a Mathematics for Educators minor — a series of courses aimed at prospective middle-school teachers to broaden their knowledge of mathematics especially suited to middle-school students.  And of course a digital art course would fit nicely into this framework.

But what if a student decides to opt for the minor after their first year?  Well, they couldn’t take digital art.  So now, the course is a regular offering in the Mathematics and Statistics Department, open to any student at USF.  I’m very excited about this, and really hope to spread the word about the Imagifractalous world of mathematics and digital art!

I’ll keep you updated in the Fall, as I have more changes in store for the course.  I plan to move completely to Processing, since now everything I used Sage for has been rewritten for Processing.  And next semester, I’ll include a short unit on binary trees as well.  Stay tuned….

Imagifractalous! 6: Imagifractalous!

No, the title of today’s post is not a typo….

About a month ago, a colleague who takes care of the departmental bulletin boards in the hallway approached me and asked if I’d like to create a bulletin board about mathematical art.  There was no need to think it over — of course I would!

Well, of course we would, since I immediately recruited Nick to help out.  We talked it over, and decided that I would describe Koch-like fractal images on the left third of the board, Nick would discuss fractal trees on the right third, and the middle of the bulletin board would highlight other mathematical art we had created.

I’ll talk more about the specifics in a future post — especially since we’re still working on it!  But this weekend I worked on designing a banner for the bulletin board, which is what I want to share with you today.

I really had a lot of fun making this!  I decided to create fractals for as many letters of Imagifractalous! as I could, and use isolated letters when I couldn’t.  Although I did opt not to use a third fractal “A,” since I already had ideas for four fractal letters in the second line.

The “I”‘s came first.  You can see that they’re just relatively ordinary binary trees with small left and right branching angles.  I had already incorporated the ability to have the branches in a tree decrease in thickness by a common ratio with each successive level, so it was not difficult to get started.

I did use Mathematica to help me out, though, with the spread of the branches.  Instead of doing a lot of tweaking with the branching angles, I just adjusted the aspect ratio (the ratio of the height to the width of the image) of the displayed tree.  For example, if the first “I” is displayed with an aspect ratio of 1, here is what it would look like:

I used an aspect ratio of 6 to get the “I” to look just like I wanted.

Next were the “A”‘s.  The form of an “A” suggested an iterated function system to me, a type of transformed Sierpinski triangle.  Being very familiar with the Sierpinski triangle, it wasn’t too difficult to modify the self-similarity ratios to produce something resembling an “A.”  I also like how the first “A” is reminiscent of the Eiffel Tower, which is why I left it black.

I have to admit that discovering the “R” was serendipitous.  I was reading a paper about trees with multiple branchings at each node, and decided to try a few random examples to make sure my code worked — it had been some time since I tried to make a tree with more than two branches at each node.

When I saw this, I immediately thought, “R”!  I used this image in an earlier draft, but decided I needed to change the color scheme.  Unfortunately, I had somehow overwritten the Mathematica notebook with an earlier version and lost the code for the original “R,” but luckily it wasn’t hard to reproduce since I had the original image.  I knew I had created the branches only using simple scales and rotations, and could visually estimate the original parameters.

The “C” was a no-brainer — the fractal C-curve!  This was fairly straightforward since I had already written the Mathematica code for basic L-systems when I was working with Thomas last year.  This fractal is well-known, so it was an easy task to ask the internet for the appropriate recursive routine to generate the C-curve:

+45  F  -90  F  +45

For the coloring, I used simple linear interpolation from the RGB values of the starting color to the RGB values of the ending color.  Of course there are many ways to use color here, but I didn’t want to spend a lot of time playing around.  I was pleased enough with the result of something fairly uncomplicated.

For the “T,” it seemed pretty obvious to use a binary tree with branching angles of 90° to the left and right.  Notice that the ends of the branches aren’t rounded, like the “I”‘s; you can specify these differences in Mathematica.  Here, the branches are emphasized, not the leaves — although I did decide to use small, bright red circles for the leaves for contrast.

The “L” is my favorite letter in the entire banner!  Here’s an enlarged version:

This probably took the longest to generate, since I had never made anything quite like it before.  My inspiration was the self-similarity of the L-tromino, which may be made up of four smaller copies of itself.

The problem was that this “L” looked too square — I wanted something with a larger aspect ratio, but keeping the same self-similarity as much as possible.  Of course exact self-similarity isn’t possible in general, so it took a bit of work to approximate is as closely as I could.  I admit the color scheme isn’t too creative, but I liked how the bold, primary colors emphasized the geometry of the fractal.

The “O” was the easiest of the letters — I recalled a Koch-like fractal image I created earlier which looked like a wheel with spokes and which had a lot of empty space in the interior.  All I needed to do was change the color scheme from white-on-gray  to black-on-white.

Finally, the “S.”  This is the fractal S-curve, also known as Heighway’s dragon.  It does help to have a working fractal vocabulary — I knew the S-curve existed, so I just asked the internet again….  There are many ways to generate it, but the easiest for me was to recursively producing a string of 0’s and 1’s which told me which way to turn at each step.  Easy from there.

So there it is!  Took a lot of work, but it was worth it.  I’ll take a photo when it’s actually displayed — and update you when the entire bulletin board is finally completed.  We’ve only got until the end of the semester, so it won’t be too long….

Mathematics and Digital Art: Update 2

It’s been about a month since my first update, so it’s time for another status report on my second semester teaching Mathematics and Digital Art.  It really has been a wonderful semester so far!

Later we’ll look at some student work (like Collette’s iterated function system),

but first, I’d like to talk about course content.

The main difference from last semester in terms of topics covered was including a unit on L-systems instead of polyhedra.  You might recall the reasons for this:  first, students didn’t really see a connection between the polyhedra unit and the rest of the course, and second, the little bit of exposure to L-systems (by way of project work) was well-received.

I’ve talked a lot about L-systems on my blog, but as a brief refresher, here is the prototypical L-system, the Koch curve.  The scheme is to recursively follow the sequence of turtle graphics instructions

F  +60  F  +240  F  +60  F.

There is also an excellent pdf available online, The Algorithmic Beauty of Plants.  This is where I first learned about L-systems.  It is a beautifully illustrated book, and I am fortunate enough to own a physical copy which I bought several years ago.

Talking about L-systems is also a great way to introduce Processing, since I have routines for creating L-systems written in Python.  Up to this point, we’ve just explored changing parameters in the usual algorithm, but there will a deeper investigation later.

One main focus, however, was just seeing the fractal produced by the algorithm.  When working in the Sage environment, the system automatically produced a graphic with axes labeled, enabling you to see what fractal image you created.

In Processing, though, you need to specify your screen space ahead of time.  So if your image is drawn off-screen, well, you just won’t see it.  You have to do your own scaling and translating, which is sometimes not a trivial undertaking.

I also decided to introduce both finite and infinite geometric series in conjunction with L-systems.  This had two main applications.

First, we looked at the Sierpinski triangle.  Begin with any triangle, and take out the triangle formed by joining the midpoints of the sides.  Then repeat recursively, creating the Sierpinski triangle.

Now assume your original triangle had an area of 1, and calculate the area of all the triangles you removed.  Since the process is repeated infinitely, this sum is just an infinite geometric series.  Interestingly, the sum of this series is 1, meaning, in some sense, you’ve taken away all the area — but the Sierpinski triangle is still left over!  This illustrates an idea not usually encountered by students before:  infinite sets of points with no area.  Makes for a nice discussion.

Second, we looked at the Koch curve (and similarly defined curves).  Using a geometric sequence, you can look at the length of any iteration of the polygonal path drawn by the recursive algorithm.  And, as expected, these paths get longer each time, and their lengths tend to infinity as the number of iterations increases.  This is another nice way to involve geometric sequences and series.

We’ll be doing more with L-systems in the next few weeks, so I’ll finish this discussion on my next update.

A highlight of the past month was a visit by artist Stacy Speyer.

Having worked with weaving and textiles for some time, Stacy has moved on to an investigation of polyhedral forms.

Stacy’s talk provided a wonderful insight into integrating mathematics and art in ways we did not study in class.  One of the goals of the Bridges papers presentations and the guest speakers is to do precisely this

She writes:

I’m now on a mission to share the fun of making geometric forms with others; I designed Cubes and Things, a 3D coloring book.  These easy-to-make paper constructions have patterns that can be colored which emphasize different kinds of symmetric properties of the polyhedra.  I bring this fun activity to schools and other groups in the form of Polyhedra Parties.  And whenever possible, I still work on making more geometric art and learning more about math.

Visit Stacy’s website to take a look at her book, and view many more examples of her stunning work!

Now we’ll take a look at a few more examples of student artwork.  These pieces were submitted for the assignment on iterated function systems.  Karla created a piece which reminded her of icicles or twinkling lights.

Lainey thought her piece looked like a bolt lightning coming out of a wizard’s staff.

And Peyton’s piece reminder her of flowers.

Finally, as I did last semester, I asked students for some mid-semester comments on how the course was going.  You can see the complete prompt on Day 19 of the course website.  Here are a few of the comments:

I like how it takes a subject that we are all required to take and creates a real, palpable output. Rather than some types of math, where everything is theoretical, it creates a clear chain of events with an even clearer consequence.

[A]fter seeing the kinds of art works there are that involve the kind of math and programming we use, it opened up a new world of artistic possibilities.

What I enjoy most about this course aside from it being small and very interactive in terms of doing labs and having all of our questions answered, is the fact that I would never thought I would be able to create images using programming or math let alone enjoying the satisfaction of the final product.

I was pleased to read these responses, as they suggest the course is fulfilling its intended purpose.  But there were also suggestions for improvement — there was a consensus that the math moved a bit too quickly.  When we start the discussion on number theory for analyzing the Koch curve next week, I’ll make sure to keep an eye on the pace.  I’ll let you know how it goes in my next update in April!

Mathematics and Digital Art: Update 1

I have the pleasure of teaching Mathematics and Digital Art again this semester!  Since I’m largely following my outline from last semester, biweekly reports aren’t really necessary.  But every month or so, I’d like to provide an update regarding changes I’ve made from the previous semester, as well as provide examples of student work.

There are no significant content changes yet — although I’ll be discussing L-systems rather than polyhedra this semester, and there will be more to say when we get to that point.  But as far as the delivery is concerned, there have been some alterations.

First, I’m emphasizing the code more right from the start.  You might recall that in their mid-semester comments last semester, students asked for more details about the actual coding.  So I take more time in each lab explaining Python.

This change has already made an impact; I’ve noticed that students are getting more adventurous with coding earlier on.  They really seem to enjoy experimenting with the geometry.  The example I use for the Josef Albers assignment looks like this — just rectangles within rectangles.

But Collette took the geometry quite a few steps further.  In her narrative, she discussed working with figure and ground, trying to make each geometrically interesting.

I am pleased to see students playing so intently with the geometry.  At first, after a detailed discussion of using two-dimensional coordinates in Python, some students just tried randomly changing numbers to see what would happen.  But I encouraged them to be a little more intentional — that is, spend more time in the design stage — and they were largely successful.

The second change is that I spent an extra day on affine transformations at the beginning of our discussion, slowing down the pace a little.  Last semester, I recall that I needed to go back and review ideas I thought I covered in sufficient detail.  Hopefully, slowing down the pace will help.

In addition, I put together a summary of commonly used affine transformations, such as reflections:

This seemed to be helpful — I used it for the linear algebra course I’m teaching as well, and students responded positively.  Feel free to look at it; just go to Day 6 on the course website.

The third change involves using discussion boards more deliberately on Canvas (which is our University’s content management system).  For each digital art assignment, I have students post drafts of their work, and have their peers comment on them.  Since I have a small class this semester (six students), it is not a problem to have each student comment on every other student’s work.

Students really seem to enjoy this, and I participate by writing comments as well.  But because everyone works at a different pace, some students lagged behind.  So now I’m being more formal about using the discussion board, and making it an assignment.

For example, the next assignment involves creating three pieces, and I have assigned students to upload drafts on Canvas by the beginning of class next Friday.  We’ll use Friday’s class so students can write and read comments; the assignment isn’t due until a few days later, so there will be time to incorporate new ideas into their drafts.

These changes are making a positive impact, and are making the course even more enjoyable this semester.  And I am also fortunate to have Nick Mendler as my course assistant again this semester, meaning there are two of us to work with students each day.  Students are really getting individual attention with their work.

Now let’s look at some more examples of student work!  For the assignment to create a color texture using randomness, Lainey worked to create an image which resembled a piece of fabric.

For the Josef Albers assignment, Peyton (like Collette) also experimented a lot with the geometry of the individual elements.  She chose a color palette which reminded her of a succulent, and so created geometrical objects which represented spikes on a plant.

And for the assignment based on my Evaporation piece, Karla chose a pink palette.  She looked at various values for the radius and the randomness in the radius so as to create a balance between overlapping circles and white space between the circles.

Stay tuned for the next update!  In the next installment, I’ll let you know how the work with L-systems went.  One of my favorite topics…..

Digital Art VIII: The End.

Yes, Mathematics and Digital Art is officially over.  Personally, this has been one of the most enjoyable courses I’ve taught, but also one of the more challenging.  From the initial course proposal — begun in November 2015! — to the Final Projects, it seems there was always something unexpected popping up.  But in a good way, since these surprises often involved such things as writing code for a student’s project, or helping a student incorporate a creative aspect into a digital artwork which I had not previously considered.

As I mentioned last week, the last assignment was to write a final Response Paper about the course.  Students had many good things to say, but also made some suggestions for improvement.

I feel like now, though, especially through the talks we were given from other artists, that my scope of the word “art” has broadened. The realm of digital art is so much wider than I could have imagined and includes a lot more mediums than I would have thought.

After completing this course, I realize that the world of art is even vaster, with so many areas still left unexplored or underexplored.

Wow!  I was so glad to see how the course broadened students’ perspectives.  Some students also mentioned the presentations on Bridges papers in this regard — how they were able to learn about many diverse topics in a brief amount of time.  They got a small taste of what it’s like to go to a Bridges conference….

As I had hoped, many students’ perspectives on mathematics changed during the course.  I’ll let the students speak for themselves.

Overall, I really enjoyed the class. Through high school, math was complicated and boring, but this class made me appreciate math in a different way, and I enjoyed learning about coding and digital art.

After this course, I definitely think about math differently, because now I know how it can be used to figure out shapes and layers and colors that I can use in my art. I also think differently about art, because before this course, I had only really done traditional art, and had no idea about any digital art besides using a tablet to draw with instead of a pencil. This course has really opened my mind to what I think art can be, and definitely how it can be created in different ways.

As with most classes, I learned a lot of significant things, but this class really taught me how to push beyond my boundaries and comfort zones. Learning about fractals and affine transformations were mathematically the most difficult part for me, but without those chapters I probably wouldn’t have sharpened my basic math skills….

I felt the coding part of the course was pitched at about the right level.

I soon realized that even though I had no background in code the material was explained and taught so that anyone could understand it.

But some  students commented that they would like to go into more depth as far as programming is concerned.

And one student even decided to minor in computer science!

Best of all, this class is part of the reason why I decided to declare a minor in computer science. It is something I have been considering as I have always had an interest in the subject, but I feel this class had really helped fuel that interest and give me the final nudge I needed.

Most students remarked about how much they loved learning to make movies in Processing, and how the small class size really helped them in terms of their personal learning experience.  The class was just nine students, and I had Nick to help me out — so I felt I really got to know the students.  Not a luxury I’ll always have….

Aside from focusing more on code, some students commented on how we didn’t really use the few weeks on polyhedra anywhere else in the course.  Yes, I wanted to give them some exposure to three-dimensional geometry without having to spend the time developing the mathematics of a three-dimensional Cartesian coordinate system.  But it seems this was just too disjointed from the natural flow.

I think a good substitute would be to discuss L-systems for these two weeks instead.  There are two advantages here.  First, L-systems are another really neat way to create fractals, and the class responded very positively when I gave my Bridges talk on L-systems and Koch curves.  And second, this would give a few more weeks when we could discuss coding, especially recursion.  In general, recursion is a difficult topic to teach — but teaching recursion in the context of computer graphics might really help the learning process.

I also asked Nick if he’d say a few words about his experience with the course.

I was very excited to work with Professor Matsko on Math and Digital Art, I think we both caught on a while back that the great flexibility I’ve found within the math department to support creative interests can be shared with other students. Also the instant gratification that we were finding from programming was really picking up. When communication from generated images was profoundly more efficient than any attempt to explain with words, it was clear that we had to invite more people to the conversation.

What I think has been so powerful following my discovery of programming – and what I hope I left with the students – is the ability to paste mathematical notation for very specific thoughts directly into the computer so that I can just look at what those thoughts literally mean. This continues to be the best way that I’ve found to meet and greet interesting new patterns and behaviors. Ultimately I think this is extremely natural and that the students caught on quite well: curious how a fractal might react? Poke it and find out!

Some areas definitely saw unexpected challenges, but once we got their mathematical comfort zones lined up with the curriculum the enthusiasm was excellent. My favorite part was definitely helping students let their imaginations fill the newly available parameter space. It was really great that we had a small class size, too – the two of us walking around made the perfect environment for any question to be asked during open days when they worked on self-directed projects. And it really felt like success to observe students becoming fixed on a single idea of what they wanted to create, whether or not they knew anything about how they would create it.

Overall I may have learned more than the students and was very surprised by the deeper understanding that begins to build after explaining to the masses. I would be very interested in assisting a course again!

As long as enough students enroll, I’ll be teaching Mathematics and Digital Art again next semester!  I won’t be reporting as frequently as I did this first semester, but expect updates every month or so….  Who knows what creative ideas next semester’s students will come up with?