// JavaScript Document

var thumbsrc = "images/thumbnails/";

var typelist = ["interactive","motion","print"];
var typenames = ['Interactive & Web','Motion & Animation','Illustration, Print & 3D Stills'];

var populatelist = ['hailfoetoid', 'memauto','st3','polinom','exploder','ideolabprint',
'ideolab','semiperm','campads','careerdev','frank3d','parkour',
'fkinugly','fan','wavylinegen','rohans','robolady'];


var interactivelist = ['hailfoetoid','fkinugly','semiperm','st3','wavylinegen','ideolab','polinom','campads','exploder'];
var motionlist = ['careerdev','fan','memauto'];
var printlist = ['robolady','ideolabprint','frank3d','parkour','rohans'];

var hailfoetoid_type = "interactive";
var hailfoetoid_thumbnail = "hailfoetoid.jpg";
var hailfoetoid_target = " target = _blank";
var hailfoetoid_title = "Hail Foetoid";
var hailfoetoid_year = "2008";
var hailfoetoid_link = 'interactive/hail_foetoid/';
var hailfoetoid_description = "Hail Foetoid was submitted as my final project for RMIT's BA(Animation and Interactive Media) \
undergraduate program, where it was awarded Best Interactive for 2008.<br/><br/>\
It has foetuses.<br/>\
<br/>Built in Flash using Actionscript 3, making use of the Papervision 3d engine. Imported meshes and textures were made using Maya, Zbrush and Photoshop.<br/> \
<br/>Broadband and speedy cpus recommended\
<br/>The interactive involves sound\
<br/><br/><a href='" + hailfoetoid_link + "hail_foetoid.html' title='" + hailfoetoid_title + "' " + hailfoetoid_target + "><span class='ornament'>__________</span>launch</a> (new window).\
<br/><br/>Preparing the 3d models which went into Hail Foetoid involved creating an ~100 poly base mesh, sculpting it at moderate detail in ZBrush (~500k polys),\
and transfering that detail via texture information to the low poly mesh. The result is exported in collada format through maya.\
<br/><br/><a href='" + hailfoetoid_link + "images/hailProcess_torso2.jpg' title='hail foetoid models - torso example' rel='lightbox[hail]'><span class='ornament'>__________</span>torso example</a>\
<br/><a href='" + hailfoetoid_link + "images/hailProcess_legs6.jpg' title='hail foetoid models - legs example' rel='lightbox[hail]'><span class='ornament'>__________</span>legs example</a>";

var memauto_type = "motion";
var memauto_thumbnail = "memauto.jpg";
var memauto_target = " target = _blank";
var memauto_title = "Memory Automaton";
var memauto_year = "2008";
var memauto_link = "http://www.vimeo.com/3092875";
var memauto_description = "Oh the silly name<br/>\
<br/> A response to a brief which called for a visual effects piece engaging the idea of combining opposing worlds. \
The foetus represents mediation between the temporal world of memory and the instantaneous present. Robert Jordan plays the meatsack in the middle. Or human.<br/><br/>\
HD green screen footage was keyed in Shake and motion tracked using Boujou. Foetus was modeled and textured in Maya, Zbrush and Photoshop,\
  and rendered using Mental Ray. Composited in After Effects.<br/>\
<br/><br/><a href='" + memauto_link + "' title='" + memauto_title + "' " + memauto_target + "><span class='ornament'>__________</span>view</a>  on vimeo\
<br/><br/>For a bit of background and more detail into production methods, the write up accompanying the piece can be found <a href='motion/memauto/KanwaljeetSingh_VFXWriteUp.doc'>here.</a> [doc, 71kb]";

