WebGL cube via ThreeJS

var container, stats;
var camera, scene, renderer;
var cube;

var targetRotationX = 10;
var targetRotationY = 10;
var targetRotationZ = 10;
var targetRotationOnMouseDown = 0;

var mouseX = 0;
var mouseXOnMouseDown = 10;

var mouseY = 0;
var mouseYOnMouseDown = 10;


var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

$(function() {
    init();
    animate();
})

function init() {

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.y = 150;
    camera.position.z = 500;
    scene.add( camera );
    
    // LIGHT IN FRONT
    var light = new THREE.PointLight( 0xffffff, 2.0 );
    light.position.set( 0, 500, 1000 );
    light.castShadow = false;
    scene.add( light );
    
    var materials = [];

    for ( var i = 0; i < 6; i ++ ) {
        materials.push( new THREE.MeshPhongMaterial( {
            color: 0x9CDB79,
            opacity: 0.5,
            transparent:true
        } ) );
    }

    cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
    cube.position.x = 0;
    cube.position.y = 150;
    cube.position.z = 0;
    cube.rotation.x = 5;
    cube.rotation.y = 5;
    cube.rotation.z = 5;
    cube.doubleSided = true;
    cube.flipSided = false;
    cube.overdraw = true;
    cube.dynamic = false;
        
    cube.overdraw = true;
    scene.add( cube );

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize( window.innerWidth, window.innerHeight );

    container.appendChild( renderer.domElement );

    stats = new Stats();
    $("#stats").append( stats.domElement )

    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}

function onDocumentMouseDown( event ) {
    event.preventDefault();
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    document.addEventListener( 'mouseup', onDocumentMouseUp, false );
    document.addEventListener( 'mouseout', onDocumentMouseOut, false );
    mouseXOnMouseDown = event.clientX - windowHalfX;
    mouseYOnMouseDown = event.clientY - windowHalfY;
    targetRotationOnMouseDown = 5;
}
function onDocumentMouseMove( event ) {
    mouseX = event.clientX - windowHalfX;
    targetRotationY = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
    mouseY = event.clientY - windowHalfY;
    targetRotationX = targetRotationOnMouseDown + ( mouseY - mouseYOnMouseDown ) * 0.02;
}
function onDocumentMouseUp( event ) {
    document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
    document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
    document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentMouseOut( event ) {
    document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
    document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
    document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function animate() {
    requestAnimationFrame( animate );
    render();
    stats.update();
}
function render() {
    cube.rotation.x += ( targetRotationX - cube.rotation.x ) * 0.05;
    cube.rotation.y += ( targetRotationY - cube.rotation.y ) * 0.05;
    renderer.render( scene, camera );
}

									

Click here to view the demo in action.

cube = new THREE.Mesh( cubeGeo, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff, opacity: 0.9, transparent: true }) );
									

Math.random() * 0xffffff generates a random colour

opacity sets the opacity level for the surfaces within our cube. For example, the you can see ‘into’ the cube through its surfaces, but other objects that are behind your cube will not be visible.

transparent:true will apply your the opacity to the entire cube. Other objects in the scene will be visible through the cube.

I’ve also seen this technique for applying a material directly to each side of a cube:

for ( var i = 0; i < 6; i ++ ) {
        materials.push( new THREE.MeshPhongMaterial( {
            color: 0x9CDB79,
            opacity: 0.5
        } ) );
    }

