Site Chooser

More on the Bathrooms.com Ultimate Bathroom DIY Guide

Yesterday, Retail Technology featured an article about the Bathrooms.com Ultimate Bathroom DIY Guide, which I designed and developed for Bathrooms.com (on behalf of Dynamo PR). This article covers the technical background of the guide, based on an online interview I gave for this.

I thought I’d share it with you if you were interested in how the guide was put together:

http://www.retailtechnology.co.uk/news/5252/exclusive:-bathroomscom-dishes-appdev-detail/

Toodles,

Pat

Posted on Thu 08 May in Coding,Creative,Thoughts,Web Design,Work with No Comments

Ultimate Bathroom DIY Guide!

Hello!

Sometimes I get projects that’re more complex than usual. Sometimes these projects use more than one of the services I offer.

Sometimes they pretty much use all of them. That’s been the case for the Bathrooms.com Ultimate Bathroom DIY Guide.

Bathrooms.com wanted to further boost their online enagement, so Dynamo PR proposed a web-based interactive guide, which would curate the best bathroom maintenance tips from the Internet to help people enhance and repair their bathroom. Dynamo PR commissioned me to design, illustrate and develop the guide.

I’ll be honest: I leapt at the chance. This was an opportunity to expand on my knowledge in responsive design, interactive web systems and comtemporary HTML5/JavaScript technology. It also give me a chance to do some nice drawing of bathroom items.

What? Some of us like drawing baths.

diy-guide-1

Anyway, through a mix of PHP (page generation based on an array of bathroom elements/tips), VBA (converting the spreadsheet of elements/tips provided by Dynamo/Bathrooms.com into PHP), HTML5/JavaScript/JQuery (the interactive Virtual Bathroom) and responsive CSS (the Tips List), I developed the guide.

diy-guide-2

Once created, I recorded and voiced the “How To” video to take users through the usage of the guide.

Bathrooms.com and Dynamo PR were delighted with the end results, and hopefully many people will benefit from the one-stop-shop of DIY tips.

Have a play now and please feel free to share it: www.bathrooms.com/ultimate-bathroom-diy-guide.

diy-guide-3

If you’re looking have a high quality interactive web-based app created then I’d love to work with you on it. Please get in touch!

Otherwise, just enjoy playing around in the guide 🙂

Tarrah for now,

Pat

Posted on Thu 27 Feb in Coding,Creative,Drawing,Video,Voice,Web Design,Work with No Comments

Dear Blogger


Hi. How’re you doing, Blogging hub?

I’ve been enjoying your company of late through the redesign of The Custard TV’s website, but at the end of this process I must plead with you regarding one thing:

PLEASE, PLEASE CAN YOU MAKE “POPULAR POSTS” AVAILABLE AS A FEED?

It would be really, really lovely to be able to hook in (via JavaScript/JSON a la recent posts / posts of a label etc.) to that data so I could actually create some proper custom popular post widgets rather than having to hack around with CSS only with the stuff you provide, or having to use post-creation JavaScript to hack about on the fly with your generated HTML code. And let’s not even talk about your 50x50px thumbnails.

This might sound more like a rant having spent hours trying to source a decent way to resolve this, resorting to simply not using thumbnails at all (if you look at The Custard TV home page, you’ll see why 50x50px thumbnails really wouldn’t work).

It might sound like a rant.

Because it is.

All the best,

Pat

P.S. On the plus side, Blogger, you’ve definitely evolved: I’ve managed to get the Custard TV site looking like a non-Blogger site, in particular the home page, all thanks to your flexibility in terms of template manipulation through HTML and CSS. So… thanks!

P.P.S. It’s not odd to be addressing my posts to blogging websites, is it?

P.P.P.S. Actually, given Google’s latest hardware, perhaps I should tip my head up and address you as “OK, Blogger” instead.

Posted on Tue 04 Jun in Coding,Thoughts,Work with No Comments

JavaScript + Canvas Playing

Phew!

This month has been *busy*, but I’ve got round to doing a little bit of JavaScript coding and have made the super-rudimentary 2d platformer a mere pretty-rudimentary one.

It’s only a test of scrolling about in an environment, and nothing particularly impressive yet – but it’s a start. I intend to expand this further so it’s a proper functioning game, with parallaxed backgrounds, animated foregrounds and – oh – some bad guys and a “win” mechanic.

