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.

Day115Sepid1.png

 

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.

Day115Cissy1.png

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.
Day115L2.png

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.

Day115Terry2

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.

Day115A

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.

Day115Jack.png

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.

Day115Tera.png

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

The_Great_Wave_of_Kanagawa.jpg
Courtesy the Wikipedia Commons.

 

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!

Day115Alex.png

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!

Beguiling Games II: Nuh-Uh!

First, we’ll look at the game I left you with in the last installment of Beguiling Games.  These were the rules of yet another variation of Tic-Tac-Toe:  if during the game either play gets three-in-a-row, then X wins.  If at the end, no one has three in a row, then O wins.  Does X have a winning strategy?  Does O?  Why?

We’ll show that X has a winning strategy.  As with usual Tic-Tac-Toe, X starts at the center.  If O goes in any square which is not a corner, then X will win as a result of the winning strategy in Tic-Tac-Toe.  So all that’s left to do is look at the case when O goes in a corner.  Let’s suppose it’s the upper right corner.

Then X goes in the lower right corner.  O must block, or else X will get three-in-a-row and win (since X wins if either player gets three-in-a-row).  So now, the board looks like this:

Day114a

Take a moment to see if you can figure out X’s winning strategy.  Do you see it?  All X needs to do is place in the center of the bottom row.

Day114b

Look at the top row.  Someone eventually has to place an X or O in this location.  No matter which one, a three-in-a-row will be created, and X will win!  So in this version of Tic-Tac-Toe, X has a winning strategy.

Today’s game will involve a different dynamic — cards and logic.  But first, let me give a little bit of context.  I have often used the book Problem Solving in Recreational Mathematics by Averbach and Chien when I’ve taught an introduction to proofs course.  There are many interesting problems in this book, and the chapter on logic has several problems involving Truthtellers and Liars.

So you have to solve problems by figuring out who are the Truthtellers and who are the Liars.  I like to use these problems to get students writing arguments in complete sentences since not only are they fun to work out, but they don’t involve notation.  Using notation correctly is another issue entirely, and I prefer to deal with that later on in the course.

As before, there’s a story to go along with the game….

Lucas, Mordecai, Nancy, and Ophelia decided that enough was enough, and so ended their Saturday afternoon’s cramming for the National Spelling Bee.  Wondering what they might do to pass the time, Lucas suggested, “Let’s play Nuh-Uh!”  Everyone enthusiastically agreed.

And so a game of Nuh-Uh! — whose creators, incidentally claim that it is the only game on the market which “Tortures your Mind, Warps your Character, and Impoverishes your Soul — all at the Same Time!” — commenced.

So Lucas shuffled the deck of eight cards; four of the cards had the word Truthteller on them, and four had the word Liar.  Dealing from the left, Lucas first dealt a card to Mordecai, then one to Nancy, one to Ophelia, and then finally one to himself.  Cards are dealt face down so a player can only see his or her card.

Per the rules of Nuh-Uh!, Lucas, then Mordecai, Nancy, and finally Ophelia made the statement “I am a Truthteller.”  Of course, such a statement was consistent with each player’s card, regardless of what was written on it.  Thus ended the first round.

In subsequent rounds, each player passes his or her card to the player on the left, and makes a statement consistent with the new card.  Thus, if Lucas passed Mordecai a card with Liar written on it, Mordecai would have to make a statement which is false.  The statement a player makes is based on the knowledge of the cards he or she has seen, and any other information which may be deduced from the statements of the previous players.

The same player begins each round of making statements.  So Lucas began each round in this game.  Once the game is over, the deal passes to the left, so Mordecai would deal and begin each round with a statement.

After a player makes a statement, players may, beginning with the player on the left of the one who just spoke, “Declare” — that is, say what card each of the players held during the first round.  The declaring player then looks at the cards held by the players to decide if he or she has won.  If an error is made in declaring, the player drops out and play continues; otherwise the cards are turned over and the deal passes to the next player on the left.

So the players passed their cards to the left, and thus the second round of making statements began.  Lucas started off with “Ophelia told the truth in the first round.”  After a polite few seconds of pause to give someone a chance to declare, Mordecai said, “Lucas also told the truth in the first round.”

Another brief pause ensued before Nancy stated, “There is at least one liar at the table.”  Note:  there are four Truthteller and four Liar cards, so it is possible that all players were dealt a Truthteller card.

After Nancy made her statement, one of the players had enough information to declare and win the game.  Which player declared?

Yes, there are enough clues to solve this!  But a word of caution — the solution to the puzzle only involves answering the question, “Which player declared?”  There may not be enough information to give a more complete answer….

Good luck!  In the next installment of Beguiling Games, I’ll give the solution to this logic puzzle, and give a geometrical two-player game to analyze as well.  Happy solving!

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.

GIF

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

sample

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.

gif3

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!