“Harriet” is the name of a project I did for the Christmas Experiments 2014.
if you don’t have WebGL, you can still watch this video:
if you do have WebGL, you can try it out here.
there’s a github repo here : Harriet’s Github Repo. ( some ugly things there… )
the initial idea was to create a generative toy ; a gift for christmas if you will.
I thought of using Oimo.js, pile up a set of boxes and balls, then assemble them to represent a plane, a puppet or any old school looking toy. I tried using physics last year & didn’t want to spend too much time getting things to work. instead I wanted to focus on making a good-looking generative object & realized that mechanic objects were (much) easier to model procedurally.
I sketched some early plane designs which soon reminded me of Those Magnificent Men in Their Flying Machines.
honestly – what could go wrong with gentlemen like these:
( images from IMDB )
the ONLY word that comes to mind is PANACHE!
I always loved the early aircraft designs, from Da Vinci’s “ornithopter” to the first actual airplanes. for instance this plane is featured in the movie
I find it beautiful.
by the way, these guys are surely amongst the most daring persons I’ve ever seen:
they believed it would work, the designs are just extraordinary & quite fit for a generative exercise. the algorithm could go as follows:
- step 1 do whatever you want
- step 2 Fly it
I used my commute time (roughly an hour a day) to sketch very simple plane modules and think of how they could work together.
here’s an early 2D proof of concept
iterating it to 3D was quite straight forward
for the wings, I had something like that in mind
at that time, I wanted to call the XP “the Santa Hunt” or something manly, like having The Magnificent men try & catch Santa Claus.
then I stumbled upon this https://twitter.com/GreatestCapital/status/535936257600528385
often women are being forgotten in the history of sciences (if not simply evicted). so I searched for some early Woman Aviator and found Harriet.
Harriet Quimby, the first woman pilot of the U.S. also a journalist, a novelist & a model for a brand of grape soda. born in Arcadia, Michigan ( Arcas, king of Arcadia gave his name to the Ursa Minor constellation ), she was the first woman to cross the english channel, she died during a race and her remains were moved to the Kensico cemetery in Valhalla (the warriors’ heaven in the norse Mythology), NYC.
this is a tribute to her & all the aviator women all over the world.
then I started porting my old 3d Flash tools ( path, extrusion, lathe, loft etc. ) not because THREE doesn’t have them out of the box but because I knew what the output would be.
after 2 days reworking the tools, I got this rather satisfying result.
all the shiny materials come from an article by Jaume Sachez Elias ( @thespite ) which describes a technique to emulate smooth environment reflections. it works very well & I used it almost everywhere.
I tweaked the shader to add grain when the normal is not facing the camera.
so I had a generative plane & all I needed was a world to explore, I browsed the sketchup user contributed gallery and cherry picked some famous buildings/landmarks:
statue of liberty
sydney opera house
those are (rather) light weight architectural models, I took some time to clean & scale them up, collected their Longitudes latitudes & off I went.
after a couple of funny mistakes of course :)
(tried the water shader & abandoned due to a severe lack of time… looked good though…)
this is what the earth ended up looking like (pink thread is the Spline connecting all landmarks, the white block is a path following thing ).
by the way, if you need a camera to follow a path on sphere with the camera’s normal pointing outwards, this might come in handy:
function locateObject( curve, t, object, earth_radius )
var cp = curve.getPointAt( t );
var np = curve.getPointAt( ( t +.01 ) % 1 );
var nrm = cp.clone().normalize();
var dir = np.clone().normalize().sub( nrm ).normalize();
object.position.copy( cp.multiplyScalar( earth_radius || 1 ) );
object.matrix.lookAt( cp, dir.add( cp ), nrm );
object.rotation.setFromRotationMatrix( object.matrix, object.rotation.order );
//then you can add some extra rotation
//object.rotateX( RAD );
this way the camera can travel the world and keep the ground at the bottom of the screen ^^
for the environment, I wanted a “creamy iridescent sunrise” ; something that happens early in the morning when you go skiing. I found some sunrise picture, blurred it to death and extracted some of its colors. then I created a grid mesh in illustrator so that it wraps nicely when converted to a cubic environment.
I handled the “2 by 1 pic to 6 cubic tiles” step with 3DS MAX as shown below (the easiest way to create a cube map imho)
then I re assembled the 6 cube maps in Photoshop.
the font is called Rivanna, I found it on Dafont as well as some decorative elements that I rasterized in Illustrator. they have this Art Nouveau touch, that fits the times when Harriet lived.
the soundtrack comes from Freesound, I was after something 1900’s, brittle & outdated.
finally, for the intro I also wanted something like this:
if you don’t know what “kitsch” means, now is the time to check.
there are very interesting reflections in there though, I wanted to give a ghostly look & feel to the portrait which – if I’m still not completely convinced – kind of works.
when you face the medallion, you see something and when turning around, you’ll see the picture better. that was good enough for an intro.
the thing is still very buggy, I don’t think I’ll fix it (ever).
I should post a more detailed entry later on but for now, enjoy!
very nice! but there’s something weird with the mouse movement though
during the xmas xp, we don’t have much time to polish the things :)
I wish I had an extra day to set up the plane’s controls to allow free flight around the world…
Awesome work. love it ^^