jquery pullout slide animation

This is my first lesson in jquery.

Basically what I want is a slider which is mostly hidden on the left, and when you hover over it pulls out to reveal all.

After going on W3CSchools for 30 mins I botch'd up this code:

$(document).ready(function(){$("#square").hover(function(){ $("#square").animate({ left: '+=100px' }); }, function(){ $("#square").animate({ left: '-=100px' }); }); });

The B Team

If you have a small problem, if not many people can help, and if you can find them, maybe you can hire the B-Team.


Basically a "not so good" A-Team. Music hummed by stupid people. Classic.

Animation thumbnails as Animated GIFs

I have an idea to thumbnail all my animations for my website. The problem is: In what format should they be?

Well, the only universally acceptable format is of course "Animated GIF". Supported on ALL browsers, across ALL devices! With JAVA being another more complex alternative.

Anyway, to start testing it I was using my "Letters in a Box" animation.

So, I started by opening it in "Quicktime Pro" and exporting as an image sequence, but the images had bad facets (MPEG encodings) issues. It looks like quicktime looks at individual frames but the movie was compressed in DIVX which probably requires DIVX pro to re-convert into nice looking images again. Doh!

So my next idea was to take it into Final Cut Pro, which did a fantastic job at converting to an image sequence! Even though it should be the same as Quicktime Pro (in a way).

So now I open the image sequence into Photoshop, and file > export for web and devices. Click on any of the GIF options. The file sizes were VERY big though. But I am quite adamant that I want the entire animation thumb-nailed as it's one of the principals of the website.

So I made it 100px width and tried all the different GIF variants. I also played with the frame rate. Here's some examples:

1 fps, 128b dithered, 104K

12 fps, 32b dithered, 548K

12 fps, 32b dithered, 100% lossy, 84K

5fps, 32b not dithered, 156K

Oh, and in Photoshop I forgot to loop it. It's in Export for Web and Devices > loop option bottom right.

I shall conclude this another day

Just found this Red Design website which has pretty much the same idea, well executed. I had a look at image sizes and all came in at around 1kb. I think this would be due to the amount of frames, which is about 10 - 15 frames long, whilst these are around 100 - 200 frames long.

Flash animation workshop

So I have volunteered to do an animation workshop in Flash on the 14th of June, so students can animate some still work to add to their portfolio of work and help them pass the grade.

To freshen up my knowledge, I shall undertake a personal project which will incorporate most animation techniques they will use in Flash. The best way is to undertake a project which will interest me, add to my portfolio.

Ideas:

• Animated storyboard for an animation i.e:
• Trees everywhere
• Chesterfield college burning down/exploding
• Towerblocks covered in plants
• Totally new animation?
• Johns website
• My portfolio website

The trouble with the first three ideas is that they require time to storyboard. I could schedule this into the project though.

The trouble with Johns website is that he has not decided to go with the flash one and also it does not have adequate animation in it.

The trouble with "My portfolio website" is that it requires interactivity which I will not be focussing on in the lessons and which require a large amount of time to learn.

I am tempted to go with one of my original animations and schedule in the story-boarding to the project. These animations need it anyway. The students might also need to make storyboards, definitely a synopsis. perfect.

The schedule:

• Finish synopsis to perfection - 1 day
• storyboard including rough timing and explanations - 1 days
• breakdown of what needs to be made and how - 1 day
• making the separate models - 3 days
• Put together and animate - 3 days
• add music and titles - 1 day
• finish - 1 day

All this in 11 days. I plan to finish early to allow for unforeseen things or bad planning!! That should leave 6 days of relaxation :-) But I could always refine it.

Xgrid and Blender part 3

Well, hopefully the final installment of the Xgrid and Blender saga. So, now I started using gridstuffer, a very useful app. By setting up a text file, and giving it some lines of code you want to submit to the xgrid, it'll render the files to where you specify in the blender file. Unfortunately Blender can only really render to the tmp folder because for some reason it has trouble with permissions in ALL other folders (doh!).

So I finally tried a couple of other commands in blenders command line (which I put in the text file) to see if I could get that to tell blender where to render to. Success! It actually renders to the "Output" folder which you specify in gridstuffer (or generally in Xgrid!).

