Minimal Monkey

Leave a comment 7 February 2013

Yesterday I launched a new site / blog over at www.minimalmonkey.com

I’ll leave this site up for nostalgic reasons (and because a lot of my old experiments are still hosted here and get hits) but going forward I’ll only be posting at the new domain. So go check it out and let me know what you think (not here, on the new site!).

For more info on the reasons for changing to a new domain and retiring Flash Monkey read my latest blog post over at the new site here.


Posted in Site

CSS 3D Cube Mobile

2 Comments 30 July 2012

Shortly after I posted the CSS 3D cube tutorial last week my friend Marlon jumped on the comments and suggested I create a mobile version. I played around with device orientation and JavaScript earlier in the year when me and Marlon were working together at Specialmoves so I presumed this is what he meant and it was a great idea!

I’ve now had a bit of time to put it together and created both an orientation version using the device accelerometer and also a touch event version (as whenever I showed someone the orientation one they tried to spin the cube with their finger!). Before you attempt to view the links you’ll need to be using either a tablet or mobile device and viewing in a browser that is WebKit powered as with the tutorial (iPhone, iPad and Android phones should be fine). Don’t start touching your computer monitor as nothing will happen (that was mostly for my Dad). ;)

Device accelerometer

First up the orientation version which can be view here. To get a device orientation via JavaScript is as simple as merely listening to an event.

var orientation = 0;
           
window.addEventListener("orientationChanged", function(event) {
    orientation = event.orientation;
}, true);
   
window.addEventListener("deviceorientation", function(event) {
    // process event.alpha, event.beta and event.gamma
       
    var x, y;

    if(orientation == 0)    x = event.beta;
    else                    x = (orientation == 90) ? event.gamma : event.gamma * -1;

    if(orientation == 0)    y = event.gamma;
    else                    y = (orientation == 90) ? event.beta : event.beta * -1;
       
    $('.cube')[0].style.webkitTransform = "rotateX("+(x * -1)+"deg) rotateY("+(y * -1)+"deg)";
}, true);

The orientationChanged event is dispatched when the window changes from portrait to landscape and visa versa. deviceorientation then gives you the x / y / z orientation of the device.

Touch Events

Next we’ll look at the touch event version which can be viewed here. Again the code is pretty simple as shown below. I’m planning on writing a simple tutorial for touch events so hopefully should have that up soon.

var vx = 0, vy = 0;
var px = 0, py = 0;
var lastx, lasty;
           
document.addEventListener('touchstart', function(event) {
    event.preventDefault();
    var touch = event.touches[0];
    lastx = touch.pageX;
    lasty = touch.pageY;
}, false);

document.addEventListener('touchmove', function(event) {
    event.preventDefault();
    var touch = event.touches[0];
    var mousex = touch.pageX;
    var mousey = touch.pageY;
    if(lastx !== mousex) vx = mousex - lastx;
    if(lasty !== mousey) vy = mousey - lasty;
    lastx = mousex;
    lasty = mousey;
}, false);

function render() {
    px += vx;
    py += vy;
    vx *= 0.9;
    vy *= 0.9;
    $('.cube')[0].style.webkitTransform = "rotateX("+px+"deg) rotateY("+py+"deg)";
}

setInterval(render, 50);

Finally I put them both together to create this version that utilizes both device orientation and touch events.


Posted in 3D, CSS, Experiment, HTML5, JavaScript

CSS 3D Cube Tutorial

3 Comments 19 July 2012

In my last post I talked about doing a tutorial for the CSS 3D Clock I recently made. However, instead I think I’ll just go over how to create a simple cube with CSS, and rotate it a bit with JS so we can see it really is 3D. Once you have the basics it’s up to you to go away and do something creative with it.

Before we start I should mention that unless you are viewing this in a browser that is powered by WebKit you won’t see the examples. Currently that mean’s you would have to be using either Safari or Chrome.

So let’s start by looking at the markup. It’s very simple – a wrapper then 6 divs to represent each face of the cube.

<div class="cube">
    <div class="face one"></div>
    <div class="face two"></div>
    <div class="face three"></div>
    <div class="face four"></div>
    <div class="face five"></div>
    <div class="face six"></div>
</div>

As you can probably imagine, given the name of this post, all the magic happens in the CSS. Let’s take a look starting with the styles applied to the cube’s wrapper.

.cube {
  height: 240px;
  position: relative;
  margin: 0 auto;
  width: 240px;
  -webkit-transform-style: preserve-3d;
}

Most of this is simple stuff you will have seen a million times before. Height and width are self explanatory, position is relative and we’re using the margin to center the cube horizontally. However, something you may not have seen before is ‘preserve-3d’.

