Archive for the 'Quartz Composer' Category

Max/MSP 5 Released, A/V Nerds Rejoice!

April 23rd, 2008 by steveblue

Max 5 Programming Environment

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.

Jitter in Max 5

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.

Dashboard Widgets: NOAA Weather Reports

March 1st, 2008 by steveblue

NOAA Weather Center for OS X Dashboard

Very few Dashboard Widgets have an enjoyable UI (User Interface). NOAA, the National Oceanic and Atmospheric Administration who supplies weather data to every Weather Man on TV, now has an outstanding Dashboard Widget available for OS X. 7 Day Forecast, Current Conditions, Zoom Doppler, and Live Alerts combined with Quartz visual effects makes the weather reporting experience actually enjoyable. The NOAA Weather Center Dashboard Widget is designed by Cobalt Logic. I am excited to see what other offerings this designer has in store for the Dashboard…

Go download the NOAA Weather Center and get trash that default Weather Widget.

More information about the NOAA Weather Center is here.

Watch Online TV with Joost!

October 8th, 2007 by steveblue

Joost Logo

Joost, an Online TV Application, was just released last weekend. Joost has made agreements with major networks like MTV, CNN, Discovery Channel, WB, and CBS so they can provide over 15,000 shows and several channels with their online service.

Joost Interface

Joost is an application that I can download for free. Joost boasts an amazing interface that allows me to browse channels via a grid. I can search for a show I want to watch. There are chat rooms, so I can talk with others watching the same show. There is instant messaging support for gMail and Jabber. Joost supports multiple accounts, so different users can customize the interface to their liking. Oh, are there commercials? There are commercial breaks with only one commercial per break.

But there is no support for PowerPC Mac, sorry G4 and G5 owners. Why don’t you go complain at Joost.com and maybe future Beta versions will be Universal. I must have an Intel Mac and Broadband Internet Connection for Joost. Also, the first release of the Beta seemed kinda buggy, but I did just test it out on launch day. There will be improvements in the future, I’m sure. I managed to watch a few episodes of Babylon 5 just fine.

Download Joost from the Official website and start watching online TV today.

Kill Shadows and Improve Performance

July 14th, 2007 by steveblue

ShadowKiller

Since I started getting into applications that take up a lot of video processing power, I’ve found methods to cut out the little effects OS X does to show off. One of those effects I wanted to kill is the shadow behind the frontmost window.

Shadows Behind Windows

Anyone running Apps like Photoshop, Final Cut Pro, or even iMovie should think about downloading the freeware Application called ShadowKiller.

Shadow Killed

This is a small tweak, but when working with live video, any processing you can squeeze out is worth it. I have ShadowKiller set up to open at Login and activate. It then disappears, killing shadows in it’s wake.

Download ShadowKiller and Start Optimizing Your Video Performance Today!

Convert Videos with VisualHub!

June 27th, 2007 by steveblue

VisualHub will convert your videos.

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.

Go Crazy With Photo Booth

June 9th, 2007 by steveblue

Fun with Photo Booth Alternative Uses, Security Camera, iSight

By now almost every Mac user has played around with Photo Booth. It is so easy to get caught up in a photo session with friends making funny faces and cool poses. If we look into Photo Booth a tad further, we can find many more alternative uses for it…

Take Great Snapshots

Here is some helpful advice on posing for the iSight from a professional photographer. Find a light source that is not the monitor and position myself facing the light. Alternatively, turn off all the lights in the room, turn your monitors brightness up, and use it for your light. Using a lamp is helpful, since dramatic shadows look great with some of the effects. Position your body at a slight angle to the iSight, meaning do not look at it straight on. This is particularly useful for people who wear glasses, as demonstrated below. The human body at an angle is also more flattering. Stay still when in low light conditions. The flash provided by the screen is rather soft, so be still when a picture is being taken or it might come out blurry. Also, sit at least 1 ft. away from the screen, but still fill the frame. Don’t leave space above my head. Look below at the differences between a poorly shot photo and a decent one, and that’s not even my good side!

Looking Straight At The iSight
Bad photo: Looking straight on.
Positioning my body at an angle to the iSight
Good photo: Positioned at an angle.

Connect a Better Camera

For those of us with a built-in iSight camera, we have the option of connecting a miniDV camera with Firewire. Just plug in the smaller end of the Firewire cable to camera and the fatter end to the computer. Open Photo Booth and ta da! Photo Booth now uses the Firewire camera instead of the iSight. Now I have more versatility with camera placement and lighting, and should have a better lens and manual control over the picture quality.

