Instructor Insights: Image Processing Activity

Flash and JavaScript are required for this feature.

Download the video from iTunes U or the Internet Archive.

Description: Sara James provides an overview of the four exercises (Instagram Filter, Image Flip, Single Color, Vignette) used in the image processing workshop for Girls Who Build.

Instructor: Sara James

Some content in this video is not covered under our Creative Commons license. See the closing credits for more information.

SARA JAMES: Hello my name is Sara James. I've been working the past seven years at MIT Lincoln Laboratory, doing radar signal processing. Today, I'm here to tell you about the image processing workshop of the girls who build.

So the image processing section of this workshop is actually done with a software called Processing. Processing is open source, free, and it's available at Processing.org to download, for just about any sort of operating system that you can think of. This software is actually developed for people that are not doing coding, day to day. During this section of the workshop we're trying to expose participants to image processing concepts, within the context of real world applications. Furthermore, we're trying to demystify coding, and show participants that they can do this too.

You'll be doing four exercises. The first being an Instagram filter. For the Instagram filter this will be adding an overlay where you can change the RGB values. Next you'll be flipping an image. This will be a flip that's vertical, and during this you'll be actually moving around the individual pixels.

After this, you will convert a color image to a different color scheme. So you'll take something, and convert it to one single color. This involves modifying the individual color values for every pixel. For the last exercise, which is the vignette, this is adding a border to the picture. The way that this is performed, is by doing a mask overlay.

Before you just jump into having the girls doing the fill in the blank exercises, it's highly recommended to go over the four processing components of any processing program. The first is variable Declaration: this is where you initialize something as being a PImage or perhaps a Boolean, depending on the exercise. Next is the setup. The setup is where you generally load in images and initialize the various settings for a program. After that you'll have a Draw. Draw is where you actually produce the frame that you'll see.

Lastly you'll have, in some of the exercises, Mouseclicked. And this is to handle mouse click events. Before breaking the girls up into groups, we had a image processing lecture, that was specifically tailored towards the processing language. During this lecture, various fundamentals of image processing were introduced like color schemes-- for instance RGB or things like HSBC-- in discussing brightness.

After the processing lecture, we broke up the girls into groups of four, with one volunteer per group. When the girls were broken up, they were given their exercises. These exercises were set up as fill in the blank activities. The fill in the blank style was done to level the playing field, so that people with more or less experience with coding would feel comfortable.

Time permitting-- and also dependent on the experience level of the girls that you're working with-- there's additional activities that you can do, within the context of the four coding exercises that have already been defined. For the first one, for your build your own Instagram filter, you can actually modify the RGB values to change the overlay. So this is something that's relatively easy to do, and something that you should definitely encourage the girls to do.

For the flip an image, you can actually change the way that the images flip. So in the exercises that we had, the image is flipped vertically, but a more difficult thing that you can ask the girls to do, is to flip the image horizontally. So within the convert an image to a single color, you can actually ask the girls to manually convert to grayscale. For this activity, this is something that's introduce the girls to the way that color is perceived by humans.

For the add a vignette, one relatively easy thing that you can ask the girls to do, is vary the size and color of the vignette. Lastly, and this is the most difficult, you can actually ask the participants to combine all elements, from all of the exercises. This is something that is the most complex, because it involves potentially changing the way that the code was originally run in the exercises.

So in terms of the lessons learned, there are certain things that we did not do, during girls who build, and in hindsight we would have done, if we were to do this again. One of the first things is actually introducing the fundamentals of programming. Things like introducing if statements, while statements, what a Boolean is, things like that.

When we had done girls who build, we kind of just jumped right into the exercises, after an image processing lecture. And that wasn't really enough preparation for the girls. The first exercise was very difficult to get through. That's another thing that you could potentially do. If you have people that are not really experienced with coding, feel free to go through the first exercise together, and then have the students do the following three exercises individually.

Each individual student had their own laptop, don't think that this is something that you need to do. You may find that having multiple students with only one laptop will be sufficient, and actually might introduce them to working in a group, and the type of collaboration that entails. Also along those lines. If everyone has their own computer, you might find that it's very isolating. One thing that girls who build did not do, but it's something that we may look into in the future, is using some sort of collaborative editing software. An example of this is TitanPad.

Whether you're a student or a teacher, you may be asking yourself, what are the next steps? The next steps could possibly be looking into other coding languages. Coding languages that you may want to look into include c++, Java, or Python. You'll find that, for instance, if you wanted to build an Android app, there's communities and resources available online for free. That you can access.

Have fun with the image processing activity! We'd love to hear about your experience. Email:

Girls Who Build.

Girlswhobuild.org

Free Downloads

Video