Solution :: Blog

TwReboot - Reboot your twitter

Sun, 15 Jul 2012 22:44:38 +0200

Ik kreeg laatst een mailtje van twitter. Dat verbaasde me op twee manieren:

Ik had nog een persoonlijke twitter-account.
Ze hebben blijkbaar besloten dat het gepast is om me er een mailtje over te sturen.

En fin, ik kwam er achter dat jarenlang mijn hyves (beschamend) al mijn (nog beschamendere) WieWatWaars had geplaatst als tweets.

Nu moet ik zelf nog de persoon ontmoeten die op Hyves stil was, dus het waren er niet weinig. Te veel om met de hand te verwijderen. Wat doet men dan? Men googlet.

Daarmee kwam ik op twitwipe. Twitwipe deed wat het moest doen, namelijk al mijn tweets verwijderen. Eén probleem echter. De service kan de hoeveelheid mensen niet aan. Dus heb ik zelf maar wat gemaakt.

TwReboot

TwReboot is een service waarmee je heel gemakkelijk al je tweets kunt verwijderen. Log in met twitter, bevestig dat je echt alles wilt verwijderen en zit achterover terwijl al je tweets van nieuw naar oud langzaam beginnen te verdwijnen. Een heuze "re-boot" van je twitter account dus.

Dit alles "powered by Google App Engine", want gratis servercapaciteit is altijd fijn.

WikiGraph - Een experiment met Google App Engine

Wed, 30 May 2012 14:05:32 +0200

Recent heb ik een presentatie mogen aanhoren over sociale netwerken en wat je er allemaal mee zou moeten kunnen. Voornamelijk de "vriendschapsgraaf" zou erg interessant moeten zijn. Hier doet men allerlei uitspraken over, zoals: "Iedereen is binnen 6 stappen met iedereen bevriend", oftewel het "kleine wereld fenomeen".

Wat mij echter ook verbaasde, is dat al die eigenschappen van die netwerken ook voorkomen bij de linkstructuur van Wikipedia, zij het dat links asymmetrisch zijn. (vrienden ben je altijd van elkaar, links wijzen één kant op)

Ik dacht dat daar best een mooie visualisatie van gemaakt kon worden, dus ben ik begonnen met het crawlen van die links. Hier komt App Engine in beeld.

App Engine biedt de mogelijkheid om rekenkracht en opslagruimte van Google te gebruiken voor je eigen projecten. Je krijgt een redelijke hoeveelheid gratis CPU en andere quota per dag om mee te exerpimenteren, dus dat is redelijk geschikt voor dit project.

Mijn app draait op http://wikigraph2.appspot.com/. Waarom 2? Omdat bij de oorspronkelijke wikigraph iets mis ging met de datastore. De data mag iedereen vrij gebruiken, en is beschikbaar in JS of JSON. Merk op dat mijn quota voor App Engine beperkt zijn, en dat niet alle records compleet in de datafile staan. Deze hebben een flag complete: false. Ik moet nog even graafalgoritmen bestuderen, maar in ieder geval kan iemand anders er nu mee aan de slag.

JS1k 2012 - Love

Wed, 28 Mar 2012 16:03:23 +0200

Een programmeerwedstruhd met als thema liefde. Een typisch geval voor de categorie "Zo'n belachelijk idee dat je het wel waar moet zijn". Enfin, Peter van Zee vond het een leuk thema, en daarmee is het uitgangspunt geboren van JS1k 2012 - "Love".

Ik ga geen langdradig verhaal houden over wat ik met mijn demo gedaan heb (lees de bijgevoegde originele source code, dat moet best duidelijk zijn) want daar is niet zo veel bijzonders aan. Ik heb naar mijn idee niet gepresteerd naar het niveau van de andere demo's. In plaats daarvan een lijstje met mijn favorieten, van meh to wow:

3. Ruby Sea

De laatste inzending van de competitie, maar zeker niet een van de mindere. Een mooi voorbeeld van hoe je met relatief weinig data toch een mooi effect neer te zetten. Een semi-kloppende 3d renderer + een oceaan die er natuurlijk uitziet maakt dit een mooie demo.

2. Mine[love]craft

Ik ben enorm fan van Minecraft (zoals vele in deze business) en deze versie is prachtig. Met een vrij goede kopie van de dag/nacht cyclus, een oneindige kaart en omdat het bouwen gewoon mogelijk is, zij het dat het wat ingewikkeld is.

1. Autumn Evening

Waarom is dit mijn nummer 1? Ik vind het geweldig hoe iemand zo'n hoge kwaliteit productie in 1024 bytes past. De reflectie van het water is prachtig, de boom is goed gedaan en bovendien voelt het wegblazen van de blaadjes heel "echt". De gedoodverfde winnaar, volgens mij.

Raytracing 03 - Schaakborden en meer objecten

Wed, 01 Feb 2012 19:08:50 +0100

Dit bericht is onderdeel van een langere serie over raytracing. Voor de hele serie, zie hier.

De wereld ziet er nu prachtig uit, maar kan alleen bestaan uit oneindige vlakken en bollen. Beiden zijn niet heel handig bij het ontwerpen van nieuwe omgevingen. Daarom voeg ik in deze versie twee nieuwe elementen toe, de cylinder en de doos. Die laatste gaat in volgende versies veel nut hebben, maar dat komt later. Daarnaast hebben alle dingen in de ruimte nog een specifieke kleur. Dat hoeft natuurlijk niet, dus heb ik ook een schaakbordpatroon als kleur-optie toegevoegd.

Nieuwe objecten

De cylinder was het makkelijkst om toe te voegen. Immers, ddie heeft net zoals de bol een directe formule waaraan ieder punt op de cylinder aan voldoet en voor de normaal, te zijnde:

(p_x - c_x)^2 + (p_z - c_z)^2 = r^2

n = {p_x - c_x, 0 , p_z - c_z}

De bovenste formule is uit te werken tot een kwadratische vergelijking en dan op te lossen, de onderste geeft natuurlijk direct al een antwoord.

De doos was daarentegen lastiger. Deze heeft namelijk 6 oppervlakken, die allemaal een snijpunt kunnen hebben. Om het makkelijker te maken definieer ik de doos evenwijdig aan alle assen. Hierdoor kan je eenvoudig de snijpunten met alle zijden berekenen. Daarna moet je alleen nog kijken of ieder van die snijpunten wel op de doos ligt en welke het dichtstbijzijnd is.

Schaakborden

Schaakborden zijn vrij simpel, je moet zorgen dat je afwisselend 1 en 0 hebt over je coördinatensysteem laten lopen. Dit kan je vrij simpel doen met
(x XOR z)&1 maar hierbij bleek dat JavaScript zijn float/integer conversie ietwat ongewoon doet. Zie onder.

Verwacht:

1.5  | 0 -> 1

-1.5 | 0 -> -2

Werkelijkheid

1.5  | 0 -> 1

-1.5 | 0 -> -1

Dit leverde wat extra uitzonderingen op die helaas iets langzamer waren, maar het resultaat is nog steeds vrij efficiënt.

En verder

Verder heb ik ook nog progressive raytracing geïmplementeerd. Ik zou dit verder kunnen uitleggen maar als men de link volgt komt men bij een artikel van iemand die dat een stuk beter doet.

Daarnaast heb ik nog een extreem klein begin gemaakt aan een "scene" editor, die uiteindelijk scènes voor de raytracer met klik en sleep moet kunnen gaan maken. Deze is gebaseerd op WebGL en Three.js, omdat je daarmee heel simpel basis vormen kunt maken. Het enige nadeel is dat oneindige vormen, zoals cylinders en vlakken, niet gemaakt kunnen worden. Ik verzin hier nog wel wat op. Voor de rest, bekijk zoals altijd de changelog en geniet van het programma.