/* <br/><br/><a href='" + memauto_link + "' title='" + memauto_title + "' " + memauto_target + "><span class='ornament'>__________</span>view</a>  on vimeo\
<br/><br/>The following images illustrate some of the process that went into the production of this animation.\
<br/><br/><a href='motion/memauto/foetusprocess.jpg' title= 'Foetus Production: ZBrush Sculpt, Maya Setup, render' rel='lightbox[memauto]'><span class='ornament'>__________</span>Foetus Production</a>\
<br/><a href='motion/memauto/footageprocess.jpg' title= 'Footage Processing: Raw, keyed, composited frame' rel='lightbox[memauto]'><span class='ornament'>__________</span>Footage Processing</a> ";*/
 
var polinom_type = "interactive";
var polinom_thumbnail = "polinom.jpg";
var polinom_target = " target = _blank";
var polinom_title = "Polinom";
var polinom_year = "2007";
var polinom_link = "interactive/polinom/index.html";
var polinom_description = "Website for a fake band named Polinom, built as an exercise in HTML and CSS  design. Flash was used as a non-vital, ornamental element.\
<br/><br/>Made using text editors, with Dreamweaver to generate the Java + CSS collapsable menus.<br/>\
<br/><br/><a href='" + polinom_link + "' title='" + polinom_title + "' " + polinom_target + "><span class='ornament'>__________</span>View</a> (new window).";

var ideolab_type = "interactive";
var ideolab_thumbnail = "ideolab.jpg";
var ideolab_target = " target = _blank";
var ideolab_title = "Ideolab - website";
var ideolab_year = "2006";
var ideolab_link = "interactive/ideolab/ideolab.html";
var ideolab_description = "Full Flash website for a fictional exhibition space called Ideolab. Made in Flash MX using ActionScript 2.<br/><br/>\
Allows a user to reconfigure the layout of elements in the site, supporting the idea of Ideolab  as a user and exhibitor centered space.<br/><br/>\
Along with this website, a set of stationery was created which can be found  <a href='javascript: scrollTo(" + '"ideolabprint"' + ")'>here</a>.<br/>\
 <br/><br/><a href='" + ideolab_link + "' title='" + ideolab_title + "' " + ideolab_target + "><span class='ornament'>__________</span>View</a> (new window).";
 
var ideolabprint_type = "print";
var ideolabprint_thumbnail = "ideolabprint.jpg";
var ideolabprint_target = " rel = 'lightbox' ";
var ideolabprint_title = "Ideolab - stationery";
var ideolabprint_year = "2006";
var ideolabprint_link = "print/ideolab/ideolab.html";
var ideolabprint_description = "Stationery to accompany <a href='javascript: scrollTo(" + '"ideolab"' + ")'>this website</a>.\
<br/><br/><a href='print/ideolab/brochure.jpg' rel='lightbox[ideolab]' title='ideolab brochure'><span class='ornament'>__________</span>View brochure</a>. \
<br/><a href='print/ideolab/letterhead.jpg' rel='lightbox[ideolab]' title='ideolab letterhead'><span class='ornament'>__________</span>View letterhead</a>. \
<br/><a href='print/ideolab/postcard.jpg' rel='lightbox[ideolab]' title='ideolab postcard'><span class='ornament'>__________</span>View postcard</a>.";
 
var robolady_type = "print";
var robolady_thumbnail = "robolady.jpg";
var robolady_target = " rel = 'lightbox' ";
var robolady_title = "Dead SS - Band art";
var robolady_year = "2009";
var robolady_link = "print/robolady/robolady.jpg";
var robolady_description = "Commisioned poster art for Dead SS.<br/>\
<br/>Wanton imagery in the age old tradition of women on band posters, mixed in with some psychedelics and gore.<br/><br/>\
Made in Photoshop, to print at A1 size. Hand drawn with a Wacom.\
 <br/><br/><a href='" + robolady_link + "' title='" + robolady_title + "' " + robolady_target + "><span class='ornament'>__________</span>View</a>.";

