Category Archives: Web tomfoolery

three.js at FE Suffolk

As mentioned in my previous blog post, I had a talk lined up at FE Suffolk about my dabbling with the three.js library. While it went well, I did my usual trick of planning well in advance but clamming up on the actual talk.

Below is a link to all of the scenes/files I showed on the night and if you do the whole inspect the page thing, you will be able to see some of my notes for each section. They are fairly basic scenes as I was just showing some of what I’d picked up while playing with it. Some of the files are quite large (the big finish one is 4.5mb) so may take while to load, I’ve found refreshing the page constantly doesn’t help but it does make me feel like I’m doing something. I intentionally left the obj’s large to see how well three.js would handle them and the mtl files and I’m pretty happy with how well it performed.

All scenes can be navigated using the mouse (click and drag to rotate), the 3d objects which are imported are hand crafted by myself in c4d, everything else comes from three.js and all scenes are made by plagerising following examples from the threejs.org website.

1 set the scene
A basic page setup with three.js loaded

2 objects
The scene with (wait for it) some objects! Actually a selection of some of the objects within three.js.

3 objects animation
A torus knot animated and bouncing around like a jack rabbit on speed.

4 render effects – ascii
Ascii effects render

5 video cube
original Buck Rogers

6 import obj file
with special guest appearance by the star of last years Unity talk

7 fade
Press any key when its loaded so see how this got its name

8 bad Buck
Demonstrating what happens when a poly with ngons is loaded

9 good Buck
Random factiod, those spacecraft are called Thunderfighters and one day I may actually get round to texturing it properly.

big finish
Featuring 100% more rainbows.

Plus if you’re really into it, you can download the zip file of everything to pick apart.

If any of this is of interest, I’d recommend visiting https://threejs.org/ to see what people who know what they are doing can do with it, rather than mucking about with Skeletor’s head.

I’m making a note here, huge success

Well, nearly…

Monday night (May 27th) was FE Suffolk night and I’d volunteered to give a talk about my use of Cinema 4d and how I have used it to make content for websites, games, videos and other such tomfoolery. To try and make it interesting to the web people in the audience who have probably never been near a NURBS or a metaball in their lives, I thought it would be more fun to demo both Cinema 4d and Unity to give an idea about how a 3d app can be slotted into a workflow. That was the theory anyway but as the saying goes, the best laid plans…

I thought a good way to grab the audiences attention would be to build an iconic object from a well know game so picked the weighted companion cube simply as it’s a cube shape so works well with going from a primitive shape up to something more complex. I built the cube on a Sunday afternoon the week before the talk and spent about a few hours over the next couple of nights putting the texture together while having some fun with the model.
Cinema 4d Cube
This shows my step by step process starting with a primitive cube. The second one is a demo to show a default cube with its standard UV and how simple it is to drop a texture on to get a basic object textured. The third cube is me using a boolean to build some of the shape up, yeah yeah yeah… booleans are not the best way to work but sometimes they can be used to get good results. The fourth cube is the final thing cleaned up and then five is the final textured cube with the UV’s cleaned up as the process of modeling the cube creates some horrible overlapping on the UV. I would go into depth on what some of the terms are but I doubt I could explain them well enough without a load of pictures.

The final result isn’t bad for a few hours work and it’s free to download from the freebies section of the site.

companion cube

A quick video was rendered up to show an example of dynamics.

I then edited an existing Unity sandbox I’ve made to include the cube, along with a script to interact with it (pick it up and chuck it) but I left that as a backup as I really wanted to demo how to import objects from C4D into Unity and then work with them. The landscape was built using a selection of the default items and scripts within Unity but some of the assets are mine such as the crate, the rather crude toilet (crude model rather than crude as in rude) and the picture of famed Sci-fi author Isaac Asimov is something I don’t really think I can explain. Finally I installed the unity player onto my laptop, tested it, copied all the files over and then set off for the talk.

My talk was right after one called ‘Javascript without jQuery’ by the main man of FE Anders Fisher, I got up, plugged the projector cable in the laptop and was greeted by what had to be the smallest screen in the world. My laptop, in an attempt to display the small resolution of the projector, crushed all of the C4D screen into a mess of jumbled screens. So for those that haven’t seen C4D before, this is what it should have looked like:
c4d-largescreen

