Practicing bass (2015 version)

Bass guitar continues to be a fun hobby, and a great break from all the other busy activities in life! Need to play more (playing is practice!) to smooth out the sound and make fewer mistakes. I also need to learn how to use the recording settings in Amplitube because I recorded the traditional ‘Hey Ya!’ to compare progress. Well, I played it into the iPad. I did not record it. I will have to play it again.

In the meantime, here’s a selection of other bass lines I enjoy playing. Cringe-worthy mistakes and all!

MVP approach to rigging for newbie animators

MVP (minimum viable product) just means doing something quick and/or easy (minimum) but still useful (viable) in solving the problem. As a newbie animator sometimes I need to rig up a prop for a shot. I have a LOT to learn about modeling and rigging, but while I’m busy learning animating (I have a lot to learn there, but at least I’m actively learning that!) this is my approach. So far it’s getting me by (probably because my props only need to work in a student assignment shot, so being “viable” is pretty easy).

Making a stapler

Plan! What is a stapler and what does it need to do in the shot? In this case, the rig just needs to be able to “staple” (open and close like a stapler). I know from experience (I may have stapled a few things in my time) that a stapler has a bottom, top and that metal bit under the top that holds the staples. And I know when I staple something, I press the top down. The top and the metal bit don’t move at the same speed. So I want a rig that can do that!

Also I want to refresh in my mind: what does a stapler look like? Google images is great for this!

Many photos of staplers (google image search screenshot)

Simple model

Start building the main parts. For the base I went with a simple block polygon. I edited the size in the channel box to use whole numbers, just to keep it simple. No idea if it’s to scale with the characters I use. I make sure the block is centred in X, Y and Z, and then I adjust Y so that the base of the model sits on the ground. By default Maya puts the centre on the ground, so half the block is below ground. I don’t want that when I import it into another scene, so I shift it up by half it’s height (I type the numbers in the channel box so it’s exact).

Top, front, side and perspective views showing a thin flat rectangle

I drew a second block approximately the same size, but taller, then edited all the sizes in the channel box. But the top of a stapler is a bit more jaunty so I switched to edge mode and did a little chamfer here and there. (I used “chamfer” in a post!) Turning off ‘discrete move’ in the tool settings helped, maya was snapping to the grid or something and not letting me get the fine tuning I wanted. Even in MVP I have standards!

There was one other part I added to the model: the bit that holds staples. It’s called the “magazine”. How do I know that? I looked up staplers on Wikipedia! I also learned the ‘top’ is called the ‘arm’, and in maya I named all the polygons thus: stapler_base, stapler_arm, stapler_magazine.

Rig it!

The first rigging step, to me at least (after the planning above), is to organise the polygons and add a root/layout control. So I grouped everything twice. The group named ‘stapler’ will hold the entire rig. The ‘grp_stapler’ inside that will hold all the parts AND the base control. I’ve learned to always (?) attach controls to groups. That way you can change the items inside that group without having to adjust all the animation already applied to a rig in a shot.

The base control is just a nurbs circle on the ground. MVP remember. Make it large enough to fit around the model. Centre it at 0, 0, 0 then parent it to the ‘grp_stapler’ group. Test it out by selecting the control and rotating it or moving it about. Everything should work nicely. Zero it out again and save. That’s the first version of your rig! If your rig doesn’t have any moving parts, you’re done!! :)

Rigging the stapler arm and magazine

Moving parts challenge me and this is where I know more can be done (but I don’t know how yet). Ideally I would like a control where I move the stapler arm and it moves, and at the appropriate time it also moves the magazine until it connects with the base and then the arm pushes down on top. That’s the control I want as an animator! But it’s beyond my rigging knowledge atm, so I’m going to make 2 controls: one for the arm and one for the magazine. It means more work when animating than I’d like, but it will be functional.

I only want the arm to move one way, and that’s to rotate open and shut. Nurbs circles are the most common controls I’ve seen for rotations. They need to be centred around the pivot point. I tried adding one in the front view, but then realised the circle would look exactly the same no matter how the arm was rotated. That’s not helpful!

So I moved around 90° and looped the circle around the arm. I had to guestimate the position to be where I thought the arm should pivot from (better planning might help that!). I made a second controller, slightly smaller, and centred it on the same point (using the channel box values).

