After 20 years of the same old interface, Max/MSP has finally gotten a facelift from Audio Video Synthesis company Cycling74. Max 5 is a graphical programming environment for audio/video that in recent years has been copied by similar nodal interfaces found in Quartz Composer, Motion, and Shake. According to Cycling74, “Max is the way to make your computer do things that reflect your individual ideas and dreams. Version 5 is a dramatic transformation of Max that begins a new chapter in the program’s history.”
Max is a digital environment for what used to involve analog synthesizers connected via patch cords to oscillators and electronic sensors. Using Max, you can basically connect any device to your computer and use it to make music and visuals. For instance, I could use the longitude and latitude from a GPS device as a controller for music. Or, I could use Midi from a keyboard to alter the behavior of video. The possibilities seem endless with Max.
Several enhancements in the latest release include a Streamlined Interface (w/ multiple undo, zoom, and grid), presentation mode (which should make creating User Interfaces much easier and cleaner), Integrated Documentation (hopefully this will make learning Max easier), Timing (using beats and bars instead of milliseconds should make it easier for musicians), Debugging features (including tapping into what A/V signals look like anywhere in a patch), and a File Browser with Searching!
Max 5 is a packaged set of A/V synthesis objects for $699. Students can get an educational discount or a 9 month license. The Max 5 Upgrade is $199. Try Max out with a fully functional 30 day demo.
Did you ever have a vision in your head, maybe a dream or idea that you wanted to make into reality? Max/MSP is a graphical environment for music, audio, and multimedia. I can make virtually any interactive artistic work I can imagine with Max.
What have others created with Max? Virtual environments, unique instruments, synthesizers, effects for instruments, theramins, DJ interfaces, VJing applications, just to name a few.
Max/MSP is a wonderful way to get into programming. Instead of traditional line based code, Max/MSP was one of the first languages to offer a graphical method of coding. To use Max/MSP, I basically string objects together in a certain fashion to write the algorithm of the program. There is plenty of online documentation available on Cycling 74’s website.
What makes Max so powerful? It is Max’s ability to interface with almost any hardware controller, from MIDI to a Wii controller. I created an eye tracking headset for my Undergraduate Thesis and wrote a program in Max/Jitter than analyzed the incoming video signal from the camera on the headset and tracked the position of a pupil in the video frame.
You can download Max/MSP at Cycling74.com and try it for 30 days.
It’s funny how the VisualHub logo is a burnt film fragment. Who uses film these days? Well, stuffy ‘ole Film Directors who have the money to spend on it. Digital video is cheap and easy to create with and release into the mainstream.
VisualHub certainly makes it easy to convert videos with ease. Just drag and drop the movies you want to convert and VisualHub will make them work with your iPod, AppleTV or PSP. It can even handle DV, DVD, AVI, MP4, WMV, MPEG, even FLV conversion too!
Visual Hub is basic. Just a few clicks will convert your videos.
Visual Hub is advanced. An advanced dialog gives you most of the options available in Quicktime Pro in one simple window.
Visual Hub can use more than one Mac to process video. If you have more than one Mac on a network, Visual Hub will connect them using XGrid, which is already built into OS X, to use the processing power of both Macs at once to convert video!
Visual Hub is $23. It is the best $23 I have spent on an Application in a long time. If you want to put videos on your iPod, AppleTV, or PSP this is the Application for you!
Buy and Download VisualHub here.
In Part 2 of “Create Visuals with NodeBox!” we will explore the interface and give examples of correct syntax when dealing with common Python commands, for loops, variables, importing images, and templates. This post is a crash course in programming 2D visuals with NodeBox, perfect for the aspiring artist or Mac tinkerer who wants to play around with the powerful graphical capabilities of an Apple computer.
Just a disclaimer: I am not a programming super star! I am learning NodeBox as I write about it. So, if you are the least bit intimidated by programming, take a deep breath and clear your mind. I am a beginner just like you! I can’t believe how easy it is to program graphics with Python. The language is easy to remember and NodeBox is remarkably stable.
What Does This all Do?
To understand NodeBox, we must first understand the interface we will be using. NodeBox is unlike many applications we use for design, since it asserts simplicity over displaying a bunch of buttons. There are three basic parts to the NodeBox interface:
Code
Code is typed into the upper right portion of the NodeBox window. Any keywords and commands will be highlighted in blue. These are built-in terms NodeBox understands. In the example, def, for, random, fill, rect, and size are all highlighted in blue. Random is a NodeBox command that computes a random number. Rect is a command that outputs a random number.
Output
Once the program is ready for viewing, I can run it by pressing Cmd+R. The output for the program will be displayed to the left.
Messages
Error messages will be displayed on the bottom right of the NodeBox interface. I can figure out how to fix broken code here.
Working with Code in NodeBox
NodeBox makes coding easy. The syntax, or the language, is rather bare, allowing for fewer mistakes when writing code. Lets look at a basic command:
rect(x, y, width, height, roundness=0.0, draw=True)
This is the basic syntax of a command: the name of the command ( parameters ). The name of the command gives us a hint of what it will do. The rect command draws a rectangle. Parameters tell the command how to behave, these are separated by commas inside of brackets. The rect command specifies x and y position, width, height, and edge roundness.
The Coordinate System
2D graphics are displayed using a X, Y coordinate system. The origin point (0,0) for both X and Y is at the top left of the output window. As X increases, the position of an object will move right horizontally across the output window. As Y increases, the position of an object will go down vertically.
Throttle
I can easily change the values of numerical parameters with the throttle. Click on a numerical parameter. Hold down Cmd and move the mouse left to decrease the value by 1 or move right to increase the value by 1. Hold Cmd + Option while dragging to increase and decrease by .01. Cmd + Shift by 10.
Defining a Variable
Variables are handy, since they allow me to store a value for the computer to use. Suppose I want to draw a circle in a random position between 0 and 100. I can define the x position as x = random(1,100). Every time the program runs, x and y are given a random value between 1 and 100.
Indent the last line of this program to make it work.
The above example draws a circle at a random position between in a 100 x 100 pixel space.
The For Loop
Computers love repetition. The For Loops tells the computer to perform a certain task repetitiously. The syntax for the For Loop looks like this:
Notice how the For Loop has a variable and a range. This is written as: For i in range(10):. i is the variable. The range is 10, meaning everything indented below the for loop will be executed ten times. The colon at the end of the for statement is crucial! Do not forget the colon! All the code I want to loop must be indented below the For statement.
The above example draws ten circles instead of just one. When I run the program, a black blob will appear. This is because all ten circles have the same fill color and stroke.
If I define a Fill and Stroke color before the oval is drawn, I can see depth between the circles (assuming the fill and stroke are different colors).
Colors
The RGB system is used anywhere a specific color value can be inserted as a parameter. In the above example, I filled every circle with red using the command fill(1, 0, 0). Color values are based on a numerical value of 0 to 1. Green = (0, 1, 0). Blue = (0, 0, 1). White = (1, 1, 1). Black = (0, 0, 0).
Templates
Templating is a way I can define the certain look of an object once and then call upon that object as many times as I like. This would be called a function in traditional programming. Suppose I want to draw 100 images. I don’t want to write the code from each image 100 times. I can just designate the specific design of one image, then use a For Loop to draw 100 of them.
To run this program, save this code as a project file. Download the first image in this post of the NodeBox logo. Create a folder called images where the project file is saved. Put the downloaded nodeboxapp.png file into the images folder. Run the program. It is important to use nodeboxapp.png, since it contains a transparency that the program will need to run. NodeBox looks for images in the folder where the project is saved first and then in the Home Directory.
Notice the def statements? These define a template and have the following structure: def template_name (variables). After each def statement is a colon! Do not forget the colon! The properties of the def statement are then indented beneath the initial syntax. In the above example, def nodeboxlogo (x,y): defines a template for the following image: image(”images/nodeboxapp.png”, x, y, alpha=0.7). So, whenever I call upon nodeboxlogo, it will always draw the image with an alpha of 0.7. The Alpha is the transparency of the image. This image is stored on my hard drive, in a folder called images that is in the same folder as the project file. See how nodeboxlogo has two variables, x and y? At the end of the program, I call upon nodeboxlogo to draw itself at a random position 10 times in a For Loop. x then equals random(0, sizewidth).
Variable Output Size
The size command designates the size of the output window. A good rule of thumb when designing programs for computer screens is to make the output size variable. In the very beginning of the program, I defined two variables: sizewidth=400 and sizeheight=600. I put these two variables into the size command, allowing me to control the output size from the very top of the program. Another time I call upon these two variables is at the bottom of the program, where I assign a random position for each nodeboxlogo.png. This is so the image never escapes the dimensions of the output screen. Otherwise, every time I wanted to change the output size, I would then have to change the range of the random values. This applies to the size of the background rectangle as well. It is superior to have the position of all the objects scaled to the overall dimensions of the output window. With a little tweaking, I could even make it so each NodeBox image always stays within the bounds of the canvas. This would require a little math and variable dimensions for the image. Understand how this is helpful?
Export to PDF
I can export my composition to PDF by selecting File: Export as PDF… The exported dimensions will be dictation by the size command. In the export options, I can designate the number of pages. This is nice with a randomized program, since it will run the program as many times as I like, outputting each randomization as a separate PDF.
In Part 3, I will dive into NodeBox math and drawing paths! Check out the tutorials at the Official NodeBox website.
I get excited when I find new and easy methods to create art with my Mac. Quartz Composer is a fantastic free application created by Apple that uses OpenGL and Core Image to create 2D and 3D animations in real time. Installing Quartz is a little bit of a hassle, which is why I am excited to tell you about NodeBox!
NodeBox is a Mac OS X application that lets you create 2D visuals (static, animated or interactive) using Python programming code and export them as a PDF or a Quicktime movie. NodeBox is free and well-documented. (Nodebox website)
Don’t be afraid to start programming
Basically, I type in some code and out pops some amazing visuals. The programming language Python is well documented online, so even a newbie to programming should find it easy to figure out. Anyone with a good foundation in C should have no problem. Python looks cleaner than OpenGL and is easier for me to figure out.
NodeBox Does it All!
NodeBox includes support for Adobe products. So I can import vector art created in Illustrator and output 2D art in PDF. These features alone make me want to use NodeBox over Quartz Composer for 2D art making. NodeBox is open source, meaning anyone can improve upon it. It even supports Core Image, which opens up exporting in different formats and creating layers for 2D animation.
Subscribe to iUseApple and find out instantly when I post a “Getting Started” tutorial for NodeBox! Download NodeBox from the Official Website and check out the Official NodeBox Tutorial.
Now that I am done editing my video masterpiece, it may be time to output the video to a format necessary for the Internet. Uploading a video to YouTube is pretty easy. Making it look good is a bit of a challenge. Most online videos are plagued with artifacts, pixelations, and lag time (the latter is mostly dependent on my Internet connection). But I have a Mac, so I can make a fantastic looking video for the web using Final Cut Studio, iMovie, or Quicktime Pro.
Last time I heard, about 20% of the population has actually purchased a HDTV for their home. Yet everyone seems so content watching the poorest quality video on YouTube. Now that AppleTV has been released, a flood of similar products will probably hit the market. This will bridge the gap between online videos and television. It is time to start making online videos at a reasonable quality for both the Internet and TV.
I am going to make this easy by providing the settings necessary to output a fine looking video for the Internet with Final Cut Pro near the end of this post. This method can also be done with the Output/Share settings in Quicktime Pro or iMovie. It is important to note: All video editing applications created by Apple use Quicktime as a backbone. Every Apple video editing application basically outputs video using the screens below (written during the release of Final Cut Pro ver. 5.1.2, Quicktime ver. 7.1.3).
In video speak we want the following: A video with a 300 kbits/sec data rate, small file size, a resolution of 640×480, 22.050KHz AAC audio compression, few key frames, and high quality. I will elaborate on these points below for the beginner.
Data Rate
This is an extremely important concept to understand. Streaming video is really only available to those with a high speed connection to the Internet. 56k modems just don’t cut it. This is because streaming video needs to transfer at speeds higher than around 100 kilobytes per second, double that of a 56k modem. Basically, video needs a bigger pipe to fit through. Most high speed connections can transfer at speeds up to 700kbps. A poor high speed connection can transfer at around 100 kbps.
Most video we capture from a camera is extremely large in file size and quality. To make video suitable for the Internet, we need to “compress” the video to make it fit through the pipe we want.
In order to compress the video we need to choose a codec for it. A video codec is similar to the make of an automobile. There are various makes of cars out there: Audi, Ford, Subaru, Saab to name a few. They all have four wheels and can be driven by a person, but each has a distinct look and feel. Video comes in all shapes and sizes. DV, HD, MPEG2, H.264, for example. The latter is what we will be using, since H.264 is ideal for streaming video and was created by Apple.
Small File Size
All of the settings I explain in this tutorial are targeted to result in a video of the best quality / smallest file size. If the file size is small, this means the video can fit through the pipe we want quickly. This will prevent lag over the Internet, at the expense of quality. This solution will yield a good quality with a small file size.
640×480 Resolution
This is the Standard Definition of Television. 640 pixels across X 480 pixels down = Resolution. Anything smaller, when blown up on a television will create glitches and pixelation in the video. All videos on YouTube are 320×240, half that of a television set.
AAC Audio Compression
Audio compression is the same concept as video compression. We need to shrink the file size of the audio track by giving it a lower quality. There are many audio codecs out there. MP3 is the most famous audio codec. Do not use the default Integer (Big Endian). I’ve noticed audio will be slightly out of sync using it on YouTube. AAC works great and can be compressed to a sampling rate of 16.000 KHz and Bit rate of 24 kbps stereo to give us decent sound and small file size.
Keyframes
A keyframe, in regards to compression, is a frame with a complete image. To make the video have a smaller file size, there must be few key frames. More key frames, better the quality.
High Quality
There are two ways Quicktime will look at the video in order to compress it: Spatially and Temporally. Spatial Quality, meaning the depth of the pixels in each frame of video. A lower spatial quality means similar colors in each frame will start to blend together. Colors will be more distinct with a higher quality. Temporal Quality is the way pixels change from one frame to another. A low spatial quality is good for talking heads and video with very little movement. High spatial quality is suited for fast motion. Apple provides a Quality slider that controls both.
Read the Guidelines
Every video service has guidelines for submitting a video. There may be limits on file size and duration, even the codec. YouTube has two basic guidelines for uploading a video: The filesize must be no larger than 100MB and the duration may not exceed 10 minutes. When I upload to a video sharing site, the service will then process the video to it’s own specifications. YouTube will shrink the video to 320×240, but Google Video will retain the 640×480. So, just double check how the service handles the video. Final Cut Pro will give us a fantastic Online Video Master, that we can upload to any video sharing site or embed on a website with Quicktime.
How To
Every Apple video editing application uses the same method of exporting video via Quicktime. Below are the methods of reaching the above window in Final Cut Pro, iMovie HD, and Quicktime Pro.
Final Cut Pro
Go to File in the menu bar and Select Export -> Export using Quicktime Conversion.
iMovie HD
Go to Share in the menu bar and Select Quicktime from the drop down list.
Select Expert Settings in the Compress Movie For: menu
Quicktime Pro
Go to File in the menu bar and Select Export from the drop down list.
Now all the steps become exactly the same, no matter which application I am using. When the above window appears make sure Movie to Quicktime Movie is selected in the Export: menu.
Hit Options
The next window is a current overview of the export settings. The image below is what this window will look like when we have finished entering the settings.
Make sure Video, Audio, and Prepare for Internet Streaming are all checked.
Click Settings under the Video checkbox. The following window will appear. This is where we will apply the concepts we just learned.
H.264 is the best codec for Internet Video. Select H.264 in the Compression Type: drop down menu.
Under Key Frames: Select Every and Enter 1000 in the frames field. The higher the number I enter, means lower the quality and smaller file size.
We can restrict the “Data Rate” of the video. Select Restrict to and Enter 300 in the kbits/sec field.
This is a very important tip: Never slide the Quality slider below Medium! The video will just fall apart. Slide the Quality to High. The Quality I just set was the Spatial Quality. To adjust the Temporal Quality, Hold Down Option and use the Slider. If my video has little movement, I can turn the Temporal Quality to Low. If my video has a lot of movement, slide the Temporal Quality to High.
Select Faster encode (Single-pass). I can select best quality, but usually I am in a rush to get an Internet video online, so I opt for the faster encode. The file size may grow with best quality.
Click OK. Now I return to the Movie Settings window. Select Size… under the Video check box.
In Dimensions: Select 640×480 VGA. Check Deinterlace Source Video.
Click OK. Now I return to the Movie Settings window again. Select Settings… under the Audio check box.
Here I will lower the quality of the audio, allowing me to keep the file size of the output video small. In Format: Select AAC. Keep it Stereo (L R). Change the Target Bit Rate to 24. Select 16.000 from the Rate drop down menu.
Click OK. Now I return to the Movie Settings window for the last time.
Double check that all the settings match with the image above of the Movie settings window. Click OK and I will be directed back to the first screen I saw. Here I enter a name for the file and choose the destination to save it. Click Save and the export process will begin. This could take anywhere from a few minutes to hours depending on the length of the clip and the speed of my Apple Computer.
Blender is a free open source application for 3D modeling, animation, and game design. At first, I was skeptical of Blender’s capabilities since 3D Giants like Maya and 3D Studio Max have dominated the scene for quite some time. Once I downloaded and installed Blender, my misconceptions were completely erased by a wonderful 3D experience. Blender offer comparable features, pulls off Multi-OS Support way better than it’s competitors and it is totally free!
To the noob, Blender may seem daunting with a mess of buttons and available layouts. Like any good graphic application, there are many ways to do the same thing. This can be complicated. Blender.org offers Tutorials and Wikis to get started making 3D models. These resources far exceed my previous experiences with documentation for Maya or 3DSMax.
Check out what Blender has to offer.
Gawker is a free application that will make time lapse movies from the iSight or DV camera connected to a Mac. Time lapse photography allows me to make a movie of an event with a long duration shorter by recording a frame every few seconds. I can specify the frequency that Gawker takes each shot for the time lapse. I could use Gawker for video surveillance, a webcam, or just to suit my creative impulse. Gawker even lets me share my time lapse and view others’ online.
When the opportunity is right, I’ll upload a time lapse I make with Gawker.
Download Gawker here.
Max will rip CDs and convert audio files using many different available formats for free! Max is easy to use and has every modern convenience for the avid music enthusiast.
I used Max to convert a bunch of MP3s to a lower bit rate. Max can batch encode in multiple formats fast and even handles ID3 tags nicely. I recommend it over iTunes, since iTunes likes to handle the sorting of MP3s on it’s own. With Max, I can specify a specific folder I want the converted MP3s to go.
Soundflower is an audio router for OS X. It allows me to send audio from one application to another. According to Cycling 74, “Soundflower is easy to use, it simply presents itself as an audio device, allowing any audio application to send and receive audio with no other support needed.”
Cycling 74 has been creating applications for DJs and Interactive Artists since the good ole’ Mac OS 9 days. The audio/video programming language Max/MSP/Jitter has been the most innovative solution for interactive art making for the Mac.
Soundflowerbed is a companion application that places an audio router right into your menubar.
I can select Soundflower as either my input or output in my sound preferences pane, allowing me full control over where audio is traveling inside of my Apple computer. Soundflower even allows for 16 channels of audio to be passed through it. For instance, I can tell Garageband to output to two channels of Soundflower, while I sample an mp3 in iTunes in another two channels. Now I have an audio mixer! Then, I can output the audio through my speakers right in Soundflowerbed.
Download Soundflower from Cycling 74’s website.
