## Bay Area Mathematical Artists, V.

The Spring semester is now well underway!  This means it’s time for the Bay Area Mathematical Artists to begin meeting.  This weekend, we had our first meeting of 2018 at the University of San Francisco.

As usual, we began informally at 3:00, giving everyone plenty of time to make it through traffic and park.  This time we had three speakers on the docket:  Frank A. Farris, Phil Webster, and Roger Antonsen.

Frank started off the afternoon with a brief presentation, giving us a teaser for his upcoming March talk on Vibrating Wallpaper.  Essentially, using the complex analysis of wave forms, he takes digital images and creates geometrical animations with musical accompaniment from them.  A screenshot of a representative movie is shown below:

You can click here to watch the entire movie.  More details will be forthcoming in the next installment of the Bay Area Mathematical Artists (though you can email him at ffarris@scu.edu if you have burning questions right now).  Incidentally, the next meeting will be held at Frank’s institution, Santa Clara University; he has generously offered to host one Saturday this semester as we have several participants who drive up from the San Jose area.

Our second speaker was Phil Webster, whose talk was entitled A Methodology for Creating Fractal Islamic Patterns.  Phil has been working with Islamic patterns for about five years now, and has come up with some remarkable images.

Here, you can see rings of 10 stars at various levels of magnification, all nested very carefully within each other.  While it is fairly straightforward to iterate this process to create a fractal image, a difficulty arises when the number and size of rosettes at a given level of iteration are such that they start overlapping.  At this point, a decision must be made about which rosettes to keep.

This decision involves both mathematical and artistic considerations, and is not always simple.  One remark Phil hears fairly often is that he’s actually creating a model of the hyperbolic plane, but this is in fact not the case.  Having sat down with him while he explained his methodology to me, I can attest to this fact.  His work may be visually somewhat reminiscent of the hyperbolic plane, but the mathematics certainly is not.

Moreover, in addition to creating digital prints, Phil has also experimented with laser cutting Islamic patterns, as shown in the intricate pieces below.

If you would like to learn more about Phil’s Islamic fractal patterns, feel free to email him at phil@philwebsterdesign.com.

We ended with a talk by Roger Antonsen, From Simplicity to Complexity.  Roger is giving a talk at the Museum of Mathematics in New York City next month, and wanted a chance to try out some ideas.  He casually remarked he had 377 slides prepared, and indicated he needed to perhaps trim that number for his upcoming talk….

Roger remarked that as mathematicians, we know on a hands-on basis how very simple ideas can generate enormous complexity.  But how do you communicate this idea to a general audience, many who are children?  This is his challenge.

The idea of this “tryout” was that Roger would share some of his ideas with us, and we would give him some feedback on what we thought.  One idea that was very popular with participants was a discussion of Langton’s ant.  There are several websites you can visit — but to see a quick overview, visit the Wikipedia page.

The rules are simple (as you will already know if you googled it!).  An ant starts on a grid consisting totally of white squares.  If the ant is on a white square, it turns right a quarter-turn, moves ahead one square, and the square the ant was on turns to black.  But if the ant is on a black square, it turns left a quarter-turn, moves one unit, and the square the ant was on turns to white.

It seems like a fairly simple set of rules.  As the ant starts moving around, it seems to chaotically color the squares black and white in a random sort of pattern.

The image above shows the path of the ant after 11,000 steps (with the red pixel being the last step).  Notice that the path has started to repeat, and continues to repeat forever!

Why?  No one really knows.  Yes, we can see that it actually does repeat, but only sometime after 10,000 apparently random steps.  The behavior of this system has all of a sudden become very mysterious, without a clear indication of why.

If the rules for moving the ant always resulted in just random-looking behavior, perhaps no one would have looked any further.  But there are so many surprises.  Especially since  there is no reason you have to stick to the rules above.  As suggested in the Wikipedia article, you can add more colors, more rules, and even more ants….

For example, consider the set of rules in the following image.  It should be relatively self-explanatory by now:  there are four colors; if the ant is on a black square, turn right a quarter-turn and move forward one unit, then change the color of the square the ant was on to white; then continue (where green squares becomes black, in cyclic order).

This looks like a cardiod!  And if you actually zoom in enough, you’ll see that this is the image after 500,000,000 iterations…though again, no one has the slightest idea why this happens.  Why should a simple set of rules based on 90° rotations generate a cardioid, of all things?