Verder in deze serie

Raytracing 02 - Reflectie en supersampling
Raytracing 01 - De basisstappen

Raytracing 02 - Reflectie en supersampling

Wed, 18 Jan 2012 10:02:16 +0100

Bij de vorige versie van mijn javascript raytracer slaagde ik er maar niet in om daadwerkelijk Anti-aliasing door middel van supersampling (zie referentie) te implementeren. Lang verhaal, maar de clou was dat ergens in dat proces iets ontplofte waardoor de helft van het resultaat alleen maar wit werd.

Daarnaast moest ik natuurlijk ook nog een van de meest overtuigende effecten met raytracing implementeren, namelijk reflecties. Deze zijn simpel, doch zeker effectief en geven het eindresultaat een veel realistischer "gevoel" (weinig gebruikt woord in mijn vakgebied) dan zonder.

Reflectie

Het fijne aan raytracing is dat reflecties relatief makkelijk gaan. Het enige dat je hoeft te doen, is de nieuwe lichtstraal berekenen en deze dan weer het algoritme in gooien. De lichtstraal heeft twee eigenschappen, een oorsprong en een richting. De oorsprong is het makkelijkst, dat is namelijk het punt waar je oorspronkelijke lichtstraal het object raakte. De richting is iets lastiger, maar vrij simpel in code;

Vector normaal, richting, nieuwerichting;

nieuwerichting = richting - normaal * normaal.dot(richting);

Hierbij is de * operator de scalarvermenigvuldiging van een vector en vector.dot rekent het inwendig product van de twee vectoren. Juist. Nu enkel nog de raytrace functie weer aanroepen en de reflectiekleur is gevonden. Voor een extra beetje realiteit vermenigvuldig ik de reflectiekleur ook nog met de kleur van het object, zodat bijvoorbeeld rode objecten ook een rodere reflectie opleveren.

Supersampling

Supersampling is een eenvoudige techniek, waarbij je simpelweg meervoudig de pixel (een klein beetje opgeschoven) bekijkt, en het gemiddelde van het resultaat neemt. Dit heeft als voordeel dat de kartelige randjes inderdaad weg gaan.
Helaas is dit ook heel veel extra rekenwerk. Het is niet efficiënt, en zelfs in het midden van een object (waar toch de meeste stralen zullen vallen). Hiervoor is multisampling bedacht, maar daar ben ik nog niet aan toe. Eerst dit maar.

En verder

Verder zijn er nog een paar fouten gerepareerd, lees vooral het changelog. Ook is er een debugoptie toegevoegd, highlight object. Het object met als ID deze waarde zal paars worden weergegeven. Object IDs zijn altijd >= 0, dus met -1 wordt niets gemarkeerd.

Verder in deze serie

Raytracing 01 - de basisstappen

Korte update

Sun, 11 Dec 2011 14:49:25 +0100

In het berichtje over de kansverdeling van het Collatz vermoeden (de vorige, wel te verstaan) sprak ik over een onderzoekje naar de daadwerkelijke kansverdeling van deze reeks.
Ik heb nu de demo geüpdatet zodat deze ook de verdeling van het interval geeft.
Onderstaande grafiek geeft de verdeling weer van het interval beginnende op 1000, strekkende tot 210000, met distributie accuratie 1. Deze laatste parameter geeft weer hoe groot de stukjes zijn waarin de distributie is opgedeeld, volgens de formule:
grootte = 1/accuratie;

Willekeurige getallen (en simpel)

Sat, 10 Dec 2011 21:57:13 +0100

Zo'n studie is best interessant. Je krijgt voor de verandering opdrachten die je wel aan het denken zetten. Daar wordt een mens gelukkig van. In ieder geval levert het ideeën op. Zo ook deze.

Voor een verder volstrekt willekeurige opdracht werd een zijspoortje aangeleverd, namelijk het Collatz vermoeden. Uitleg op de Wiki pagina.

Dit eenvoudige gegeven levert voor ieder getal een aantal stappen op dat nodig is om tot 1 te komen. Dit blijkt vrij willekeurig te zijn, en daarom dacht ik dat daar een fatsoenlijke random generator uit gemaakt kon worden. Vandaar dit experiment.
Omdat het aantal iteraties voor grote getallen natuurlijk meestal groter is dan dat van kleinere getallen, deel je het resultaat door het binair logaritme van het getal in kwestie. Hierdoor krijg je een getal dat altijd tussen de 1 en circa 20 ligt, Zie de grafiek.

Een goed onderzoek naar de willekeurigheid (en de implementatie) moet ik nog doen, maar tot nu toe ziet het er redelijk uit. Voor mensen die andere intervallen willen plotten, kijk eens op de demo.

Raytracing 01 - De basisstappen

Mon, 21 Nov 2011 20:30:52 +0100

Zo, er kwam tijdelijk iets te veel voorbij om een zinnig stuk te schrijven, maar dan nu toch echt. Raytracing. Had ik beloofd.

Wat is Ray Tracing?

Ray tracing is een algoritme om een weergave van een drie dimensionale omgeving te creëren op een tweedimensionaal vlak. In monkey terms, om afbeeldingen te renderen. Ray tracing heeft als voordelen dat vrij veel visuele effecten zoals schaduwen en reflecties eenvoudig te implementeren zijn en dat het algoritme ook vrij logisch is. Het grote nadeel is dat het ongelofelijk veel zinloos rekenwerk is, duizenden keren zo veel als noodzakelijk voor wireframe-rendering.

Het algoritme is simpel. Men heeft namelijk een camerapunt en een "denkbeeldig" scherm. Vervolgens stel je voor iedere pixel van dat scherm een "lichtstraal" op, die door die pixel gaat vanuit het camerapunt. Dan is het een kwestie van het eerste object vinden waar die straal op botst. Dit is tijdrovend en daarmee ook het grootste punt van vertraging. Tot zover de theorie, nu het programma.

Licht en schaduw

Om mee te beginnen wilde ik net als dit artikel op Flipcode, dat geholpen heeft bij het schrijven van mijn profielwerkstuk, beginnen met simpele diffusie en schaduw.

Schaduw kan je berekenen door vanaf het punt in de ruimte dat je gevonden hebt te kijken of er een vrij pad bestaat tussen dat punt en de lichtbron(nen). Dit is eigenlijk hetzelfde als een gewone intersectietest, dus niet heel bijzonder.

Diffusie is daarentegen een stuk moeilijker correct te simuleren. Eigenlijk zou je miljarden fotonen moeten afvuren en kijken waar ze een beetje terechtkomen. Helaas, dit is veel werk, en dus doen we een benadering. Deze gaat als volgt:

for(iedere lichtbron) {

  if(!in_schaduw()) {

    lichtsterkte += lichtsterkte_bron * (oppervlaktenormaal * lichtinvalshoek) / afstand_lichtbron^2;

  }

}

Zoals te zien is deze verre van correct, maar het ziet er verder redelijk uit en daar gaat het om.. Zie onder.

Javascript image viewer

Fri, 07 Oct 2011 18:42:29 +0200

Het schrijven van een artikel over ray-tracing duurt iets langer dan ik tijd voor heb; in plaats daarvan iets waar makkelijker tijd voor vrij te maken is, namelijk iets wat ik toch al nodig had. Wat dan? Een lichtgewicht programma om simpel te schrijven afbeeldingsformaten (NetPBM, SWI) te lezen.

Blijkbaar kan dat ook in javascript, want het is gelukt. De bediening is vrij simpel, sleep een afbeeldingsbestand van je computer naar het venster, en hij wordt weergegeven. Voor ondersteunde formaten en exporteren moetn men even de muis over de menutab rechtsboven houden.