Time to setup more parent constraints! The process is very similar to the base control, with one important step at the start. These new control curves are not centred in the scene file, but we want the values to be zero for animation. Use ‘freeze transformations’ on the curves. It sets the values to zero without translating the objects.

Those parenting steps again:

  1. freeze transformations on the control curve
  2. create a group for the rig part(s) being manipulated
  3. select the control
  4. shift-select the group
  5. choose ‘parent’ from the constrain menu.

Screenshot of maya outliner and constrain menu

Done! Test out each controller and make sure everything moves how you want. Try zeroing-out the values in the channel box to make sure that behaves as well. If you make any mistakes (I made a few), just delete the constraints in the outliner and try again.

During this testing I noticed the controls let me drag the stapler parts all over the place, or rotate them on the wrong angles. I selected the curve controllers and then locked all the channels except for Rotate Z (which moves in the open/close direction). I’ve seen rigs that completely remove unused channels (like elbow and finger joint rotations) but I don’t know how they do that. (Yet.) Locking helps me when animating from accidentally moving the control the wrong way.

Save it. Your rig is ready to use :)

Here’s the final structure in the outliner:

Somewhere along the way I also added some basic colours for the rig. I went with a dark grey blinn for the plastic on the base and arm, and a light grey phong for the metal magazine.

Enjoy!

You can grab the stapler rig I made today from github. Free to use!

Kudos to Animation Mentor for the Maya Workshop course they offer. I wouldn’t know any modeling or rigging if not for that course. One year later I’m making staplers, woot! ~:)

Helping people make websites

I like making websites and I love helping other people make sites.

I started learning how to make web pages, writing HTML that is, in 1996. The most important tools back then were a browser (Netscape Navigator), text editor (Notepad) and FTP client (hmmm, I can’t remember what client I used). If you saw something cool on a webpage you could just view the source and learn how that developer had made it work. You could ask anyone you met online for their homepage and they had one. It might have had midi background music and blinking text, but it was theirs and it told their story. Social media is cool, but I can’t help feeling we lost some of that personal creativity.

Fast forward to 2015 and the profession has changed… in some ways a lot, and in other ways not so much. The best tools are still a web browser (Firefox, Chrome, IE, Opera, Safari—all the latest browsers have killer developer tools), text editor (Sublime) and some way to publish your content (FTP, git, other…). Only now there are so many other tools to help with design, development and operations… I am not going to list them here, but I am going to highlight some tools I’ve made to help others.

Global alert bar editor (2015)

Global alert bar editor

My most recent creation, a simple authoring tool for creating the global alert bar used on Queensland Government websites in times of a natural disaster. It’s a simple form with live preview and markup. The initial impetus for this was to get the time element markup correct. I named it GABE for short and you can find it over on codepen: http://codepen.io/bboyle/pen/jEXwZr

It doesn’t publish—it just generates the HTML for old fashioned copy and paste.

Queensland Government templates and patterns (2002–2015)

I’ve helped code the CUE (consistent user experience) and SWE (single website experience) templates for Queensland Government since 2002. Rolling out a template across varied government websites and applications (and many different platforms and frameworks) with minimal conflicts and 4-week releases was a really great achievement. Centrally hosted assets (css, js and images) was the key to rolling out quick changes, and a healthy respect for the diverse platforms the template was integrated in. I might personally be a bit opinionated about troubleshooting CSS conflicts with the PrimeFaces UI framework; but professionally if that’s needed then that’s supported.

Maps with data (desktop)