Not like this:
c4d-icklescreen

YOWZER!

So not one to be daunted too much, I shuffled on and managed to go through a few of the steps I took in creating the cube and explaining a bit about UV mapping. I should add that while UV mapping is a pretty important step when trying to make a good model, its also one of the most mind numbing processes ever developed by man, and it often takes me the longest out of any stage of making something as I tend to lose the will to live while UVing.

The biggest hurdle came when trying to work with unity as I couldn’t find any of the stuff I wanted to talk through properly and then to rub it in further, the object imported fine into Unity but refused to be imported into the scene. I ended up going straight to the finished version and back-peddling through the steps to show how I added a box collider and a rigid body then applied the script to the scene.

The test scene worked fine in Unity but fell over when I exported it and ran it as it turns out theres an export to offline mode. Well I didn’t know did I? It seems you need a whole load of js nonsense to make it work and without an internet connection it just fails so theres a little tickbox for export to offline mode that pumps out the needed files. You live and learn.

In the end I think I got there, just about, but I think GLaDOS had a hand in a few of the things that threw me off.

A big thanks to Kerry Buckley for taking a photo of me mid ramble.
dr cube and the unity 3d cinema 4d nightmare from hell

If anyone has any questions, feel free to chip in below but finally… here’s the link to the scene: FE Suffolk Unity Demo

Talking of colour

I’d better get this up now before it vanishes from my memory.

I gave a talk on Monday night at the loverly Brewery Tap pub for the loverly Front End Suffolk about loverly colour. A vague subject perhaps, but I wanted to give a bit of grounding to people who may not have known some of the rubbish I’ve picked up over the years that I feel are important to design such as RGB & CMY, how adult & children’s websites treat colour differently and some of the ways that colour is used on the web (eg navigation and branding). The slides are available to download as a pdf along with my notes from the talk but they may be a little hard to follow without me jumping around like a jackalope infront of a screen. Weeeeell I thought I was jumping around, I was probably just slouching.

As I said at the talk, for me colour is something that you need to almost imagine rubbing your face against to feel the texture, I dislike all these clean and stark sites around at the moment so unless the site is there purely for information consumption (such as wikipedia) I want to be engaged visually.

I really enjoyed getting the slides ready for the talk and I think I managed to cover most of my points without flustering too badly. Although I’ve given talks in public and run some workshops before, this was the first time I actually didn’t know how the audience would react, as it was a room full of my peers but thankfully a few people came up to me after to ask questions and discuss some of the points that I had made in the talk so I think it went down ok.

The only thing that stuck in my mind was about halfway through, someone asked me a question about colour in children’s sites being influenced by culture. I think thats what it was anyway, I kind of froze mentally, repeated a few things (can’t remember what) and carried on. Whoever that was (i didn’t see) SORRY! I wish I could actually remember some details but I think I was too much in a state of adrenalin rush at the time.

If anyone at the talk has any questions, please feel free to hit me up here or on twitter where I seemed to pick up a number of people right after the talk. Also the page with the downloads on is my third most popular page at the moment according to my Analytics, right after the main site and (for some strange reason) my Mechanicus page…

Days cycled to work: 90
Days driven all the way to work: 0
Days sailed to work: 1
Days driven half way to drop the car off at the garage to have a service: 1
Days tramped along in snow and ice: 2

@media day 2

***As promised here’s the second part. The ‘me from yesterday’ started to writing after picking up from the ‘me from the day before’ that but both of them failed to finish the work from the ‘me that was Friday’ so i’m carrying on. Bloody useless fools***