Dit projectje was ook voor mij een ervaring om een keertje met CSS3 te spelen, in dit geval transities, gradienten en "position:fixed".

Mocht iemand nog een goed idee hebben voor een te ondersteunen bestandsformaat, laat deze achter als reactie. (en suggereer geen TIFF, daar wordt al aan gewerkt)

Raytracing - The prequel

Sun, 04 Sep 2011 16:21:57 +0200

Voor mijn profielwerkstuk heb ik het afgelopen jaar een Raytracer geschreven. Eigenlijk acht, trouwens. Waarom is dit relevant? Dat is het ook niet. Maar het resultaat is wel leuk. (versie 2 werkt niet, geen zin om die te fixen. Alle andere versies werken wel.)

De reden dat ik dit op schrijf, is dat ik niet helemaal tevreden ben met het eindresultaat. Het ziet er allemaal wel redelijk uit, maar vanaf een bepaald punt moest ik enkel en alleen om mijn eerdere fouten in het ontwerp heen werken. Het resultaat is langzaam en bovendien een "amateuristische hack" te noemen.

Dit bracht mij tot het plan om een serie over ray-tracing te gaan schrijven. Te beginnen zo snel mogelijk. In een aantal delen ga ik een ray-tracer schrijven, waar steeds weer nieuwe grafische mogelijkheden aan toe gaan worden gevoegd. Ik hoop een deel per maand te kunnen gaan schrijven, maar helaas ben ik begonnen met studeren (iets nuttigs) dus wordt er meer beslag gelegd op mijn tijd. We zien wel. Dit was deel 0, dus nu gaat het beginnen.

Wireframe drawing in Javascript

Fri, 22 Jul 2011 22:44:40 +0200

Even een korte, want heel bijzonder is deze ook niet. Ik ben bezig met iets van een 3D renderer voor canvas, en dit was een oefening. Een bol getekend als wireframe.

