Microsoft en Spamklacht.nl

Hier komen details rondom een klacht ingediend bij
https://www.spamklacht.nl/

Ik kreeg deze e-mail, nogal een flinke Rich HTML e-mail. Dat is op zich irritant, maar de inhoud is dat nog meer. Het is een commerciele e-mail, geen informatieve:

De feiten:

• Ik ben een klant.. Ik heb een product afgenomen bij microsoft. Namelijk windows 8. Na verloop van tijd, kreeg ik in windows 8 ongevraagd popups om windows 10 te installeren.
  Na flinke tijd (paar maanden) heb ik maar toegegeven, want ik vind het wel prettig ongestoord te werken en tenslotte horen updates erbij, ook als ze naggen..
  Bij het installeren van windows10, was het verplicht een account aan te maken en daarbij een email adres op te geven. Alle mogelijkheden die ik had om e-mail te voorkomen op dit e-mail adres, heb ik te benut.
• Nu kreeg ik een mail, zonder unsubscribe erin
• In de mail werd aangekondigd dat het om een serie e-mails gaat. 1/2
• Ik heb geen opt-in aangeklikt of anderszins aangegeven dat ik hiermee akkoord was.
• Het email adres, waaraan deze mail was gericht heb ik exclusief aan microsoft gegeven, voor mijn (verplichte) microsoft-account
• Via een chat, aangegeven in de mail, kwam ik bij de verborgen subscription manager, ingebouwd in Edge. Hier bleek, dat ik geen e-mail subscriptions had. (Tenminste niet geregistreerd bij Microsoft)
• Toen de medewerker dit hoorde, zei hij dat het dan geen mail van Microsoft kon zijn: die hebben altijd een unsubscribe en worden alleen met opt-in verstuurd.
  Nou, niet dus. Zie screenshot.