var careerdev_type = "motion";
var careerdev_thumbnail = "careerdev.jpg";
var careerdev_target = " target = _blank";
var careerdev_title = "Career Development - RMIT Info Corner";
var careerdev_year = "2008";
var careerdev_link = "http://www.vimeo.com/3093368";
var careerdev_description = "Animation for RMIT Melbourne's info corner, illustrating its career development services \
<br/><br/>A quick little story of an RMIT career guidance counsellor making the world a more friendly place for a new graduate.<br/><br/>\
Featuring the Blob of Hate ... I mean ... Society.<br/>\
 <br/><br/><a href='" + careerdev_link + "' title='" + careerdev_title + "' " + careerdev_target + "><span class='ornament'>__________</span>View</a> on vimeo.";
 
var fan_type = "motion";
var fan_thumbnail = "fan.jpg";
var fan_target = " target = _blank";
var fan_title = "Fan - 3D Animation";
var fan_year = "2007";
var fan_link = "http://www.vimeo.com/3984262";
var fan_description = "As in table fan. The air moving variety. <br/><br/> \
A simple 3d animation looking to breathe life into an inanimate object, without using anthropomorphism. Kind of inspired by C Cunningham, in particular his work with Aphex Twin on Flex.<br/><br/> \
Modeled, lit, animated, rendered using Maya and Mental Ray, render passes composited / camera effects added in AfterEffects<br/>\
 <br/><br/><a href='" + fan_link + "' target=_blank><span class='ornament'>__________</span>View</a> on vimeo. \
 <br/><br/>Here are some stills outlining the model and final composite: \
 <br/><br/><a href='motion/fan/modelsheet.jpg'  rel='lightbox[fan]' title='fan - model preview sheet (occlusion renders)'><span class='ornament'>__________</span>Model preview</a> \
 <br/><a href='motion/fan/image1.jpg'  rel='lightbox[fan]' title='fan - composite layers'><span class='ornament'>__________</span>Composite process 1</a> \
 <br/><a href='motion/fan/image2.jpg'  rel='lightbox[fan]' title='fan - composite layers'><span class='ornament'>__________</span>Composite process 2</a> ";
  
var fkinugly_type = "interactive";
var fkinugly_thumbnail = "multicam.jpg";
var fkinugly_target = " target = _blank";
var fkinugly_title = "F*ckin Ugly Clip Player";
var fkinugly_year = "2007";
var fkinugly_link = "http://www.vimeo.com/3093056";
var fkinugly_description = "A group of us captured some footage using ten cameras, giving us sequences captured from 10 spatial coordinates. \
I made this in Flash (AS3) to play the sequences back with fluid access to all angles. <br/><br/> \
Local connect was used to communicate between two Flash movies - one with controls and the other with footage - \
allowing images to be output on a projector, which made the system useable for live visual performance.<br/><br/> \
Credits to <a href='http://www.michaelglen.net' target=_blank>Michael Glen</a> and \
<a href='http://www.catfullofghosts.com' target=_blank>Robert Jordan</a> for footage. <br/> \
Devika Bilimoria performs the mighty dancing, flimed at <a href='http://the-pigeon-hole.blogspot.com' target=_blank>the Pigeon Hole</a>.<br/><br/> \
<br/><br/>To view video capture of the player in use, go <a href='" + fkinugly_link + "' title='" + fkinugly_title + "' " + fkinugly_target + "> <span class='ornament'>____</span>here</a> (vimeo).<br/> \
<br/>To download a local version, right click <a href='interactive/FinUglyPlayer_KanwaljeetSinghDotCom.zip' target=_blank><span class='ornament'>____</span>here</a> and save link [zip, 30mb].";
  
