photo: a mantis on the wall

Tuesday, October 30th, 2012
I was sitting on the step taking a phone call, and was startled to spot this awesome, huge praying mantis on the wall beside me. I switched to speakerphone and shot a photo during the call. Sometimes the best camera is the one you’ve got at the time.
praying mantis
Click to see bigger. Probably not necessary though, as there’s a decent amount of camera motion blur.

Shanghai: Apartment Shopping

Saturday, April 16th, 2011
Photo

Catching up on posting a few photos from that sojourn in Shanghai. This one was shot in a dusty hutong in Shanghai. Grease from a jianbing seems to have clouded my iPhone’s camera. I think I remember at the time choosing not to wipe it off because it looked interesting. The kid in this photo has the perfect kind of barely-reactive wary look. Better that than succumb to overwhelm, can’t have a billion people throwing a tantrum!

Posted via email from Zach’s posterous

Photos; Shopping in Shanghai

Wednesday, February 2nd, 2011



A “Betty Boop” store.


The Table Tennis section of East Nanjing Road’s big Li-Ning store.


Pleasant Goat wishes you all a jittery, happy, new year.

a new set of header images

Tuesday, October 12th, 2010
I moved back to the US of A three years ago, so it’s time to retire my old Beijing-themed header images. I’ll miss the photo of the bicycle-based park barbers and the photo of the bicycle-based couch mover and even the photos of a younger version of myself in front of a red wall, but it’s time for a set that’s new and more relevant to Los Angeles.

So here are the header images I threw together yesterday, along with brief explanations:

New Blog Header Kubrick Wide 3
In Los Angeles it is important to drive everywhere, regardless the distance. Yes, you could walk 3 blocks to your destination, but then you’d miss out on the many routes suggested by your car’s factory-installed GPS system.

New Blog Header Kubrick Wide Studio City Sunset
An average sunset in the hills of LA’s "Studio City" district.

New Blog Header Kubrick Wide 2
The pets of a film editor I know share an "American Gothic" moment. Part of the "A day in the life of Burbank" collection.

New Blog Header Kubrick Wide 6
Disneyland isn’t exactly LA, but it’s close. This picturesque scene is part of the Grand Canyon diorama, one of the many sights to behold while enjoying Disneyland’s charming and ancient train ride.

Due to the extreme horizontal aspect ratio, it’s a challenge to edit images for the header. But it’s fun. The header image displayed per visit is chosen randomly. Once I’ve installed more images, you’ll likely see a different image each visit.

Blog Redesign Phase One

Monday, October 11th, 2010
 Mg 0798

This blog has long been overdue for a redesign. I’ve grown tired of rounded corners, sans-serif body fonts, and small photos. It’s high time I made some changes around here.

So welcome to phase one of my blog redesign. Hopefully the text is now more readable, the photos and videos have more room to breathe, and everything looks and feels better, more or less.

Further changes are to come. With phase two, more consistency. Phase 3, refinement. Phase IV, killer ants.

A beforeAfter wordpress plugin

Thursday, September 30th, 2010
ungraded
graded

What you see above is an example of the beforeAfter jquery plugin in use. If you drag the controls overlaid on the image to the left or right, click anywhere in the image1, or click the links just below the image, you’ll be able to compare the graded and ungraded looks of a frame from a short film I graded a couple of months ago.2

beforeAfter was written by admin at catchmyfame.com. You can find the original code, see some demonstration images, and read up on his reasons for developing the plugin in his blog post about beforeAfter.

I was very happy to come across this plugin. I’ve wanted for a while to be able to post before-and-after examples like this to my blog to demonstrate film grading and photo editing work, and this was nearly exactly what I needed. I took the code, wrapped it into a WordPress plugin, and modified it to add a few features. Since I was to benefit from code released freely into the wild by its author, it’s only natural to release the modifications. The beforeAfter wordpress plugin I’ve constructed can be downloaded here:

http://zachfine.com/beforeAfter_wp.tar.gz

I wrote the plugin’s original author to ask for his blessing before releasing this altered version of beforeAfter, and he agreed. Below are excerpts from that email message, which explain my alterations to the code and also contains some instructions on how to use the plugin:

<email message>
On Mon, Jul 19, 2010 at 2:53 PM, Zach wrote:
Hello there,

I was extremely happy to find your jquery beforeAfter script on the net. I’ve wanted for a while to post before and after images to my blog that help show people how to make adjustments to photos or grade video footage, beforeAfter seems like a fantastic way to do that.

I constructed a wordpress plugin based on your script and installed it on my server. It worked very well, but I realized while testing it that the following additional features would be very useful to me (and possibly to others as well):

  • the ability to have an arbitrary number of instances of beforeAfter containers per page
  • the ability to set custom “Show only before” and “Show only after” text strings via custom attribute in the container’s html.
  • the ability to set a custom initial wipe starting point via custom attribute in the container’s html. The reason for this is that I want the beforeAfter controller and its function to be instantly obvious to visitors, so I want to manually place the initial wipe point over the area of greatest between-image contrast — or I might want to place the wipe point over the area I mean to emphasize.