Ik kan hieruit niet anders concluderen, dan dat Microsoft zich niet houdt aan de Nederlandse privacywet uit juli 2009, waar een opt-in en een unsubscribe verplicht werden gesteld.
(meer info: http://www.frankwatching.com/archive/2009/05/18/de-nieuwe-wetgeving-rond-e-mailcommunicatie/)
Deze wet had een terugwerkende kracht, dus al had men mijn e-mail adres langer al in bezit bij het passeren van de wet, dan had men tot augustus 2009 om alsnog mijn opt-in te verkrijgen.
Dit is echter niet het geval, mijn opgeven van mijn e-mail adres aan windows is van na 2013 (preciezere datum weet ik helaas niet).

Als het puur en alleen informatie was, dan had ik het wellicht laten gaan, maar het gaat om een zeer wervende, commerciële mail, met loze kreten als "Het windows dat je kent, maar dan beter"
"Je apparaat gebruiken" (Sorry, maar windows, ook windows10 is NIET mijn apparaat!) Reclame voor microsoft Edge (maar gek genoeg geen informatie, hoe je uitsluitend via Edge bij de unsubscribe pagina komt) "Wij zijn er om je te helpen" "Ontdek alles wat je als microsoft-account kunt doen" en  "Laten we contact houden" en tenslotte nog een "volg ons op" voor diverse sociale media.
Verder was er weinig feitelijke informatie, maar wel allerlei links, die algemeen toegankelijke toepassingen probeerden op te starten. Het nut daarvan is zeer discutabel.
Zelfs al was het alleen informatie, dan nog was het informatie, waarom ik niet had gevraagd.

Ik kan alleen maar zeggen: foei, Microsoft, niet meer doen, anders zie ik mij genoodzaakt het aan u verstrekte e-mail adres te blokkeren, waardoor we echt niet meer kunnen communiceren.

Echter, na enig googlen, (niet bingen) kwam ik op spamklacht.nl
We kunnen dus WEL meer doen.
Ik heb mijn klacht ingeleverd, hopende, tegen beter weten in, dat Microsoft zijn leven betert.
Een operating system is geen handig sales-kanaal, maar zo ziet microsoft het wel.

Dit is het derde bewijs op rij,

1. Druk maar eens op prt-scrn en je krijgt reclame voor microsoft-drive, de printscreen functie is uitgeschakeld totdat je hier opt-out.
2. Installeer Windows10 en je standaardbrowser is opeens EDGE, ook al wil je dat niet en heb je dat expliciet aangegeven.. 
3. Installeer Windows10 en je standaard zoekmachine is BING, ook al heb je deze eerder verwijderd als zelfs maar een optie.

Alles bij elkaar, denk ik dat we deze problemen nog wel een paar keer tegenkomen.

En ik persoonlijk heb er genoeg van.

Hieronder nog de chat met Christian van Answer Tech, naar eigen zeggen de factureringsafdeling. Volgens Christian was er geen afdeling die zich bezig hield met privacy. 

 

Overigens zeg ik hier dat het gaat om een wet uit augustus 2012, maar dat was een Europese wet, die er niet door is gekomen. Ik vergiste me.

Snoep Games test Legenda

Dit zijn de devices waarop wij onze games actief testen.
Over het algemeen moet gelden: nieuwste browser werkt.
Er zijn echter veel oude apparaten in omloop.

Test Legenda 

Devices en browsers in testing as of today..

Mobiele devices

• Android phone - Honor Holly (android v KitKat)
• [APD] Default browser  (Chrome 30)
• [APC] Chrome 46 

Android Tablet - Samsung Galaxy Tab3 lite SM T110 (android Jellybean)

• [ATD] Android Default Browser 4
• [ATD] Chrome 46

Ipad

• [IPS] Safari (IoS8)

Desktop devices

Windows7

• [W7C] Chrome
• [W7IE] Internet Explorer
• [W7IE] Firefox

Windows8.1 (met touch-screen)

• [W8C] Chrome 46 
• [W8IE] IE 11 
• [W8FF] Firefox 42
• [W8FF] Opera 33

Windows10 desktop zonder touch screen

• [WXFF] Firefox
• [WXS] Safari
• [WXC] Chrome 46 on Windows 10
• [WXE] EDge (nieuwe browser windows 10)

Mac Airbook laptop zonder touch screen

• [MCC] Chrome
• [MCS] Safari

NET GELUKT!

Ik had dit jaar een zware hernia, waardoor de spelletjes van het Sinterklaasjournaal iets minder lekker en snel gingen dan gemiddeld. Gelukkig waren het er maar zes dit jaar.

SnoepGames test pagina..

Maar hier zijn ze dan, 1 uur voordat het laatste spelletje live gaat (dagkadootje van vanavond om.
Eerder vanmiddag 16:00pm had ik al een versie geleverd, die misging met Firefox, Internet Explorer en Edge.
De rest van de browsers werkte wel en iets is beter dan niets.
Maar na nog drie kwartier debuggen met Edge is de fout eruit.

Hij krijgt groene vlaggetjes op ALLE testplatforms.


Morgen ga ik aan de support werken voor het Sinterklaasjournaal. Er zijn al wat klachten binnen gekomen, maar ik krijg vooral dit soort 'bugs':

------------------
Contact info
------------------
platformstring: Mozilla/5.0 (Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.2; Media Center PC 5.0; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; SLCC1; .NET4.0E; Tablet PC 2.0; GWX:QUALIFIED; HYVES; rv:11.0) like Gecko
HybridVersion: 1.2.2
GameVersion: 1.0
------------------
bug: over 1 week is het pakjesavond!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
------------------

Leuk, maar het zijn er ondertussen al een stuk of 40, dus ik heb meer tools nodig om het kaf van het koren te scheiden. Morgen heel benieuwd of er nog 'echte' bugs overblijven.

DrakenCurve

9e generatie drakencurve

Wat is de drakecurve?

Je begint in een willekeurige richting en op een willekeurig punt op een ruitjes papier en slaat volgens recept linksaf of rechtsaf.

Zo'n recept ziet er zo uit:
r r l r r l l r r r l l r l l
Als je het recept volgt, krijg je dit:

(in dit geval begonnen we op de rode punt en in de richting naar rechts, 

je slaat als eerste af, (r=rechtsaf), dus dat wordt een streepje naar beneden!
Daarna nog eens rechtsaf, dus streepje naar links, dan linksaf, dus streepje naar beneden.. etc etc.)

Dit is een 3e generatie drakencurve.
Hoe hoger het aantal generaties, hoe langer het recept wordt en hoe complexer de curve.

generatie 1) r

generatie 2) rRl

generatie 3) rrlRrLl

generatie 4) rrlrrllRrrlLrll

generatie 5) rrlrrllrrrllrllRrrlrrlLrrrllrll

Formule voor het maken van het drakencurve recept:

0) begin met r.

1) Schrijf de vorige generatie in zijn geheel opnieuw op

2) voeg r toe (de vette R in het recept)

3) schrijfvorige generatie nog een keer op, maar verander de middelste van de reeks (van R naar L of andersom) (de rode L in al bovenstaande stappen)

4) begin weer bij stap 1)

Het gaat vrij snel, met 9 generaties, heb je al 2047 bochtjes te tekenen. Maar de figuur wordt steeds mooier.

Zelf tekenen?

Er zijn mensen die voor de lol deze curves tekenen. Volgens mijn vrouw, Marjolein, is het leuker dan puzzelen. Het is een uiterst secuur werkje. Je weet al vrij snel of je het fout doet, want een drakencurve gaat NOOIT TWEE KEER OVER DEZELFDE LIJN!
Voor mij zou het niks zijn, ik schrijf voor dat soort dingen een programmaatje, zoals hieronder.