So the final command looks like this:



/Applications/Blender/blender.app/Contents/MacOS/blender -b KitchenTopFreeTree2.blend -o //kitchen -F TGA -x 1 -f 1
/Applications/Blender/blender.app/Contents/MacOS/blender -b KitchenTopFreeTree2.blend -o //kitchen -F TGA -x 1 -f 2
/Applications/Blender/blender.app/Contents/MacOS/blender -b KitchenTopFreeTree2.blend -o //kitchen -F TGA -x 1 -f 3

the -o specifies the folder and file to save. The -F is the file type, -x specifies whether to add numbers to the end. The -f specifies the frame number!

So the blender file is in the input directory, and the // defines it is in the root of the output directory.

Looking at how the whole thing works, I think the machine you submit it all from is the machine which distributes and collects all the files needed. The server just works out which machines to send it to. I don't think that the files have to be on a share? I shall test this theory out.

So the only pre-requsits are that the machines are on the xgrid network, and they have blender installed in the right directory with the right name (case-sensitive)

References:

http://wiki.blender.org/index.php/Doc:Manual/Render/Command_Line_Options

X-Grid and Blender part 2

So, after looking at the said articles I found that they are actually slightly out of date (2004!) and OS X 10.5 no longer supports the GUI for submitting jobs in that particular way. And plus, to my dismay, I cannot find it to download ANYWHERE! I tried many many things alas and I've ended up spending about 3 days slowly getting there, and I have got somewhere. I think I'll go through all the troubleshooting I went through, so I can say what I have and have not tried.

So to start with I had my xgrid all setup (previous post), running xgrid admin from my machine. For a test setup I thought I'd try and just get one machine to render an animation, and then get two and so on. So I started with my machine (although I should have started with a third machine). So I made a blender file "box.blend" and tried some command line rendering. Finally I got this command to render the animation:

/Applications/Blender/blender.app/Contents/MacOS/blender -b /Volumes/Shared/xgridprojects/in/box.blend -a

note: I saved it on a network share on the xserve mounted in /Volumes/Shared so that other machines in the future could access this file.

note 2: this is case sensitive so watch out for Blender or blender in the applications folder. I think I renamed it 'Blender' and it prefers to be 'blender' (this held me up for 15 mins!)

the -b renders in the background (put before the file) and the -a renders the animation you have setup in the blend file (default to /tmp/). The /tmp/ directory turned out maybe to be the best directory to render to as blender, when run by this xgrid user (no-one) can't seem to write to any other folders.

The -a attribute renders as many frames as are in the animation. At first this seemed the best but when using with xgrid, the alternative option is -f [frame number] which renders a specific frame. Also, -a can be used with -s [start frame] and -e [end frame] but I think these need to be plaeed carefully either before or after the '-a' attribute.

So, now I knew the commands which xgrid needed to send to each machine I could begin. A big 'downer' was the fact I didn't have the GUI in the tutorial so it was command line stuff. The first thing was to know how to send a job:

xgrid -job submit [-gid grid-identifier] [-si stdin] [-in indir]
           [-dids jobid [, jobid]*] [-email email-address]
           [-art art-path -artid art-identifier] [-artequal art-value]
           [-artmin art-value] [-artmax art-value] cmd [arg1 [...]]

so;

xgrid -job submit -gid xserve.chesterfield.ac.uk /Applications/Blender/blender.app/Contents/MacOS/blender -b /Volumes/Shared/xgridprojects/in/box.blend -a

I think this might have worked, but I saw that actually you can have input directories and output directories! So this is where the network mount might have come in:

xgrid -job submit -gid xserve.chesterfield.ac.uk -in /Volumes/Shared/xgridprojects/in/ -out /Volumes/Shared/xgridprojects/out/ /Applications/Blender/blender.app/Contents/MacOS/blender -b box.blend -a

notice how I didn't have to specify where my box.blend file was, as it automatically looked in the "in" folder. Now this folder was mounted on the computer I was rendering on through xgrid, but I now think that xgrid manages these files all by itself, so I don't think that it has to be mounted (I shall try tomorrow). I think the main point is that it is on the machine which submitted the job!