De demo tekent een bol gebaseerd op rasterlengte (voor de rest van dit stukje L) kwadraat punten, verdeeld over de bol volgens lengte- en breedtegraden. Hierdoor ontstaan 2 x (L*(L-1) driehoeken, in de standaardinstellingen 480.

Beweeg de muis om de bol te draaien, + en - om in en uit te zoomen. Daarnaast zijn er nog een paar opties:
Rasterlength: Zie vorige paragraaf
Depth darkning: Lijnen veraf worden donkerder getekend
Draw points: Tekent de punten waarop het frame gebaseerd is.
Draw wireframe: Geen idee wat dit doet. Wees creatief.

Ondersteuning

Succesvol getest met:
PC: Internet Explorer 9, Firefox 4 (beste resultaat), Chrome 12, Safari 5 (glitchy), Opera 11
Mobiel(!!!): Safari (iOS 4 op iTouch 3rd gen & iPhone 3GS), Android browser (HTC Wildfire), BlackBerry browser (Torch 9800)

De mobiele apparaten hebben natuurlijk geen muis. Tap op het scherm om te draaien. Ik ben erg onder de indruk van de ondersteuning van de gebruikte technologieën. We gaan zo steeds verder naar 1 web toe.

Mijn inzending voor de demojs.org Js1k

Mon, 04 Jul 2011 13:52:00 +0200

Ik las op de twitter van Js1k dat DemoJS, een franse demoscene bijeenkomst, een js1k categorie voor inzendingen had. Na mijn eerste simpele poging tot een demo wilde ik wel eens zien hoe hoog ik kon komen in een echte competitie. Het resultaat? 4e plaats achter niemand minder dan p01.

Met zo'n hoge score moet er dus wel iets speciaals aan zijn. Tijd voor een technische ontleding dan maar. Om te beginnen, waaraan heb ik de bytes verspilt? Een snelle telling levert het volgende:

Basis set-up: 86 bytes

Punten genereren: 185 bytes

Rotaties: 181 bytes

Tekenen: 175 bytes

Radial blur-effect: 119 bytes

Andere dingen waar ik niet direct een naam voor heb: 273 bytes

Dit brengt mij tot het prachtige totaal van 1019 bytes. Ik schaam mij uiteraard diep dat ik niet alles heb volgekregen, maar het zij zo. Nu even iets dieper op de materie ingaan. Hoe heb ik die bytes echt besteed?

De ring zelf

De ring bestaat uit 20 "objecten" waarvan ik twee dingen weet: plaats (xyz notatie) en kleur. De plaats is vrij simpel. Ik voegde een kleine ribbel in de ring toe omdat een gewone ring wat saai is. De punten liggen hierdoor 0.05 van de centrale cirkel af. Dit is trouwens geen berekend getal, gewoon proberen. 0.1 was te veel en minder zag je bijna niet. Design by tweaking was hierbij vrij nuttig.

for(i=0;i<20;i++) {

 x = cos(i * 2 * PI / 20);

 y = sin(i * 2 * PI / 20);

 z = (i%2 - 0.5) * 0.1; // Levert 0.05 of -0.05, om en om.

}

Voor de kleur had ik een aantal ideeën, iedere met zijn eigen voordelen.

r = Math.random();

// n>>0 is een verkorte versie van Math.floor(n).



Methode 1: kleur = "rgb("+(r()*256<<0)+","+(r()*256<<0)+","+(r()*256<<0)+")"; // 58 bytes;



Methode 2: kleur = "#"+(0xffffff*r()>>0).toString(16); // 35 bytes



Methode 3: kleur = "#"+(16e6*r()>>0).toString(16); // 31 bytes

Hoewel methoden 2 & 3 korter zijn, had ik genoeg ruimte over voor methode 1, en het voordeel van die is dat hij altijd valide kleuren levert, in plaats van 93% (methode 2) of 89% (methode 3). Daarnaast ga je er dan ook van uit dat browsers je fouten netjes opvangen (wat ze trouwens wel doen, kudos daarvoor).

Het scherm

Ik wilde dat de demo op volledig scherm zou draaien, zonder vervelde scrollbars en dat hij mee zou schalen als je het venster verkleinde. Ik had voor de veelgebruikte methode van width = innerWidth - 20 kunnen gaan, maar besloot dat niet om 2 redenen:

1. Je gebruikt dan stiekem niet het hele scherm
2. Alleen Chrome houdt de scrollbars verborgen bij het verkleinen van het scherm.

Toevallig kwam ik er achter dat als je je Canvas een "style"-attribuut met "position: absolute;top 0;left:0;" je het element wel volledige breedte en hoogte mee kan geven. Dit trucje werkt zelfs volledig cross-browser. Awesome.

Het beeld

Hier gaat het uiteindelijk allemaal om. Ten eerste de zwarte achtergrond. Normaal gesproken zou je een schermvullende zwarte rechthoek tekenen, maar hier is een makkelijker alternatief. Aangezien ik toch al een stijl toewijs aan het canvas, kan daar net zo makkelijk "background:#000;" aan toegevoegd worden. Nu hebben we een zwarte achtergrond voor slechts 16 bytes.

Over de projectie ga ik niet al te veel uitwijden, dit zijn dezelfde rotaties als gebruikt bij de 3d kubus. Wel gebruik ik ook hier weer "bollen", omdat deze makkelijk perspectivisch correct te laten zijn.

Bij het uiteindelijke tekenen speel ik ook een beetje vals. Door gebruik te maken van globalCompositeOperation "lighter" hoef ik namelijk geen extra bytes te gebruiken voor Z-buffering. Weer een klein beetje winst.

Blur

De ring zelf is vrij saai om naar te kijken, dus moest er ook nog een effect overheen. Om de ring "lichtgevend" te laten lijken besloot ik radial blur over het scherm heen te zetten. Dit gaat als volgt. Je maakt een tweede canvas aan, en kopieert daarop de afbeelding, lichtjes vergroot, in dit geval 1.1 keer.
De nieuwe laag kopieer je transparant terug over de oude. Als je dit een paar keer herhaalt met toenemende transparantie, krijg je een vrij overtuigend effect.

Andere dingen

Toen de shim bekend werd, bleek dat ik een aantal dingen al cadeau kreeg, en dus nog zo'n 150 bytes over had. Deze zijn uiteraard nuttig besteed.

Ik besloot om de ring op te delen in twee ringen, die steeds van straal veranderen. Dit is makkelijker dan het lijkt. Door puntnummer modulo twee te doen heb je namelijk heel makkelijk om en om 1 of 0. De straal krijg je dan als volgt:
R = (i%2?2:.5)^sin(e);
waarbij R de uiteindelijke straal is, i het puntnummer, en e het framenummer maal een constante. Hierdoor maakten een punt en zijn volgende altijd een mooie tegengestelde beweging, die nog vloeiend was ook. Ideaal.

Toen ik daarna nog wat overhad besloot ik een oude truc te gebruiken, voeg ruis toe. Door de berekeningen van de tweede rotatie iets te vervuilen met nog een tweede sinus erin danst de ring over het hele scherm heen, in plaats van alleen in het midden.

Tot slot

Ik ben nog steeds ongelofelijk trots dat ik met mijn armzalige poging het toch nog tot de 4e plaats heb weten te schoppen. Daarnaast hoop ik dat deze how-to andere mensen inspiratie geeft om ook een mooie demo in elkaar te zetten.

Evoluerende afbeeldingen

Sat, 11 Jun 2011 22:14:09 +0200

Na gezien te hebben hoeveel mensen blijkbaar interesse hebben voor mijn vorige berichtje over het genetische algoritme was er voor mij reden genoeg om nog een projectje er aan te wagen.

Het idee deze keer werd gegeven door Nihilogic, die op zijn beurt weer een programma'tje had geschreven dat met een genetisch algoritme een afbeelding natekent uit een groot aantal semi-transparante polygonen.

Hoe het werkt

Aangezien mijn vorige berichtje niet helemaal duidelijk was over hoe het genetische algoritme werkt, of misschien gewoon voor storende herhaling, nog een keer. In de eerste plaats maak je een populatie aan van individuen (het onderscheid tussen computers en biologie is soms even zoek) en daaruit kies je de beste. Deze laat kruis je en daarmee ga je verder.

Om het af te maken muteer je zo af en toe 1 waarde van het individu om te zorgen dat er daadwerkelijk ook verbetering kan optreden.

Het programma

... kan hier gevonden worden. Het programma is vrij simpel, kies een afbeelding en klik op start. Klik op de resultaatafbeelding om hem te exporteren. Verder zijn er nog een paar opties:

Polygooncomplexiteit: aantal hoeken per polygoon.
Aantal polygonen: totaal aantal polygonen in de tekening.
Populatiegrootte: aantal verschillende combinaties dat geprobeerd wordt.
Selectiegraad: gedeelte van de populatie die gebruikt wordt voor de volgende. 0,25 betekent dat 25% mee mag.
Mutatiekans: kans dat een polygoon muteert.
Mutatiesterkte: grotere waarde betekent grotere mutaties
Uniforme kruising: Als deze is geselecteerd, worden willekeurig de helft van de polygonen van de ene ouder en de andere genomen. Indien niet geselecteerd wordt er een breekpunt gekozen.
Dood ouders: indien geselecteerd worden de besten van deze generatie niet meegenomen naar de volgende.

Notities

Het programma werkt niet in IE9. Het kan vrij lang duren voordat er herkenbare resultaten zijn, de afbeeldingen boven zijn gemaakt terwijl ik dit bericht schreef. Code gebruiken mag natuurlijk altijd, maar een vermelding is wel zo aardig. Enjoy!

Anaglyphe 3D in Javascript, of een van mijn slechtere ideeÃ«n.

Sun, 22 May 2011 18:46:00 +0200

3D is hip. Films, televisie en games moeten allemaal in 3D. Simpel omdat het kan. Daarom wilde ik kijken of dat ook in javascript kan, en snel. Moeilijke klus? Ja. Onmogelijk? Nee. Aan de slag dus maar.

Het idee

Om simpel te beginnen, wilde ik kijken of het mogelijk was een kubus die bestaat uit bolletjes in 3D te laten zien, met een wisselend camerapunt. In principe is mijn programma dan in pseudocode:

Loop for ieder frame {

  Verzin voor beide ogen een camera punt

  Bepaal de kijkrichting

  Projecteer alle punten van de kubus op het scherm volgens beide camerapunten

}

Simpel genoeg om te werken, nu de uitvoering nog.

De camera

Een willekeurig punt kiezen lijkt makkelijk. Helaas krijg je als je gewoon iedere keer met Math.random() willekeurige coordinaten kiest, niet een heel mooie beweging, maar spring je houterig van punt naar punt.

Een oplossing vond ik dit artikel. Kies voor een paar frames een doelwit waar de camera naar toe moet verplaatsen, neem een intermediair en neem de camerapositie. Wat je hierna doet is interpoleren. Eerst het intermediair naar het doelwit en daarna de camerapositie naar het intermediair. Code is makkelijker dan taal.

function interpoleer(begin, doel) {

  return begin + (doel - begin) * (een getal < 1);

}



intermediair = interpoleer(intermediair, doelwit);

camerapositie = interpolair(camerapositie, intermediair);



if(framenummer%7 == 0)

  kies een nieuw doelwit;

Natuurlijk zou je ook nog meer intermediairs kunnen toevoegen voor een nog voor een vloeiendere verschuiving, maar dit volstaat. Het effect van deze methode zie je hieronder. De hoekige zwarte lijn is een coördinaat van de doelwitpositie, de groene lijn is het intermediair en de blauwe lijn (die inmiddels vloeiend is) is de camerapositie.

Twee ogen

Nu heb ik 1 camerapunt, ik had er twee nodig. Om te beginnen moet ik reken ik dan yaw en pitch uit. (Geen idee hoe die in het Nederlands zouden moeten heten) Deze kan je makkelijk aflezen uit de camerapositie, aangenomen dat je naar het middelpunt van de scene kijkt. Hierna kan je met de yaw de geroteerde x-as uitrekenen.

yaw  = atan2(X, -Z);

pitch = atan2(Y , sqrt(X * X + Z * Z));



xAs = new Vector(cos(yaw), 0, sin(yaw));

Met die x-as is het vervolgens heel makkelijk om links en rechts van het oorspronkelijke punt twee cameraposities te kiezen. Het mag ook wel eens simpel zijn.

Projecties

Projecties zijn na het uitrekenen van de yaw en de pitch vrij makkelijk. Je transleert ieder punt naar de camera toe, past de twee rotaties toe, et voila. Dit moet voor beide camerapunten uiteraard.

for ieder punt van de kubus

  X = punt.x - cameraX;

  Y = punt.y - cameraY;

  Z = punt.z - cameraZ;



  // Yaw rotatie

  X2 = X * cos(yaw) + Z * sin(yaw);

  Y2 = Y;

  Z2 = Z * cos(yaw) - X * sin(yaw);



  // Pitch rotatie

  X3 = X2;

  Y3 = Y2 * cos(pitch) + Z2 * sin(pitch)

  Z3 = Z2 * cos(pitch) - Y2 * sin(pitch);



  if(Z3 > 0)

    Zorg dat deze pixel getekend wordt.

}

Helaas wordt je altijd door schade en schande wijs in dit vak. Het blijkt namelijk dat als je twee kleuren hebt, het opvalt als een achtergelegen bol over een bol in de voorgrond heen getekend wordt. Hiervoor moesten alle puntjes dus nog ge-Z-buffert worden. Maar met dit alles klopte het eindelijk.

Compatibiliteit

De demo werkt in Chrome, Opera, Firefox, IE9. Safari geeft echter vreemde resultaten, want die wist het canvas niet, wat wel zou moeten gebeuren bij het resetten van de hoogte danwel breedte. Je hebt een Rood / magenta 3D bril nodig als je de demo wil bekijken.

Fontein, JS1k en HTML5 speedtest

Mon, 16 May 2011 21:21:56 +0200

Er is geen duidelijke aanleiding voor dit projectje. Browsersnelheidstests zijn er veel (waarvan de meeste veel beter dan deze) en JS1k is allang afgelopen. Waarschijnlijk gewoon omdat het kan.

JS1k

Eerst een introductie voor JS1k. JS1k is een competitie voor JavaScript programmeurs en webdevelopers met een simpele opdracht. Doe iets interessants met slechts 1kB code. Nou je kan dus blijkbaar in 1kB code een kleurenfontein maken.

De test

Wat deze test uitprobeert, is hoeveel balletjes de fontein uit kan spuwen en nog steeds 50FPS (lekker vloeiend) beeld kan uitspuwen.
De resultaten waren verassend. De uitslag: 1. Internet Explorer 9, 2. Firefox 4, 3. Google Chrome, 4. Apple Safari, en 5 Opera. (Opera rapporteerd wel getekende bolletjes, maar ze zijn niet zichtbaar). Wat wel opviel bij Firefox en Chrome is dat ze op zich grote aantallen halen, maar zo af en toe even ertussenuit vallen. Ik vermoed dat dit door de garbagecollector komt, die blijkbaar een redelijke CPU-hit heeft.

De test is vrij simpel zelf uit te voeren, ga naar de applicatie toe (klik op de screenshot hieronder), en het aantal balletjes verschijnt in de titelbalk. Indien balletjes plotseling verdwijnen is dit door een dal in de performance. Het is niet anders, dat was het doel van de test.

Nieuw spel: Achtung die Kurve!

Fri, 13 May 2011 14:24:50 +0200

Het is alweer een eeuwigheid geleden dat ik een nieuw spel geplaatst heb. Niet omdat ik niet bezig ben geweest nieuwe spellen te maken, maar omdat het steeds bij het ontwikkelen ergens mis ging. Deze keer is het wel gelukt, dus ik presenteer met gepaste trots:
Achtung, die Kurve! The Canvas Edition

Het spel

Achtung die Kurve is een 2-6 personen multiplayer spel, en daarmee het eerste multiplayer spel dat ik ooit gemaakt heb. Het spel is heel simpel, je bent een steeds verder groeiende slang, en je moet langer overleven dan je tegenstanders om punten te scoren. Wie als eerste het beoogde aantal heeft ((aantal spelers - 1) * 10) wint.
Op zich is dit al moeilijk genoeg, maar je wordt ook nog geholpen met allerlei bonussen die jou helpen, of je tegenstanders pesten. Die jou ook kunnen pesten dus.

Enjoy!

Daarbij wil ik ook nog melden dat heb project SGE2 is afgeblazen. De HTML5 Canvas specificatie voorzien in alles wat SGE2 levert en meer, en is bovendien sneller.

Maart 2011: Browsermania

Mon, 18 Apr 2011 17:44:48 +0200

Afgelopen maand hebben alle grote browsermakers (te zijn Google, Mozilla en Microsoft) hun nieuwe versie in de groep gegooid, Microsoft en Mozilla wat luider dan Google.
Ontwikkelaars zoals ik zijn dan ongelofelijk blij, want die kunnen dan met een nieuw platform aan de slag, waar altijd weer spannend is of het allemaal wel een beetje werkt. Hierbij mijn beknopte recensie van Chrome 10, Firefox 4 en Internet Explorer 9.

Uiterlijk

Het simpelste puntje, uiterlijk. Het eerste dat opvalt, is dat zowel Internet Explorer als Firefox de minimalistische "look" van Chrome overgenomen hebben, met een adresbalk en hooguit 3 knoppen. Dit is een goede verandering, naar mijn idee. Hoe minder ruimte voor de browser, hoe meer voor de rest.
Daarnaast ondersteunen de nieuwe versies van IE en FF ook ClearType, wat de tekst op webpagina's mooier maakt. Helaas werkt dit op sommige PC's niet optimaal, zie mijn eerdere blogbericht voor een oplossing.

Compatibiliteit

Firefox en Chrome waren hier altijd al heel sterk mee, maar IE trekt langzaam bij. Met deze versie is eindelijk de workaround voor window.event niet meer nodig. Verder lijken de meeste pagina's tegenwoordig exact hetzelfde te renderen in alle 3, mits de pagina geen fouten bevat.
Een minpunt dat ik heb aan te merken op IE is wel zijn overactieve quirks mode van IE, die nog steeds veel te vaak geactiveerd wordt en die bovendien geen HTML5 elementen ondersteunt. Aandachtspuntje, Redmond?

Snelheid

Altijd een lastig onderwerp, vooral omdat iedereen zijn eigen tests heeft. Mijn test was hier mijn demo voor golfinterferentie (blogbericht hier, demo hier) en mijn test was als volgt: bij hoeveel verschillende golfbronnen is de animatie niet langer vloeiend. Hierbij geldt dus, hoe meer hoe beter.
De resultaten zijn als volgt. Derde plaats IE (1 bron en dan al niet vloeiend), tweede plaats FF (2 bronnen) en de eerste plaats voor Chrome, met maar liefts 4 bronnen. Hierbij dient wel vermeldt te worden dat Chrome met 4 bronnen nog vloeiender was dan IE bij 1.
Chrome is dus de winnaar, maar alle drie zijn een stuk sneller dan hun voorganger.

HTML5 ondersteuning

In deze catagorie is er vooral door FF en IE nogal met poep gegooid naar elkaar, maar dat mag de pret niet drukken. Wat wil men van HTML5? Dat lijstje wil ik samenvatten als Audio, Video, Canvas, Drag 'n Drop en File Handling. Alle andere zijn naar mijn idee niet vitaal, maar dat is het ook het hele punt van dit artikel, wat is naar mijn idee interessant aan deze browser.
Dat gezegd zijnde, Chrome en FF ondersteunen deze elementen allemaal (FF ondersteunt gee h.246 video vanwege licenties) en IE mist alleen de File API. Close, but no cigar.
Daarnaast zijn er nog dingen als de nieuwe HTML5 input elementen, zoals schuifbalken en kalenders, die zowel IE als FF missen. Deze zijn dus niet vitaal, aangezien ze eenvoudig zijn te simuleren met javascript.

Conclusie

Als ik dat al zo mag noemen. Dit is wat mij opviel, en waarom ik nog niet ga overstappen. Wel ga ik, nu IE canvas ondersteunt en FF behoorlijk wat sneller is geworden, (dat mag ook wel eens gezegd worden) proberen de demo's op deze website ook werkend te houden voor deze browsers. Ze zijn wel op de goede weg.

To infinity and beyond!

Wed, 13 Apr 2011 17:31:52 +0200

... and beyond and beyond and beyond and did I mention beyond?

Ten minste, dat is het gevoel dat ik altijd krijg als ik naar afbeeldingen van fractals kijk. Ieder zijn mening. Tot zover een poging tot een gevatte introductie.

Nieuwsgierigheid naar deze dingen dreef mij om een weer eens een Javascript HTML5 projectje te starten om deze dingen te kunnen renderen. Voila. Deze maakt een afbeelding volgens de opgegeven instellingen van een van de leden van de Multibrot reeks, standaard de Mandelbrotset. Maar goed, hoe werkt het?