Download dit plaatje en print het zo groot mogelijk op een A4.

Maar goed, probeer het zelf: Download het bovenstaande hokjes vel, waar precies een negende generatie op past en probeer hem te maken. Begin bij het puntje en volg de richting van het eerste streepje.
Het recept voor een 9e generatie drakencurve kun je hieronder vinden.
Vul een cijfer in voor het recept en druk maar op GO! (maar wees voorzichtig, voor meer dan 9 kon het wel even gaan duren en loopt hij van het papier af..)

Meer info:
https://en.wikipedia.org/wiki/Dragon_curve

Generaties:

Audio element aansturen met javascript

Van een van mijn studenten bij de LOI kreeg ik deze vraag. Het doel is om bij spelletjes geluid te maken, dus er moet een functie komen: playSound, die op ieder gewenst moment (bijvoorbeeld bij een botsing) een geluid afspeelt.

Er zijn meerdere manieren om dit te doen, maar de eenvoudigste en best ondersteunde door de meeste browsers is het audio-element.
Het is eenvoudig, maar toch ook weer niet. Het audio-element wordt vaak wel ondersteund, maar niet alle formaten audio.
In praktijk is gebleken dat als je 44,1 Mhz stereo audio aanhoudt en dan deze in mp3 EN ogg aanlevert, dat het geluid meestal wel afspeelt.

Zie dit voorbeeld en druk op de knoppen. Dud speelt in veel browsers (maar niet in een wat oudere Firefox), interesting in de meeste. Safari op de Mac heeft in mijn ervaring de slechtste ondersteuning.
Hieronder zie je hoe het eigenlijk werkt:
Er zijn eigenlijk, twee audio elementen, met controls uit (dus je ziet ze niet).
Deze worden door de javascript functie PlaySound ingeschakeld.

AABB collission

Ok, this may be me being stupid, but I was looking for the fastest way to check if two bounding-boxes overlap.
Given a rectangle taking the shape of {x,y,w,h}
If read somewhere on the internet the fastest way to do it was:

function BoxesIntersect(a,b)
{
   return (Math.abs(a.x - b.x) * 2 < (a.w + b.w)) &&
         (Math.abs(a.y - b.y) * 2 < (a.h + b.h));
}

Looks amazingly compact. But the result isn't very accurate. Especially if the bounding boxes differ in size much.


So I thought a bit and I came to this. Which is ALWAYS accurate. Maybe not as fast and certainly not consistently fast, because it bails out at the first sign of failure, but pretty fast anyway.

And here is the algorithm, but it would seem it would be faster, if instead of rectangles, you'd keep a minx-maxx and a miny-maxy.

function _hybridGameBoxIntersect(a,b)
{

  if((a.x+a.w)<b.x) return false;
  if((a.y+a.h)<b.y) return false;
  if((b.x+b.w)<a.x) return false;
  if((b.y+b.h)<a.y) return false;
  return true;
}

8-bit graphics on a canvas

This is just to show you how old I am.
When I started programming on a C-64, you could make your own fonts if you did the math.

You just drew a grid like this:
 128   64   32    16     8     4       2     1
[     ][     ][  x ][  x ][  x ][     ][     ][     ] =  32=16+8= 56

[     ][  x ][  x ][     ][  x ][  x ][     ][     ] = 64+ 32+ 8+4=108

[  x ][  x ][     ][     ][     ][  x ][  x ][     ] =128+64+4+2=198

[  x ][  x ][     ][     ][     ][  x ][  x ][     ] =128+64+4+2=198

[  x ][  x ][  x ][  x ][  x ][  x ][  x ][     ] =128+64+32+16+8+4+2+1=255

[  x ][  x ][     ][     ][     ][  x ][  x ][     ] =128+64+4+2=198

[  x ][  x ][     ][     ][     ][  x ][  x ][     ] =128+64+4+2=198

[     ][     ][     ][     ][     ][     ][     ][     ] =0

And you would get the letter A from just 56,108,198,198,255,198,198,0. Just 8 numbers;
We called this a BITMAP and it was actually the only way, to create monochrome graphics on the screen of my C-64. Even if you used the whole screen, it would just mean more adding up.

Now as you may know, those days are LONG gone.
These days we still use basically the same techniques, only no more counting the pixels and adding up powers of 2. Bitmaps are now also RGB bitmaps with millions of colours and billions of pixels.
But it was a great way, to get a lot of graphic in a very small amount of number.

Great for games. It was why these 8-bit games looked like that.
Now if you use 8-bit graphics on a HTML5-canvas, it will automatically blur your image.
That actualy looks very bad with small graphics blown up big.

This fact has been making it very hard to do 8-bit HTML5-games, but never fear.