Upload Photo Booth to Flickr!

FlickrBooth screenshot

FlickrBooth is a simple plug-in for Photo Booth that will upload snapshots directly to Flickr! FlickrBooth can be downloaded here.

Create a Live Security Camera

Did you know you could be watching your room from the iSight while you are gone via email? Using Automator, I can run a script that makes a new mail message in Mail, takes a photo with Photo Booth, attaches that photo to the email, and sends it to my email. In iCal, I can schedule a recurring timer to run the Automator script however often I want. Take a photo every minute to catch someone tampering with your Mac. Here is a simple script below to automate taking a photo and sending it via email. The only downside to this script is that iPhoto must be open for it to work.

Automator Workflow that uses the iSight as a CCTV security camera

Is anyone out there up to the challenge? Create an Automator / AppleScript workflow that hides Photo Booth during this process or even displays an alternative screen! Be featured on iUseApple.com! Ask Steve Blue for more details.

Change the Photo Booth Effects

I found this awesome article on macosxhints.com that explains how to change the effects in Photo Booth. I must be a little Quartz Composer savvy to make this work. I successfully made this work, but remember to back up the original files so Photo Booth can be returned to it’s original state!

Discover If the Apple Remote is Working

I can point the Apple Remote at the iSight and see the light inside turn on when I press a button. This is handy if I think the Apple Remote is running low on battery or is malfunctioning.

Use Photo Booth to see if the Apple Remote Needs Batteries Works

Create Visuals with NodeBox! (Part 2: Crash Course)

May 16th, 2007 by steveblue

NodeBox: Python Visual Programming Environment

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:

NodeBox Window Example

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

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.

VariablesCircle

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:

The For LoopBlob

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.

Fill and StrokeDepth

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.

Basic NodeBox Program

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.

NodeBox Logos

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.

Create Visuals with NodeBox! (Part 1)

May 8th, 2007 by steveblue

NodeBox: Python Visual Programming Environment

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.

Example of 2D Animation in NodeBox for OS X

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.

Become a VJ with VDMX

February 9th, 2007 by steveblue

Hold up, what is a Live VJ? A VJ is someone who mixes live video music like a Turntablist (DJ) mixes music, usually backing a DJ or other live performance.

VJ Footage Behind the Flaming Lips

Certainly not the MTV variety.

VDMX 5 is the choice Live VJ application for OS X. Vidvox released the Public Beta of VDMX 5 a few weeks back. Packed full of video goodies, including built-in audio/midi analysis, video masking, real time Core Image Effects, modular interface, effect preset switching, Quartz integration, its hard to name everything. Just the fact that VDMX 5 can handle Quartz compositions means I can create any video effect imaginable. The interface behind VDMX 5 is revolutionary, freeing the video editor from a timeline or even keyframes.

VDMX 5

“Following in the footsteps of audio software trends, video software and hardware are now fast enough to compete with expensive hardware boxes for doing real-time SD and HD mixing and FX processing. Using your Macintosh, you can achieve astonishing results that are infinitely more flexible than dedicated hardware, for a fraction of the cost. VDMX not only saves you money on hardware, but also saves time. Because of its real time architecture and a control design which encourages creative exploration, you can count on VDMX to get better results faster than working with timelines.”

You can now become a Live VJ! Download VDMX 5 from the Vidvox website.

Put Myself in Space

January 25th, 2007 by steveblue

Here is a Screen Saver I cooked up with Quartz Composer. If I have a Mac running Tiger and an iSight or webcam, I can put myself in outer space!

How the Screen Saver works: Dark colors are transparent, allowing space to show through. Bright colors will be opaque. So, turn off the lights and spotlight yourself somehow and you will be walking around in space in no time!

Download the Screen Saver here.

Double click the .zip archive to unzip the two files needed to run the screen saver: outerspace.qtz and hst15_night_sky2.mp4. Place these two files in the /Library/Screen Savers/ folder .

Open System Preferences and select Displays. Select 720×480 (stretched). Your screen resolution will shrink down to the size needed to display the video correctly. Now, click Show All and Select Desktop and Screen Saver. Click the Screen Saver tab. Select outerspace from the list of screen savers.



iUseApple is powered by WordPress 2.3.3 and Unnamed SE by Xu Yiyang
Entries (RSS) and Comments (RSS)