var frank3d_type = "print";
var frank3d_thumbnail = "frank3d.jpg";
var frank3d_target = " rel = 'lightbox[frank3d]' ";
var frank3d_title = "Frank - 3d Character Sketch";
var frank3d_year = "2008";
var frank3d_link = "print/frank3d/";
var frank3d_description = "A 3d head study based on one of the characters from <a href='javascript: scrollTo(" + '"hailfoetoid"' + ")'>'hail feotoid'</a>.<br/><br/>\
Modeled and textured in Zbrush, and rendered using Mental Ray through Maya. Colour and levels adjustments made in Photoshop.<br/>\
 <br/><br/><a href='" + frank3d_link + "frank3d.jpg' title='" + frank3d_title + " : Mental Ray' " + frank3d_target + "><span class='ornament'>__________</span>Mental Ray Render</a>\
<br/><a href='" + frank3d_link + "frank3dzb.jpg' title='" + frank3d_title + " : ZBrush Capture' " + frank3d_target + "><span class='ornament'>__________</span>ZBrush Capture</a>\
<br/><a href='" + frank3d_link + "frank3dmaya.jpg' title='" + frank3d_title + " : Maya Setup' " + frank3d_target + "><span class='ornament'>__________</span>Maya Setup</a>";
 
var parkour_type = "print";
var parkour_thumbnail = "parkour.jpg";
var parkour_target = " rel = 'lightbox' ";
var parkour_title = "Parkour Brochure";
var parkour_year = "2006";
var parkour_link = "print/parkour/parkour.jpg";
var parkour_description = "Brochure highlighting the art of Parkour (or free-running).<br/><br/>Solid lines were used over urban landscapes to illustrate the function of the practice in its environment,\
 as opposed to the showy theatrics of somersaults and backflips.\
 <br/><br/><a href='" + parkour_link + "' title='" + parkour_title + "' " + parkour_target + "><span class='ornament'>__________</span>View</a>.";
 
var rohans_type = "print";
var rohans_thumbnail = "rohans.jpg";
var rohans_target = " rel = 'lightbox' ";
var rohans_title = "Invite Poster";
var rohans_year = "2007";
var rohans_link = "print/rohans/rohans.jpg";
var rohans_description = "Poster / flyer illustration for a birthday shindig.<br/><br/>Digitally drawn in Photoshop for print up to A2 size. Found myself playing with text as a \
background, filling in and being negative space, at the same time retaining its utility.  Featuring the face of Rohan. \
<br/><br/><a href='" + rohans_link + "' title='" + rohans_title + "' " + rohans_target + "><span class='ornament'>__________</span>View</a>.";
 
var exploder_type = "interactive";
var exploder_thumbnail = "imageexplode.jpg";
var exploder_target = " target = _blank";
var exploder_title = "Image Exploder - Flash sketch";
var exploder_year = "2005";
var exploder_link = "interactive/espload/espload.html";
var exploder_description = "A small sketch in Flash using Actionscript 2. <br/>\
<br/>Images are loaded in and sampled. Pixels are drawn on layers based on colour threshold values.<br/>\
<br/>It takes a little while for the images to appear due to processing layers.<br/>\
 <br/><br/><a href='" + exploder_link + "' title='" + exploder_title + "' " + exploder_target + "><span class='ornament'>__________</span>View</a> (new window).";
 
var campads_type = "interactive";
var campads_thumbnail = "campads.jpg";
var campads_target = " target = _blank";
var campads_title = "Camera Pad Trigger - Flash sketch";
var campads_year = "2005";
var campads_link = "interactive/campads/campads.html";
var campads_description = "Built using Actionscript 2. <br/>\
<br/>A camera feed is sampled and an object grid generated for pixels within a brightness threshold. These objects trigger on screen pads with audio samples attached.\
 Sort of like a camera drum trigger.<br/>\
<br/>Before clicking the 'audio pads' button it's best to get a clear object region by adjusting the threshold and using an object (say, a pen) that is distinct \
from the background. This avoids unruly objects triggering the pads willy nilly, which would cause a sonic mess and potential aggravation.<br/>\
<br/><br/>Camera required.<br/>\
 <br/><br/><a href='" + campads_link + "' title='" + campads_title + "' " + campads_target + "><span class='ornament'>__________</span>View</a> (new window).";
 