From the simple to the complex!  This was only one of literally dozens of topics Roger was able to elaborate on — and he illustrated each one he showed us with compelling images and animations.  For more examples, please see his web page, or feel free to email him at rantonse@ifi.uio.no.  You can also see the announcement for his MoMath talk here.

As usual, we went our for dinner afterwards, this time for Thai.  It seems that no one wanted to leave — but some of the participants had a 90-minute drive ahead of them, so eventually we had to head home.  Stay tuned for the summary of next month’s meeting, which will be at Santa Clara University!

## Bay Area Mathematical Artists, IV.

We had our last meeting of the Bay Area Mathematical Artists in 2017 this weekend!  We had a somewhat lower turnout than usual since we’re moving into the holiday season.  But it really wasn’t possible to move the seminar a week earlier, since many of us affiliated with universities were in the middle of Final Exams.

As we had been doing before, we began with a social half hour while waiting for everyone to show up.  We then moved on to the more formal part of the afternoon.

There were three speakers originally slated to give presentations, but one had to cancel due to illness.  Still, we had two very interesting talks.

The first talk, Squircular Calculations, was given by Chamberlain Fong.  Chamberlain did speak at the inaugural September meeting, but wanted a chance to practice a new talk he will be giving at the Joint Mathematics Meetings in San Diego this upcoming January.

So what is a squircle?  Let’s start with a well-known family of curves parameterized by p > 0:

$|x|^p+|y|^p=1.$

When p = 2, this gives the usual equation for a circle of radius 1 centered at the origin.  As p increases, this curve more and more closely approaches a square, and it is often said that “p = ∞” is in fact a square.

However, in Chamberlain’s opinion, the algebra becomes a bit unwieldy with this way of moving from a circle to a square.  He prefers the following parameterization:

$x^2+y^2-s^2x^2y^2=1,$

where s = 0 gives a circle, and the central portion of the curve when s = 1 is a square.  As s varies continuously from 0 to 1, the central portion of this curve continuously transforms from a circle to a square.  This parameterization was created by Manuel Fernandez Guasti; you can read his original paper here.

Chamberlain’s talk was about extending this idea in various ways into three dimensions.  He showed images of squircular cylinders, squircular cones, etc., and also gave equations in three-dimensional Cartesian coordinates for all these surfaces.  You can see some of the images in the title page of his presentation above.  It was quite fascinating, and there were lots of questions for Chamberlain when his talk was finished.  Feel free to email him at chamb3rlain@yahoo.com if you have further questions about squircles.

The second talk was given by Dan Bach (also a speaker at our inaugural meeting), entitled Making Curfaces with Mathematica.  Yes, “curfaces,” not “surfaces”!

Dan took us through a tour of his very extensive library of Mathematica-generated images.  He is fond of describing curves using parameters, and then changing the parameters over and over again to generate new images.

This is easy to do in Mathematica using the “Manipulate” command; below is a screen shot from Mathematica’s online documentation showing an example.

The parameter n is used in plotting a simple sine function — as you move the slider, the graph changes dynamically.  Note that any numerical parameter may be experimented with in this way.  Simply make a slider and watch how your image changes with the varying parameter.

So what are “curfaces”?  Dan uses the term for images create by a family of closely related curves which, when graphed together, suggest a surface.  As we see in the example above, the family of curves suggests a spiraling ribbon in which several brightly colored balls are nestled.  Dan showed several more examples of this and discussed the process he used to create them.  To see more examples, you can visit his website www.dansmath.com or email him at art@dansmath.com.

Once the talks were over, we had some time for puzzles!  Earlier in the week, when I knew we were not going to have an overabundance of talks, I asked participants to bring some of their favorite puzzles so we could all have some fun after the talks.  We were all intrigued with the wide variety of puzzles participants brought.

My dissection puzzle was actually quite popular — that is, until a few of the participants solved it!

You might recognize this from my recent blog post on geometrical dissections.  The pieces above are arranged to make a square, but they may also be rearranged to make an irregular dodecagon.  Some asked if I had any more copies of this puzzle, but unfortunately, I didn’t.  Maybe I’ll have to start making some….

