Perspective anyone?

If anyone is interested, I found the complete code from that same period as the rotation of a point in the previous post of a 3D camera (perspective transformation) I once wrote.

I was most ambitiously creating a 3D animation and object editing program. And I had never even heard off openGL.
So it's a little bit of a different approach than OpenGL and it uses CPU exclusively, but I needed it then to do CartoonRendering, back when I invented it.
It uses a camera object, an axis with a screen/plane floating in front of it. For every point in the model, I project it onto the screen.
The whole thing came about when I saw perspective explained on a plate from the Dutch golden age. A guy was looking through a glass plate with one eye closed and could trace the contours of a cube onto the glass plate. It was so simple.

So the eye became an axis, the glass plate a plane and I basically did the same thing in the program.

The fun thing is, it's a much easier to understand model, than the openGL model with a four dimensional array. Which has been optimised for computers, not for human understanding.
Honestly, the first time I saw what openGL was doing, I felt my brain was dripping out of my ears.
Also getting screen coordinates back from openGL can be a bit tiring. But for interactive 3D environments screen-coordinates (or virt-points as I dubbed them back in 1993) are sooooo handy.

This system doesn't use the matrices that you need for openGL either and is quite easy to understand if you keep this picture in your head. It's probably also easier for emulating specific camera's if you know the focal lengths of this lens and the size of the objective, although I never tried.

So anyone up for a tutorial? Just say the word. (Actually, literally comment, because I'm not convinced anyone is interested.. Maybe everybody is perfectly allright with openGL, webGl and whatever else is out ther and it's quite a voluminous tutorial if I want to do it right)

Rotating a point in 3D

It seems so trivial in this age of OpenGL, WebGL and many other beautiful libs, that will do the hard work for you. And then you find yourself in a position, where you need something simple and it's nowhere to be found.

Rotation of a point around the origin or O  or {x:0,y:0,z:0}
How hard can it be.
Well, it's not simple.

Here is the code in as3 and javascript

function rotatePoint(p,rx,ry,rz)
{
    var x,y,z,q={};
    x=p.x*Math.cos(rz)-p.y*Math.sin(rz);
    y=p.x*Math.sin(rz)+p.y*Math.cos(rz);

    q.x=x*Math.cos(ry)-p.z*Math.sin(ry);
    z=x*Math.sin(ry)+p.z*Math.cos(ry);

    q.y=y*Math.cos(rx)-z*Math.sin(rx);
    q.z=y*Math.sin(rx)+z*Math.cos(rx);
    return q;
}

The parameters:
p is a point, so an object with {x:x,y:y,z:z};
rx is the amount you want to rotate around the x axis in radians.
ry is the amount you want to rotate around the y axis in radians.
rz  is the amount you want to rotate around the z axis in radians.

It returns a point with the new rotated coordinates. Don't try to understand the maths, it took me three days to put this together.

So in practice, I have a point 1,0,0 and I want to rotate it around the z axis 45 degrees.
The answer is in this case pretty obvious, it would be 0,707...,0.707....,0 or cos(45),sin(45),0
So how would we go about doing that with the function?

  p.x=1;
  p.y=0;
  p.z=0;
  p=rotatePoint(p,45/180*Math.PI,0,0);
  trace(p.x+","+p.y+","+p.z);

Output:
0.7071067811865476,0.7071067811865475,0

Halleluja, you can now play around with the other axis and stuff.
Any time you need something rotated, this function is your friend.
I've been using it on an off since 1988 just needed it again for my Delft project (about which I will tell you more later, but now, I'm sworn to secrecy :)
I found it in an ancient piece of code from 1996 in C, so I rewrote it to Javascript/As3.
And there you are.

Site Takeover animation (Hybrid Site lib and CreateJS)

Site Takeover

Today I'm making a site takeover animation and programming the takeover.
The site is in HTML5 and contains a lot of javascript.