(Mis)using SVG, which is now supported in all major browsers to create little blocks on the places where we put the numbers in the grid (and doing some number crunching in javascript)
we can now reuse all byte-coded fonts we had on the C-64.

With one added bonus, we can actually rotate the images and they will remain crystal clear.
Ain't that a nice bonus for a otherwise completely useless excercise.

Well.. I say useless, but animations are still quite big and this might be a very nice way to let kids create small animations to use in their own games on MakingGames.org.
I will give them a paint-like program to do the actual animation, I'm not a monster..

HTML5 Canvas, context setTransform explained from skew, rotate, scale and translate

Things are sometimes a little skewed in the world of Adobe. And if you use Adobe products to produce game graphics (like animations) that you'll use on a canvas, (and you don't want the BULK of createJS) you run into trouble quite easily.

So I needed to understand how to get THIS in terms of the canvas context.setTransform() function.



If you want to skip the explanation, my working example is at the bottom of the page.

What are matrices again?

The canvas setTransform function takes a transformation matrix: [[ace],[bdf],[001]]
Now I've had matrices in school for a semester and later dabbled in OpenGL matrices, which are a bit more complicated than 2D matrices, but I always had trouble explaining to myself what happened in either 2D or 3D. So time for some experimentation.

void ctx.setTransform(a, b, c, d, e, f);

They say, it helps to think about these parameters as:
a Horizontal scaling.
b Horizontal skewing.
c Vertical skewing.
d Vertical scaling.
e Horizontal moving.
f Vertical moving.

It helps. If only it wasn't a gross over-simplification.
Because when you start to experiment for real, you'll see the truth is a bit different.
The above is only true, AS LONG AS you do not ROTATE.
But you should be able to set skewing even when rotated, just like that.. That's the beauty of using matrices, I remember that much from school.

So I wrote this little bit of code to experiment and show you (and myself) how simple or difficult it REALLY is to get the results you expect..

If you want to rotate, make sure the angle for x and y are the same. If you want to skew, make the angles for x and y NOT the same. The amount by which they differ is the skewing.

You can visualise this as setting the rotation for the x axis and the rotation for the y axis seperately. Just like you would when you do a non proportional scale and set the length of the X axis and Y axis seperately.
Anyway, it helps me to understand those pesky matrices better and I wanted to clarify what I found to you. So here is the code-breakdown:
It basically sets up a interval and a canvas. Then in the move function draws a stroked rectangle repeatedly from -50 to +50 in x and y.
But before it does that it sets the context transform according to the frame-counter.
The first 45 frames it just rotates and moves a scaled version of the rectangle.
After the first 45 frames it skewes it in the y-direction as well..

The first 45 frames you might achieve the same by doing ctx.translate, ctx.scale and ctx.rotate.
But after 45 frames, you really see the power of setTransform.
Also note, that ctx.translate etc are cumulative and you need to save and restore your context.
With setTransform, you don't. Just set it back to the zero-matrix when you are done and want to draw normally again: ctx.setTransform(1,0,0,1,0,0);

Anyway, here is my code and it's execution:

var counter=0;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
setInterval(move,25);

function move()
{
    counter++;
    var anglex=45+counter;
    var angley=45+counter;
    if(counter>45) angley=80+counter;
    var scalex=0.5;
    var scaley=0.7;
    var origx=0+counter*2;
    var origy=100;
    var rx=Math.PI*anglex/180;
    var ry=Math.PI*angley/180;
    ctx.setTransform(scalex*Math.cos(rx),scalex*Math.sin(rx),-scaley*Math.sin(ry),scaley*Math.cos(ry),origx,origy);
    ctx.strokeRect(-50,-50,100,100);
}

About skewing

Now skew or slant is a bit of a wrongly used term normally. Speaking Mathematically we mean something else, than what most people know from Adobe's programs.

So I made another example, to mean more what most people THINK skewX and skewY mean: namely skewx and skewy are inverted: If you want the code for that one, just press the edit in fiddle button in the top right hand.
I'm not going to explain that code here, I've kept it very simple.

It's still not exactly how skew works with Adobe, because at low skews in the X the height of the object stays the same with for instance Flash. If you go skew things a lot, it will just give you very unexpected results. This is why: Adobe compensates the length of the axis that is not skewed to make it keep approximately the same height:
I fiddled around a little bit more and ended up with this:

If you are used to adobe products, this will give you something quite a kin to the skewing that you know and love. It's not an exact -pixel perfect- match, mind you, but quite good at low settings (-45/45 degrees) and that's good enough for me right now.


Original article I found (and I found was wrong:)
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform

GameSounds with WebAudio

For MakingGames.org I needed a way to create gamesounds with very little training and effort.

This is my first fiddle, that comes close:

http://jsfiddle.net/FVaWL/24/

The sound is one oscillator and 4 modulators, so with about less than 40 numbers we can describe any sound.