As has been our tradition, many of us went out to dinner afterwards.  We went to our favorite nearby Indian buffet, and engaged in animated conversation.  Interestingly, after talking a bit about mathematics and art, Chamberlain began entertaining us with his wide repertoire of word puzzles.

To give just one example, he asked us to come up with what he calls “mismisnomers.”  Usually, the prefix “mis-” means to incorrectly take an action, as in “misspell.”  But some words, like “misnomer,” begin with “mis-,” while the remainder of the word, “nomer” is not even a word!  How many mismisnomers can you think of?  This and similar amusing puzzles kept us going for quite a while, until it was finally time to head home for the evening.

So that’s all for the Bay Area Mathematical Artists in 2017.  Stay tuned in 2018…our first meeting next year will be at the end of January, and I’ll be sure to let you know how it goes!

## Mathematics and Digital Art: Final Update (Fall 2017)

Yes, it is the end of another semester of Mathematics and Digital Art!  It was a very different semester than the first two, as I have mentioned in previous posts, since I began the semester with Processing right away.  There are still a few wrinkles to iron out — for example, we had a lab project on interactivity (involving using key presses to change features of the movie as it is running) which was quite a bit more challenging than I expected it would be.  But on the whole, I think it was an improvement.

So in this final post for Fall 2017, I’d like to share some examples of student work.  In particular, I’ll look at some examples from the Fractal Movie Project, as well as examples of Final Projects.

Recall that the Fractal Movie Project involves using linear interpolation on the parameters in affine transformations in order to make an animated series of fractal images.  One student experimented with a bright color palette against a black background.  As the fractal morphed, it actually looked like the red part of the image rotated in three dimensions, even though the affine transformations were only two-dimensional.

Cissy wanted to explore the motion of rain in her movie.  Although she began with bright colors on a black background, once she saw her fractal in motion, she decided that more subtle colors on a white background would be better suited to suggest falling raindrops being blown about by the wind.

Sepid also incorporated movement in her movie — she created a rotating galaxy with a color palette inspired by the colors of the Aurora Borealis.  In addition, she learned how to use the Minim library so she could incorporate sound into her movie as well.  Here is a screen shot from her movie.

Now let’s take a look at a few Final Projects.  Recall that these projects were very open-ended so that students could go in a direction of their choice.  Some really got into their work, with truly inspirational results.  The presentation that Sepid gave at a recent meeting of the Bay Area Mathematical Artists was actually work she was doing on her Final Project (read about it here).

Terry took on an ambitious project. She based her work on a Bridges paper by Adam Colestock, Let the Numbers Do the Walking: Generating Turtle Dances on the Plane from Integer Sequences (read the paper here).  Terry did have some programming experience coming into the course, and so she decided to code all of Adam’s turtle graphics algorithms from scratch! This was no simple task, but she worked hard and eventually accomplished her goal.

Here is a screen shot from one of her movies; Terry wanted to create an interesting visual effect by overlaying multiple copies of the same turtle path.  Since this particular path was not too dense in the plane, she was able to work with thicker lines.

Tera created a movie which involved rotating triangles and moving dots.  Her movie had a strong sense of motion, and incorporated a vibrant color palette. She remarked that working with color in this project was both fun and quite challenging. In her words, “Playing nicely with hot pink is not an easy feat.”

I would also like to share the fact that Professor Roza Aceska of Ball State University (Muncie, Indiana) will be teaching a course about digital art next semester using Processing which will be incorporating a lot of my course materials.  I am very excited about this!  Many faculty who come to my talks say they are interested in teaching such a course, but getting Department Chairs and Deans to approve such courses is sometimes an uphill battle.

Professor Aceska’s course will be a bit different from mine — her course is in the Honors Program, and as such, does not count as a mathematics credit.  So she will not have most of the mathematics assignments and quizzes that I had in my course.  But she will still be emphasizing the fascinating relationship between mathematics, programming, and art.  I hope to write more about her course sometime during the next semester.

One final remark — I am helping to organize a Mathematical Art Exhibition at the Golden Section Meeting of the Mathematical Association of America on February 24, 2018 at the California State University, East Bay.  So if you’re reading this and are in the Bay Area and would like to submit some mathematical art for inclusion in our exhibit, please let me know!

## Bay Area Mathematical Artists, III

Another successful meeting of the Bay Area Mathematical Artists took place yesterday at the University of San Francisco!  It was our largest group yet — seventeen participants, include three new faces.  We’re gathering momentum….