For now it’s just a demo really.

But I thought I’d share it with you anyway 🙂

Click here to “Play”

Pat

Posted on Fri 17 May in Coding,Creative,Game with No Comments

Hello Batman

Tossing a coin is SO 2012.

If you need to make a snap decision then the best decider is not heads or tails, but instead:

helloorhello-batman

“Oh my goodness, how have I been so naive all this time? I had no idea that these two obviously juxtaposed items could be used to determine the choice of a binary decision!”… I hear you cry (or that could be the voices in my head).

It’s rather obvious when it’s presented to you, isn’t it?

“No but seriously, what the hell is this?”

I… it’s hard to explain. My mate Pete was bought the domain as a present at the Dynamo PR Christmas do.

“Why?”

REASONS, that’s why.

Anyway, he wanted to use it as more ludicrous enjoyable alternative to sometimesredsometimesblue.com (yes, that does what you think it does).

So – combined with web fonts, some funky JavaScript to size the text to your screen, Pete saying a particular phrase on page load (or on tap on iOS… grrr) – I made it.

Hello Batman.

Tarrah,

Pat

HelloScarlettJohannson

Posted on Tue 30 Apr in Coding,Creative,Fun,Web Design with No Comments

Ernie Elf’s Christmas Message – now on Mobile!

Hello ho ho!

Well, after another couple of days of festive fun and (far to much) food I sat down and decided I’d update Ernie Elf’s Christmas Message so that it worked on iOS (and Android) devices.

Previously, it only supported movement using the Left and Right keys on a keyboard, meaning iOS (and Android) devices were rather out of luck. In fact, it was worse than that: the initial introduction screen required a Space key press to close and start the game.

Today I decided to fix that:

  • To start the game, you tap the screen.
  • To move Ernie Elf, you tilt your device to the left and right.

Simple! And reasonably easy to play, as you can see here:

But don’t just take my word for it: pick up your iOS (or Android (Ice Cream Sandwich or above!)) device and play here:

play-christmas-game-no-keyboard

What I Did

I worked on this witha mixture of Internet research and trial and error to understand how the accelerometer worked. I developed a simple Accelerometer Test, which uses the combination of the x and y accelerometers plus orientation to determine how far left/right the screen is tilted in relation to the current orientation.

I then integrated this code into the game, using the output to determine Ernie’s horizontal (based on current orientation) velocity.

How To Do It

(A.k.a. The way I did it… this is in no way an endorsement, but might give you some ideas. 🙂 )

Define Global Variables
The first thing to do is to create some global variables that store a) our final value used to move our hero and b) interim orientation values used to calculate the final value:

/* Our end result variable - the Left/Right accelerometer value used to move our hero!*/
var accel = 0;
// Flag to determine if our device is "upside down"
var upsideDown = false;
// Flag to determine if our device is in landscape or portrait mode
var landscapeOrientation = false;

Orientation: Define Event Listener
Then we create a JavaScript event listener to react to changes in the device’s orientation (i.e. react when the device is turned from portrait to landscape or vice versa). We’ll be using this when determining our “horizontal” speed later:

window.onorientationchange = function() { orientationChanged(); };

Orientation: Create Event Handler Function
Now we create the orientation changing handler function “orientationChanged”. This checks the angle of orientation passed to the browser by the device, which is always -90, 0, 90 or 180:

function orientationChanged() {
/* Let's look at the device orientation passed to the browser and set variables based on its value:*/
switch(window.orientation) {
case 90:
// It's landscape mode and "upside down".
upsideDown = true;
landscapeOrientation = true;
break;
case -90:
// It's landscape mode and the "right way up".
upsideDown = false;
landscapeOrientation = true;
break;
case 180:
// It's portrait mode and "upside down".
upsideDown = true;
landscapeOrientation = false;
break;
default:
// It's portrait mode and the "right way up".
upsideDown = false;
landscapeOrientation = false;
break;
}
}

(The actual code I’ve used is more efficient, but the code shown here’s a bit easier to read).

Accelerometer: Define Event Listener
Ok, so we’ve got our orientation sorted – now we need to take a look at the accelerometer to see in fine detail the amount device is rotated by on its various axes. First we create an event listener to respond to the accelerometer and call an appropriate handler function:

window.addEventListener( 'devicemotion', onDeviceMotion, false );

Accelerometer: Create Event Handler Function
Finally we create the accelerometer updating handler function “orientationChanged”. This’ll allow us to determine our final “horizontal speed”, stored in the “accel” variable:

function onDeviceMotion() {
// Grab the accelerometer values
var accelX = event.accelerationIncludingGravity.x;
var accelY = event.accelerationIncludingGravity.y;
var accelZ = event.accelerationIncludingGravity.z;
/* If we're in landscape mode, set our final accel value to that of the Y accelerometer - otherwise, if in portrait, set accel to that of the X accelerometer. */
accel = (landscapeOrientation) ? accelY : accelX;
/* If we're upside down, reverse the horizontal "direction" of our final accel value. If we don't do this, our character will move in the opposite direction to that desired when our device is upside down. */
if (upsideDown) accel *= -1;
}

The result of this function is that our final variable, “accel”, will reflect how much we’ve tilted our device left and right based on the current orientation. We use this variable in moving our character, so that if we tilt left, accel’s value is negative so our character moves left, and vice-versa for right/positive.

Event Listener Declaration: Ordering
As a final note, when declaring the orientation and accelerometer event handlers, we should manually call the orientation event handling function before setting the accelerometer event handler. This means we’ll’ve correctly set the orientation variables (used by the accelerometer event handler function) without the user needing to rotate their device first:

window.onorientationchange = function() { orientationChanged(); };
orientationChanged(); // Manually call it!
window.addEventListener( 'devicemotion', onDeviceMotion, false );

Android Angst

You’ll notice I’ve been putting Android in brackets when mentioned. That’s because I’m not 100% sure it’s going to work as intended.

For a start, this only works on Android 4.0 (Ice Cream Sandwich) and above, as that’s when Google adopted the native browser accelerometer functionality introduced previously in iOS 4.0.

Also, on a Samsung Galaxy S2 this was tested on the angles reported by the orientationchange event appear to be 180 degrees out from iOS. This means that the “upsideDown” flag is set incorrectly at all times and so Ernie moves in the opposite direction to that which he should! Eek.

To fix this I’ve added a simple Android OS check and said “If it’s Android, then inverse Ernie’s direction”. It’s dirty, but it works. At least on an S2.

I’ve not got an ICS+ Android device to directly test this on (I’ve been remotely testing by hassling my mate Reef (thanks Reef!!) and didn’t want to drive her insane 🙂 ), and it looks like it might be different on different devices from what I read on Stackoverflow. Fun!

If you’ve any idea why iOS and Android (well, ICS on an S2) are reporting their orientation angles with what seems like a 180 degree difference, please let me know!

Anyway… it’s alive on iOS and Android! Wooh!

UPDATE (28/12/2012 13:57): I’ve added touch-based movement functionality for Android-only OSes of less than 4.0 – so you can now play this on Android < 4.0. When you play, you'll see two big translucent buttons on the left and right of the screen. Touch them to move Ernie! Pat P.S. Big thanks to Gary for his extensive testing help on iPad and iPhone and Reef for her remote testing on the S2!

Posted on Fri 28 Dec in Coding,Creative,Game with No Comments

A Christmas Card Game

Hi and a Happy Festive Season to you!

I hope you’ve had a great Christmas and managed to avoid eating quite as much as I have (did someone say “January detox”? No? Just my conscience? Ah…).

I thought I’d share with you a little game I made for friends and family to say “HAPPY CHRISTMAS” at this time of year:

play-christmas-game

How to Play It

You need to move Ernie Elf left and right along a platform, in order to catch falling letters. Each letter you collect is added to a special festive message written along the bottom of the screen. Avoid the bombs or you have to start again!

Some Thoughts on Making the Game…

Before I set off on this project over the weekend, I wanted to make sure I created a cross between an eCard and a simple computer game. Something which:

  • Was fun
  • Was simple
  • Looked cute
  • Felt festive
  • Could be personalised

I also wanted to make something purely using JavaScript, so I could build on what I’d learned and developed at Seb Lee-Deslisle’s brilliant CreativeJS workshop last week and really get comfortable doing HTML5 games.