var wavylinegen_type = "interactive";
var wavylinegen_thumbnail = "bloblines.jpg";
var wavylinegen_target = " target = _blank";
var wavylinegen_title = "Wavy Line Generator - Flash sketch";
var wavylinegen_year = "2008";
var wavylinegen_link = "interactive/blobline/blobline.html";
var wavylinegen_description = "Built using Actionscript 3. <br/>\
<br/>Generates accumulative line deformations.  Clicking with the mouse spawns line deformers, hitting the space bar leaves a line trace which is drawn to a bitmap object. More options are \
 outlined on the Flash clip.\
<br/>\
 <br/><br/><a href='" + wavylinegen_link + "' title='" + wavylinegen_title + "' " + wavylinegen_target + "><span class='ornament'>__________</span>View</a> (new window).";
 
var st3_type = "interactive";
var st3_thumbnail = "st3.jpg";
var st3_target = " target = _blank";
var st3_title = "S-T3 Website";
var st3_year = "2008";
var st3_link = "http://www.s-t3.com/index.html";
var st3_description = "Website for Singapore based company S-T3. <br/> \
<br/>S-T3 has interests in many fields. Their site required a clean, user friendly design, combining a light technological bent with a look open enough to \
 represent their range of services. <br/><br/> \
 Built using HTML, CSS, Javascript, and Flash.<br/> \
 <br/><br/><a href='" + st3_link + "' title='" + st3_title + "' " + st3_target + "><span class='ornament'>__________</span>View</a> (new window).";
 
var semiperm_type = "interactive";
var semiperm_thumbnail = "semiperm.jpg";
var semiperm_target =  " target = _blank";
var semiperm_title = "Semi Permeable - Medialounge Installation";
var semiperm_year = "2009";
var semiperm_link = "interactive/semiperm/semiperm.html";
var semiperm_description = "Temporary installation exhibited at the April 2009 edition of <a href='http://www.medialoungenyc.org' target=_blank>Medialounge NYC</a>, a New York based \
digital media and performance festival.<br/> \
<br/>A collaborative piece with esteemed colleague <a href='http://www.michaelglen.net' target=_blank>Michael Glen</a>. My involvement was the creation of  \
a camera-feed reactive membrane and  particle system. Michael created pre-rendered 3d footage  \
which was composited behind the mebrane visuals using a video mixer.<br/><br/> \
Built with Actionscript3, using <a href='http://blog.soulwire.co.uk/flash/actionscript-3/webcam-motion-detection-tracking/' target=_blank>motion detection libraries</a> \
by the amazing <a href='http://www.soulwire.co.uk/' target=_blank>Justin Windle aka Soulwire</a>.<br/> <br/><br/>\
A membrane / particle only version of the interactive is available \
<a href='" + semiperm_link + "' title='" + semiperm_title + "' " + semiperm_target + "><span class='ornament'>__________</span>Here</a> (new window). Webcam required.<br/><br/>\
Here are a couple of photos of the event<br/><br/> \
<a href='interactive/semiperm/medialounge1.jpg' rel='lightbox[semiperm]' title='semi permeable  - the setup'><span class='ornament'>__________</span>The Setup</a><br/></br>\
<a href='interactive/semiperm/medialounge2.jpg' rel='lightbox[semiperm]' title='semi permeable  - people playing'><span class='ornament'>__________</span>People Playing</a>\
<br/><br/>And a link to a video montage of the event, with the piece making an appearance between 1:00 and 1:10. (I am credited as Manwaljeet Singh. I feel more masculine than ever.)\
<br/><br/><a href='http://www.youtube.com/watch?v=aNzSOZjQ1rs&feature=channel_page' target=_blank><span class='ornament'>__________</span>View</a> (on Youtube)";