cube = new THREE.Mesh( new THREE.CubeGeometry( cubeSize, cubeSize, cubeSize, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
        
									

…however it causes horrific flickering in Google Chrome. Probably best to avoid.

Unfortunately, it doesn’t appear that the MobileMe > iCloud transfer of calendars works all of the time. There’s little documentation on at Apple.com to assist if it doesn’t work, but it’s fairly simple to perform manually. Below is how I re-imported my calendars – requiring you to have gone through the iCloud setup process first. If you skipped the setup of your iCloud account, you can trigger this again through OSX’s System Preferences (there’s a new iCloud applet in there).

1. From iCal, export each of your calendars as .ics files from the File menu. Stick the files on your desktop for easy access.
2. You’ll notice that you have a couple of extra calendars in iCal that belong to iCloud. You’ll need to rename these to match your old calendars, and / or create some new ones. You can do this from the file menu. Make sure when creating new Calendars that you select the iCloud option for ‘location’.
3. Back in iCal, uncheck all of your local calendars so that they are no longer displayed – this makes it a little easier to see that you have successfully recreated your calendars in the iCloud.
4. Now, back to the File menu and choose Import, and select one of the .ICS files. Pick the destination calendar within iCloud.
5. Across the top of iCal you will see “Updating…”. You can check the progress by logging into iCloud.com and viewing the calendar you just created.

Your calendars should now sync correctly. You’ll probably see duplicate entries on your desktop iCal as both sets of Calendars are still active. Once you are comfortable that everything has migrated successfully, you may want to remove (or disable) the ‘local’ calendars, leaving only the iCloud calendars active. You can also delete the .ics files from your desktop as you won’t need these again.

Sadly, our mean-green-machine was starting to develop other old-man symptoms. It didn’t like the cold, hacking up noxious clouds of stuff if you dared suggest venturing out when it was wet, or a little bit chilly. Frankly, I was scared stiff if that if we ever had an accident it’d be game over – pretty much no safety features. The radio, well that never worked.

In 2009, the government scrappage scheme kicked in. Even old beasts like or Citroen were suddenly worth something more than the £200 scrap metal fee. I think the car knew what was coming. Even on the day I had to drive it to the Alfa garage to part-ex for a whopping £2000 (car was worth a 10th of that, if lucky), it refused to start, draining the battery and kicking out the most awful black clouds. Eventually I did get it to limp to the garage, and I drove home with a beatiful Alfa MiTo 95 Veloce.

It’s funny, from not caring about cars at all, the MiTo made me love them – not particularly in a “petrol head” sort of way, but an admiration for the workmanship, and the fun that they can introduce into simply getting around the shops. The MiTos are really fun to drive. Two years on, the 2011 range of MiTos have just hit the marget with upgraded engines and lots of other mod-cons that make the techie in me coo with delight. There’s also no denying that the MiTo is a beautiful machine from a design perspective too.

The warrantee agreement on our black MiTo was about to run out, and facing a £320 2-year service fee, it was a good time to look at the newest model. We took the new 135 multiair model for a spin in Edinburghs bypass and it was just amazing. Unlike our first MiTo, these engines have a turbo, as well as ~40% more power and 10% fuel saving.

Yesterday we popped down to the Alfa showroom again, and there she was, our MiTo freshly delivered from Italy (erm… via Perth).

Cannot wait until we get to pick her up!

We’ve had an opportunity too to take stock of the elements of AP that work best, and review those that don’t work so well.

Content

We’ve commissioned new artwork, and we’re looking at expanding many sections of the magazine. While we have a fairly steady stream of excellent articles from various contributors, we’re pushing for more varied content.

Magazine design

A competition held earlier in the year helped generate some fantastic ideas that we’re planning on pulling into a refreshed design  magazine. Rather than a whole new design, we’re revisiting and improving the layout we introduced in March.

Anime Pick refreshed design

A few of the things we have planned:

• Improved menus
• Refreshed graphics
• New content page layouts
• New content page menus
• New ‘social’ and ‘subscription’ areas.

Video

The video content hasn’t seen much love, and we have a project under way to deliver new videos over the coming months.

Technology

I was keen from the start to maintain AP at the cutting edge of web tech, without jeopardising cross-browser support. The up coming release takes us to the next level, with considerable refactoring of the WordPress templates under the hood to move us to full HTML5 support and the latest version of jQuery. We’re dropping support for older versions of Internet Explorer. The magazine shines in Chrome and FireFox.

These updates don’t change much visibly, but they help build a wider, more stable foundation for future updates (of which we have many planned).

Future

We have many plans, and time and advertisers willing we hope to continue the expansion of Anime Picks over the next few months and into 2012. It goes without saying that it’s a project the entire team is passionate about and would very much like to see it succeed. I’m really enjoying the fine-details of wrangling the technologies to get this to work. As a play-pen Anime Picks couldn’t be much more varied and fun, but as always with the nature of unpaid projects, time and resource are always outstripped by our ever-growing wish-list!

PHP and OOP

Object Orientated Programming has been around forever (I can remember hacking away at OO within Flash years ago). However, PHP has only had OO support in a usable form since PHP 5. If you’re using an older version of PHP, upgrade! It’s not worth the hairloss.

Why Object Orientated PHP anyway?

Anyone who has spent any quality time with PHP knows how beautifully messy the code can get in a remarkably short time. Especially if there are multiple folks working on the code. OOP at the simplest level is possibly the single best way to organise your code by breaking it up into small, distinct libraries of functionality (classes). Smaller units of code can be worked simultaneously, and in theory are easier to debug.

The basics

• A class is a ‘template’ for building an object.
• An object is an entity that ‘does stuff’.
• An object can contain functions (called Methods) and/or data (called Properties).

Classes are usually kept externally from your page code. This enables your classes to be included in any file you wish to access the functionality those classes offer using the PHP include directive.

<?php
  include("classes_lib.php");
?>
									

To create an object in PHP you use the new keyword. Example…

$n = new makeName;

…where makeName is the name of a class. $n is the name of our resulting object. All of the methods and properties that are part of the class makeName are available to $n.

Example

In our example here, I’ll create a simple object that takes a (hard coded) string and spits it back out onto the resulting page. Kind of pointless, but it demonstrates how all of this works in PHP.

index file (index.php):

<?php
  include("classes_lib.php");
?>
<html>
  <head>
    <title>OOP Example</title>
  </head>
  <body>
    <h1><?php displayTitle::title();?></h1>
    <?php
      $n = new makeName;
      $n -> set_name("fred");
      print($n -> get_name());
    ?>
  </body>
</html>
									

class file (classes_lib.php):

<?php
  class makeName {
    var $name;
    // setter
    function set_name($new_name) {
      $this->name = $new_name;
    }
    // getter
    function get_name() {
      return $this->name;
// gets the variable $name declared above. Note the "->" that gets property
//  value from $this object. Use $object -> property / method
    }
  }
  
  class displayTitle {
    static function title() {
      echo "<h1>This is the title</h1>n";
    }
  }
									

A setter is a method used for creating something, perhaps a bit of data, within the object. In our case, we give our setter a string (“Fred”) by calling the set_name method within our newly created $n object:

$n -> set_name("fred");

This tells PHP we want to access the  set_name method and pass a string to it. Once the object contains that string, we can do other stuff with it. In our really, really simple example, we simply get that name back again using:

print($n -> get_name());

The get_name() method is out getter.

I’ve included a second class to generate a title – displayTitle. This class contains a static method – a method that can be called without having to first create an object ($n in our first example). To access a static method, we need to tell PHP the name of the class and the name of the method within that class:

displayTitle::title();

Next step

Hopefully you’ll see that it’s not all that hard to build a reusable object. There are many things you can do with objects, but I’ll save that for another post.

Next steps, we could try and change the class to wrap the name in some pretty HTML. By doing this we then have a nice class that we can use over and over for generating nicely formatted names on the page.

The first thing that struck me powering up the Vega for the first time is how indescribably crappy the displays is. A flash back to the days of DSTN displays – remember those first generation flat screens? I’ll agree to cut the Vega a little slack, after all you’re still getting a fair bit of tablet without having to sacrifice your credit card on an Apple altar. Although it makes me wonder just how drunk their testers must’ve been (seriously, this screen is *bad*).

The second issue was a bit of a surprise. Now, anyone who knows me probably thinks I’m a die-hard i-device fan. If it has an Apple logo on it Sheru will love it. This isn’t fair. What I’m a fan of is ease of use, the ‘tactile’ user experience when using mobile devices. The default (and official) version of Android installed on the Vega is truly awful. Think a bastardised and magnified Android phone screen with almost everything that makes using a tablet sexy well and truly nixed. Don’t even compare with an iOS based device. Clunky, ugly (okay, perhaps that one is in the eye of the beholder), unresponsive, hard to navigate and lacking basic features that I wouldn’t even think about. It’s not all doom and gloom though. Thanks to the dedication of a brave collegue, I soon had the Vega up and running on VegaComb, a custom repackaging of the latest version of Android. Happily I can report that it’s a night-and-day difference when it comes to the Vega. The device rocks along on its dual core Tegra chip, slick and smooth.

That’s not the end of the story though. Being a UI fan-boy, I was then able to have a good play with the latest Android offering and, frankly I’m disappointed. Isn’t Android supposed to be the flagship of the Open Source mobile world, standing tall against the Evil Apple? Android misses a few tricks, while at the same time managing to raise some interesting questions of Apple’s IOS too.

Multitasking

Back in the early days of iOS, one of the biggest points of criticism seemed to centred around the lack of any real multitasking. Apple fixed this in later versions with the double-tap task bar to access the switching and closing of apps. Perhaps this is a matter of taste (or possibly the retraining of my own muscle memory), but Androids equivalent via an on-screen task button feels clunky.

Desktop

I really don’t understand this continued desktop metaphor on Android devices. We’re talking mobile devices here. Screen space is an issue, people. So why is so much space wasted with window chromes and ‘desktops’. Apps soon crowd the tiny screens with their widgets, desktop style icons and Androids own UI elements. It makes little sense to me. I really believe full-screen is the way to go – or tiling. I actually like (don’t shoot me) Microsofts proposed solution to this in the Windows 8 prototypes recently on show. Tiles work well, letting you see ‘into’ functionality without wasted screen space. This is definitely one up from iOS where screen after screen of tiny icons can be frustrating.

The problem

When I’m mobile, ease of use is a must. Imagine cold hands that are all thumbs. Some stuff I want to see quickly and clearly, at a glance. If I’m actively interacting with something, I want an uncluttered interface. I want that interface to work the same and look the same across all apps, because then I don’t have to think about the app itself. My focus should be on the task in hand, not trying to find my way around a seldom used app. Reading instructions is for people with too much time on their hands (take up golf, man!), not web sites to maintain and novels to finish writing.

My wish

I reckon there’s a sweet-spot in the middle. This can easily be demonstrated with Apple’s OSX Lion. Imagine full-screen apps for those primary tasks, and throw in screens of tiled widgets between.

Useful stuff

Got an Avent Vega? Upgrade to Android 3.2 here.

To me, it just doesn’t lend itself to creating that mental map of navigable ‘things’. Things on the desktop just never quite group together logically. They pile up, get lost behind each other, mimimized, in different spaces, or stacked in bizarrely stacked ways.

99% of the time I’m working in one or two applications. I want them full-screen. I want to seamlessly switch between screens with the swipe of the mouse or fingers.

So, does the desktop metaphor even work?

Generally speaking I find the Apple OS X desktop the easiest environment to use – certainly the cleanest – apart from when it comes to organising windows. The most basic of tasks always feels ‘messy’, flicking between spaces and expose and multiple physical screens.

Lessons are being learned from mobile environments where complication doesn’t work. Clean interfaces for small screens, simple naturalist interactions, these are the name of the game.

Videos of OSX Lion and the introduction of a iPad-like application view could be a step in the right direction. But I can’t help feeling that this is just another layer of complication on top of the desktop metaphor. It’s still the same old windowing-thing, with a lick of paint and a nod to full-screen apps.

Today videos of the Windows 8 desktop started floating around, and it really feels like an attempt to do something different. Not just another layer of fancy navigation.

/via Wired Magazine – article here.

I’m happy to see there being some real innovation, and a move away from the ‘traditional’ windowing environment. It’s to early to call who’s got it right, Apple or Microsoft, but I’m pretty sure these are the first steps to changing the way interact with software on our desktop computers, hopefully for something far more usable.