woensdag 26 november 2014

Closing soft keyboards on 'enter' on mobile

Have you ever run across this problem:
You use contenteditable because every browser claims it's supported and you can style it much better than a text-input.
And then the soft keyboard on mobile just won't shut when you are getting just a single line from the user??

Well here is the answer:
http://jsfiddle.net/uc7merbd/1/

maandag 18 augustus 2014

Uploading images in HTML5 by dropzone.

Uploading images in HTML5 by dropzone.

HTML:
<div id="drop_zone">Drop files here</div>

<output id="list"></output>

STYLE:
 .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
#drop_zone {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 20pt bold 'Vollkorn';
color: #bbb;
}
JAVASCRIPT:
function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var files = evt.dataTransfer.files; // FileList object.
    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) 
    {
      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }
      var reader = new FileReader();
      // Closure to capture the file information.
      reader.onload = (function(theFile) 
      {
            return function(e) 
            {
              // Render thumbnail.
              var span = document.createElement('span');
              span.innerHTML = ['<img class="thumb" src="',
                                e.target.result,'" title="',
                                escape(theFile.name),'"/>'].join('');
              document.getElementById('list').insertBefore(span, null);
            };
      })(f);
      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
       
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }
  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }
  // Setup the dnd listeners.
  var dropZone = document.getElementById('drop_zone');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
TEST IT: http://jsfiddle.net/sdorLj3e/

dinsdag 8 juli 2014

Loopable Soft Noise

Generating Soft Noise on a Canvas

I'm making a space paralax game and I need a function for soft, loopable noise, to make space a little more interesting.
I've been looking at perlin-noise, but speed is an issue..

So I've been fiddling to generate this:
http://jsfiddle.net/LwDC9/1/

As you can see the texture is generated to be completely loopable at ANY format. (Perlin noise usually needs something like 2,4,8,16,32... etc)
If you want a 2048x2048 loopable texture, you'll have to wait a bit, but it'll get there. You can reduce the complexity of the rendering to optimize.

Also the texture is transparent. This is because I want to use it in a parallax.

So let's use that technique to create a huge (640x480) spaceview animation that you might know from games. (using a parallax)
http://jsfiddle.net/LwDC9/3/
Please try the fiddle, the image doesn't do justice to the animation.
I've put some text underneath the canvas, to show it's pretty transparant.
I'd like to see what the performance is on an iPad or something, but right now, I'm pretty happy with the performance in Chrome.

Now when a star dissappears it immeadeately reappears on the other side, the same goes for the colors. That kind of kills the illusion.
So I made the generated bitmaps bigger than the shown ones. I generate 4 bitmaps of 1024 by 512 and show them in a frame of 800x200.

http://jsfiddle.net/LwDC9/5/

Delft stationshal plafond - virtual reality model

Ceiling is ready

The ceiling of Delft is ready, a great moment.
Now we can see the effect we've only seen in Virtual Reality during the design fase for real.
And the match is perfect.

dinsdag 1 juli 2014

Resizing, cover, center, fit

When you work with pictures and layouts this problem seems to crop up every time:
How do you handle content that doesn't fit?
With the mobile devices ranging from 16:9 to 4:3 and with strange formats like 3:2, 16:10, 5:3, 8:5 etc
this is becoming a more and more pressing matter.

It's like when your TV tries to fit a 4:3 image in a 16:9 container. Almost all solutions given by my remote control suck completely, why is that? In my book there are only two options:


  1. You want to see everything (fit) 
  1. You don't want the famous black bars. (cover). For instance if you have a decorative movie about a fire, or clouds, anything that is more atmosphere than content.
http://jsfiddle.net/rRE5L/
Cover exactly (centered) code:
http://jsfiddle.net/rRE5L/1/

So I've been fiddling a bit.. You can set the original size and the box size to see what happens in the different scenarios.

Fit exactly code:

But I'd like to have something a little more precies. I'd like to be able to set a box inside the image, that tells us which part of the image is important. That way we can make it fit the container in the best possible combination of the above solutions AND the script can figure out what that needs to be itself from just that data for EVERY container.
I'd like my script to be intelligent enought to arrive at the conclusions above without further assistance.
So it would try to cover as much as possible, using as much of the picture we can show. Unless that means the important bit gets cropped. In that case it will FIT the important bit (and if that means you end up with bars, so be it. It will center the result, to have the bars nice and even.

Now this is not really a solution for TV's any more, because on a tv screen the important bit moves around. But if your problem is you want to watch a movie with subtitles and still see as much of the movie as possible, it would be a solution. So TV-manufacturers pay attention, I want this on my next one!!!

I'll get back with a fiddle on that soon enough..

maandag 23 juni 2014

Advanced gestures

The idea of gestures comes from touch screens, but it's actually quite usefull for mouse too.
I've been toying with these gestures here:
http://www.snoep.at/labs/html5/demo_gestures/

Should work with both touch and mouse.
Working on the multitouch, can't predict what will happen there yet.

DEMO:

vrijdag 13 juni 2014

Hybrid can do webapps!


 Hybrid v1.2.0

I'm proud to announce that the hybrid is now capable of delivering first class web-apps.
I can set stage-scale-mode to 'lineair' (which is like flash used to behave) and 'responsive', which is more what you'd expect from HTML5 webapps.

I've just been creating all interface elements that anyone could need in my opinion like scrolling panes, canvases, buttons, lists, menubuttons etc. It's efficient because it uses spritesheets to define the look of all elements, which makes it possible to make it look real fresh and modern and actually add a splash of color here and there..
(I left out some things I don't like, like user-dockable toolbars, I don't get the concept, I think it's just bad design. You should know better than your user where to put stuff..)

If there turns out I need more, I'll make more. But for now, it's party time!
I'll be using this library to make the apps AND the games for Making Games.

This is the first taste of a brand new version of the Hybrid.
So without further ado:

http://www.snoep.at/labs/html5/puppet_editor/

The webapp I've been working on. It looks great on an i-pad (now that I've fixed the menu-button-bug)
I've only tested it in Chrome, Firefox, Safari, IE and on an I-pad.
The interface works great (like I expected) on all.

I actually need this puppet-editor for a game I'm creating right now, so I'm as happy as a fish in a pond.
I'll be focussing on making this thing do stuff, instead of just looking pretty, so I'm writing down my wishlist, to get back to later.

Wishlist

There is always something, isn't there..?

  • I'm still in the process of making multi-touch support.
    For web-apps that is a cool feature that makes everybody's life a little easier.
  • Also I have a wish to make popups/windowing a little more general and easier, but I haven't figured out an easy syntax yet.
  • Flash support is at this stage theoretical.. At this point I still have more experience with Flash interfaces than with HTML5, so I'm sure I will do it soon without a single re-design of the Hybrid's syntax. 
  • The popup on the right-mouse still states it's a game engine. While that is true, it has just become something a little more. I just don't have a word for it yet. Any suggestions..?
  • Text in the popup is still selectable on drag.. Hmmmmm. A little rethinking of the popup might be in order.
  • It doesn't handle the iPad orientation change event without trouble yet. It works if you reload the page in the new orientation, but apple doesn't think of reorientation as resizing. Oh dear, I hate it when people just shout: "This is a special case, normal rules don't apply, because WE call apples: 'oranges' "
    On Orange-iOs that seems to happen quite a lot. (I'm one of those people who started programming when you had to negotiate everything with the bar-tender if you were programming on a Mac. I might be slightly biassed, but I never understood this urge to make life hard on developers.)


zondag 8 juni 2014

Games maken (les 1)

Games Maken in HTML5 , les 1

Voor wie?

Deze lessen zijn specifiek gemaakt met vragen die gesteld werden door leerlingen die ik een gameworkshop gaf. Ik heb de afgelopen vijf jaar regelmatig game-workshops gegeven.

Ik vermoed dat deze lessen geschikt zijn voor iedereen die nog nooit iets met games heeft gedaan, maar dat wel graag wil. Het is ook een goeie bron om voor het eerst te leren programmeren.

Wat heb je nodig?

Een computer met internet. Verder NIKS! Je kunt dit in een internetcafé huren voor de prijs van een kop koffie..
We gebruiken alleen software die gratis (op het web) toegankelijk is en je hoeft niks te installeren.

Verhuisd naar:

vrijdag 2 mei 2014

Error Handling for minified javascripts.

Why we minify

Javascript is often minified for production. This is also called 'uglification' sometimes. It means your javascript  is written like one long line.

What is the problem?

Minification can sometimes cause errors. It's hard to see if you made an error, or the minifier.
Sometimes an error just happens. We're not perfect.
In a minified file you'd get an error in your console like:
 Uncaught ReferenceError: faultyReference is not defined script.js: 2
When line 2 is 4000 characters long, it's a little heavy. Especially since most minifyers will also minify the variable faultyReference to something like: a132.


New standard fixes the problem

In the new standard for the window.onError event you don't just get a line, but also a column.
You can generate an error message for yourself:
 Uncaught ReferenceError: faultyReference is not defined script.js: line 2, col 3704
Now you know exactly where to debug...

Tell me how

Ok!
  1. start of 2014 this was working in Chrome. I don't know about other browsers, but if all else fails, develop in Chrome (I think it's the best development browser anyway) 
  2. before you execute any other script add something this:
 window.onerror=globalErrorListener;  
 function globalErrorListener(msg, url, line, col, obj)   
 {  
      console.log('--' + msg + ' ' + url + ': line ' + line  
      + ', col ' + col);  
 }  

Now in your console, you'll find the exact column where the error occured.
The obj is the stack, you can also log that, just add it to the string.

Tadaaa! And thank you chrome for implementing so fast. Hope this helps someone, it sure helped me!
more about this

vrijdag 18 april 2014

Vaarwel Adobe, vaarwel Creative Cloud

Gedurende de afgelopen 6 jaar heb ik veel geprutteld over Adobe.
Toch ben ik in het rijke 'bezit' van een licentie van de volledige Creative Cloud.
Nu heb ik besloten dit te gaan afbouwen.

Sinds Adobe Flash van Macromedia kocht is er veel veranderd in de wereld, maar ook in Flash zelf. Niet altijd ten goede. Veel updates met interface en workflow 'verbeteringen'.
As3 was een goede verbetering, maar nu backwards compatibility is opgegeven ben ik feitelijk alles 'kwijt' wat ik voor die tijd heb gedaan. Je kunt niet meer compileren. Dus heb ik gauw mijn oude licentie van flash5.5 weer geïnstalleerd. Ik kan nu weer dingen compileren om wijzigingen te maken.

Ik kan oude projecten converteren naar as3, maar als je dan toch bezig ben, waarom dan niet naar HTML5 en javascript? Da's tenminste open source en er wordt niet zomaar besloten om het niet meer te ondersteunen.
Ik werd het continue inloggen bij Creative Cloud wel erg zat en nu is als klap op de vuurpijl Flash opeens niet meer correct geïnstalleerd. Herinstalleren met Creative Cloud is een crime herinner ik me nog van de vorige keer dat dit gebeurde. Da's 2 x in 4 maanden.

Ik ben (al weer een paar maanden) bezig met het bouwen van een eigen games-platform in HTML5 en ik zeg: het is goed te doen. Er is veel documentatie en met het gebruik van een library als JQuery en goede programmeerkennis, wordt het zelfs gewoon een kwestie van even doorzetten.
Ik gebruikte nog wel Photoshop om assets te maken voor mijn game games en ook Flash voor animaties.
Nu ben ik mijn gewoontes aan het veranderen.
Ik ben aan het afbouwen. Hoe doe ik dat?

Ik ga langzaam over naar GRATIS, open source software.
-Notepad (geleverd bij windows) geeft je alle programmeer mogelijkheden.
-Chrome (en vrijwel iedere browser) heeft ingebouwde debug-mogelijkheden voor javascript
-Plaatjes maak je met GIMP (gratis Open source Photoshop variant, zonder hele fancy features, maar degelijk.).
-Vector tekeningen met Inkscape (SVG gebaseerd, maar erg flexibel)
-Animatie: http://www.pencil-animation.org/
-Muziek en geluid.. Adobe heeft geen muziek of geluidsprogramma, dus dat heeft niet specifiek te maken met Adobe. Ik heb/had Sony Soundforge, maar Audacity kan bijna alles wat soundforge kan..) Muziek maak ik met het gratis Anvil Studio.
-Video heb ik nog niet besloten, maar ik merk dat ik het meest werk met Flash 5,5 (creative cloud heeft op het moment even een probleem met FlashCS6, deze wil NIET openen.)
Voor alle andere dingen kijk ik naar deze lijst onder het kopje freeware: http://en.wikipedia.org/wiki/List_of_video_editing_software