Day twos opening keynote was presented by a guy knocking back bourbon, had a slide from ‘Who framed Roger Rabbit’ and proved to be the second most entertaining of the event (that award came later). Andy Clarke presented a little set called ‘Hardboiled design’ and the working examples he gave just blew my fragile mind. He started with the idea that we shouldn’t make all web users have the same experience on every browser. This is nothing new in itself but what he did next was to show how a really well produced website can degrade nicely in less capable browsers.
Several examples followed including a 404 page which looked the same in each browser only with minor changes depending how capable each one was. Then another with two separate pages with lovely effects in Safari where we saw cards flipping when clicked and wobbling when rolled over. Then the firefox version which didn’t support the flipping going onto the IE version which didn’t do much but it was laid out very neatly and looked great in each version. No JS was harmed in the use of the effects, so to see a different version of each page in every browser was not only novel but also refreshing in a way. A huge amount of slugging away would have got every page to work the same way but probably at the forfeit of the nice CSS effects. When all browsers have the same support as webkit then all would be good with the world and every one would see the same thing and this was the main point of the talk that I took away. Don’t shoehorn everything into a site which works with IE6 and above, produce something for the top browser and then let every other catch up in the next five years as the site could be up for that amount of time. If you don’t get this stuff in early then its wasted. I almost slipped back into Safari as my main browser so I can try out some fancy stuff but I have a feeling most of the stuff covered in the talk isn’t out in the wild yet. Many of his points had legs but what was interesting was at the end when he pointed out he has the luxury of being able to work for clients directly and isn’t part of a team bogged down by guiding forces so he has a lot of freedom to work. His IE6 style sheet is a work of genius as well.