So that’s what I set out to do. The graphics were all drawn in Illustrator using my trusty Wacom Cintiq to create a hand-drawn yet vectorised/cute feel to them before exporting out to PNG/JPEG. The sounds were, uh, improvised by me (with apologies and thanks to Chris Rea). The code was 100% JavaScript. No Flash to be seen on this occasion, which was quite daunting, but really quite interesting!

I built on a number of the things learned on the CreativeJS course, but the key elements were the particle systems I created to generate the snow effect and the falling/caught snow balls / bombs. I performed some funky text-string-to-object-array manipulation to create the snow balls / letters, plus various object states and a “waiting to fall” array (thanks Seb for the tip!) to easily manage those snow balls caught, falling and neither falling or caught.

The text-string-to-object-array code allowed me to easily edit the letters in the snow balls being collected just by editing a single string variable. This meant I could easily make special versions for family members, which was a key intention in the first place. In fact, I went as far as adding a sneaky bit of PHP so that the JavaScript code never had to be altered. I’m such a nerd.

Graphics-wise, there were various smoothing/easing techniques used to make sure everything on screen always had a fluid/smooth feel to it – I wanted it to feel “alive”:

  • When the bomb blows up, each on-screen snowball jettisons to the top of the screen (rather than just vanishing).
  • When a snow ball is caught, it “slides” into place in the message at the bottom.
  • When all snow balls are caught, they slide to the top half of the screen and the background smoothly moves down to reveal the sky.
  • The snow balls gently sway once caught, using some simple yet effective Sine wave calculations.
  • Ernie Elf has a smooth bobbing motion as he’s moved across the screen, again using Sine/Cosine waves.

I’ll be talking more about the use of Sine/Cosine in making pleasant movements in a future post. It’ll be about platforms. There will be trig. Bring a bean bag.

And sounds? Urrrrgh, sounds:

The sounds use the basic HTML5 Audio class, and works in IE/FF/Chrome at least. HTML5 audio is a mess, so it probably won’t work everywhere (what sort of class returns “Maybe” or “Probably” when being asked “Do you support this audio format?”. Clearly a standardised audio codec/format is FAR too much to ask.).

Well, that was a LOT of random waffling and not much detail. But don’t worry: in future, I’ll be talking more about specific cool things in terms of game coding, development and theory.

But for now I’m going to go back to nursing my food-baby.

Happy Chrimbo Time and I hope you enjoyed the game!

Toodles,

FPat

Posted on Thu 27 Dec in Coding,Creative,Game with Comment (1)

Creative JS!

Helloooo!

What a couple of days. I’ve been absorbing more about JavaScript and HTML5 than a code sponge living on the great data carrier reef *.

By which I mean: I’ve learned a lot. And made some COOL things!

For I’ve just finished a 2 day training course named Creative JS. Run by the excellent Seb Lee-Delisle, he showed the group of us how to make a huge range of cool things within a web browser and some pretty awesome techniques in order to do so. It was a practical course, so we were coding and testing as we went – being taught whilst developing is definitely the way to go.

I’ve learned loads, from HTML canvas tricks and tips through 3D and vector techniques to some funky trig.

I’m going to be using what I’ve learned to transfer my Flash-based games into HTML5, meaning I’ll be able to have them played on everyone’s favourite restricted mobile operating system (no, not Symbian. The other one.)!

Without further ado, to give you an idea of some of the bits we were making, below are are a couple of examples. Both are based on code we developed during the course (and using some handy libraries created by Seb and built upon by yours truly):

Swirly Particle Thing!

A moving, bouncing, colour-changing and exploding Catherine wheel type thing – I thought I’d make something that brought back memories of Windows screensavers from the mid 00’s. I don’t quite know why. 🙂

swirly

Asteroids!

A nice and simple Asteroids game, with funky particle-based explosions. Up = Thrusters, Left/Right = Rotate, Space = Fire bullets.

asteroids

Cool, huh?

(I hope to God those didn’t just set your browser on fire)

Pat

* I tried to think of something that sounded techie and also a bit like “Great Barrier Reef”. This was the result. The summary? I shouldn’t blog when I’m tired.

Posted on Wed 19 Dec in Animation,Coding,Creative,Education,Game with Comments (2)

Browse

Follow

My blog runs on Wordpress, which uses cookies. By using my blog, you are consenting to this. Find out more

The cookie settings on this blog are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Further details on Wordpress's use of cookies is shown here.

Close