Da's zo'n beetje alles wat ik doe.
Tja, dan rijst wel de vraag.. Waar heb ik Adobe nog voor nodig?
Continuïteit krijg ik waarschijnlijk eerder in  open-source projecten en deze hebben de neiging om algemeen geaccepteerde formaten te gebruiken. Dus zelfs als ze ermee stoppen, heb ik meer kans mijn video, game of plaatje of geluid later nog te kunnen openen en bewerken.

Maar je kunt toch licenties kopen.. Nee. Adobe heeft besloten alleen nog gas te geven op de 'creative cloud' en niet meer op de 'creative suite' (licenties van 'gewone' software)

Dus, goed voornemen: Vanaf nu alleen open source software, zo min mogelijk corporate afhankelijkheid en ik gebruik Adobe producten alleen om mijn oude werk te openen en om te zetten naar zoveel mogelijk tijdsbestendige formaten.
Dat zal nog wel even duren, want ik heb 12 jaar lang met veel plezier en veel gegrumbl Flash gebruikt vanaf Flash2.0 van Macromedia.
Maar ondanks dat dit een afbouw-proces is, vat ik het voor mezelf even samen als:
"Vaarwel Adobe, vaarwel Creative Cloud." We hebben het mooi gehad, maar ik moet verder en jij gaat de verkeerde kant op...
Ik ga de toekomst fris tegemoet, zonder enige kosten voor mijn software.
In ruil zal ik mijn steentje bijdragen op de forums van de open source software..