From this very simple recipe a enormous variety of sounds can be created.

By exagerating the gain, you get this clipped 8-bit quality, but you can make beautifull round tones as well. It's nice you can actually get those old school gamesounds and some nice warm sounds quite cheaply from webaudio.

In the later fiddle I added some controls. I guess, if I add a variant button and a volume envelop you can control with a few points, we are there.

Most of them are crap, offcourse, but that's not a problem with the making-games system, as every sound will be rated and possibly labeled by users, before it lands in a library.

Next phase might be to save the generated sound as a wav:
https://gist.github.com/pramodtech/9760681

Then use php to convert to ogg and mp3, as alas IE does not support WebAudio.

LOI Gamedesign

Afgelopen vrijdag gaf ik GameDesign op HBO niveau voor de LOI.
Als onderdeel van deze cursus zou men gamemaker moeten leren.
Aangezien gameDesign voor alle leerlingen niet echt een hoofdvak was, maar meer een verplicht nummer, besloten we de game in Javascript te gaan maken,
Gamemaker is leuk als je wilt gameDesignen, zonder iets te willen programmeren. Maar als je een multimedia/frontend opleiding doet, dan is javascript toch wel een vereiste.

Javascript zat tot nog toe niet in de cursus, hetgeen een extra uitdaging vormde:
naast basic gamedevelopment, moest ik ze ook leren programmeren.
Gelukkig heb ik dat vaker bij de hand gehad, dus op naa JSFiddle.

http://jsfiddle.net/wn8rq0m0/

var a=4;
if(1==3)
{
 a=a+1;
}
console.log("------------");
console.log("de waarde van a ="+ a);

Mijn controle vraag aan de leerlingen om het niveau in te schatten is: "Wat gaat er gebeuren?" en
 "Wat wordt de waarde van a?"
Als je hier een antwoord op wil kunnen geven moet je twee basis-concepten van programmeren snappen. Variabelen en Expressies.

var a=4;

Een variabele (in dit geval a) wordt gedeclareerd.
Dit betekent, dat je javascript verteld, hoe de variabele heet en (eventueel) wat zijn initiele waarde is.
Je kunt het zien als het maken van een doosje (met een naam) waar je iets in kan stoppen, maar het hoeft niet direct.
In dit geval heet het doosje "a" en stoppen we er 4 in.

if(1==3)

Dit is een voorbeeld van een expressie. Je kunt dit zien aan de dubbele ==. We vragen de computer of wat tussen haakjes staat waar is, of niet waar.

Dus 1=3? geeft niet waar.

Het blok code daaronder.

{
 a=a+1;
}

wordt dus overgeslagen. (Bij een ware expressie bijvoorbeeld (1==1) was het WEL uitgevoerd).
Dit is de functie van if. Na if volgt een expressie en een blok code. Is de expressie waar, dan wordt het blok uitgevoerd, anders wordt het overgeslagen.
Op deze manier kan een programma reageren op veranderende omstandigheden. De expressie kan namelijk wat complexer zijn dan 1==3? Want dat is een domme vraag.

console.log("------------");

Dan wordt de javascript gevraagd, een boodschap af te drukken, deze vind je in je console. Dat is een speciale plek voor programmeurs. Afhankelijk van je browser vind je deze op andere plekken, vaak is f12 of ctrl-shift-i een goeie plek om te beginnen.

console.log("de waarde van a ="+ a);

Dit betekent, dat er een boodschap wordt afgedrukt. Het eerste deel van de boodschap is letterlijk en staat dus tussen aanhalingstekens. (In programmeren heet dit een string). Het tweede deel van de boodschap is de waarde van a. Deze worden samengevoegd door een plus-teken.

Het resultaat van het programma is dus:
----------------------
de waarde van a=4

Als je dit snapt, heb je al bijna alles wat nodig is om een spel te programmeren.
Even vooruitspringend naar wat je in 30 stappen gaat leren maken:


Ik zal het nog allemaal uitgebreid beschrijven als ik tijd heb, maar voor nu kun je het proces terughalen met:

• http://jsfiddle.net/wn8rq0m0/1/ Loop met twee variabelen (concept3)
• http://jsfiddle.net/wn8rq0m0/2/ Loop en derde variabele
• http://jsfiddle.net/wn8rq0m0/3/ Functie (concept4)
• http://jsfiddle.net/wn8rq0m0/4/ pagina elementen besturen
• http://jsfiddle.net/wn8rq0m0/5/ pagina elementen besturen kleur
• http://jsfiddle.net/wn8rq0m0/6/ pagina elementen besturen
• http://jsfiddle.net/wn8rq0m0/7/ pagina elementen besturen
• http://jsfiddle.net/wn8rq0m0/8/ pagina elementen besturen langer worden (set interval)
• http://jsfiddle.net/wn8rq0m0/9/ ....
• http://jsfiddle.net/wn8rq0m0/10/ ....
• http://jsfiddle.net/wn8rq0m0/11/ pagina elementen besturen begewing
• http://jsfiddle.net/wn8rq0m0/12/ init loop als commentaar (handig hulpmiddel!)
• http://jsfiddle.net/wn8rq0m0/13/ snellere beweging door snellere interval loop.
• http://jsfiddle.net/wn8rq0m0/14/ objects, bouncing en gravity
• http://jsfiddle.net/wn8rq0m0/15/ catch mouse
• http://jsfiddle.net/wn8rq0m0/16/ catch mouse geactiveerd op mouse over.
• http://jsfiddle.net/wn8rq0m0/17/ ...
• http://jsfiddle.net/wn8rq0m0/18/ tweede 'sprite'
• http://jsfiddle.net/wn8rq0m0/19/ positionering beneden van tweede sprite
• http://jsfiddle.net/wn8rq0m0/20/ tweede sprite volgt muis.
• http://jsfiddle.net/wn8rq0m0/21/ ...
• http://jsfiddle.net/wn8rq0m0/22/ ...
• http://jsfiddle.net/wn8rq0m0/23/ ...
• http://jsfiddle.net/wn8rq0m0/24/ graphic voor de bal (embedded svg!)
• http://jsfiddle.net/wn8rq0m0/25/ hittest.
• http://jsfiddle.net/wn8rq0m0/26/ meer graphics toegevoegd.
• http://jsfiddle.net/wn8rq0m0/27/ geluid en blokjes toegevoegd.
• http://jsfiddle.net/wn8rq0m0/28/ blok hittest-eerste poging
• http://jsfiddle.net/wn8rq0m0/29/ blok hittest-tweede poging
• http://jsfiddle.net/wn8rq0m0/30/ finished basic game.

7/8 games for the biggest National Dutch TV-show for children since 2007

It seems I am going to disappear for a while again , so I thought I'd take the chance to do a quick post, and explain why this happens..

SINTERKLAASJOURNAAL - NTR

Nobody knows it outside of Holland and Belgium, but it's possibly the biggest National Dutch TV-show for children from 3-9. Won a very prestigious TV prize last year..

It only airs for a month, but is on EVERY day in that period and is almost instantly the best watched program (among the target group) and stays that way up to the end. Actually it climaxes at the end, because the parents and grandparents tend to join in.

This program maintains a website, during the period that it airs. Kind of a second-screen experience, if that tells you anything. I don't make the website, but I create the games..
So second screen means for me: the games have to be web-apps that run on mobile and table as well and preferably be mobile friendly. It's about 50/50 with the desktops..
Even when it's a platform game, so we have to think about controls!

70 games

I have been making games for Sinterklaas for the past 8 years. Just call me gamePiet!
(Or is that 9? 2007-2015 you do the math.. So 2016 will be 10 years? I can only hope...)
So that means.. somewhere around 60-70 games so far! The games range from small to quite big and encompass almost all casual game types: platform, racing, physics, puzzle and click games, time management, match 3 games, toys and classics like colouring, jigsaw, memory and tetris.
We have to keep them VERY simple and visual, it's for 3-9 years old mostly. For many kids it used to be the first game-experience ever, on grandpa's lap.. I'm kind of hoping it still is.

It's fast.
It's a lot of work.
It's sooooo much fun.

You can see some of these games in my portfolio.
(www.snoepgames.nl, I'd love to publish movies about them all, but it's just so much work.. )

Production madness

What happens is:
I get to sit with the editors and get a sneak peak at the VERY classified scenario.
Then we think of about 13/14 games to fit the scenario. I make an offer for all of them and they decide on 7/8 or sometimes even 9 of them.
And then production starts...

We have 1.5 to 2 months to create all 7/8 games, depending on how long we stay in the negotiation phase. They are in HTML5 these days, used to be Flash, that was a lot easier..
Every game that's somewhat playable, I put on my website (with a password, don't bother)
to be tested by the NTR as soon as it's finished enough to test.
Nobody else can test it, the scenario of the TV-show is one of the best kept secrets in Holland.
And while I make the next game and the next one, the bugs, misconceptions and tips start coming in for triage. So planning is a bit strange if not impossible. I plan about 3 days solid per game and then I'll just have to wing it. The triage is serious business. I couldn't do it without that principle, it's a battlefield.

But I haven't missed a beat yet, even the year when we moved from Flash to HTML5. That was a personal victory, but it's allways been close. It's nuts, but I love it.

Bugs and 'complaints'

Now I won't claim the games are completely bug-free or as elegant or polished as I normally like to make them, when I have more time. It's a bit rough around the edges.. Partially intentional. The style is great for simple and rough animation. But programming can't be too rough..
So last year we introduced something new. If there was a problem with the game, kids could tell us (me), so I could fix it right away. This was a safety measure I built in, because we had a couple of games with extra levels, which is always harder to test in advance.