So I read up on javascript and jquery and made a few modifications. It was only after making these modifications that I noticed the script’s license stipulates “No Derivative Works”. I think this means I can’t use the modifications I’ve made unless you give me approval to use my modified version of your script, though I could be wrong. I was planning on sending you these modifications regardless, thinking that in the best-case scenario you might like the modifications and/or make them available to others.

My mods to the script:

Example of container html:3

<div class="container" data-wipeto="35" data-beforetext="original" data-aftertext="graded" data-animateintro="true" data-introdelay="3000" data-introduration="3000"> <div><img alt="ungraded" src="http://zachfine.com/blog/wp-content/uploads/2010/07/LB-01-00-57-05-original.jpg" height="254" width="450" /></div> <div><img alt="graded" src="http://zachfine.com/blog/wp-content/uploads/2010/07/LB-01-00-57-05-graded.jpg" height="254" width="450" /></div> </div&

Note that I’ve set the user configuration settings above using valid html5 custom attributes. In this manner each container can have its own settings. The html5 spec requires that custom attributes be lowercase and begin with “data-”. Unfortunately this means no camelCasing, which cuts down on the readability of variable names. Maybe underscores are allowed?

Because my goal was to allow an arbitrary number of beforeAfter containers on a page, I’ve changed the jquery selectors in the script to look for divs of class “container”, rather than id “container”. I’ve always used id’s to single out individual design elements on a page, and classes for a class of elements. I could be wrong about this paradigm.

This html produces the following

Redundant image removed –see demo at top of this blog post, it’s a working example of the result of that container’s html.

Any beforeAfter settings not set by the user in the html will get the defaults. The “wipeto” point will be set to “50″ (out of 100), the “beforetext” will be set to “Show only before”, etc.

Here’s the jquery code I use to iterate through each of the the divs of class “container” in the DOM, iterating through each div’s custom attributes to construct an object of options, and then calling the beforeAfter plugin on that div and passing it the set of user-set options:

<script type="text/javascript">
$(function(){
   $('div.container').each(function (index) {
      var $div = $(this);

      var userOptions = {};
      $.each(this.attributes, function(i, attrib) {
             if( /^data-/.test(attrib.name) ) {
              userOptions[attrib.name.replace(/data-/g, '')] = attrib.value;
              }
      });

// Adding just one more option to the object of arguments:                      
      userOptions['imagepath'] = '<?php echo WP_PLUGIN_URL . "/beforeafter/js/"; ?>';

      $div.beforeAfter(userOptions);
   });
});
</script>

This bit of script is in my wordpress plugin, with more comments, here: http://zachfine.com/blog/wp-content/plugins/beforeafter/beforeAfter-source.php

I made a few of changes to the jquery.beforeafter.js script to make use of the new “wipeto”, “beforetext”, and “aftertext” vars, and to remove camelCasing from the options/defaults vars to be consistent with the html5 custom attributes. My altered version is available here: http://zachfine.com/blog/wp-content/plugins/beforeafter/js/jquery.beforeafterZ.js
</email message>

I plan to use this plugin quite a bit in the near future. I hope you all enjoy using it as well. Thanks again to admin at catchmyfame.com for writing the original plugin and allowing me to distribute and use this modified version.

  1. Clicking rather than dragging the controls works just fine on iPhone/iPad. []
  2. Yes, I really did track a “power window” to the actress’s face, matte-ing a selective color adjustment, to restore/enhance the blue color of her eyes. Thanks for asking. []
  3. Yeah, the formatting doesn’t look so hot after it’s wrapped by your web browser, but you should have seen it before! The demo of the plugin at the top of this blog post can serve as a more readable example –see the html code of the post. []

Photo: Hawaiian Green Sea Turtle on a black sand beach

Tuesday, July 6th, 2010

From a recent trip to Kona. I’ll post a link to the rest of the photos on Flickr as soon as I finish editing them.

a photo from my run from Minneapolis to Golden Valley, MN

Friday, April 2nd, 2010
1-2
The other day I ran from my cousin Andy’s place in Minneapolis over to my cousin Steve’s over in Golden Valley. I snapped a set of photos when I left the Theodore Wirth Parkway and began running next to the 55W. At the time I enjoyed the sunset visible at the end of the road, though it’s awfully small and faint in the resulting panorama. Click to see the image full-size. The separate photos were automatically stitched together and cropped with the iPhone app AutoStitch.

Flags and Industry in Lowell, Michigan

Saturday, September 19th, 2009

A flag on main street
A flag on main street

  1. Stitched from a few photos on iPhone with the very fun ‘AutoStitch’ app. []

CGI Missing: will match audio description

Tuesday, September 8th, 2009
200909090202

This is what it looks like when editorial and visual effects teams look through sections of a film’s assembly edit to survey the tasks ahead, and come face to face with a number of lingering placeholders for visual effects shots that will need to be completed. At right is one such placeholder, a frame featuring the text,”CGI Missing: will match audio description”. The clip was very long. It was of such duration that I had time to snap the 14 photos required to stitch this1 panorama with my iPhone, and its impact was of such gravity that nobody paid me any attention.

If our VFX team were less seasoned and capable, they’d see that placeholder clip in their sleep for the next few nights. But not this crowd –they merely laughed and then burst into song. It was amazing.

Post-production’s motto is “work hard, work hard”.

  1. rather technically imperfect []