Goed, nu weer gauw proberen Flash CC aan het werk te krijgen, zodat ik een wijziging kan maken in iets dat ik vorig jaar voor een klant heb gemaakt. (Want met Flash5.5 compileert dit weer niet, omdat het is gemaakt in FlashCC6.0, een versie die nu verdwenen is in de creative Cloud).


zondag 2 maart 2014

Scripts generating scripts - javascript and illustrator

I think I've found a new workflow that may not be new, but might be new to some.
I had the problem of having to generate a lot (3800) of files in illustrator.
These files had elements that would be generated  (by Flash) and had to be integrated into ai files.
Also I had to present it in HTML5 using x3Dom to get an idea of what I was doing.

Now I had made a as3 program, that took in 3D data from Rhino. (We just exported point and bi-arcs in text from Rhino) My script in Flash converted this data into 2D files vector that could be used as textures (when stamped down to PNG's).
We used the PNG-textures for the preview in HTML5, so we could walk through the textured building (this was for an architect), but we also needed the (vector) textures to be saved in a format that a printer could work with, we setlled on PDF, which I could generate from Flash with a library..

First step: generating JS from Flash for a Preview:
I had already interpreted the bi-arcs in Flash, so to do it again in Javascript wouldn't be much of a problem, but it turned out to be easier, to generate the javascript from Flash.
This way, I could spend my time elaborating on the data where I needed it and and leaving out what wasn't important.

Second Step: generating a JS script to generate files in Adobe Illustrator:
Although we first decided the output would be PDF, because the library did not export layers in the PDF page and because spot-colors were a problem, it turned out to be easier for the printer to get AI files instead.
I was able to comply, by doing the same trick again. I used Flash, to generate Javascript (JSX) that extends adobe illustrator and uses it to generate illustrator files.
(My basic generation script, without the parts generated by Flash is below)

This last step seems a quite promising development. We could go from Rhino (a scripted environment) to Flash (a scripted environment) and then use Illustrator to generate print-ready files (in again a scripted environment).
This means, that this workflow could be very helpfull for anyone with the same kind of problem.

Photoshop, In Design and Illustrator all support javascript extensions for scripting. In stead of going through actionscript (flash) to generate the scripts to extend illustrator, I could have used Javascript to generate the same. Also Adobe makes a point of supporting applescript and VBscript as well.
This enables the developer (or scripter) to do his work and most of the debugging in the environment he's most comfortable with and then exporting to whatever environment he wants. It may seem a bit cumbersome at first, but I assure you, once you get your head around it, it's VERY flexible.

One word of caution: Debugging jsx in illustrator sucks. So get a working script and let your script modify it to just add the data.

Here is a tutorial to get you started:
http://creativedroplets.com/tutorial-scripting-for-illustrator-cs6/

There is a LOT of support for scripts from adobe:
http://www.adobe.com/devnet/illustrator/scripting.html

And it's actually well documented this time. It only took me a few hours to write my generation script, which was my first script ever.This was a very nice surprise. Even though I'm not all that familiar with Adobe Illustrator, I had no trouble finding specific things like information about layers and spotcolors. I actually learned a few things about the way illustrator is put together.

I've bitched about Adobe's lack of vision in the past when compared to the things Macromedia used to do (and I'm still behind everything I said), but this seems a very promising new direction, which could result in a very active community.
When something is good, it needs to be said as well: Well done Adobe.

Just to be complete, here is my basic rendering and generation script.
I use Flash to create the data this script will use to generate ai-files, with two layers and two spot-colors.
It's been scrounged together from various sources offcourse, but it will tell you all you need to do, if you just want to generate ai-files by drawing paths into them.

To get you started, copy it into a text-file. name it jsx. The go to illustrator, choose scripts from the menu.
Navigate to the script and select it.
It will ask you to find a directory and it will put three files in it with generated content.
It's well commented, so it should be enough to get you started on your own.
If you like it, drop me a comment, to tell me what you made :)

/**********************************************************

Basic Generation script for illustrator made by Hjalmar with Flash...

*********************************************************/

/** 
 Creates a new document, 
 draws a baffle and 
 Saves every document as AI
*/

// Main Code [Execution of script begins here]

try {
 
 // Get the folder to save the files into
 var destFolder = null;
 destFolder = Folder.selectDialog( 'Select folder for AI files.', '~' );

 if (destFolder != null) 
 {
  var options, i, activeDoc, targetFile; 
  
  // Get the PDF options to be used
     
  for ( i = 0; i < 3; i++ ) 
  {
   // create a document!
   // Preset
   var doc_preset = new DocumentPreset;
   doc_preset.units = RulerUnits.Centimeters; // normal is .Inches;
   var activeDoc = app.documents.addDocument(DocumentColorSpace.CMYK, doc_preset); // add document
         
   // Get the file to save the document as ai into
   targetFile = this.getTargetFile("baffle_"+i, '.ai', destFolder);
   
   // set up the layers!
   var plotterLayer = activeDoc.activeLayer; // there's one made automatically, so we use that one... activeDoc.layers.add();
   plotterLayer.name = "cutcontour";
   var artLayer = activeDoc.layers.add();
   artLayer.name = "stationsblauw";

   // create all colors
   // Define the new color values in CMYK, but we are going to make them spot colors!
   CMYKblue = new CMYKColor();
   CMYKblue.black = 50.0;
   CMYKblue.cyan = 80.4;
   CMYKblue.magenta = 0;
   CMYKblue.yellow = 0;

   CMYKline = new CMYKColor();
   CMYKline.black = 0;
   CMYKline.cyan = 0.0;
   CMYKline.magenta = 32;
   CMYKline.yellow = 32;
   
   // Use the CMYK color object in the creation of spots
   // Create the new spots
   var blauwspot = app.activeDocument.spots.add();
   blauwspot.name = "stationsblauw";
   blauwspot.tint = 100;
   blauwspot.color = CMYKblue;
   
   var linespot = app.activeDocument.spots.add();
   linespot.name = "cutcontour";
   linespot.tint = 100;
   linespot.color = CMYKline;
   
   // Create a spotcolor objects, set the tint value,
   var spotBlue = new SpotColor();
   spotBlue.spot = blauwspot;
   spotBlue.tint = 100;

   var spotLine = new SpotColor();
   spotLine.spot = linespot;
   spotLine.tint = 100;

   // set the outline path as part of the plotterLayer!
   
   // Use the spot color to set the fill color
   var myLine = plotterLayer.pathItems.add();
   //set stroked to true so we can see the path
   myLine.stroked = true;
   myLine.strokeColor = spotLine;
   myLine.closed = true;
   myLine.setEntirePath([[220, 475], [375, 300], [200, 300]]);

   for(t=0;t<10;t++)
   {
    // draw a square on a random place on the artLayer
    var tbp = artLayer.pathItems.add();
    tbp.stroked = false;
    tbp.filled = true;
    tbp.fillColor = spotBlue;
    var tx=250+Math.random()*50;
    var ty=250+Math.random()*50;
    tbp.setEntirePath([[tx, ty], [tx+5, ty], [tx+5, ty+5],[tx, ty+5]]);
   }
   // Save as ai
   var saveOptions = new IllustratorSaveOptions();
   saveOptions.compatibility = Compatibility.ILLUSTRATOR8;
   saveOptions.flattenOutput = OutputFlattening.PRESERVEAPPEARANCE;
   app.activeDocument.saveAs( targetFile, saveOptions );  
   
   // we close the doc to save memory!
   app.activeDocument.close();
   
   //alert( 'Document saved as AI' );
  }
 }else
 {
  throw new Error('No folder selected');
 }
}
catch(e) {
 alert( e.message, "Script Alert", true);
}


/** Returns the file to save or export the document into.
 @param docName the name of the document
 @param ext the extension the file extension to be applied
 @param destFolder the output folder
 @return File object
*/
function getTargetFile(docName, ext, destFolder) {
 var newName = "";

 // if name has no dot (and hence no extension),
 // just append the extension
 if (docName.indexOf('.') < 0) {
  newName = docName + ext;
 } else {
  var dot = docName.lastIndexOf('.');
  newName += docName.substring(0, dot);
  newName += ext;
 }
 
 // Create the file object to save to
 var myFile = new File( destFolder + '/' + newName );
 
 // Preflight access rights
 if (myFile.open("w")) {
  myFile.close();
 }
 else {
  throw new Error('Access is denied');
 }
 return myFile;
}

dinsdag 11 februari 2014

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.

vrijdag 10 januari 2014

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.

donderdag 9 januari 2014

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.

    donderdag 2 januari 2014

    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.