We had 2,2 MILLION unique visitors in a month, that year. Games were played up to 60.000 times in a single day. That is an amazing amount of traffic. (There are about 2,5 million families in the Netherlands!). So about 80% of the Dutch population of kids..
And we got 23 'complaints':

• 4 of these 'complaints' were actually compliments. (Those meant the world to me, especially the one from the grandpa and grandchild, you know who you are!)
• 7 were little things I could fix in minutes.
• 12 were just general internet abuse ( like 'testing123 and BlahBlah') and a lot of stuff about the so-called 'zwarte piet' issue.
  (I have no fixed opinion about it, other than both sides should refrain from violence and abuse. It's a heated debate, too heated to take either side very seriously)

It was amazing.. The absence of complaints was overwhelming.

Trust and Focus

The thing that makes it work, despite the obvious obstacles?
  Trust, focus, positivity.. Sounds soppy, I know, but I mean it.

I get a lot of freedom, more than with any customer.. That takes a lot of trust.
But else this would be completely impossible, given the timeframe.
There is a lot of trust, both ways. I trust the editors to test the games, for my part I make an offer, that has so much specifications in it, it takes me more than three full days to write and I know at least 4 games are going to be dropped anyway so that's 40% of the work out of the window and I haven't even gotten a 'go' yet.
But this way, when we do produce... We all know what to expect going in. I try to accomodate as much evolving insight as I dare during production, but there is little room for it.
And most of all, we trust each other to stay positive, because with this kind of pressure, you can kill it if you don't stay positive. It has to be fun all-round, every day, or you'll never make it.
It almost went wrong twice, but both times we fixed it in the nick of time.
This is only possible, because at that moment Sinterklaas is truly the most important thing in the world.
For all of us.

Around 10th of November the games start going live. One every three or four days.
If anything is wrong, I need to fix it quickly, so I'm on call all day.
We've cut it as close as 20 minutes away from LIVE.. I never want to relive that moment..

And 5th of December it's all over.
I take a deep breath and relax a couple of days,
and then start hoping they will ask me again next year.

Networking, BnI

A while ago I decided to start to take networking seriously.

BFFs?

First I joined a local network club. This didn't cost much and didn't give me much..
It was good to get out among people and I noticed I can connect to people quite easily as long as we keep it real.
We are not BFF's, let's not act that way, let's keep it a bit business like..
What can I do for you and you for me?

After about a year someone pointed me towards BnI.

Too American, too early, tooooooo...much...

I was a bit wary.. I'm Dutch, BNI is American and the system seemed VERRRRY American.
It's a SYSTEM, with RULES, POINTS, CONTEXT, TRAININGS, MENTORS.. phew..
So I visited a few times and found a nice, comfy place at BNI: chapter Rivendel in Baarn.
Nice people, friendly athmosphere, but most excitingly for me: No chummy chum chums.
No pretending to be best friends with somebody you saw once a month ago.
Every meeting again it was said at least once: we're here to do business.
But.......
It's DAMN early for someone who has an ICT background. I usually get really going around 11:00 am. Before that I survive by only running 2 miles per gallon of tea/coffee.
That's usual in IT, we just hide it from the general public.
This thing starts at 6:30 am and it's every damn week... AAARGH.

SO GET OVER IT!

That's one thing I learned from another set of Americans.. GET OVER IT..
So I've joined the BnI network for a year, just to see what would happen and it's keeping me busy since.
But recently the most amazing thing happened.
2 people told me, they were looking for a gamedeveloper, to create a game...

I have a brilliant idea for an app....

Networking up to now meant: People come up and tell you they have a brilliant idea for an app.
All I have to do then is make it, put it in the app-store, market it, maintain it and they will share 50% of all income for that privilige.. Wow, what a deal!
Those offers, I had a plenty, but a serious "looking for a gamedeveloper", to make a "game". Nope..
Never happened in 15 years.

No, that kind of thing can come from existing clients, that's were I got my business..
But never from relative strangers. people you meet once or a couple of times.
In the first month that I joined BnI, it happened twice.
So, yeah.. It's a quite lot of work, if you wanna do it right, but it seems to pay of and in my case quite quickly.
I know I was amazed. People keep telling me: it won't last, that's just beginners luck.. We're in it for the long haul.. Well, me too.. I was just giving it a go.

Busy, busy

So will they follow through?
Problem is.. I'm a bit busy. I allready have four major assignments up to Januari 2016 ( a series of 7/8 games, a game and webshop, custom software and a SERIOUS webapp to make in those few months).
That's a bit much.. We are talking nights and weekends.
So it'll all have to wait a while, before I can test that, but I'll keep you posted.

User control of zoomlevel in Hybrid

There was a request for user control of the zoomlevel (ctrl-+, ctrl--) in a Hybrid application.
Right now the situation is:
It seems to work for a split second, then the Hybrid picks up a resize event en ignores the user zoom.

There are two reasons for not implementing this:
- This behaviour is consistent with the goal of the Hybrid: Making a consistent user-experience, no matter what browser or previous settings as much as is technically possible.

-We might make it default behaviour and have the programmer override it at will..
However:
http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers
The following discussion reveals a rather pained process of dealing with all the browser-quirks involved. Without extensive browser sniffing this does not seem possible to do  yet in all browsers,

Browser sniffing or UA sniffing is generally considered bad practice because of reduced scalability, increased maintenance and the existence and common practice of 'browser masquerading' and is therefore against the Hybrid design policy.

Table Border collapse fails when transform scale applied in Chrome

Here is the fiddle.
https://jsfiddle.net/d6qbp2kw/1/

Chrome & Safari both get it wrong.
I haven't tested Firefox, but IE get's it right.
So it might be a webkit-problem.

Canvas LineWidth 0

For a client I have to create a graph with a linewidth of 1 pixel, regardless of the
scaling of the matrix the canvas is currently operating under.

So for instance:

var c = document.getElementById("theCanvas");
var ctx = c.getContext("2d");
ctx.scale(5,5);
ctx.lineWidth = 1;
ctx.strokeRect(20, 20, 80, 100);

This will ofcourse render a line thickness of 5.
Now I tried the following:

var c = document.getElementById("theCanvas");
var ctx = c.getContext("2d");
ctx.scale(5,5);
ctx.lineWidth = 0.001;
ctx.strokeRect(20, 20, 80, 100);

This will give you a line thickness of 0.005 and the line will hardly be visible (antialiased to a nice alpha version of your color.)
However lineWidth has an exception for lineWidth = 0!
It will default to 1 instead.
I thought: "Haleluja, some developer has foreseen my plight."
But alas no..

var c = document.getElementById("theCanvas");
var ctx = c.getContext("2d");
ctx.scale(5,5);
ctx.lineWidth = 0;
ctx.strokeRect(20, 20, 80, 100);

Yields a line of 5 pixels thickness. How can this be? Well, the function linewidth has a very simple error catch: if 0 -> 1 (Because linewidth 0 doesn't make sense)
After it's been set to 1 the scale is adapted and the line becomes 5pixels thick.

I only tested it in Chrome, maybe other browsers behave differently, but that's enough for me. It's a bust. The way to fix it is to keep track of your transforms.

var c = document.getElementById("theCanvas");

var s=1;
var ctx = c.getContext("2d");

ctx.scale(5,5);

s=s*5;

ctx.scale(0.5,0.5);

s=s*0.5;

ctx.lineWidth = 1/s; // for a single pixel line..
ctx.strokeRect(20, 20, 80, 100);

This will yield a scaled rectangle with a single pixel line.
It works pretty good, but there is no guarantee it will behave exactly the same way as expected with a hairline.

I hope someday ..... lineWidth 0 will yeald the expected result.

In line with this issue:
http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element

De absurditeit van de implementatie van Nederlandse Cookiewetgeving

Wat zijn cookies?
Cookies zijn kleine bestanden die uw voorkeuren tijdens het surfen onthouden en opslaan op uw eigen computer.

Dit soort teksten verschijnen overal. Verplicht. Op iedere Nederlandse website.
Je moet dan OK klikken en dan is alles weer normaal.
Je hebt cookies geaccepteerd.

Maar wat als je cookies NIET accepteert?
Dan wordt er een cookie gezet, die deze voorkeur onthoud.
Dit is de standaard implementatie van deze vervelende, onnodige, maar vooral ondoordachte wet.
Natuurlijk wordt er een cookie gezet. Want je wilt toch niet, dat gebruikers deze melding iedere keer krijgen, alleen maar omdat ze geen cookie willen?

Al deze verwarring rondom cookies leidt tot cookiemuren, niet technisch noodzakelijke cookies en geen toestemming mogen vragen voor de opslag van cookies.

Er is net weer een wetsvoorstel aangenomen ter vergroting van het gebruiksgemak, die deze implementatie legaal wil maken. (Want het is op dit moment illegaal, toch?)

http://www.eerstekamer.nl/wetsvoorstel/33902_wijziging_artikel_11_7a

Je hoeft niet alleen cookies te kunnen implementeren, je moet 80 pagina's wetsvoorstellen en amendementen doorlezen in krom gesteld Nederlands. En dan, misschien weet je dan wat je wel of niet mag doen of wel of niet mag/moet laten.

Ik weet het in ieder geval NIET meer.
Mijn beste manier om cookies op te slaan: