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!

 

 

To Processing I

I made a decision last week to abandon using Sage (now called CoCalc) as a platform in my Mathematics and Digital Art class.  It was not an easy decision to make, as there are some nice features (which I’ll get to in a moment).  But now any effective use of Sage comes with a cost — the free version uses servers, and you are given this pleasant message:  “This project runs on a free server (which may be unavailable during peak hours)….”

This means that to guarantee access to CoCalc, you need a subscription.  It would not be prohibitively expensive for my class — but as I am committed to being open source, I am reluctant to continue putting sample code on my web page which requires a cost in order to use.  Yes, there is the free version — as long as the server is available….

When I asked my students last semester about moving exclusively to Processing, they responded with comments to the effect that using Sage was a gentle introduction to coding, and that I should stick with it.  I fully intended to do this, and got started preparing for the first few days of classes.  I opened my Sage worksheet, and waited for it to load.  And waited….

That’s when I began thinking — I did have experiences last year where the class virtually came to a halt because Sage was too slow.  It’s a problem I no longer wanted to have.

So now I’m going to Processing right from the beginning.  But why was I reluctant in the past?

The issue is that of user space versus screen space.  (See Making Movies with Processing I for a discussion of these concepts.)  With Sage, students could work in user space — the usual Cartesian coordinate system.  And the programming was particularly easy, since to create geometrical objects, all you needed to do was specify the vertices of a polygon.

I felt this issue was important.  Recall the success I felt students achieved by being able to alter the geometry of the rectangles in the assignment about Josef Albers and color.  (See the post on Josef Albers and Interaction of Color for a refresher on the Albers assignment.)

peyton
Peyton’s piece on Josef Albers.

Most students experimented significantly with the geometry, so I wanted to make that feature readily accessible.  It was easy in Sage, the essential code looking something like this:

Screen Shot 2017-08-26 at 11.08.35 AM

What is happening here is that the base piece is essentially an array of rectangles within unit squares, with lower-left corners of the squares at coordinates (i, j).  So it was easy for students to alter the polygons rendered by using graph paper to sketch some other polygon, approximate its coordinates, and then enter these coordinates into the nested loops.

Then Sage rendered whatever image you created on the screen, automatically sizing the image for you.

But here is the problem:  Processing doesn’t render images this way.  When you specify a polygon, the coordinates must be in screen space, whose units are pixels.  The pedagogical issue is this:  jumping into screen space right at the beginning of the semester, when we’re just learning about colors and hex codes, is just too big a leap.  I want the first assignment to focus on getting used to coding and thinking about color, not changing coordinate systems.

Moreover, creating polygons in Processing involves methods — object-oriented programming.  Another leap for students brand new to coding.

The solution?  I had to create a function in Processing which essentially mimicked the “polygon” function used in Sage.  In addition, I wanted to make the editing process easy for my students, since they needed to input more information this time.

Day108pyde1

In Processing — in addition to the number or rows and columns — students must specify the screen size and the length of the sides of the squares, both in pixels.  The margins — xoffset and yoffset — are automatically calculated.

Here is the structure of the revised nested for loops:

Day108pyde2

Of course there are many more function calls in the loops — stroke weights, additional fill colors and polygons, etc.  But it looks very similar to the loop formerly written in Sage — even a bit simpler, since I moved the translations to arguments (instead of needing to include them in each vertex coordinate) and moved all the output routines to the “myshape” function.

Again, the reason for this is that creating arbitrary shapes involves object-oriented concepts.  See this Processing documentation page for more details.

Here is what the myshape function looks like:

Day108pyde3

The structure is not complicated.  Start by invoking “createShape,” and then use the “beginShape” method.  Adding vertices to a shape involves using the “vertex” method, once for each vertex.  This seems a bit cumbersome to me; I am new to using shapes in Processing, so I’m hoping to learn more.  I had been able to get by with just creating points, lines, rectangles, and circles so far — but that doesn’t give students as much room to be creative as including arbitrary shapes does.

I should point out that shapes can have subshapes (children) and other various attributes.  There is also a “fill” method for shapes, but I have students use the fill function call in the for loop to avoid having too many arguments to myshape.  I also think it helps in understanding the logical structure of Processing — the order in which functions calls are invoked matters.  So you first set your fill color, then when you specify the vertices of your polygon, the most recently defined fill color is used.  That subtlety would get lost if I absorbed the fill into the myshape function.

As in previous semesters, I’ll let you know how it goes!  Like last semester, I’ll give updates approximately monthly, since the content was specified in detail in the first semester of the course (see Section L. of 100 Posts! for a complete listing of posts about the Mathematics and Digital Art course).

Throughout the semester, I’ll be continuously moving code from Sage to Processing.  It might not always warrant a post, but if I come across something interesting, I’ll certainly let you know!

Mathematics and Digital Art IV

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mathematics and Digital Art II

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

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

CO214_10182013

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Mathematics and Digital Art I

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

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

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

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

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

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

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

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

Day011Evaporation2bWeb

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

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

Day007koch-45-175

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

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

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

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

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

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

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

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

Making Movies with Processing VI

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

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

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

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

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

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

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

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

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

Here is Monica’s description of her movie:

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

Ethan says this about his movie:

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

Finally, this is how Mohamed describes his video:

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

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

Making Movies with Processing V

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

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

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

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

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

CodeSnippet5

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

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

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

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

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

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

CodeSnippet6

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

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

R = (1 – p) * 255.

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

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

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

R = p * 255.

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

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

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

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

CodeSnippet7

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

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

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

W = (1 – p) * 4.

That’s all there is to it!

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