Het werkt zo

Kort door de bocht: de Mandelbrot-set bevat alle complexe getallen C waarvoor de recursieve reeks Z(n) = Z(n-1)^2 + C met Z(0) = 0 niet naar oneindig toe gaat. Twee voorbeelden. Het getal 1 zit niet in de set, want dan wordt de reeks 0, 1, 2, 5, 26 en zo verder. Het getal i zit wel in de reeks, want dan krijg je 0, i, -1 + i, -i, -1+i etc. Dit wordt door het programma benaderd door de reeks een aantal keren te herhalen, en te kijken of de absolute waarde van Z binnen 2 blijft, want alle getallen in de set liggen in dat gebied.
Kleuren gebeurt door het moment te nemen waarop het getal Z buiten de cirkel met straal 2 komt. Dit is een integer, en hier kan je, door middel van een verloopje of een palet, een kleur aan verbinden. Er zijn betere manieren, maar dit ziet er al leuk uit.

De Multibrot-sets worden gevonden door in plaats van Z(n-1) kwadraat een andere macht te nemen, waarvan de bekendste -2 is, onder de naam Tricorn, hoewel ik niet zou weten hoe die in het Nederlands heet.

Het programma

Het programma heeft een vrij simpele interface, klikken waar je wilt inzoomen, en iedere instelling spreekt voor zich, maar toch nog even snel het lijstje:
Grootte: pixelformaat van het eindresultaat
Kleurenschema: spreekt voor zich
Anti-alias samples: aantal subpixels waarin iedere pixel wordt opgedeeld tijdens het peilen. Het gemiddelde resultaat wordt genomen en daar wordt de kleur aan verbonden.
Iteraties: aantal keer dat de reeks minimaal herhaald moet worden. Hoe hoger, hoe beter!
Zoomniveau: aantal keer zoomen per klik
Fractal: Selecteer welke van de multibrots je wil hebben.

Onder alvast een voorproefje...

Vetgedrukte test in Internet Explorer 9 en FireFox 4?

Sat, 26 Mar 2011 11:17:21 +0100

Maart was een goede maand voor browsermakers, met het uitkomen van Internet Explorer 9, FireFox 4 en Google Chrome 10. (Hoewel chrome iedere 6 weken vernieuwt, maar er komt nog wel een stukje over waarom deze bijzonder is.) Wat mij echter opviel, was dat bij zowel IE9 en FF4 alle tekst plotseling vetgedrukt was, tenzij het italic (schuingedrukt) was.

Even gegoogle later bleek dat dit veroorzaakt werd door een foutje in de instalatie van ClearType voor het lettertype Arial. De oplossing hiervoor was makkelijk, namelijk Arial opnieuw installeren. Hiervoor een stappenplan, omdat ik nu toch al een fix-it berichtje post.

Stap 1
Zoek de windows fonts map op. Normaal gesproken in de map C:/Windows/fonts.

Stap 2
Zoek in de Fonts map Arial (standaard) op, en sleep die ergens anders naartoe, bureaublad of iets dergelijks.

Stap 3
Sleep hem weer terug. Geef desnoods UAC toestemming, en hierna is het gerepareerd! Probleem opgelost.

Na-berichtje over het genetische algoritme

Thu, 24 Mar 2011 18:18:20 +0100

Als vervolg op dit berichtje heeft Allard Dupuis voor hetzelfde probleem ook een programmaatje geschreven, in C++, en deze versie wil ik natuurlijk niemand onthouden.

Download het RAR archief, pak het uit en probeer het, zou ik zeggen. De instellingen zijn 10.000 generaties, 5% mutaties en 100 chromosomen. P plaatst 50 willekeurige punten, enter start de simulatie. Afsluiten met het rode kruisje of esc.

Ook interessant om te vermelden is dat op het rechterscherm de snelste route volgens een ander algoritme, namelijk door vanaf het beginpunt steeds het dichtstbijzijnde punt te kiezen waar je nog niet geweest bent. Het is sneller, maar (in ieder geval voor kleine aantallen, < 20) niet beter.

Golven en sinussen

Mon, 14 Mar 2011 18:54:52 +0100

Golven en sinussen, leuke begrippen. En daar kan je ook leuke dingen mee. In een golf van inspiratie heb ik een programmaatje geschreven dat de interferentie tussen golven weergeeft. Op zich is dit een vrij simpel script, maar je kan er leuke dingen mee doen.
Om zelf ook plaatjes te maken als de bovenstaande, een werkende demo staat hier. Aan te raden is de nieuwste versie van Google Chrome om hem te testen, FireFox stottert namelijk nogal bij het draaien en Safari doet al helemaal raar. Internet Explorer ondersteunt nog steeds Canvas niet. (versie 9 wel, maar die is nog niet officieel vrijgegeven, dus test ik daar niet voor. Eerst maar eens een echte versie, geen beta.)

Dat was alleen niet het interessante deel. Interessanter is om dat snel werkend te krijgen in een webbrowser. Een bekend probleem hierbij is dat de sinusfunctie, of eigenlijk de benadering er van, erg langzaam werkt. Hierom heb ik ook nog een snellere sinusbenadering bedacht, die welliswaar heel grof is, maar goed genoeg. De beschrijving over hoe dat werkt, evenals het programma waarmee de functie gevonden is, staan ook online.

Helaas werkt niet alles even goed als gehoopt. Hoewel deze methode in gecompileerde talen als C++ veel sneller is, is de tijdswinst in Google Chrome slechts klein (1.4 x zo snel in de tests) en in Firefox en Safari zelfs een achteruitgang. (0.7 x zo snel) Echter dient wel vermeld te worden dat zowel fSin als de normale sinus sneller werken in Chrome, een factor 2 sneller ongeveer.
Bij deze uitslagen hoeft mijn woord niet noodzakelijk voor waar aangenomen te worden, de snelheidstest is te vinden op de pagina over de snellere sinus. En hoewel Internet Explorer de test in theorie wel zou moeten kunnen halen, duurde het dusdanig lang dat ik de test heb afgebroken. Als FF het in 3.5 seconden haalt, mag IE er niet langer dan 2 minuten over doen.

We gaan verhuizen

Fri, 18 Feb 2011 19:04:17 +0100