Sandi Wassmer was next with a talk about inclusive design. Sandi obviously had a lot of passion about inclusive design which is something we have been focusing on a lot at work and her slides (http://www.slideshare.net/SandiWassmer/inclusive-design-is-for-everyone) could easily be applied to our sites. What was interesting was her points about the horror buzzword ‘web 2.0’ was used to cram as much fancy stuff into a website as possible and this came right after Andy Clarke who was advocated putting effects into sites, Sandi’s stance was to ‘Develop features and functionality from a users perspective, not a technology one’. Obviously the two can work together very well, but both could also be taken to extreme from either angle. ‘Test the hell out of it’ was the key for the presentation for me.

The next talk for me was from Hannah Donovan who had slides filled with sketches of monsters and even a Judge Dredd panel (there was Star Wars but thats too damn mainstream). Hannah’s talk about telling stories through design hit home in several place and one point that was that the design is the first thing one the site that people see. I know this as I have to deal with my work on websites all the time, but she somehow made my neurosis gland work double time while talking about it. Blimey Riley, she knew how to scare me. through the use of pop culture (A Neil Gaiman quote “put a lot of guns in a lot of drawers”), how the team should feel about each other (trust and caring about the input) and a load of Agile references this was the talk which meant the most to me. Hannah is obviously a designer who cares about her stuff and I loved her technique of telling stories around her design while presenting to people. I naturally waffle (hence the long blog posts) and enjoy building up back stories for characters I create so It should be a natural progression for me. The delicious list she gave out has some interesting reading (http://delicious.com/hannahdonovan/storytelling) and I really hope her slides and talk become available (i overheard someone saying the talks would be recorded and put out but I don’t know if that was only for one or two people) The audiopresentations will go up in the future but I doubt I will link to them as they could be copyrighted/only for people who went to the event.
***EDIT*** Hannahs slides: http://www.slideshare.net/hannahdonovan/storytelling-slideshare

Now for the comedy award which goes to Relly Annett-Baker. I think everyone in the audience was in stitches at one point or another during this talk. Dressed in a schoolgirl outfit Relly managed to show how to make baby Jesus cry, how to not make users feel like muppets when something goes wrong with a form and some really bad 404 pages including one with a goat that gets fan letters and little Moo from Moo cards got mentioned.. The bit about about forms and what to do when they go wrong was one of those blindingly obvious ones but it needs to be pointed out sometimes. *State the error (eg on line 4 the email address is wrong, this helps the user find how they fucked up) *Explain the error (not just you fucked up, you tell the user what is wrong) *create a resolution (help the user fix the error). It sounds obvious but its better than some standard form text which basically says there is a problem then leaves the user to figure out where it is and what it is.
I doubt her slides would mean much to most people when you looked at them (Giant head of Shigeru Miyamoto means what again?) but would probably help me wet myself laughing again. The best talk in terms of entertainment and some really thought provoking material.
All together now “get some death”
***EDIT***
Slides are up 🙂 http://www.slideshare.net/RellyAB/all-the-small-things-microcopy-and-web-design

(At some point between last night and now, the ‘me from yesterday’ lost the @media card with the lineup on it. He has be executed for incontinence and fortunately the ‘me that is now’ is able to carry on due to the notes I had scribbled out on my imacs screen. Anyone got some screenwipes?)

Aral Balkan started very strongly. He bounced around the stage excitedly talking about emotional design and had a real charisma and energy with his talk. He talked at great length about how you should try to make people smile with your apps/design and give them a little happiness with it. He demonstrated this with a couple of little apps. First was his ‘avit app which was rather smart. A little stone/potato-thing with a giant smiley face (think aardman style) searches safari books after you scan a barcode to see if its in their lineup. Very nice and the faces it pulls when it tries to get online and fails was pretty funny. Rather than the usual evil spinning thing which goes round and round and round and round and round until you get hypnotised and buy another iphone, the little spud talk to you telling you he is struggling and then cries because the internet hates you. Quite cool and I can see the use if you have a safari books online account.
His next demonstration was with another of his apps ‘feathers’ which is a twitter app that allows you to add special characters and has a nice little bird characters which slowly fills up and turns red when you hit the 140 char limit (something I do all the time). He also had a tiny rant about facebook and the feathers for facebook app and the API being pulled from under his feet. Now at this point I was getting a touch annoyed. While Aral was a good speaker, he obviously loves his own apps and his own work so much he spent most of the talk telling us all about the great features in there. Great features though they are, they are not someone elses features and it felt like a sales pitch for his stuff. The guy is obviously very talented but if i wanted to hear someone talking about how great their stuff was, I would have stayed in the main foyer and listened to MS, Opera, yahoo et al flogging their goods.

The last speaker of the day (and event) was Scott Berkun. I know why this was last, this was a really motivational talk which wrapped up the day well. Scott had me enthralled so much that I didn’t make any notes so sadly I can’t put too much down but it had some stuff about Edison not inventing the light-bulb, a photo of Einstein and Hemingway saying the first draft of every book is shit (then probably went off to have a Hemingway moment). Innovation and inspiration come to us when we are out walking when the Id and Ego are not concentrating on each other. There was some stuff about showers and Karl muttering in my ear about white noise but the lack of notes isn’t helping. The news today that the talks will be available as podcasts in the near future is excellent as of all the talks, Scotts is the one I would like to hear again (mainly due to lack of notes, what WAS I thinking?)

And with that I am done. The ‘me that is today’ will sail off into the sunset to leave way for the ‘me that will be tomorrow’ to read this and wonder where the grammar and speel checker went to.

All that is left to say thanks to all that went, all that I meet, all that I heard and those that organised. I’m now off to rest my bloody stubs which once looked like fingers and to do all the things I should have done over the last couple of nights. Like sleep…..

More failed photos

Two more photos which didn’t come out as well as I would have hoped (sound of tray on face)

OI! DAWSON! I’ve seen the picture in that slide before! You two must have searched on the same interweb. Who was that doing the presentation?
edit – I think it was Aral now. Not sure.

Hannah Donovan reenacts the AT-AT’s movements in the storyboard on her slide by sprouting two extra legs.

@media nob it photo

I’ve just got round to copying the photos from @media onto my mac and I knew I should have taken the better camera. Rather than my Sony SLR i thought I would just take my 8 year old 2MP Olympus and the results show because its smaller and less valuable. Sadly 90% of the pics are terrible but a few are good enough to be useable for now. Two corkers stand out, Microsofts rather dodgy URL as pointed out below it was @media who have the filthy minded URL, which to me looks like the words ‘nob it sher cock’ mashed up together (MS @media are moving into the porn trade?)

And while its blurry, this slide was the highlight of my time at the whole event. It was from Christian Crumlish’s slides and was a screen grab of a twitter feed AND I WAS THE NAME AT THE TOP! I know its a pretty weak thing to get excited about but thats me all over baby.

I would be immortalised in pixels if i had taken the SLR. Serves me right for cutting corners 🙁