Like last time, we began with a social half hour from 3:00–3:30.  This gave people plenty of time to make their way to campus.  I didn’t have the pleasure of participating, since the campus buildings require a card swipe on the weekends; I waited by the front door to let people in.  But I did get to chat with everyone as they arrived.

We had a full agenda — four presenters took us right up to 5:00.  The first speaker was Frank A. Farris of Santa Clara University, who gave a talk entitled Fibonacci Wallpaper Spirals.

He took inspiration from John Edmark’s talk on spirals at Bridges 2017 in Waterloo, which I wrote about in my blog last August (click here to read more).  But Frank’s approach is rather different, since he works with functions in the complex plane.

He didn’t dive deeply into the mathematics in his talk, but he did want to let us know that he worked with students at Bowdoin College to create open-source software which will allow anyone to create amazing wallpaper patterns.  You can download the software here.

Where do the Fibonacci numbers come in?  Frank used the usual definition for the Fibonacci numbers, but used initial values which involved complex numbers instead of integers.  This allowed him to create some unusually striking images.  For more details, feel free to contact him at ffarris@scu.edu.

Next was our first student talk of the series, My Experience of Learning Math & Digital Art, given by Sepid Ebrahimi.  Sepid is a student in my Mathematics and Digital Art course; she is a computer science major and is really enjoying learning to code in Processing.
First, Sepid mentioned wanting to incorporate elements into her work beyond simple points, circles, and rectangles.  Her first project was to recreate an image of Rick and Morty, the two main characters in the eponymous cartoon series.  She talked about moving from simple blocks to bezier curves in order to create smooth outlines.
Sepid then discussed her second project, which she is using for her Final Project in Mathematics and Digital Art.  In order to incorporate sound into her work, she learned to program in Java to take advantage of already-existing libraries.  She is creating a “live audio” program which takes sound input in real time, and based on the frequencies of the sound, changes the features of various geometrical objects in the video.  Her demo was very fascinating, and all the more remarkable since she just started learning Processing a few months ago.  For more information, you can contact Sepid at sepiiid.ebra@gmail.com.
The third talk, Conics from Polygons: the Chord Ratio Construction, was given by Scott Vorthmann.  He is spreading the word about vZome, an open-source virtual environment where you can play with Zometools.
The basis of Scott’s talk was a simple chord ratio construction, which he is working on with David Hall.  (Here is the GeoGebra worksheet if you would like to play with it.)  The essential idea is illustrated below.
Begin with two segments, the red and green ones along the coordinate axes.  Choose a ratio r.  Now add a chord parallel to the second segment and r times as long — this gives the thick green segment at y = 1.  Connect the dots to create the third segment, the thin green segment sloping up to the right at x = 1.  Now iterate — take the second and third segments, draw a chord parallel to the second segment and r times as long (which is not shown in the figure), and connect the dots to form the fourth segment (the thin green segment sloping to the left).
Scott then proceeded to show us how this very simple construction, when iterated over and over with multiple starting segments, can produce some remarkable images.
Even though this is created using a two-dimensional algorithm, it really does look three-dimensional!  Conic sections play a fundamental role in the geometry of the points generated at various iterations.  Quadric surfaces in three dimensions also come into play as the two-dimensional images look like projections of quadric surfaces on the plane.  Here is the GeoGebra worksheet which produced the graphic above.  For more information, you can contact Scott at scott@vorthmann.org.
The final presenter was Stacy Speyer, who is currently an artist-in-residence at Planet Labs.  (Click here to read more about art at Planet Labs.)  She didn’t give a slideshow presentation, but rather brought with her several models she was working on as examples of Infinite Polyhedra Experiments with Planet’s Satellite Imagery.
One ongoing project at Planet Labs is planetary imaging.  So Stacy is taking high-resolution topographical images and using them to create nets for polyhedra.  She is particularly interested in “infinite polyhedra” (just google it!).  As you can see in the image above, six squares meet at each vertex, and the polyhedron can be extended arbitrarily far in all directions.
One interesting feature of infinite polyhedra (as you will notice above) is that since you cannot actually create the entire polyhedron, you’ve got to stop somewhere.  This means that you can actually see both sides of all the faces in this particular model.  This adds a further dimension to artistic creativity.  Feel free to contact Stacy at cubesandthings@gmail.com for more information!
We’ll have one more meeting this year.  I am excited to see that we’re making so much progress in relatively little time.  Presentations next time will include talks being prepared for the Joint Mathematics Meetings in San Diego this coming January, so stay tuned!