Solution gaat een echt domein krijgen! In de komende weken/maanden (een precies tijdschema is moeilijk) zullen alle onderdelen van deze website (http://solution.awardspace.info) worden overgeheveld naar een nieuw, "echt" domein, te vinden op http://www.solution-web.nl.

Aangezien Solution in principe een one-man-show is, zal dit waarschijnlijk minder soepel gaan dan zou moeten, maar daar leven we dan maar mee.

Een kleine voetnoot hierbij: Solution is op zoek naar andere creatieve programmeurs, die de limieten van de webstandaarden ook opzoeken, leuke projectjes hebben en die, onder eigen naam uiteraard, willen publiceren. Geïnteresseerden kunnen zich melden op info@solution.awardspace.info.
A creative Solution to a better web

Evolutietheorie en theoretische probleemoplossing

Sun, 30 Jan 2011 18:11:07 +0100

Voor mensen die geen zin hebben door te scrollen naar het einde van dit stukje, mijn programma is hier te vinden.
Dit klinkt helemaal niet gerelateerd, maar het is het wel. Recentelijk ben ik gestuit op een techniek die "genetisch algoritme" heet. Het gegeven fascineerde me.
Me helemaal inlezen in zoiets is helaas mijn stijl niet, dus heb ik maar geprobeerd er een praktisch voorbeeld van te maken. Hiervoor heb ik geprobeerd om het klassieke probleem van de handelsreiziger op te lossen.

Het probleem
Stel je bent een handelsreiziger, die naar een aantal steden in een land moet. Dit doet hij met het vliegtuig. Echter, er zijn vele verschillende volgorden die hij hierbij kan nemen. Hij wil hierbij natuurlijk een zo kort mogelijke route nemen. Hoe moet hij vliegen?

Dit probleem kan niet direct, volgens een formule etc., worden opgelost. Een aanpak zou zijn om het dan maar te brute forcen, om dan gewoon iedere mogelijkheid te proberen en te kijken welke de kortste is, maar dat levert ook problemen op. Immers, voor een n aantal punten, zijn er (n-1)!, dus n-1 faculteit, oplossingen. Dit valt nog wel mee voor 6 punten (120 oplossingen), maar met 20 punten levert dat 19! = 121.645.100.408.832.000 of grofweg 2^58 mogelijkheden. Dat zijn veel te veel oplossingen om te proberen. Iets anders dus maar.

De oplossing
Hierbij komt die titel dus kijken. Hoe heeft de natuur het probleem "Het organisme moet overleven" opgelost? Door te kijken wie het beste overleefde, en met die selecte groep verder te gaan om dat generatie na generatie te herhalen. De nieuwe groepen muteerden lichtjes en er werden genen uitgewisseld. En zo verder.

Dat was het voor het lesje biologie. De kern hieruit is dat je begint met wat probeersels, de best gelukten eruit pakt, daar een nieuwe groep probeersels van maakt die allemaal een beetje verschillend zijn, en van de nieuwe probeersels weer kijkt wie de besten zijn. Hiermee is het mogelijk om met het voorbeeld van de 20 punten de snelste weg al met 20.000 pogingen te vinden. Een besparing van 99,99999999999984661275 (dus bijna 100) procent! Toegegeven, het algoritme zelf levert iets meer overhead dus het bespaar iets minder, maar nog steeds veel. De naam van het beestje? Genetisch Algoritme.

Hoe het werkt
Stel je de volgorde van de punten voor. Dat is een chromosoom. Hiervan begin je met een aantal willekeurig gegenereerde exemplaren. In iedere generatie neem je de beste, de beste 20% in mijn applicatie. Daarmee ga je een nieuwe generatie proberen te maken.

Dit doe je door eerst natuurlijk twee ouders uit je huidige generatie te kiezen. Deze kruis je. In het echt kan je 1 chromosoom alleen in bijzondere omstandigheden kruisen, maar dat doet er niet toe. Het proces is exact hetzelfde als hoe het in de natuur gebeurt, je neemt een stukje van ouder 1 en je vult dat aan met ouder 2. Hier moet je, afhankelijk van de data waar je het over hebt, een of andere methode gebruiken om dat te doen. Op deze website staan een aantal voorbeelden. Kind kan de was doen.

Daarnaast vind er over de eeuwen heen mutaties plaats in het DNA. Deze hebben we ook nodig, om onze kansen de goede oplossing te vinden te vergroten. Hiervoor verwisselen we per generatie een paar punten van plek in de volgorde. Heel toevallig ook volgens hetzelfde algoritme waarmee je normaal gesproken kaarten zou schudden. Het resultaat is hetzelfde.

De applicatie
Geheel geschreven met gebruikmaking van de standaarden voor HTML5 Canvas en JavaScript heb ik hiervan hier een werkend voorbeeldje gemaakt. Deze poogt de kortste route te vinden door een set punten. Ik heb aardige resultaten gekregen tot wel 100 punten, hoewel ze niet altijd even goed zijn. De demo is succesvol getest in Google Chrome 8 en Apple Safari 5. Mozilla Firefox 3.6 werkt half, maar er zit een bug in de implementatie van Canvas die volledig functioneren tegengaat. Internet Explorer 8 werkt niet. Dit alles onder Windows Vista. Andere browsers en besturingssystemen zouden kunnen werken maar dit is niet getest.

Dan nog een afsluitend verhaaltje. Het algoritme levert namelijk niet de beste route. Het levert een goede route, die naar alle waarschijnlijkheid niet heel veel verschilt van de daadwerkelijke. Het is echter, net als evolutie, een toevalsspel. Dezelfde puntenwolk kan namelijk best een paar oplossingen hebben die helemaal niet op elkaar lijken. Mensen lijken immers ook niet op haaien.

SGE2 laat nog even op zich wachten

Mon, 01 Mar 2010 18:10:32 +0100

Er is naar mijn weten beloofd dat SGE2 nu wel uitgegeven zou zijn. Helaas, het tegengestelde is waar. Ten eerste omdat ik vond dat een algehele recode nodig was (van div naar HTML5 Canvas) en nu werkt dat niet helemaal naar behoren.

Stress dus all over the place. Dan is hier namelijk nog een klein probleempje. Microsoft weigert namelijk Canvas te ondersteunen zolang en nog het kleinste beetje gezeur is over de HTML5 defenitie. Terwijl dit element al min of meer vast licht. Hierdoor zal tot een update van Microsoft IE (alle versies) niet ondersteund worden.

Totdat alles goed werkt, ga ik ook geen testversie publiceren. Hier dan maar wel een screenshot van een falende test-render:

Concept POAP vrijgegeven

Sat, 19 Dec 2009 19:04:10 +0100

Vanwege kerst, en het feit dat ik het nodig had voor iets, heb ik een concept protocol geschreven voor peer2peer communicatie met AJAX.
Dit heet vanaf nu POAP (Peer2peer Over AJAX Protocol) in plaats van zijn codenaam charlie.

Lees hem, negeer hem, maar hij staat in de documentatie.

En voor de mensen die nog willen weten waar de codenaam op sloeg? Hierop:

Tweede test SGE 2

Sat, 21 Nov 2009 11:33:18 +0100

Deel twee van de Solution Graphics Engine was al te testen, maar nu is er weer iets toegevoegd en dus wil ik graag iedereen laten kijken of alles nog werkt.
De tweede test voor SGE 2 vindt u door op de link te klikken. De rendering zou er ongeveer uit moeten zien als de onderstaande afbeelding, en beide vierkanten zouden om het midden heen moeten draaien.
Mocht het programma langzaam draaien, dan raad ik aan over te stappen Google Chrome. Deze is draait dit programma 5 keer sneller dan Mozilla Firefox en circa 20 keer sneller dan IE 8, afhankelijk van uw operating system. (Windows XP, Vista, 7 etc.)

Er vallen ergens in de rotatie gaten in de vierkanten, ik ben me hiervan bewust maar weet niet hoe dit gerepareerd moet worden. Misschien in de volgende update.

php My FTP 2.0 gehackt

Tue, 17 Nov 2009 23:02:43 +0100

Er is helaas weer slecht nieuws te rapporteren. Er is bewezen (en vrij makkelijk werkbaar gesteld) dat onze eigen FTP tool vrij makkelijk te hacken is. Een willekeurige voorbijganger kon zomaar inloggen.

Dit kon allemaal vrij makkelijk door een javascript een cookie te laten zetten op de pagina, waarna het voor de server leek alsof er een valide gebruiker was ingelogd. De beveiliging was dan ook kinderlijk eenvoudig, en werkte dus ook tijdens de test, niet in de realiteit.

Dit probleem is bekend, maar php My FTP 2.0 is sowieso in ieder opzicht verouderd, en gaat niet meer ge-update worden. Binnenkort (misschien eerste kwartaal 2010?) komt versie 3 uit. Deze is, behalve dat hij circa 70% bandbreedte scheelt, ook veel veiliger.

We raden iedereen aan die dit programma nog steeds gebruikt, tijdelijk hiervan af te zien, en in plaats daarvan een andere gratis tool te gebruiken, zoals FireFTP.

IE 8 wordt steeds trager

Wed, 04 Nov 2009 08:46:16 +0100

Internet Explorer 8 wordt met elke patch trager, blijkt uit diverse benchmarks. De browser is nu nog maar 1,5 keer zo snel als IE7, in het begin was IE8 drie keer zo snel.

Uit testen van Betanews blijkt dat IE8 sinds de release met elke patchronde langzamer wordt, terwijl andere browsers alsmaar sneller worden. De eerste testversie van IE8 bleek nog drie maal sneller dan IE7, maar die performance haalt de browser inmiddels bij lange na niet meer.

Sinds de monsterpatch van dinsdag 13 oktober daalde de performance van IE8 naar 1,54 maal zo snel als IE7 op Vista SP2. Omdat de laatste JavaScript-update alleen XP en Vista betreft, is IE8 op Windows 7 nog relatief het snelst.

Hotfix voor patch

Overigens blijkt een van de recente patches voor IE, Security Bulletin MS09-054, voor problemen te zorgen in het weergeven van websites. Daar is nu een 'hotfix' voor uitgebracht.

BetaNews berekent op basis van diverse factoren (snelheid JavaScript, css weergave, canvas, laadtijden van pagina's) een CRPI-score (Comprehensive Relative Performance Index). In de benchmark scoort Chrome (20 maal sneller dan IE7) het best.

Bron: Webwereld

YouTube tijdelijk offline

Mon, 02 Nov 2009 17:01:40 +0100

Videowebsite YouTube was op zondag enige tijd niet bereikbaar. Zodra je YouTube.nl of YouTube.com bezocht verscheen de melding in beeld: "YouTube is down for maintenance and will be back shortly". Een aantal dagen geleden verscheen deze melding ook al eens in beeld. Tegelijkertijd waren video's ingesloten op websites ook niet beschikbaar. Google heeft in ieder geval verklaard "We are aware that some users are having difficulty accessing videos on YouTube. We are working hard to fix the issue and will have the site back to normal as soon as possible."

Erictric.com suggereerde dat het met de YouTube store te maken had en tevens zag de website een link naar de shop op YouTube zelf. Echter deze shop met YouTube shirts, sokken, etc. bestaat al sinds half augustus.

Verslag na de stilte

Sat, 31 Oct 2009 20:01:05 +0100

En het is weereens een tijdje radiostil geweest. Dit is echter niet omdat ik niets aan het doen was, maar dat was niet omdat ik niets aan het doen was. Even een lijstje van wat er allemaal gaande was:

Project 1: De website vernieuwen
Hieraan was in januari al begonnen, en in maart was de website goed genoeg om te laten zien. Sindsdien was het alleen maar oude stukjes samenvoegen in het nieuwe ontwerp, en ze hier en daar aanpassen om in het nieuwe systeem te passen, dat halverwege niet werkbaar bleek en aangepast moest worden. Dit is tot nu toe alleen met de documentatie gelukt. Bodemloze put dus.

Project 2: Verbeteringen SWI
Ik had bewezen dat ik het kon, een afbeeldingsformaat ontwerpen en (be)werkbaar maken. Nu heb ik voor mezelf een nieuw doel gesteld: SWI wordt een lossless gecomprimeerd afbeeldingsformaat, met betere compressie dan PNG.

Project 3: SGE 2
De eerste versie van de SGE was... triest. Maar ook hier zijn doelen gesteld: SGE 2 moet zelf 2D afbeeldingen kunnen berekenen, en SGE 3 3D. Versie 2 komt nu langzaam in een alfa fase. Je kunt nu alvast testen of hij op jouw computer werkt. Tests zijn gelukt in FF 3.5, IE 8 & Chrome 2. Als het goedgaat zie je een vierkantje die om het midden heen draait. Als andere functie staat muisdetectie nog in de planning.

Ik zit dus niet stil, maar meld alleen niet alles. Volgende keer meer bericht.

Elemental... breekt een record

Fri, 20 Mar 2009 17:34:23 +0100

Hoewel ik dit echt nooit aan heb zien komen, heeft Elemental toch echt 50 leden bereikt. Er is zelfs iemand uit het Verenigd Koninkrijk ingelogd.
Om dit te belonen heb ik toch het project maar weer opgestart en heb gisteren versie 1.15 de deur uit gedaan. Ook zijn de forums naar deze website verplaatst, maar daar hoeft niemand veel van te merken.

Erm... oeps?

Mon, 02 Mar 2009 16:45:06 +0100

Zoals een oplettende speler heeft opgemerkt, was het spelletje Tetris een beetje incompleet.
Van de 7 Tetris figuren misten er twee, om precies te zijn de J en de L. Dit is nu aangepast, excuses voor het (mogelijke) ongemak.s.

Eventjes afwezig

Fri, 13 Feb 2009 21:30:26 +0100

Aan iedereen met vragen (zullen er weinig zijn), ik ben er eventjes niet. Op vakantie naar Frankrijk enzo.
Oh ja, voor ik het vergeet, er is nu een leesmij voor SGE beschikbaar. Voor die, die een spelletje proberen te schrijven. Zoek maar eens goed...

Nieuw spelletje

Sat, 07 Feb 2009 16:57:48 +0100

Tetris is een computerspel/puzzel ontworpen door Alexey Pajitnov in 1985. Het spel kreeg algemene bekendheid doordat het meegeleverd werd bij het spelletjesplatform "Gameboy" van Nintendo in 1989. De naam is afgeleid van het Griekse woord voor vier: tetra, omdat ieder blokje uit vier vierkantjes bestaat.

Juist. Alsof iemand dat iets kan schelen. Wat er wel toe doet, is dat we dat spelletje nu ook op onze website hebben staan. Hij kan hier gevonden worden.

Voor de programmeurs onder ons, ik ga binnenkort een SDK maken van de SGE, met instructie. Nu mogen jullie zelf spelletjes gaan maken!

Verhuizing feeds

Tue, 20 Jan 2009 14:55:21 +0100

Even een kort berichtje om de mensheid te laten weten dat onze rssfeed verhuisd is naar feedburner. De nieuwe URL's zijn:

Voor de blog:
http://feeds2.feedburner.com/SolutionBlog

Voor nieuwe forum posts:
http://feeds2.feedburner.com/SolutionNieuweForumPosts

php My FTP 2.0 vrijgegeven

Sat, 17 Jan 2009 12:48:23 +0100

Ik geef toe, het gebeurde eigenlijk gisteren. Maar dat mag de pret niet drukken. Het programma staan onder downloads. Daar staan ook de screenshots, die eerder geplaatst zijn. Vergeet ook niet de de leesmij te lezen, voor het geval je ergens op stuit.

Voor de oplettende lezer is ook de tag Website aan dit bericht toegevoegd. Dat komt omdat er een nieuw stukje site bij is gekomen. Als je namelijk goed kijkt zie je dat er naast het kopje forum een kopje documentatie is bijgekomen.

Hiermee kan gezocht worden in de vracht aan data die onze documentatie heet. Veel succes ermee!.

(bijna) nieuwe versie php My FTP

Sat, 10 Jan 2009 20:36:48 +0100

Het is weer een tijdje stil geweest, maar dat kwam niet omdat we winterslaap hielden. We waren gewoon druk bezig aan een project, namelijk de nieuwe versie van php My FTP.

Het is nu af, alleen we er zijn nu veiligheidstests bezig. Omdat een ftp tool natuurlijk ook gebruikt kan worden om iemands hele server over te nemen, hebben we besloten om deze keer maar voor veilig te gaan en een hacker vragen naar de broncode te kijken. Zodra hij geen weg naar binnen weet, plaatsen we het programma. Tegen die tijd hopen we ook de downloads sectie weer werkend te hebben.

Om iedereen toch even een sneak-peak van het programma te geven, hebben we wat screenshots. Zie hieronder.