The takeover should be viewable in all browsers, the animation includes sound (and sound transforms) and must fill the whole screen (or as much as possible) while staying transparent.
On a click or touch, the takeover should abort and give back control to the site.

The takeover animation consists of two parts:

• AT STARTUP: A cartoon man walking into the screen, delivering a message and leaving the screen on the other side. Before he leaves, he points at the menu and invites people to look around.

• AT IDLE: When the user does nothing for 5 seconds, a cartoon guy pops up and draws attention to an offer.

Technical setup

I like to keep things simple for the client, so all they have to do is include a javascript and call one function when the page is done loading.
I'd do that normally, but this page has a lot of javascript.

Then the takeover.js file creates a new layer containing an transparent, borderless, seamless iframe and fills it with a page.
This is where the magic happens.

The page Includes the takeOverLib, which checks browser capabilities and screen size and decides if we create a flash object, or a HTML5 animation (It is actually not a flash fallback, but more of a flash fallforward).

To keep production feasible the animation.swf and animation.js (using createJS lib) both load the same assets (images and sounds). The sound assets are done in mp3 and ogg both, to accomodate fireFox browser.

Creating the assets

In this case the cartoon-guy was allready designed, I just animated it in Flash to the voice-files that were also allready recorded. I just added the footsteps. There was very little text, so I exported that as curves, keeping the actual text on a reference layer.

I created a preliminary takeover, using only flash, to present to the client and when I got the go ahead I created all assets as CreateJS assets in Flash CC Pro. The audio output I replaced with the original audio (why re-convert it?) and I created the ogg samples manually in Soundforge.

Then I rerouted the audio in the CreateJS manifest manually to have Flash and CreateJS use the same folder.

Programming the Animation

The animation doesn't know how big the screen is. It was decided to have the cartoon man come in with a perspective effect. This meant I had to calculate the starting point (and size) of the man from the position I want him to end up in. (Center screen).

To do this, I put the guy in center screen and used the movement function I created repeatedly until it was out of the screen. Then I would start the animation and as long as the user doesn't resize the browser in the first bit of the animation all will go fine and he will end up in the middle of the screen.

Then I had to make sure that if the user did resize the browser, the animation was recalculated.

I programmed this in Flash initially, but I knew I had to do it again for createJS. That is something that still bothers me about createJS, but it was the easiest way to do this.

Converting this from the original to CreateJS was a job of a few hours.

This is where the hybrid lib definitely wins from Flash/CreateJS, but it doesn't (yet) support vector-animation natively. CreateJS does and it is the only feasably way I found to get vector animation output in anything other than Flash. (Although there is always Swiffy!)
There is an open standard (Animated SVG) and it would be nicer and more honest of adobe to at least offer export to this or svg-frame for that matter. I could then use Flash as an IDE for whatever output I want.

Programming the takeover

The takeover itself was rather simple. A full screen, seamless iframe. The page inside the iframe starts by finding out all it can about windowsize, capabilites etc. Then it sets up a click listener, that aborts everything on the first click!
It also keeps track of how long the animation is supposed to be, so that if you would fail to stop the animation (or if something went wrong) the user would get back system control after a while, no matter what!

Hybrid site lib (v0.5)

The hybrid wasn't responsible for any graphics this time, but did all the browser sniffing and pageheight getting. It also didn't stick to a preset aspect like the game lib. Well, it's a start.

Facebook developer worden om insights te gebruiken

Stel, ik  heb een spel voor u gemaakt op facebook en u wilt gebruik maken van facebook insights om te zien hoe vaak het spel gespeeld wordt en boodschappen gedeeld worden.
Dan zult u zich eerst moeten registreren als developer op Facebook.
Dit stelt niks voor, feitelijk wil Facebook alleen uw telefoonnummer registreren en verifieren.

Het proces gaat als volgt:

• Wordt vrienden met SnoepGames (dan is het makkelijker u uit te nodigen voor de gezamelijke app en kan ik me ook niet vergissen als u  een algemene naam hebt.) Dit is mijn bedrijfsaccount, ik heb ook een familie en vrienden account.

• Er komt een developer request om insights te gebruiken.

• U wordt doorgestuurd naar developers.facebook.com
  Daar volgt u een zeer eenvoudig vier stappen plan. Als u twijfelt ziet u hier voorbeelden van hoe ik het zou invullen, als ik u was.
  
  Klik op de groene knop en de wizard gaat van start.

• Accepteer de voorwaarden door op het vinkje te klikken, klik dan op doorgaan.

• Vul een telefoon nummer (06) in en wacht op het smsje, vul dan de bevestigingscode in. Facebook vraagt met wie de nieuwe informatie mag worden gedeeld: kies: alleen ik!

• Vul het grote formulier als volgt in: Negeer de bovenste twee, Kies web, overig en Games. Vergeet niet de twee vinkjes onderaan UIT TE ZETTEN! Facebook negeert hier de Nederlandse wetgeving over OPTING -in! Het is mogelijk om deze later uit te zetten, maar dat is lastiger.

• De laatste stap is op klaar klikken.
  u wordt gefeliciteerd met uw developer-schap.

• Als u nu in facebook komt, staat er een kopje ontwikkelaar aan de linkerkant. Klik daar op de app, waarvoor ik u heb toegevoegd en u hebt toegang tot de insights-statistieken

• Klik op alles weergeven om bij de grafiekjes te komen. Voor de duidelijkheid, dit is voor de campagne begon, we zien hier de insights van het test-traject. Dit vind u ook op: https://www.facebook.com/insights/

Social Gaming

As of today we to are a social gaming company.
My first (solo) facebook game has been launched.

Ofcourse I used to do social games for Ludatic, but this is the first time I did everything myself and had to dive into the backend. The facebook API is remarkably simple. So simple in fact, that I am going to implement it for Making Games as well.

Hybrid Platform. HTML5 and Flash Games.

2013 saw the birth of the “Hybrid Game Platform”. This platform is basically a compatibility layer written simultaneously in Flash and Javascript.

This means, you can write game code once and export as Flash and HTML5. Now this may seem unimpressive, as adobe claims the same thing with createJS. But the fact is, that there needs to be a lot of conversion, before your game works again.

With the Hybrid platform we are talking the same language in both cases. The main advantage of this is, your choice of platform is now a lot wider.

Mobile platforms have a very limited support for Flash, but older browsers don't support HTML5.

The Hybrid platform analyses the browsers capabilities and chooses the right techniques to display.

This is best practice anyway, but used to mean, you had two versions of the software that had to be written.

And if you change anything (like texts, logo's etc) you have to change it twice. This lead to more cost.

With the deployment of the hybrid platform, this cost is literally cut in half, because you only have to do everything once.

Also, by keeping Flash as an option, you can then convert the Flash-apps to Mobile Apps quite easily.

All round flexibility for a very low price.

The Hybride Platform has been succesfully deployed for three different clients in 2013.

(Sinterklaasjournaal (just HTML5, no flash fallback), AanZee vakantiehuizen, VillaXL).

I will add links when these go live 15th of  januari 2014!

Hybrid Site Platform

I'm now working on a similar platform for sites.

As2 to As3 conversion

Since Adobe doesn't support as2 anymore, (some) developers and usually designers are struggling with converting old as2 projects to as3. There are a number of online converters, none of which work well.

So what's the solution?

I'm sorry to say there is no ready solution...
This is mostly because as2 and as3 are built on different principles, that do not mix well.

So I decided to start a service for as2 to as3 conversion. Or if you want to update your site, why not go HTML5 as well, see the post about the hybrid platform!
I would like to say something about prices here, but that is quite impossible.
I do it at 75,- Euro's an hour, but that price may be a bit misleading, because I usually work quite fast.  Contact me through the contact form.