The pattern library is a collection of UI elements that are supported in that template, ranging from simple content patterns (example: including document metadata in a link) to “advanced” content, such as a creating a {single-page mapping application](https://github.com/qld-gov-au/pattern-library/blob/master/source/maps.md) with only a simple CSV data file and some HTML templates.

Always a good challenge: balancing a quality customer experience with an easy authoring process! Two examples I am particularly tickled by are instruction-based form relevance, an approach to progressive disclosure in forms that requires no scripting (by the form author, I did the heavy lifting) and having folks run up angular apps with only CSV data and custom templates (the angular app code is centrally shared).

Form builder (2012)

Form builder prototype

I consider if a “proof-of-concept” but this single-page app has been used to create many of the email forms now live on http://www.qld.gov.au and was instrumental in getting everyone to stop talking about putting “services” online and actually start publishing them! The rush is on now to put more advanced tools in place (bring it on!)

Click anywhere to edit, drag and drop, switch to preview. Builds forms with semantic markup (my particular flavour), including HTML5 validation and progressive disclosure. There are a bunch of poorly documented keyboard shortcuts. I’d love to polish this up one day, it has a lot of potential. (Being usable without training would be a win!)

Get involved survey builder (2011)

Edit consultation dialog (2011)
Add question dialog (2011)

Get involved is the Queensland Government consultation platform. The survey builder is not as easy to use as the form builder (above), in fact it inspired me into thinking “It should easier to make forms!” Still, I helped with the UI design (with some excellent editorial advice from Rory Daly) and it helps people make surveys, consider the language they use, and choose appropriate privacy settings.

Custom quality control tools (2007, 2012)

Diagram of quality control logging tool (2007)

I worked on a couple of browser extensions to automate some of my quality control tasks, staring with custom stylesheets and scripts in Opera in 2007 to help check pages at Department of Communities.

In 2012 we tackled editorial quality by testing for passive voice, non-preferred terms, number formats and more. Computers are great at consistently performing the same checks over and over again, the challenge lies in figuring out how to test for some of these fuzzy concepts, how to present those results in a nice UI, and how to encourage people to use the tool when available. (Okay, behaviour change may be the biggest challenge in that list!)

Content management systems (2002–04, 2012)

Workflow documentation
Workflow email design (2005)

TeamSite pops up every few years in my Queensland Government jobs. I implemented the workflows, templates and deployments for Education Queensland in 2002–04, and helped set up the environment for qld.gov.au in 2012. I’m not a huge fan of CMS products, I like flexibility in my workflow and systems like consistency so that’s an immediate challenge. Still, I am impressed when I see authors getting stuck in and making content! I have mixed opinions about whether or not they should learn HTML along the way :)

Jumbostore (1999)

Jumbostore edit product wizard (1999)

Behind the online shopping mall “Jumbomall” there was “Jumbostore”—a content management environment for stores and products. I did a lot of the work on the UI and database to support this, customer support for merchants, and occasionally drew elephants for promotions.

Mentoring

My biggest contribution is mentoring. I’ve always enjoyed this on the job, but over at Thinkful I’ve found the best outlet for helping new developers on the path to mastery!

Yes, I do believe everyone can “learn to code” or more accurately, everyone can create.

Combine videos side by side in QuickTime Pro

It’s fun to compare where an animation shot began and where it ended up. One way to do this is to create a video that plays the different stages side by side. QuickTime Pro can do this, although the menus are a little hidden.

Here’s one I prepared earlier:

Here is how I made it!

Open all the videos in QuickTime. Each will open in a separate window.

Screenshot of 4 videos open in QuickTime Pro

You will need to copy all the videos into a single file. In this tutorial, I’m going to copy them into the reference video. Let’s start by copying the finished shot. Go to the video you want to copy and select all. You can select all by dragging the handles, using ‘Select All’ in the ‘Edit menu, or with the keyboard shortcut: ‘Ctrl+A‘ (Windows) or ‘⌘+A‘ (Mac).

QuickTime Pro screenshot showing selection handles on time slider

QuickTime Pro screenshot showing Select All command in Edit menu

Got it selected? Now copy it. You know the keyboard shortcuts for copy? ‘Ctrl+C‘ (Windows) or ‘⌘+C‘ (Mac). They work in almost every program. If you like menus, ‘Copy’ is in the ‘Edit’ menu again.

QuickTime Pro screenshot showing Copy command in Edit menu

Go back to your first video (the reference video in this example). Do not use paste (anyone know what Paste does?) There’s a fancy option named ‘Add to Selection and Scale’. That’s the one we want. I’m not 100% sure here, but I suspect you want to make sure that (1) nothing in this movie is selected and (2) the movie you are adding is a similar size and length. Otherwise, you might need to tweak this step to suit.

QuickTime Pro screenshot showing the add to selection and scale command in the Edit menu

The ‘Add to Selection and Scale’ will drop the copied movie right on top of the original one.