So what is ‘preserve-3d’ and why do we need it? You will require this if you are applying 3D transformations to the children of an already transformed element. Without it the child elements will appear on their own planes and would appear flat in front of their parent, as show below.

Next we need to apply styles to the cube’s faces. The initial .face class is relatively straight forward. Here we just set a height and width (remember them, we’ll need those later), then just add some general aesthetic stuff like some inner shadow and opacity to make the cube look nice.

.face {
  background-color: rgb(50, 50, 50);
  -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
  height: 240px;
  opacity: 0.7;
  position: absolute;
  width: 240px;
}

The only important thing here is ensuring positioning is set to absolute. This is so we can rotate the faces and move them about easily to create the cube – which brings us onto the next step.

Finally, the bit where our cube comes together. We have to rotate our faces on certain axis, as beautifully illustrated by me on the right (that’s right I’ve got 3 arms) and move their positions to create a cube. We are using the size (height/width) of the faces to position them. Simple!

.cube .one  {
  background-color: rgb(242, 24, 25);
  -webkit-transform: rotateX(90deg) translateZ(120px);
}

.cube .two {
  background-color: rgb(235, 41, 158);
  -webkit-transform: translateZ(120px);
}

.cube .three {
  background-color: rgb(252, 209, 22);
  -webkit-transform: rotateY(90deg) translateZ(120px);
}

.cube .four {
  background-color: rgb(44, 45, 213);
  -webkit-transform: rotateY(180deg) translateZ(120px);
}

.cube .five {
  background-color: rgb(125, 105, 181);
  -webkit-transform: rotateY(-90deg) translateZ(120px);
}

.cube .six {
  background-color: rgb(22, 226, 38);
  -webkit-transform: rotateX(-90deg) translateZ(120px) rotate(180deg);
}

Now we’ve got our cube let’s chuck in some simple JS to make it rotate in relation to the mouse position. Once again we’re using WebkitTransform rotateX and rotateY but this time we’re applying the style on the fly with JavaScript.

$(window).on('mousemove', function(event) {
    var width = $(window).width();
    var mouseX = event.pageX - (width * 0.5);
    var height = $(window).height();
    var mouseY = event.pageY - (height * 0.5);
    var xAngle = (mouseY / height) * 90;
    var yAngle = (mouseX / width) * 90;

    $('.cube')[0].style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
});

You can see a standalone version of the finished cube here and for further reading take a look at Peter Gasston’s Adventures In The Third Dimension: CSS 3D Transforms article over on Smashing Magazine’s website.


Posted in 3D, CSS, HTML5

CSS 3D Digital Clock

Leave a comment 3 July 2012

Ah yeah I know – it’s been a while. Moving to a new job, in a new city, in a new country, has resulted in very little time to write code in my spare time. Also, the fact that summer here in NYC is awesome doesn’t help!

This is an experiment based on some old AS3 Papervision things I built a few years ago. I’ve started messing around with CSS’s 3D capabilities and thought I’d have a go at recreating the digital clock I made. It’s not exactly the same and I think there’s much more I can do with this but for now here’s a little something I just put together.

Click here to view it. Eventually I want to change the z-index of the cubes based on the perspective and mouse position but I haven’t got round to that yet.

As with many of my experiments the colors are completely random, so it might look great! Or it may look disgusting. Also, depending on the browser and your machine etc etc it may not render. A lot of this stuff is far from being supported and this experiment will only work in Chrome or Safari. It does, however, render on the iPhone – which is sort of cool, but it runs painfully slow so the clock aspect is kind of lost.

If I can find the time I will write a short tutorial / explanation of how I built this and more about 3D in CSS. Don’t hold your breath though hey.


Posted in 3D, CSS, Experiment

HTML5 Space Monkey

1 Comment 27 February 2012

After finishing at Specialmoves last week I now have a few weeks off before moving to New York and getting started at Fi, so plenty of time to work on all the little experiments and ideas I’ve had recently.

I’ve been really enjoying playing around with HTML5 and thought it would be a nice challenge to re-write my Flash Space Monkey game using only HTML5, JavaScript and CSS. I’m really happy with the result and it even works quite nicely on iOS, where you can control the game by tilting your iPhone/iPad from left to right, taking advantage of JavaScript’s native device orientation events.

The character is made up of nested dom elements and is controlled by CSS3 transitions. The platforms are transparent PNGs drawn to a canvas element.

I was originally thinking of creating the game using some of the many great JavaScript libraries available but ended up just using a bit of JQuery (of course) and also RequireJS, which I found really useful.

It’s only been tested on a limited amount of devices so any feedback on performance is welcomed. Also, since I’m still relatively new to extensive JS and CSS, any tips on how I could do things better in the future would be cool too. Enjoy the game and see if you can beat my high score of 20,000+!!!


Posted in CSS, HTML5, JavaScript, Physics
← Older posts