## Bay Area Mathematical Artists, II

Yesterday was the second meeting of the Bay Area Mathematical Artists!  We had a somewhat different group — some who came last time were unable to make it, but there were some new faces among the enthusiasts as well.  Fourteen showed up for the afternoon, and two others joined us for dinner afterwards.

After the last meeting, I received a few emails offering suggestions about different ways to organize the gatherings.  One suggestion was to have a social period for the first part of the meeting, where participants could meet those they didn’t already know, or perhaps bring artistic items for show-and-tell.

This seemed like a good idea, since in addition to letting participants get to know each other or just catch up on the previous month, it gave them a 30-minute buffer to arrive on campus.  It turns out this part of the afternoon went very well, with just about everyone arriving by 3:30.  Dan Bach was giving away old copies of mathematics journals he had collected over the years, while Colin Liotta was giving away laser-etched wooden pendants.

The only scheduled talk of the afternoon was given by Roger Antonsen, entitled Mathematical explorations and visualizations.

Roger talked about several of his extensive library of Processing animations. He takes his inspiration from many different places – but his Processing mantra is sometimes “make it move.” He takes an image which fascinates him, recreates it as best as he can, and then varies different parameters to make the image move.

Some of his most intriguing examples involved optical illusions, and are based on the work of Pinna; see his web page on Art to see some examples.

He also emphasized the need to create balance in his work – when you parameterize features of an image, you need to decide the range the parameter takes. Too much motion, and the animation looks too distorted, but too little, and the animation is too static. Of course the need to create balance in artwork is not restricted to creating animations, but it is constantly in Roger’s mind as he creates.

After Roger’s talk, we moved on to a discussion about the nature of mathematical and digital art.  There are other similar terms in use, such as algorithmic art and generative art.  Typically, generative art is described as art generated by some autonomous system.  This means that algorithmic art — that is, art created by use of a computer program — is a subset of generative art.  But what do all these terms mean to us, individually, as artists?

I had originally thought to break into smaller groups at first, but the group wanted to have just one, larger discussion.

There were many and varied opinions expressed — from commentary about the art community as a whole, to those who thought the question “What is mathematical art?” is nonsensical to ask because there is really no answer, and it doesn’t impact the creative process at all.

Two points I made relate to my teaching Mathematics and Digital Art.  First, every time you settle on the value for a parameter in some work you’re doing, you are making an aesthetic choice.  You can tweak all you like, but then all of a sudden you just say to yourself, “OK, that’s it!”  Of course there are times you just stop because you can’t find precisely what you want and just need to move on, but I think you get the gist of what I’m saying.  You’re making artistic choices all the time.

And second, I have students write short narratives about their work, describing the parameter choices they make.  I want to them to think about when a digital image becomes a piece of digital art.  Of course (as alluded to above) there really is no definitive answer to this question, but for students just beginning to dive into the world of digital and mathematical art, it is a useful question to consider.

This took us right to our designated ending time, 5:00.  One of the participants suggested a Thai place nearby, and so eleven of us made the short trek just north of campus.  It was actually quite good, according to all accounts.  And as I mentioned earlier, two participants who couldn’t make it earlier in the day joined us at the restaurant.  The discussions were lively, covering a broad range of mathematics, art, and other topics as well.

So again, a good time was had by all!  To round out today’s post, I’d like to say a few words about the new Digital Art Club I’m advising at the University of San Francisco.  It seems each week, one or two more students become interested, mostly by word of mouth.  There are new faces all the time!

It turns out this is a great opportunity for mathematics or science majors to learn about digital art.  The Mathematics and Digital Art course I’m teaching is not at a high enough level to count towards a mathematics major, and many students in the sciences (like computer science or physics) have required mathematics courses, also at a higher level.

We’re focusing on learning Processing at the moment, since not only are students very interested in learning the software, but I have written quite a bit about Processing on my blog.  So I can easily get students started by pointing them to an appropriate post.