QuickTime Pro screenshot showing one video pasted over the top of the original

Wait, that’s not what we want. We’ll need to move it so they are presented side by side. To do that, we need to edit the movie properties (found in the ‘Window’ menu as ‘Show Movie Properties’).

QuickTime Pro screenshot showing movie properties command in window menu

Click the second video to select it and go to the ‘Visual Settings’ tab.

QuickTime Pro screenshot showing the track selection in movie properties

The ‘Offset’ values are how you move the video tracks around in 2D space. In this example, both videos are 720 × 405 pixels in size.

QuickTime Pro screenshot showing the offset properties

Now, in my example I had the original video (reference) offset on right. We’ll actually need to select ‘Video Track 1′ for that. Let’s offset it 720px from the left. That’s how many pixels we need so we can see all of the other video (it’s 720px wide, so we leave a 720px offset for it).

You should see your movie shoot out to twice the size in the background (you may need to press ‘Tab‘ first).

QuickTime Pro screenshot showing editing the offset properties for a second video

Just close the properties box when you’re done. To add the other videos, you need to repeat the ‘Select All’, ‘Copy’ and ‘Add to Selection and Scale’ steps for each video. Open the properties and offset the video tracks.

QuickTime Pro screenshot showing editing the offset properties for a third video

QuickTime Pro screenshot showing editing the offset properties for a fourth video

You can do all the copying first and the offsets last, or offset each video as you add it. You can also scale (for insets), flip, make semi-transparent and more. Who knew so much power was tucked away in QuickTime?

To finish up, export your movie! (You probably don’t want to save over the original file.)

QuickTime Pro screenshot showing Export command in File menu

This tutorial was done with QuickTime Pro 7.7.6 on Windows. The ‘Pro’ version is a paid unlock for the free QuickTime player.

Can Arc Touch Bluetooth Mouse…?

I’ve been meaning to blog more about my experience with the Surface Pro 3. I posted how the first one I got was a dud after it died the first night. The second one has been rock solid and a joy to work on. But this is not that post. This post is about the Arc Touch Bluetooth Mouse.

Arc Touch Bluetooth Mouse shown on (curved) and off (pressed flat)
Arc Touch Bluetooth Mouse shown on (curved) and off (pressed flat)

It’s a very cool mouse, especially for portability. It’s light, it’s flat (when not in use), and it’s comfy to use. No usb needed. The touch bit instead of a scroll wheel is perhaps a bit odd. I’m not sure how I feel about that yet, but it is definitely far superior to the trackpad on the typecover, and more precise than the touch screen (especially for apps that have tiny UI elements, those not built for the high DPI screen). Overall, great mouse and highly recommended!

It comes with a nifty windows 8 app to configure it. The app is also called ‘Arc Touch Bluetooth Mouse’ and the first time you use it, you will be pairing your new mouse to it and that’s when this dialog appears:

Screenshot of UI dialog
Can Arc Touch Bluetooth Mouse use your Arc Touch Bluetooth Mouse?

Can Arc Touch Bluetooth Mouse use Arc Touch Bluetooth Mouse?

Sounds like a trick question doesn’t it.

Is it me, or is it just as weird for an app to refer to itself in the third person as it is for real people to do so? Even weirder when the app shares the name of the subject of the sentence. Holy confusion Batman.

I’d ask an editor to bring some sanity to the sentence. You can too—excellent editing services available right now at East Edit, check ’em out :)

Slidedown transition with scaleY

Here’s another “non-height” approach to slide down transitions: use scaleY (I haven’t checked this for browser support yet, I think IE9 at least will need a prefix for transform-origin).

Neat, I kinda like this one too. The overshoot on the slide down (where it goes a bit further and bounces back) is a touch of exaggeration, easily achieved with cubic-bezier timing. That sounds confusing! But it isn’t all that hard! Use Lea Verou’s amazing preview tool. Here’s the curve I came up with: http://cubic-bezier.com/#.2,.38,.72,1.3

So this approach is still different to animating the height. The jquery slidedown adjusts the box height, revealing more content. The scaleY property squeezes the content which may look weird. Again, a little fade in while sliding may help. Also, scale is more attuned to squash and stretch so, you know, that’s something to play with!