Now that this worked I tried it on two machines! Alas, it only used one machine to render the entire animation! This was because I didn't specify the variable or 'range' (which was in the tutorial) which changes. The only solution I found was to specify lots of jobs, each rendering a specific part of the animaton. Luckily I found an application for submitting 'Batch' jobs  which is called 'GridStuffer'. You can give it a text file with the cmd for the specific jobs, a different line for each job you want, and it will send it to the xgrid as lots of different jobs. Not only that but if a job fails, it'll keep sending it until it is complete (fully optional though).

So with this handy tool I made a text file like this:

/Applications/Blender/blender.app/Contents/MacOS/blender -b /Volumes/Shared/xgridprojects/in/box.blend -f 1
/Applications/Blender/blender.app/Contents/MacOS/blender -b /Volumes/Shared/xgridprojects/in/box.blend -f 2
/Applications/Blender/blender.app/Contents/MacOS/blender -b /Volumes/Shared/xgridprojects/in/box.blend -f 3
/Applications/Blender/blender.app/Contents/MacOS/blender -b /Volumes/Shared/xgridprojects/in/box.blend -f 4
etc....

and it will send them all to the xgrid under different jobs, and keep sending them until they are done. That way the xgrid application will send each job to a different machine and utilise all the processers it needs, YAY!

I think you don't even need the blend file on the server, I think it sends it from that machine (but this theory needs testing). I think what you do need is the blender application on each machine although I seem to remember it saying you didn't!! But anyway, not the hardest thing to do.

One of the main stumbling points at the moment is trying to get all the rendered files from all of the machines '/tmp/' folders. A script could be written and sent out over ARD, but I would prefer it if I could get xgrid to move them, or blender to save to a networked space, which would mean mounting on each machine before jobs are sent out. Preferably all the machines would automount a volume on bootup which could be useful for a lot of other things. Apparenly this might be done by NFS shares but needs looking into.

Well, till another day. Hope this helps sometime again and it wasn't all in vain.

Xgrid Startup troubles

Well, after a very long time of X-Grid being untested, I decided to open it up and see if I could utilise it for Blender (see other post), but alas, on startup of Xgrid on the server it crashes! Doh!

So, after a little looking through the logs I knew I wouldn't find anything so I googled it and after a few pages the answer was found:

http://lists.apple.com/archives/xgrid-users/2007/Sep/msg00012.html

So, basically do this in terminal on the server (or ssh)

sudo xgridctl c stop sudo xgridctl c off sudo rm /var/xgrid/controller/datastore.db sudo rm /var/xgrid/controller/status sudo xgridctl c start sudo xgridctl c on

He's added more, but this fixed it. I'll put the rest on though just incase it helps:

optionally, you could do:
sudo rm /var/xgrid/controller/blobs/*

(this can take a while if your database is old and has grown a lot of crap; another option is thus to rename the blobs to blobs-old and create a new one with the same permissions; then while the controller restarts happily, delete blobs-old).

Carefully check the permissions and ownership before messing up with / var/xgrid/controller.
The owner of most of the files is xgridcontroller (the name can be clipped of in a simple ls -al).


Just need to work out how to send a job to it (which is surely quite important!)

Camera Tracking with Voodoo and Blender

Well, it's a little bit of a minefield camera tracking using free software as you'd expect. Heres what I've been able to find out in a few hours:

To start with you will need a video file which you want to camera track. I used a simple camera and recorded video on it.

Next you need to convert this to an image sequence (not the most straight forward things to do suprisingly). After 20 mins of looking I found VirtualDub does this and many more video conversions (worth looking at). Also, you can get blender to do it for you by putting a camera with the video in the background and rendering out the sequence (handy).

Now you can get round to using Voodoo. Open the sequence and click on ¨Track¨ down in the bottom right (took me a while to find this the first time! Should be a menu item for it). This takes a while but eventually you'll have a nice bunch of points.

You need to export this as a python script for Blender.

To get this into Blender, you need to open up the text editor, open the .py script that was saved, then click File> Run Python Script (easy!!)

Now you have the camera animated and 3D points corrisponding to points in the real world.

I managed to find the Blender side of things from this web address: http://fictionality.co.uk/doku.php?id=tutorials:matchmoving

I might add to this when I find out more. But I'm still in the testing stages.