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.

Day112Alex

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.

Day112Linh2

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

Day112Courtney

 

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.

Day112Tera

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.

Day112Cissy

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.

Day112Terry

 

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.

Day112Sepid

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.

Day112Jack

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.

Day112Ali.png

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

Day112Rosalie

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.

001title

 

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.

Apoll. Circles.png 

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.

DanBachSlide1

 

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.

0001

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:

Day110Screen1

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.

Day110Screen2

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.

Day110Screen3

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:

Day002Square

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.

PeytonMovie

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.

FinalPresentation-ElaineTousignant

 

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

Karina

 

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.

KarlaFinal

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.

Day007koch-45-175

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:

Day0902adic

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.

Day090karla

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.

Day090Peyton

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.

Day090Colette

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.

Day090Gwen
Wisdom Mandala, by Gwen Fisher.

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.

BBoardBanner

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:

2017-04-16Tree1

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.

fR

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:

fL

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.

2017-04-16Ltromino

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),

IFSCollette

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.

Day007koch1

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.

Sierp3

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.

004 I'llNeverKnow
I’ll Never Know, by Stacy Speyer.

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

075-WovenGeoInstallVert

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.

IFSKarla

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

IFSLainey

And Peyton’s piece reminder her of flowers.

IFSPeyton

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!