Spring is Here

Adobe Stock image used here for our Photoshop Basics workshop held Apr 10, 2017.

Before &

holidays, vacation, love and friendship concept – smiling teen couple in sunglasses having fun in summer park

After some Photoshop fun

holidays, vacation, love and friendship concept – smiling teen couple in sunglasses having fun in summer park

Patricia Hannaway – 3D Character Animation

On October 6, Patricia Hannaway, gave an superb IMG_4113sm IMG_4115sm IMG_4116sm IMG_4120sm IMG_4125sm IMG_4128sm IMG_4143sm IMG_4170sm IMG_4173sm IMG_4179smpresentation on 2D and 3D animation.

Patricia graduated from Smith College in 1984 with a BA in Art History and a Minor in Economics.  Working on Wall Street as a Corporate Analyst, she decided to further her education in Fine Art and Computer Graphics, earning two Master’s degrees from the NY Academy in Traditional Painting and the School of Visual Arts in Computer Graphics. Recruited by Walt Disney Feature Animation, she trained as a Computer Character Animator and also worked for Dreamworks, Industrial Light & Magic and Weta Digital, New Zealand.  Some of her film credits include:  “Mulan”, “Pocahontas”, “Lilo and Stitch”, “Star Wars”, “Antz”, “Shrek” and “Lord of the Rings: The Two Towers”, where she was Senior Animator for the character, “Gollum”. Currently, Patricia is doing development work on a new film project at Aardman Animations in the UK, and was appointed Adjunct Professor of Digital Arts in Computer Science at Dartmouth College in Hanover, NH.  She splits her time between teaching and fine art, in order to prepare work for upcoming exhibitions.  A featured artist for American Artist Magazine, she was interviewed for Winter 2008, and will be in the upcoming Spring 2014 edition discussing composition for painting. (From http://www.patriciahannaway.com/biography).

 

Digital Drawing Part 1: Photoshop Livin’

With the first half of the term in Digital Drawing, students worked mostly in Photoshop, drawing digitally and compositing photographic elements.  Here are some photos I took of the resulting prints (completing the circle from digital to physical to digital again – maybe later I will post some of the original file outputs as well).  Check it out:

Gabriel Barrios '15 Scanned drawing and digital manipulation in Photoshop

Gabriel Barrios ’15
Scanned drawing and digital manipulation in Photoshop

Julian MacMillan '14 Scanned drawing and digital manipulation in Photoshop

Julian MacMillan ’14
Scanned drawing and digital manipulation in Photoshop

Gabriel Barrios '15 Digital drawing and compositing in photoshop

Gabriel Barrios ’15
Digital drawing and compositing in photoshop

Corinne Romano '15 Digital drawing and compositing in Photoshop

Corinne Romano ’15
Digital drawing and compositing in Photoshop

Wei Wu '14 Digital compositing in Photoshop

Wei Wu ’14
Digital compositing in Photoshop

Wei Wu '14 Digital compositing in Photoshop

Wei Wu ’14
Digital compositing in Photoshop

Gabriel Barrios '15 Digital drawing and compositing in photoshop

Gabriel Barrios ’15
Digital drawing and compositing in photoshop

Gabriel Barrios '15 Digital drawing in photoshop

Gabriel Barrios ’15
Digital drawing in photoshop

Vicky Zeamer Scanned drawing composited with photographed textures in Photoshop

Vicky Zeamer
Scanned drawing composited with photographed textures in Photoshop

Vicky Zeamer Scanned drawing composited with photographed textures in Photoshop

Vicky Zeamer
Scanned drawing composited with photographed textures in Photoshop

Wei Wu '14 Digital compositing in Photoshop

Wei Wu ’14
Digital compositing in Photoshop

Corinne Romano '15 Digital drawing in Photoshop

Corinne Romano ’15
Digital drawing in Photoshop

Lucy Morris '14 Scanned drawing and digital drawing in Photoshop

Lucy Morris ’14
Scanned drawing and digital drawing in Photoshop

Julian MacMillan Scanned drawing and manipulation in Photoshop

Julian MacMillan
Scanned drawing and manipulation in Photoshop

Julian MacMillan '14 Scanned drawing altered on scanner and in Photoshop

Julian MacMillan ’14
Scanned drawing altered on scanner and in Photoshop

Wei Wu '14 Digital Drawing with Photoshop

Wei Wu ’14
Digital Drawing with Photoshop

Julian MacMillan '14 Digital Drawing with Photoshop

Julian MacMillan ’14
Digital Drawing with Photoshop

Left: Corinne Romano '15  Right: Julian MacMillan '14 Digital Drawing on Photoshop.

Left: Corinne Romano ’15 Right: Julian MacMillan ’14
Digital Drawing on Photoshop.

Processing Workshop: Synthesizer Sequencer

Screen Grab of Processing Sketch

Screen Grab of Processing Sketch

Tutorial

On February 17, 2014 I will give a tutorial along with Professor Michael Casey on Processing. My portion of the tutorial focuses on building a virtual implementation of the Four Step Sequencer Synthesizer depicted here.

What is a “Four Step Sequencer Synthesizer”?

  • A synthesizer generates musical tones. In this example we use square wave oscillators, which sound bright compared to smooth-sounding pure sine tones.
  • A sequencer plays a series of samples or sounds in sequence.
  • The Four Step Sequencer Synthesizer plays four sine wave oscillators in sequence. The frequencies of the oscillators are independent of each other. At any given time, only one of the four oscillators is turned on.
  • The bottom four knobs of the interface control the frequencies of the four oscillators.
  • The top row has respective controls for sequencer rate, on/off switch, low pass filter cut-off frequency, and gain.

Instructions

The tutorial is broken up into 5 steps. For each step, there is a link to a page having an embedded Java applet and all source code. Please read the notes below regarding Java applets and browsers.

Notes on Java applets and browsers

The pages linked below have embedded java applets. You must have Java 7 on your computer to run the applets. Getting these applets to run is not always simple. On your computer, you must first set your Java security level  to “Medium”. (On a Mac, this can be found at System Preferences | Java | Security.) There may be additional browser dependent problems:

  • Chrome 32.0.1700.107: Google Chrome is a 32-bit browser and Java 7 is 64-bit. Therefore java applets will not run in Google Chrome.
  • Firefox 27.0.1: The applets should run without issue.
  • Safari 7.0.1: Navigate to a page having one of the applets embedded. The applet will probably not run. You must then proceed to  Preferences | Security | Manage Website Settings… . Select “Java” on the left. Under “Currently Open Websites” you should see “www.cs.dartmouth.edu”. Select “Allow Always” from the drop down menu.

Step-by-Step

There are 5 phases to this tutorial. I want to emphasize that the source code does not illustrate the best coding technique. In particular there is virtually no error-checking in the code. I encourage anyone working with this code to make it better by adding error handling!

1. Visual Interface

The basics of coding for Processing are illustrated here. We build a static visual interface. It loads a bunch of images and places them on the screen. The interface has no user interactions. Not too exciting, but it looks pretty cool!

2. Classes and User Interaction

We take all the knobs and controls and generalize them as classes. We add user interaction so that knobs can  be turned, switches can be flipped, and LED lights can turn on and off. This step illustrates some important concepts concerning arrays, Object Oriented coding, and setting up a grid of interaction “zones” for monitoring mouse location.

3. Let There be Sound!

In some ways, this step of the tutorial is the most advanced. We import an external Java sound synthesis library called Beads. We modify the classes so that the knobs can control some parameters of the Beads class instances. There is a master clock that Beads instantiates. We use this clock to trigger the oscillators. There are several advanced concepts that this step of the tutorial depicts such as external libraries, class extension, method overriding, and multithreading. At this point, the applet looks and behaves like the hardware synthesizer that we are modeling.

4. Let’s Draw Some Stuff and Make it Look Cooler

Now that we are finished modeling the hardware, we start thinking about adding additional features. In this step, we add a window that draws the waveform of the sound we are hearing. There aren’t many new concepts introduced here, except perhaps reading from buffers.

5. More (Musical) Interaction

It’s all fine and dandy to use a mouse to control this musical instrument. But to actually play it, we might want to use a more a more appropriate input device. This step of the tutorial illustrates how to detect a MIDI input device and use the device to control the user interface. We also show how to wait for user interaction via keyboard input. There are surprisingly few modifications necessary to accomplish these additional features.

Note: This step assumes that we are using the Korg nanoKontrol2 as an input device. We have hard-coded the mapping between MIDI controller and graphical user interface. This is very bad coding practice!