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:

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

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.)

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:

http://games-maken.blogspot.nl/2014/06/games-maken-les-1.html

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

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).

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;
}

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)