Not only that, we’ve got a few students willing to take leadership positions and secure status as an officially recognized student club.  This means there are funds available for field trips and other activities.  We’re hoping to make a trip to the Pace Gallery in Palo Alto.  I’ll occasionally update on our progress in future posts.  Stay tuned!

## Mathematics and Digital Art: Update 2 (Fall 2017)

We’ve just completed Week 8 of the Fall semester, so it’s time for the next update on my Mathematics and Digital Art class!  As I had mentioned before, the major difference this semester was starting with Processing right from the beginning of the semester.

It turns out this is making a really big difference in the way the class is progressing.  The first two times I taught the course, I had students work in the Sage environment for the first half of the semester.  The second half of the semester was devoted to Processing and student projects.

Because students only started to learn Processing at the same time they were diving into their projects, they were not able to start off with a Processing-based project.  As it happened, a few students actually incorporated Processing into their final projects as the second half of the semester progressed, but this was the exception, not the rule.

But last week, we already started making movies in Processing!  Starting simply, of course, with the dot changing colors.

This was a bit easier to present this time around, since we already had a discussion of user space vs. screen space earlier in the semester.  So this time, I could really focus on linear interpolation — the key mathematical concept behind making animations.

Next week will be a Processing-intense week.  I’ll delay some topics — like geometric series — to a little later in the course so we can get more Processing in right now.  The reason?  I really think many students will involve Processing in their final projects in a significant way.  I want to make sure they have enough exposure to feel confident about going in that direction for their final projects.  I’ll let you know what happens in this regard in my next update of Mathematics and Digital Art.

Now for some examples of student work!  For the assignment on iterated function systems, students had three different images to submit.  The first was a Sierpinski triangle — I asked students to create an image simultaneously as close to and as far away from a Sierpinski triangle as possible.  The idea was that a viewer should recognize the image as being based on a Sierpinksi triangle, but perhaps only after staring at it for thirty seconds or so.

This is Sepid’s take on the assignment.  On many of her pieces, she experimented with different ways to crop the final image.  This has a significant effect on the image’s final appearance.

This is Cissy’s submission for the Sierpinski triangle.  In this piece (and the others submitted for this assignment), Cissy remarked that she really enjoyed experimenting with color.  I commented that I thought color choices were among the most difficult decisions to make as far as elements of a work of digital art are concerned.

The second piece was to involve only two affine transformations.  This is often a challenge for students, but there really is an enormous variety of images that may be created using just two transformations.  In addition, one of the transformations needed to involve a rotation by a non-trivial angle (that is, not a multiple of 45°), and students needed to submit a picture of their calculations as well.

One student was trying to create an image that looked like an animal footprint.  She remarked that she did consider a different color palette, but in the end, preferred to go with monochromaticity.

Interestingly, Terry also used a simple color palette.  She remarked that it was challenge to use just two transformations — and because of this minimalist requirement, decided to go with a minimalist color palette.  In addition, her resulting fractal reminded her of birds, so she set the fractal against a white moon and gray sky.

For the third submission, there were no constraints whatsoever — in fact, I encouraged students to be as creative as possible.  There was a very wide range of submissions.  One student was fairly minimalistic, using a highly contrasting color palette.

Jack’s piece was also fairly minimalistic.  I should remark that we took part of a lab one day for students to do some online peer commenting; Jack (and others as well) remarked that he used the advice of another student to improve an earlier draft of his piece.  In particular, he adjusted the stroke weight to increase the intensity of the colors.

Tera based her work on the Sierpinski triangle,  but also included reflections of each of the three smaller components of her version of the Sierpinski triangle.  She remarked that the final image reminded her of a snowflake, or perhaps a Christmas sweater.

Alex’s inspiration came from The Great Wave off Kanagawa, by Katsushika Hokusai.

First, he created the fractal image, experimenting with various color combinations.  When he was satisfied with his palette, he added the boat and the white circle to suggest a black moon.  A rather interesting approach!

As you can see, I’ve got quite a creative class of students who are willing to experiment in many different ways.  It’s interesting for me, since there is no way to predict what they’ll create next!  I look forward to seeing what they create when they really dive deeply into Processing and begin making animations.

In the next update, I’ll report on how students involve Processing in their project proposals.  In addition, they will have submitted their fractal movie projects by then, so there will undoubtedly be many interesting examples of student work to exhibit.  Stay tuned!

## 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, 12, 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!