IAmNotDifferent

Whisper

Whiteshoulders — Wed, 26 Feb 2014 23:27:00 +0100

Synthèse vocale et JavaScript : Génération dynamique de sons

Whiteshoulders — Wed, 19 Feb 2014 19:03:00 +0100

Le JavaScript offre beaucoup de possibilité, et avec les capacité d'un navigateur, on peut en faire beaucoup. J'ai décidé que parmi l'ensemble des possibilités, mon attention allait se focaliser sur la synthèses vocale.

Le but : réaliser un synthétiseur vocal simple, comme ceux des vieux comodore64.

Le première épisode de cette grande aventure humaine, riche en rebondissement et haute en couleurs portera sur la génération dynamique de sons en JavaScript.

Introduction

Pour pouvoir réaliser une application de synthèse vocale, il faut avant tout pouvoir générer un son.

Malheureusement, il est impossible actuellement de générer avec JavaScript un son joué directement par le navigateur. L'API Web Sound, en cours de développement devrais à terme le permettre, mais pour le moment c'est impossible.

Alors quoi ? On arrête l'article au bout de 5 lignes ? Non, car il existe une solution : générer un fichier son, puis de jouer ce fichier son. Les navigateurs récents en sont capables avec l’élément <audio>. On passe alors de la génération d'un son à la génération d'un fichier son.

Les fichiers son les plus simple à produire sont les fichiers wav. Il s'agit d'un format brut, non compressé. Et pour pouvoir produire ce type de fichier, il faut connaître son format.

Son et echantillonnage

Le son est une onde qui se transmet dans l'air, depuis une source (un haut parleur, un violon, un bouche) jusqu’à un récepteur (un micro, une oreille). L'onde se transmet sous la forme de variation de pression locale de l'air. Ce sont ces variations de pressions qui atteignent nos oreille, et font vibrer nos tympans. On peut décrire cette onde comme une fonction du temps, qui varie de manière continue.

L'informatique fonctionne de manière discrète. Toute les informations sont découpé en tranches, et codé sous forme binaire. Pour pouvoir décrire notre onde sonore, il va falloir la découper en tranche : c'est l'échantillonnage.

La largeur des tranches défini ce que l'on appel la fréquence d’échantillonnage. Plus les tranches sont étroite, plus on mesure précisément le signal. Si les tranches sont trop large, il peut arriver que l'on sous-échantillonne le signal.

La fréquence d'échantillonnage joue un rôle clef, puisqu'elle va permettre de savoir a quelle vitesse il faut lire les tranches pour retrouver le son d'origine.

A chaque tranche va correspondre l'amplitude de l'onde en ce point. Ce nombre va être codé dans un format binaire, sur un certain nombre de bit. C'est la résolution du son. Plus on alloue de bit pour coder chaque tranche, plus la résolution est grande, meilleur sera la qualité du son.

Format WAV

D'après la définition du format, un fichier wav est composé de plusieurs morceaux de données binaires. La première partie du fichier est le header, qui donne les information nécessaire à la lecture du reste du fichier, en particulier la fréquence d'échantillonnage.

Plus précisément, le fichier contient dans un premier temps un bloc de déclaration d'un fichier au format wave :

Une constante d'identification sur 4 octets : "RIFF"
La taille totale du fichier moins 8 octets codée sur 4 octets
Une constante de format sur 4 octets : "WAVE"

Viens ensuite un bloc décrivant le format audio (toutes les caractéristiques du son numérisé) :

Une constante identifiant le début du bloc sur 4 octets : "fmt "
La taille du bloc sur 4 octets
Une constant identifiant le format de stockage (PCM, par exemple) dans le fichier sur 2 octets
Le nombre de canaux
La fréquence d'échantillonnage sur 4 octets
Le nombre d'octets par seconde
Le nombre d'octets par bloc d'échantillonage
La résolution

Enfin, on trouve le bloc des données :

Une constante identifiant le début du bloc sur 4 octets : "data"
La taille du bloc de données moins 8 octets
Les données

Ecrire un wave en javascript

En respectant ce format, il est possible de générer le contenu du fichier. En utilisant les data URI, on peut facilement inclure le fichier ainsi écris dans le corps de la page, dans une balise audio.

Voici le code du module qui permet de retourner la version base64 de donnée sonores qu'il restera à générer :

 
var app = {};
(function() {
app.utility = {

    /* js port of PHP function pack */
    pack : function (fmt) {
        var output = '';

        var argi = 1;
        for (var i = 0; i < fmt.length; i++) {
            var c = fmt.charAt(i);
            var arg = arguments[argi];
            argi++;

            switch (c) {
                case "a":
                    output += arg[0] + "\0";
                    break;
                case "A":
                    output += arg[0] + " ";
                    break;
                case "C":
                case "c":
                    output += String.fromCharCode(arg);
                    break;
                case "n":
                    output += String.fromCharCode(
                        (arg >> 8) & 255, 
                        arg & 255
                    );
                    break;
                case "v":
                    output += String.fromCharCode(
                        arg & 255, 
                        (arg >> 8) & 255
                    );
                    break;
                case "N":
                    output += String.fromCharCode(
                        (arg >> 24) & 255, 
                        (arg >> 16) & 255, 
                        (arg >> 8) & 255, 
                        arg & 255
                    );
                    break;
                case "V":
                    output += String.fromCharCode(
                        arg & 255, 
                        (arg >> 8) & 255, 
                        (arg >> 16) & 255, 
                        (arg >> 24) & 255
                    );
                    break;
                case "x":
                    argi--;
                    output += "\0";
                    break;
                default:
                    throw new Error("Unknown pack format '"+c+"'");
            }
        }

        return output;
    }

}

/* Classic sound config : mono wav, 44100 Hz, 16 bit depth */
app.config = {
    channels : 1,
    sampleRate : 44100,
    bitsPerSample : 16,
}

}());
(function(){
var pack = app.utility.pack;
var cf = app.config;

// constructor
app.wave = function (_data) {
    this.data = _data;
};

app.wave.prototype = {

    // Generate the wave content by concatenation, and encode it to base64.
    generate : function () {
        var chunk1 = this.makeChunk1(); // format chunk
        var chunk2 = this.makeChunk2(); // data chunk
        var header = this.makeHeader(chunk1.length, chunk2.length);
        var out = header + chunk1 + chunk2;
        return "data:audio/wav;base64," + btoa(out);
    },

    // Generate the content of the audio format chunk
    makeChunk1 : function () {
        var chunk1 = [
            "fmt ",
            pack("V", 16), // Chunk length for PCM
            pack("v", 1), // linear PCM
            pack("v", cf.channels),
            pack("V", cf.sampleRate),
            pack("V", cf.sampleRate * cf.channels * cf.bitsPerSample / 8), // ByteRate
            pack(
                "v", 
                cf.channels * cf.bitsPerSample / 8
            ), // BlockAlign
            pack("v", cf.bitsPerSample)
        ];
        return chunk1.join('');
    },

    // Generate the content of the data chunk
    makeChunk2 : function () {
        var data = this.data;

        var chunk2 = [
            "data", // chunk ID
            pack("V", data.samples * cf.channels * cf.bitsPerSample / 8), // Chunk length
            data.raw
        ];
        return chunk2.join('');
    },

    // Generate the header chunk
    makeHeader : function () {
        var data = this.data;

        var dataSize = data.samples * cf.channels * cf.bitsPerSample / 8;
        var block1 = (8 + 16);
        var block2 = (8 + dataSize);
        var header = [
            "RIFF",
            pack(
            "V", 4 + block1 + block2), // total lenght
            "WAVE"
        ];
        return header.join('');
    }

};

}());

Démonstration

On va générer les données d'un fichier wav à partir d'une simple sinusoïde à 440Hz. Un beau la bien pur.

 
var frequency = 440;
var duration = 1;
var volume = Math.floor(65535 / 2);
var raw = [];
var samples = 0;
for(var i = 0; i <= app.config.sampleRate * duration; i++) {
for(var c = 0; c &lt; app.config.channels; c++) {
    var v = volume * Math.sin(2 * Math.PI * frequency * i/app.config.sampleRate);
    raw.push(app.utility.pack("v", v));
    samples++;
}

}
var data = {raw: raw.join(''), samples: samples};
var wave = new app.wave(data);
var base64wave = wave.generate();
var audio = document.getElementById("demo");
var source = document.createElement("source");
source.setAttribute("src", base64wave);
audio.appendChild(source);

Le résultat du code, c'est cette balise audio, avec un la de très belle facture, d'une seconde.

Conclusion

Maintenant que l'on est capable d'écrire n'importe quelle fichier audio pour le faire lire par le browser, il ne "reste plus" qu'a générer les données sonores correspondant à une voix de synthèse.

La prochaine étape sera de générer des voyelles, avant de passer aux consonnes, puis à un convertisseur de texte en phonèmes.

Broqen I

Whiteshoulders — Thu, 23 Jan 2014 16:09:00 +0100

Rpg.js v0.2

Whiteshoulders — Wed, 30 Oct 2013 12:27:00 +0100

Il y a bientôt 5 mois, j'avais présenté ici la première pierre posée à l'édification d'un mini RPG en JavaScript. Il est temps de poser la seconde, pour laquelle j'ai tout refait, parce que le code précédent était impossible à relire, pas commenté, spaghettiesque.

Et pour l'occasion, j'ai ajouté pleins de choses (dont certaines ne se voient pas).

Avant le long paragraphe sur les dedans de la bête, voici la bête en question !

this is the classical dialog box

    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1,0,0,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,0,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]

{
    "tableTile":[[[4,308,0,0,0,0],[5,307,0,0,0,0],[4,306,0,0,0,0],[5,309,0,0,0,0],[5,308,0,0,0,0],[4,309,0,0,0,0],[5,0,0,285,0,0],[4,0,0,286,0,0],[5,287,0,0,0,0],[4,307,0,0,265,0],[4,0,0,0,266,0],[4,0,0,0,267,0],[5,0,0,0,268,0],[5,0,0,0,269,0],[4,0,0,0,270,0],[4,0,0,0,267,0],[5,0,0,268,0,0],[4,0,0,269,245,0],[4,0,0,0,246,0],[5,0,0,0,247,0],[5,0,0,0,248,0],[5,0,0,226,0,0],[4,0,0,227,205,0],[5,0,0,0,206,0]],[[44,328,0,0,0,0],[44,327,0,0,0,0],[44,330,0,0,0,0],[4,329,0,0,0,0],[45,328,0,0,0,0],[5,329,0,0,0,0],[4,327,0,305,0,0],[4,0,0,308,0,0],[5,310,0,0,0,0],[4,309,0,0,285,0],[4,0,0,0,286,0],[4,0,0,0,287,0],[45,0,0,0,289,0],[5,0,0,0,288,0],[4,0,0,0,289,0],[4,0,0,0,287,0],[5,0,0,288,0,0],[4,0,0,289,265,0],[5,0,0,0,266,0],[4,0,0,0,267,0],[4,0,0,0,268,0],[4,0,0,246,0,0],[4,0,0,247,205,0],[4,0,0,0,226,0]],[[44,348,0,0,0,0],[44,347,0,0,0,0],[45,348,0,0,0,0],[44,349,0,0,0,0],[44,350,0,0,0,0],[44,347,0,0,0,0],[44,347,0,0,0,0],[44,0,0,326,0,0],[45,0,0,328,0,0],[24,329,0,0,305,0],[44,0,0,0,306,0],[45,0,0,307,101,0],[45,0,0,309,102,0],[45,0,0,308,103,0],[45,0,0,0,310,0],[45,0,0,0,307,0],[45,0,0,308,0,0],[4,0,0,309,285,0],[65,0,0,0,286,0],[5,0,0,0,287,0],[4,0,0,0,288,0],[5,0,0,266,0,0],[4,0,0,267,245,0],[4,0,0,0,246,0]],[[44,368,0,0,0,0],[44,367,0,0,0,0],[44,368,0,0,0,0],[44,369,0,0,0,0],[44,370,0,0,0,0],[25,367,0,0,0,0],[45,367,0,0,0,0],[44,0,346,0,0,0],[44,0,348,0,0,0],[44,349,0,0,0,0],[44,0,0,326,0,0],[44,0,0,327,121,0],[45,0,0,329,122,0],[44,0,0,328,123,0],[45,0,0,330,0,0],[44,0,0,327,0,0],[44,0,0,328,0,0],[65,0,0,329,305,0],[64,0,0,0,306,0],[65,0,0,0,307,0],[5,0,0,0,308,0],[4,0,0,286,0,0],[4,0,0,287,265,0],[5,0,0,0,266,0]],[[44,7,0,0,0,0],[45,8,0,0,0,0],[44,8,0,0,0,0],[45,7,0,0,0,0],[44,8,0,0,0,0],[45,8,0,0,0,0],[44,9,0,0,0,0],[25,366,0,0,0,0],[44,368,0,0,0,0],[24,369,0,0,0,0],[45,0,346,0,0,0],[45,0,347,0,141,0],[24,0,349,0,142,0],[44,0,348,0,143,0],[45,0,350,0,0,0],[44,0,347,0,0,0],[65,0,350,0,0,0],[45,0,347,0,0,0],[65,0,0,326,0,0],[65,0,0,327,0,0],[65,0,0,328,0,0],[5,0,0,306,0,0],[4,0,0,307,285,0],[5,0,0,0,206,0]],[[44,40,0,0,0,0],[44,60,0,0,0,0],[44,40,0,0,0,0],[44,41,0,0,0,0],[44,61,0,0,0,0],[44,61,0,0,0,0],[44,47,0,0,0,0],[44,8,0,0,0,0],[25,9,0,0,0,0],[44,0,0,0,0,0],[44,366,0,0,0,0],[44,367,0,0,0,0],[44,367,0,162,0,0],[44,368,0,0,0,0],[45,370,0,0,0,0],[65,367,0,0,0,0],[65,370,0,0,0,0],[65,369,0,0,0,0],[65,0,346,0,0,0],[64,0,347,0,0,0],[65,0,348,0,0,0],[65,0,0,326,0,0],[5,0,0,327,205,0],[5,0,0,0,226,0]],[[44,68,0,0,0,0],[44,68,0,0,0,0],[44,67,0,0,0,0],[25,68,0,0,0,0],[44,28,0,0,0,0],[45,60,0,0,0,0],[44,61,0,0,0,3],[44,60,0,0,0,0],[44,29,0,0,0,0],[44,0,0,0,0,0],[25,0,0,0,0,0],[44,0,0,0,0,0],[44,0,182,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[45,0,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[65,366,0,0,0,0],[65,367,0,0,0,0],[65,368,0,0,0,0],[65,0,346,0,0,0],[5,0,347,0,225,0],[5,0,0,0,246,0]],[[44,0,0,0,170,0],[44,0,0,0,167,0],[44,0,0,0,169,0],[44,0,0,0,170,0],[25,66,0,0,172,0],[45,67,0,0,0,0],[45,28,0,0,0,0],[44,61,0,0,0,0],[45,47,0,0,0,0],[44,9,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[65,202,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,23,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[65,366,0,0,0,0],[65,369,0,0,245,0],[64,0,0,0,266,0]],[[4,0,0,0,191,0],[5,0,0,0,187,0],[44,0,0,0,248,0],[44,0,0,0,230,0],[44,0,0,0,191,0],[44,0,0,0,172,0],[45,26,0,0,0,2],[44,61,0,0,0,0],[44,41,0,0,0,0],[44,49,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[45,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[44,63,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,265,0],[44,0,0,0,206,0]],[[5,0,0,0,247,0],[4,0,0,0,269,0],[44,0,0,0,250,0],[44,0,0,0,250,0],[45,0,0,0,211,0],[45,0,0,0,192,0],[25,26,0,0,0,0],[44,61,0,0,0,0],[44,61,0,0,0,0],[44,29,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,43,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[45,0,0,0,225,0],[64,0,0,0,228,0]],[[5,0,0,0,267,0],[5,0,0,0,268,0],[45,0,0,0,269,0],[44,0,0,0,270,0],[44,0,0,0,191,0],[45,0,0,0,232,0],[44,46,0,0,0,0],[44,60,0,0,0,0],[25,61,0,0,0,0],[44,49,0,0,0,0],[45,0,0,0,0,0],[64,0,0,0,0,1],[45,0,0,0,0,0],[64,0,0,0,0,0],[65,22,0,0,0,0],[65,62,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[24,0,0,0,0,0],[64,0,0,0,245,0],[45,0,0,0,266,0]],[[4,0,0,0,207,0],[4,0,0,0,208,0],[25,0,0,0,209,0],[44,0,0,0,210,0],[44,0,0,0,251,0],[45,0,0,0,252,0],[45,46,0,0,0,0],[44,61,0,0,0,0],[44,60,0,0,0,0],[44,49,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[64,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[44,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,166,0],[65,0,0,0,266,0],[65,0,0,0,206,0]],[[5,0,0,0,227,0],[44,0,0,0,228,0],[44,0,0,0,229,0],[44,0,0,0,230,0],[44,0,0,0,271,0],[44,0,0,0,272,0],[25,26,0,0,0,0],[44,60,0,0,0,0],[44,41,0,0,0,0],[45,49,0,0,0,0],[44,0,0,0,0,0],[45,42,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[45,0,0,0,0,0],[65,63,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,62,0,0,0,0],[44,0,0,0,0,0],[65,0,0,0,185,0],[65,0,0,0,186,0],[5,0,0,0,206,0],[4,0,0,0,207,0]],[[44,0,0,0,247,0],[44,0,0,0,248,0],[44,0,0,0,249,0],[45,0,0,0,250,0],[44,0,0,0,211,0],[44,0,0,0,212,0],[25,46,0,0,0,0],[45,61,0,0,0,0],[44,61,0,0,0,0],[45,29,0,0,0,0],[45,0,0,0,0,0],[45,0,0,0,0,0],[45,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,205,0],[65,0,0,0,206,0],[5,0,0,0,207,0],[4,0,0,0,208,0]],[[5,0,0,0,267,0],[44,0,0,0,269,0],[44,0,0,0,269,0],[25,0,0,270,0,0],[44,0,0,0,231,0],[24,0,0,0,232,0],[45,66,0,0,0,0],[44,28,0,0,0,0],[44,60,0,0,0,0],[44,49,0,0,0,0],[44,0,0,0,0,0],[24,0,0,0,0,0],[24,0,0,0,0,0],[5,0,0,0,0,0],[45,0,0,0,0,0],[24,0,0,0,0,0],[24,62,0,0,0,0],[64,23,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[45,0,0,0,225,0],[64,0,0,0,226,0],[4,0,0,0,227,0],[4,0,0,0,228,0]],[[44,0,0,0,287,0],[44,0,0,0,288,0],[45,0,0,0,289,0],[25,0,0,290,0,0],[45,0,0,0,291,0],[44,0,0,0,292,0],[45,0,0,0,0,0],[44,26,0,0,0,0],[45,60,0,0,0,0],[44,47,0,0,0,0],[25,7,0,0,0,0],[44,8,0,0,0,0],[44,9,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,245,0],[64,0,0,0,246,0],[4,0,0,0,247,0],[4,0,0,0,248,0]],[[5,0,0,307,0,0],[44,0,0,308,0,0],[44,0,0,309,0,0],[44,0,0,310,0,0],[44,0,0,311,0,0],[44,312,0,0,0,0],[44,0,0,0,0,0],[24,46,0,0,0,0],[24,60,0,0,0,0],[44,60,0,0,0,0],[44,60,0,0,0,0],[44,60,0,0,0,0],[44,29,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,63,0,0,0,0],[64,0,0,0,0,0],[44,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,265,0],[65,0,0,0,266,0],[5,0,0,0,267,0],[4,0,0,0,268,0]],[[44,0,0,327,0,0],[44,0,0,328,0,0],[45,0,0,329,0,0],[24,0,330,0,0,0],[25,0,331,0,0,0],[24,332,0,0,0,0],[44,0,0,0,0,0],[44,66,0,0,0,0],[45,68,0,0,0,0],[25,67,0,0,0,0],[24,28,0,0,0,0],[44,60,0,0,0,0],[44,49,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,185,0],[64,0,0,0,186,0],[64,0,0,0,206,0],[5,0,0,0,207,0],[4,0,0,0,208,0]],[[44,0,347,0,0,0],[44,0,348,0,0,0],[44,0,349,0,0,0],[44,0,350,0,0,0],[44,351,1,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,66,0,0,0,0],[44,28,0,0,0,0],[44,29,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[64,0,0,0,166,0],[65,0,0,0,186,0],[64,0,0,0,188,0],[64,0,0,0,226,0],[4,0,0,0,227,0],[5,0,0,0,228,0]],[[4,367,0,0,0,0],[44,368,0,0,0,0],[24,369,0,0,0,0],[44,370,0,0,0,0],[44,371,0,0,0,0],[45,0,0,0,0,0],[25,0,0,0,0,0],[24,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,46,0,0,0,0],[44,49,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,185,0],[5,0,0,0,186,0],[4,0,0,0,187,0],[4,0,0,0,250,0],[5,0,0,0,246,0],[5,0,0,0,247,0],[5,0,0,0,248,0]],[[4,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[24,0,0,0,0,0],[45,0,0,0,0,0],[44,46,0,0,0,0],[44,49,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[5,0,0,0,285,0],[4,0,0,0,206,0],[4,0,0,0,228,0],[5,0,0,0,207,0],[4,0,0,0,208,0],[4,0,0,0,209,0],[5,0,0,0,210,0]],[[5,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,66,0,0,0,0],[44,69,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,185,0],[5,0,0,0,266,0],[5,0,0,0,226,0],[4,0,0,0,227,0],[4,0,0,0,228,0],[4,0,0,0,229,0],[5,0,0,0,230,0],[5,0,0,0,231,0]],[[4,0,0,0,0,0],[44,0,0,0,0,0],[25,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[24,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,185,0],[44,0,0,0,186,0],[4,0,0,0,206,0],[4,0,0,0,246,0],[5,0,0,0,247,0],[5,0,0,0,248,0],[4,0,0,0,249,0],[4,0,0,0,250,0],[5,0,0,0,251,0]],[[4,0,0,0,0,0],[5,0,0,0,0,0],[44,0,0,0,0,0],[24,6,0,0,0,0],[44,7,0,0,0,0],[44,7,0,0,0,0],[44,8,0,0,0,0],[44,7,0,0,0,0],[24,9,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,205,0],[44,0,0,0,206,0],[4,0,0,0,226,0],[5,0,0,0,227,0],[4,0,0,0,266,0],[4,0,0,0,267,0],[5,0,0,0,268,0],[5,0,0,0,269,0],[4,0,0,0,271,0]],[[5,0,0,0,0,0],[4,6,0,0,0,0],[44,7,0,0,0,0],[44,48,0,0,0,0],[44,40,0,0,0,0],[45,41,0,0,0,0],[44,27,0,0,0,0],[45,67,0,0,0,0],[44,69,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[24,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,225,0],[4,0,0,0,226,0],[4,0,0,0,246,0],[4,0,0,0,247,0],[5,0,0,0,207,0],[5,0,0,0,208,0],[4,0,0,0,209,0],[4,0,0,0,210,0],[5,0,0,0,211,0]],[[5,8,0,0,0,0],[4,48,0,0,0,0],[4,60,0,0,0,0],[24,41,0,0,0,0],[45,60,0,0,0,0],[24,27,0,0,0,0],[45,69,0,0,0,0],[44,0,0,0,0,0],[24,0,0,0,0,0],[24,0,0,0,0,0],[24,0,0,0,0,0],[44,0,0,0,166,0],[44,0,0,0,169,0],[25,0,0,0,167,0],[24,0,0,0,168,0],[24,0,0,0,186,0],[44,0,0,0,187,0],[4,0,0,0,266,0],[5,0,0,0,267,0],[5,0,0,0,226,0],[4,0,0,0,227,0],[4,0,0,0,228,0],[5,0,0,0,229,0],[4,0,0,0,230,0]],[[24,60,0,0,0,0],[24,41,0,0,0,0],[24,40,0,0,0,0],[24,27,0,0,0,0],[44,67,0,0,0,0],[25,69,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[24,0,0,0,166,0],[45,0,0,0,169,0],[24,0,0,0,170,0],[24,0,0,0,186,0],[24,0,0,0,189,0],[45,0,0,0,187,0],[24,0,0,0,188,0],[24,0,0,0,206,0],[45,0,0,0,207,0],[4,0,0,0,226,0],[5,0,0,0,227,0],[4,0,0,0,247,0],[4,0,0,0,248,0],[5,0,0,0,249,0],[4,0,0,0,250,0],[5,0,0,0,251,0]],[[24,41,0,0,0,0],[45,60,0,0,0,0],[24,60,0,0,0,0],[45,49,0,0,0,0],[44,0,0,0,0,0],[24,0,0,0,0,0],[24,0,0,0,0,0],[24,0,0,0,185,0],[24,0,0,0,186,0],[44,0,0,0,189,0],[44,0,0,0,190,0],[24,0,0,0,206,0],[44,0,0,0,207,0],[24,0,0,0,208,0],[45,0,0,0,209,0],[24,0,0,0,210,0],[24,0,0,0,246,0],[4,0,0,0,247,0],[4,0,0,0,248,0],[4,0,0,0,249,0],[5,0,0,0,250,0],[5,0,0,0,251,0],[5,0,0,0,248,0],[4,0,0,0,249,0]],[[24,67,0,0,0,0],[24,67,0,0,0,0],[24,68,0,0,0,0],[44,69,0,0,0,0],[24,0,0,0,0,0],[25,0,0,0,0,0],[24,0,0,0,0,0],[25,0,0,0,205,0],[45,0,0,0,206,0],[24,0,0,0,209,0],[45,0,0,0,210,0],[44,0,0,0,227,0],[24,0,0,0,228,0],[45,0,0,0,229,0],[25,0,0,0,230,0],[45,0,0,0,271,0],[24,0,0,0,266,0],[5,0,0,0,267,0],[5,0,0,0,268,0],[4,0,0,0,269,0],[4,0,0,0,270,0],[4,0,0,0,271,0],[5,0,0,0,266,0],[5,0,0,0,267,0]],[[24,0,0,0,167,0],[24,0,0,0,168,0],[24,0,0,0,169,0],[25,0,0,0,170,0],[24,0,0,0,167,0],[24,0,0,0,168,0],[44,0,0,0,169,0],[24,0,0,0,186,0],[44,0,0,0,226,0],[24,0,0,0,229,0],[24,0,0,0,230,0],[25,0,0,0,247,0],[24,0,0,0,248,0],[24,0,0,0,249,0],[45,0,0,0,250,0],[24,0,0,0,291,0],[24,0,0,0,206,0],[4,0,0,0,207,0],[5,0,0,0,208,0],[4,0,0,0,209,0],[5,0,0,0,210,0],[5,0,0,0,211,0],[4,0,0,0,206,0],[5,0,0,0,207,0]],[[24,0,0,0,187,0],[24,0,0,0,188,0],[45,0,0,0,189,0],[44,0,0,0,190,0],[24,0,0,0,187,0],[45,0,0,0,188,0],[24,0,0,0,189,0],[25,0,0,0,206,0],[24,0,0,0,246,0],[25,0,0,0,249,0],[44,0,0,0,250,0],[24,0,0,0,267,0],[45,0,0,0,268,0],[24,0,0,0,269,0],[45,0,0,0,270,0],[45,0,0,0,226,0],[24,0,0,0,227,0],[5,0,0,0,228,0],[4,0,0,0,229,0],[4,0,0,0,230,0],[4,0,0,0,231,0],[5,0,0,0,208,0],[5,0,0,0,209,0],[5,0,0,0,210,0]],[[24,0,0,0,207,0],[24,0,0,0,208,0],[45,0,0,0,209,0],[24,0,0,0,210,0],[45,0,0,0,207,0],[44,0,0,0,208,0],[45,0,0,0,209,0],[44,0,0,0,210,0],[24,0,0,0,266,0],[24,0,0,0,269,0],[24,0,0,0,270,0],[24,0,0,0,207,0],[45,0,0,0,208,0],[24,0,0,0,209,0],[24,0,0,0,210,0],[45,0,0,0,228,0],[45,0,0,0,229,0],[45,0,0,0,230,0],[4,0,0,0,231,0],[4,0,0,0,226,0],[5,0,0,0,227,0],[5,0,0,0,228,0],[4,0,0,0,229,0],[5,0,0,0,230,0]]],
    "tileset": "tileset.png",
    "borderMap" : [{
        "mapName" : "map1", 
        "cardDir" : "west",
        "index" : 0
    }]
  }

Le visible

Les événements

Premières choses : désormais, il y a des événements ! Ce sont ces carrés bleus, qui vont déclencher un script dans différentes conditions. Certains se déclenchent au passage, d'autre lorsqu'on est dessus et qu'on appuie sur une touche.

Le script de l'événement est une bête fonction JavaScript, mais qui a accès à tous les objets du jeu (le joueur, la map, les ennemis quand ils arriveront ...). De cette manière, la fonction est appelée à chaque passage sur la case, mais elle n'effectuera une action qu'a certaine conditions, explicitée dans le corps de la fonction (par exemple, ne se déclencher que si la touche espace est pressée) et cette action peut cibler n'importe quoi, par exemple immobiliser le joueur durant l'affichage d'un texte. Lorsqu'un événement est déclenché, il bloque tous les autres, pour éviter qu'un second événement se lance durant le premier.

La boite de dialogue

Les événements amènent à une deuxième avancée : la boite de dialogue. Elle suit le joueur où qu'il aille, en s'adaptant à sa position (passage à droite ou à gauche, là ou il y a le plus de places) et permet d'afficher une suite de texte, en passant au suivant à l'appui sur la touche espace. Le tout est en HTML/CSS, parce que pour formater du texte, c'est quand même le plus simple.

Elle est capable de gérer une file de texte à afficher, et peut déclencher une fonction lorsque la file est vide. De cette manière, on peut déclencher une action à la fin d'un phase de dialogue. De plus, on ne peut passer au texte suivant qu'une seconde après sont affichage, pour éviter les validations intempestives (oups, je suis resté appuyé trop longtemps sur espace !)

La gestion de profondeur

Dans la première version, une partie de la map était dessinée sous le héros, puis le héros, puis la seconde partie de la map. De cette manière, certains objets pouvaient occulter le héros. Le souci, c'est que le héros fait 3 tiles de haut. Lorsque le héros avance vers le sud et se retrouve face à un arbre, il doit apparaitre au-dessus de l'arbre. Mais s'il arrive depuis le sud, il doit apparaitre derrière !

Pour pouvoir le faire passer correctement derrière un tronc d'arbre, il a fallu découper le joueur en 3 tranches, et l'afficher sur 3 niveaux différents. De la même manière, le terrain à été découpé en tranches (5 en tout). L'idée étant qu'il y aura une partie affichée sous les pieds du héros (tranche 1), sous le buste (tranche 2) et sous la tête (tranche 3).

L'invisible

Chargement des maps

Dans la première version, je disposais d'un objet énorme, qui contenait toutes les maps du jeu. Le souci étant qu'il allait falloir charger un fichier contenant les données de cet objet, et que ça forçait un temps d'attente avant de lancer le jeu

Pour changer ça, j'ai stocké les maps séparément, chacune dans son objet, mais avec un pointeur vers les maps voisines. Lorsque le héros rentre dans une map, on déclenche le chargement des maps voisines (ajax est mon ami). De cette manière la transition entre les maps sera fluide, sans pour autant devoir charger l'intégralité du jeu.

Gestion interne

Dans la version 0.1, des fonctions étaient appelées dans une grande boucle, qui appelaient d'autres fonctions, selon les touches enfoncées au moment précis, qui à leurs tours appelaient d'autres fonctions. C'était le plus simple à mettre en place, mais ça a mené à du code imbuvable, avec des conditions partout et des fonctions de 1500 lignes de long.

Pour remédier à ça, j'ai adopté un modèle évènementiel. L'appui sur une touche déclenche un événement, cet événement va déclencher plusieurs fonctions qui pourront, selon les cas, déclencher d'autres évènements. On peut voir les événements déclenchés en ouvrant la console JavaScript (ils sont loggés)

Chargement du code

Précédemment, le code, contenu dans plusieurs petits fichiers, était intégralement linké pour lancer le jeu. Comme le chargement de script est bloquant, chaque script était chargé à son tour. Outre la lourdeur du code avec ses 15 balises <script>, il fallait prier pour que le script se lance lorsque tout était bien chargé.

Désormais, on n'inclue qu'un seul script dans la page, qui se chargera de récupérer le reste. Puis, quand tout sera chargé, le jeu sera lancé.

En bref

J'ai passé pas mal de temps à tout réécrire proprement, et visiblement ça a payé, puisque l'implémentation de nouvelles fonctionnalités (événements, par exemple) a été très rapide.

Maintenant, va falloir s'attaquer au prochain gros morceau, les ennemis, les IA, la gestion du combat. Mais j'ai pleins d'autre petite idée à ajouter et/ou tester. Par exemple, rajouter un calque qui permettrait de faire varier la luminosité et la teinte de l'ensemble, pour faire des jeux de lumière. En bref, du fun en perspective !

Glitch

Whiteshoulders — Tue, 01 Oct 2013 19:55:00 +0200

J'aime bien les glitch, j'aime le javascript. Donc j'ai mixé les deux, pour un résultat des plus approximatif. L'idée étant que ça ressemble à l'image d'une VHS qui a moisi trop longtemps.

Résultat : Choisissez une bien belle image sur votre disque dur (de préférence pas plus grande que 400x400, histoire que ça ne mouline pas trop) et déposez la sur le cadre gris ou choisissez-en une à droite, réglez le niveau de glitchiness, et glitchez moi ça.

<div id="glitch_wrapper">
    <canvas id="glitched" height="400" width="400"></canvas>
    <div id="imSelect">
        <img id="im1" src="/data/images/glitch/im1_t.png" /><br/>
        <img id="im2" src="/data/images/glitch/im2_t.png" /><br/>
        <img id="im3" src="/data/images/glitch/im3_t.png" /><br/>
        <img id="im4" src="/data/images/glitch/im4_t.png" />
    </div>
    <div id="controls">
        <p>GLITCHINESS: <input id="glitchiness" type="range" value="10" max="20" min="0"></input></p>
        <button id="glitch">Glitch !</button>
    </div>
</div>
<script type="text/javascript">
    var glitchness = 0.5;
    var canvas = document.getElementById("glitched");
    var context = canvas.getContext("2d");
    var img = document.createElement("img");
    var button = document.getElementById("glitch");
    var slider = document.getElementById('glitchiness')

    context.font = 'normal 20pt Calibri';
    context.fillText("Deposez une image", 100, 185);
    context.fillText("ou choisissez-en une", 95, 215);

    var im1 = document.getElementById("im1");
    var im2 = document.getElementById("im2");
    var im3 = document.getElementById("im3");
    var im4 = document.getElementById("im4");
    im1.onclick = function(){
        img.src = "/data/images/glitch/im1.png";
    }

    im2.onclick = function(){
        img.src = "/data/images/glitch/im2.png";
    }

    im3.onclick = function(){
        img.src = "/data/images/glitch/im3.png";
    }

    im4.onclick = function(){
        img.src = "/data/images/glitch/im4.png";
    }   

    canvas.addEventListener("dragover", function(evt){
        evt.preventDefault();
    }, false);

    canvas.addEventListener("drop", function(evt){
        var files = evt.dataTransfer.files;
        if(files.length>0){
            var file = files[0];
            if(typeof FileReader !== "undefined" &amp;&amp; file.type.indexOf("image" != -1)){
                var reader = new FileReader();
                reader.onload = function(evt){
                    img.src = evt.target.result;
                }
                reader.readAsDataURL(file);
            }
        }
        evt.preventDefault();
    }, false);

    img.addEventListener("load", function(){
        canvas.width = img.width;
        canvas.height = img.height;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(img, 0, 0); 
        stackBlurCanvasRGB("glitched", 0, 0, canvas.width, canvas.height,1);
    })

    button.addEventListener("click", function(){
        glitchness = slider.value/20;
        var canvasWidth = canvas.width;
        var canvasHeight = canvas.height;
        context.drawImage(img, 0, 0); 
        var imData = context.getImageData(0, 0, canvasWidth, canvasHeight);
        var data = imData.data;
        var dataOriginal = JSON.parse(JSON.stringify(data));

        var aleat = Math.pow(0.9999, glitchness);
        var aleat1 = Math.pow(0.999, glitchness);

        var fact1 = 1;
        var fact2 = 1;
        var decalX = 0;
        var deform = false;
        var freq = 10;
        var amp = 0;
        var red = glitchness*Math.random()+1;
        var green = glitchness*Math.random()+1;
        var blue = glitchness*Math.random()+1;
        var reverseX = Math.random()>0.5;
        var reverseY = Math.random()>0.5;
        var minX = 0;
        var maxX = 0;
        var c1 = 1;
        var c2 = 1;
        var c3 = 1;

        var d1 = 0.7+0.3*Math.random()*glitchness;
        var d2 = 0.7+0.3*Math.random()*glitchness;
        var d3 = 0.7+0.3*Math.random()*glitchness;

        var r = (glitchness === 0) ? 0 : Math.floor(Math.random()*3);
        var v = (glitchness === 0) ? 1 : Math.floor(Math.random()*3);
        var b = (glitchness === 0) ? 2 : Math.floor(Math.random()*3);

        for (var yd = 0; yd < canvasHeight; yd += 1) {
            for (var xd = 0; xd < canvasWidth; xd += 1) {
                if(reverseY){
                    y = canvasWidth-yd-1;
                }else{
                    y = yd;
                }

                if(reverseX){
                    x = canvasWidth-xd-1;
                }else{
                    x = xd;
                }

                var index1 = (y * canvasWidth + x) * 4;
                var variation = 0.000001*(Math.floor(Math.random()*2)*2-1);
                if(deform){
                    fact1 += variation*Math.random();
                    fact2 += variation*Math.random();
                }
                if(fact1>1 || !deform){
                    fact1 = 1;
                }
                if(fact2>1 || !deform){
                    fact2 = 1;
                }

                if(Math.random()>aleat){
                    decalX = (Math.floor(Math.random()*2)-1)*50*Math.random()*glitchness;
                    minX = Math.floor(canvasWidth/2*Math.random());
                    maxX = canvasWidth/2+Math.floor(canvasWidth/2*Math.random());
                }
                if(x>minX &amp;&amp; x<maxX){
                    x+=Math.floor(decalX);
                }

                var index2 = Math.floor((y*fact1 * canvasWidth + (x+decalX)*fact2) * 4);
                if(Math.random()>aleat1){
                    var freq = (Math.random())*100;
                    var amp = (Math.random())*50*glitchness;
                }
                index2 = index2 + Math.floor(Math.sin(y/freq)*amp);

                if(Math.random()>aleat){
                    deform = !deform;
                    fact1 = 1;
                    fact2 = 1;
                }

                index2 = Math.floor(index2*glitchness + (1-glitchness)*index1);
                index3 = Math.floor((y * canvasWidth + x+decalX) * 4);

                if(Math.random()>aleat){
                     c1 = Math.random()*glitchness;
                     c2 = Math.random()*glitchness;
                     c3 = Math.random()*glitchness;
                }
                data[index1+0] = Math.floor((dataOriginal[index2+0]*red + (1 + c1-glitchness)*dataOriginal[index3+0])/(2+c1) - Math.random()*50*glitchness);
                data[index1+1] = Math.floor((dataOriginal[index2+1]*green + (1 + c2-glitchness)*dataOriginal[index3+1])/(2+c1) - Math.random()*50*glitchness);
                data[index1+2] = Math.floor((dataOriginal[index2+2]*blue + (1 + c3-glitchness)*dataOriginal[index3+2] )/(2+c1) - Math.random()*50*glitchness);

                var blackBand = Math.pow(Math.sin(y),4)*2;
                data[index1+0] = (d1*data[index1+0] + (1-d1)*dataOriginal[index1+r])*Math.pow(blackBand,glitchness);
                data[index1+1] = (d2*data[index1+1] + (1-d2)*dataOriginal[index1+v])*Math.pow(blackBand,glitchness);
                data[index1+2] = (d3*data[index1+2] + (1-d3)*dataOriginal[index1+b])*Math.pow(blackBand,glitchness);
            }
        }
        context.putImageData(imData, 0, 0);
        stackBlurCanvasRGB("glitched", 0, 0, canvas.width, canvas.height,1+Math.pow(Math.random(),2)*4*glitchness);
    }, false);

/ StackBlur - a fast almost Gaussian Blur For Canvas

Version: 0.5 Author: Mario Klingemann Contact: mario@quasimondo.com Website: http://www.quasimondo.com/StackBlurForCanvas</a> Twitter: @quasimondo In case you find this class useful - especially in commercial projects - I am not totally unhappy for a small donation to my PayPal account mario@quasimondo.de Or support me on flattr: https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript</a> Copyright (c) 2010 Mario Klingemann Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. / var mul_table = [512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,

454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,
482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,
437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,
497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,
320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,
446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,
329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,
505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,
399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,
324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,
268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,
451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,
385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,
332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,
289,287,285,282,280,278,275,273,271,269,267,265,263,261,259];

var shg_table = [9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17,

17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 
19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20,
20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21,
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 
23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24 ];</code>

function stackBlurImage( imageID, canvasID, radius, blurAlphaChannel ) {

var img = document.getElementById( imageID ); var w = img.naturalWidth; var h = img.naturalHeight;

var canvas = document.getElementById( canvasID );

canvas.style.width = w + "px"; canvas.style.height = h + "px"; canvas.width = w; canvas.height = h;

var context = canvas.getContext("2d"); context.clearRect( 0, 0, w, h ); context.drawImage( img, 0, 0 );

if ( isNaN(radius) || radius < 1 ) return;

if ( blurAlphaChannel )

stackBlurCanvasRGBA( canvasID, 0, 0, w, h, radius );

else

stackBlurCanvasRGB( canvasID, 0, 0, w, h, radius );

}function stackBlurCanvasRGBA( id, top_x, top_y, width, height, radius ) {

if ( isNaN(radius) || radius < 1 ) return; radius |= 0;

var canvas = document.getElementById( id ); var context = canvas.getContext("2d"); var imageData;

try { try {

imageData = context.getImageData( top_x, top_y, width, height );

} catch(e) {

// NOTE: this part is supposedly only needed if you want to work with local files
// so it might be okay to remove the whole try/catch block and just use
// imageData = context.getImageData( top_x, top_y, width, height );
try {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
    imageData = context.getImageData( top_x, top_y, width, height );
} catch(e) {
    alert("Cannot access local image");
    throw new Error("unable to access local image data: " + e);
    return;
}

} } catch(e) { alert("Cannot access image"); throw new Error("unable to access image data: " + e); }

var pixels = imageData.data;

var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum, r_out_sum, g_out_sum, b_out_sum, a_out_sum, r_in_sum, g_in_sum, b_in_sum, a_in_sum, pr, pg, pb, pa, rbs;

var div = radius + radius + 1; var w4 = width << 2; var widthMinus1 = width - 1; var heightMinus1 = height - 1; var radiusPlus1 = radius + 1; var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2;

var stackStart = new BlurStack(); var stack = stackStart; for ( i = 1; i < div; i++ ) {

stack = stack.next = new BlurStack();
if ( i == radiusPlus1 ) var stackEnd = stack;

} stack.next = stackStart; var stackIn = null; var stackOut = null;

yw = yi = 0;

var mul_sum = mul_table[radius]; var shg_sum = shg_table[radius];

for ( y = 0; y < height; y++ ) {

r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;

r_out_sum = radiusPlus1 * ( pr = pixels[yi] );
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] );
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] );
a_out_sum = radiusPlus1 * ( pa = pixels[yi+3] );

r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;
a_sum += sumFactor * pa;

stack = stackStart;

for( i = 0; i < radiusPlus1; i++ )
{
    stack.r = pr;
    stack.g = pg;
    stack.b = pb;
    stack.a = pa;
    stack = stack.next;
}

for( i = 1; i < radiusPlus1; i++ )
{
    p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 );
    r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i );
    g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs;
    b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs;
    a_sum += ( stack.a = ( pa = pixels[p+3])) * rbs;

    r_in_sum += pr;
    g_in_sum += pg;
    b_in_sum += pb;
    a_in_sum += pa;

    stack = stack.next;
}

stackIn = stackStart;
stackOut = stackEnd;
for ( x = 0; x < width; x++ )
{
    pixels[yi+3] = pa = (a_sum * mul_sum) >> shg_sum;
    if ( pa != 0 )
    {
        pa = 255 / pa;
        pixels[yi]   = ((r_sum * mul_sum) >> shg_sum) * pa;
        pixels[yi+1] = ((g_sum * mul_sum) >> shg_sum) * pa;
        pixels[yi+2] = ((b_sum * mul_sum) >> shg_sum) * pa;
    } else {
        pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0;
    }

    r_sum -= r_out_sum;
    g_sum -= g_out_sum;
    b_sum -= b_out_sum;
    a_sum -= a_out_sum;

    r_out_sum -= stackIn.r;
    g_out_sum -= stackIn.g;
    b_out_sum -= stackIn.b;
    a_out_sum -= stackIn.a;

    p =  ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2;

    r_in_sum += ( stackIn.r = pixels[p]);
    g_in_sum += ( stackIn.g = pixels[p+1]);
    b_in_sum += ( stackIn.b = pixels[p+2]);
    a_in_sum += ( stackIn.a = pixels[p+3]);

    r_sum += r_in_sum;
    g_sum += g_in_sum;
    b_sum += b_in_sum;
    a_sum += a_in_sum;

    stackIn = stackIn.next;

    r_out_sum += ( pr = stackOut.r );
    g_out_sum += ( pg = stackOut.g );
    b_out_sum += ( pb = stackOut.b );
    a_out_sum += ( pa = stackOut.a );

    r_in_sum -= pr;
    g_in_sum -= pg;
    b_in_sum -= pb;
    a_in_sum -= pa;

    stackOut = stackOut.next;

    yi += 4;
}
yw += width;

}

for ( x = 0; x < width; x++ ) {

g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;

yi = x << 2;
r_out_sum = radiusPlus1 * ( pr = pixels[yi]);
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]);
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]);
a_out_sum = radiusPlus1 * ( pa = pixels[yi+3]);

r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;
a_sum += sumFactor * pa;

stack = stackStart;

for( i = 0; i < radiusPlus1; i++ )
{
    stack.r = pr;
    stack.g = pg;
    stack.b = pb;
    stack.a = pa;
    stack = stack.next;
}

yp = width;

for( i = 1; i <= radius; i++ )
{
    yi = ( yp + x ) << 2;

    r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i );
    g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs;
    b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs;
    a_sum += ( stack.a = ( pa = pixels[yi+3])) * rbs;

    r_in_sum += pr;
    g_in_sum += pg;
    b_in_sum += pb;
    a_in_sum += pa;

    stack = stack.next;

    if( i < heightMinus1 )
    {
        yp += width;
    }
}

yi = x;
stackIn = stackStart;
stackOut = stackEnd;
for ( y = 0; y < height; y++ )
{
    p = yi << 2;
    pixels[p+3] = pa = (a_sum * mul_sum) >> shg_sum;
    if ( pa > 0 )
    {
        pa = 255 / pa;
        pixels[p]   = ((r_sum * mul_sum) >> shg_sum ) * pa;
        pixels[p+1] = ((g_sum * mul_sum) >> shg_sum ) * pa;
        pixels[p+2] = ((b_sum * mul_sum) >> shg_sum ) * pa;
    } else {
        pixels[p] = pixels[p+1] = pixels[p+2] = 0;
    }

    r_sum -= r_out_sum;
    g_sum -= g_out_sum;
    b_sum -= b_out_sum;
    a_sum -= a_out_sum;

    r_out_sum -= stackIn.r;
    g_out_sum -= stackIn.g;
    b_out_sum -= stackIn.b;
    a_out_sum -= stackIn.a;

    p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2;

    r_sum += ( r_in_sum += ( stackIn.r = pixels[p]));
    g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1]));
    b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2]));
    a_sum += ( a_in_sum += ( stackIn.a = pixels[p+3]));

    stackIn = stackIn.next;

    r_out_sum += ( pr = stackOut.r );
    g_out_sum += ( pg = stackOut.g );
    b_out_sum += ( pb = stackOut.b );
    a_out_sum += ( pa = stackOut.a );

    r_in_sum -= pr;
    g_in_sum -= pg;
    b_in_sum -= pb;
    a_in_sum -= pa;

    stackOut = stackOut.next;

    yi += width;
}

}

context.putImageData( imageData, top_x, top_y );

} function stackBlurCanvasRGB( id, top_x, top_y, width, height, radius ) { if ( isNaN(radius) || radius < 1 ) return; radius |= 0;

var canvas = document.getElementById( id ); var context = canvas.getContext("2d"); var imageData;

try { try {

imageData = context.getImageData( top_x, top_y, width, height );

} catch(e) {

// NOTE: this part is supposedly only needed if you want to work with local files
// so it might be okay to remove the whole try/catch block and just use
// imageData = context.getImageData( top_x, top_y, width, height );
try {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
    imageData = context.getImageData( top_x, top_y, width, height );
} catch(e) {
    alert("Cannot access local image");
    throw new Error("unable to access local image data: " + e);
    return;
}

} } catch(e) { alert("Cannot access image"); throw new Error("unable to access image data: " + e); }

var pixels = imageData.data;

var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, r_out_sum, g_out_sum, b_out_sum, r_in_sum, g_in_sum, b_in_sum, pr, pg, pb, rbs;

var div = radius + radius + 1; var w4 = width << 2; var widthMinus1 = width - 1; var heightMinus1 = height - 1; var radiusPlus1 = radius + 1; var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2;

var stackStart = new BlurStack(); var stack = stackStart; for ( i = 1; i < div; i++ ) {

stack = stack.next = new BlurStack();
if ( i == radiusPlus1 ) var stackEnd = stack;

} stack.next = stackStart; var stackIn = null; var stackOut = null;

yw = yi = 0;

var mul_sum = mul_table[radius]; var shg_sum = shg_table[radius];

for ( y = 0; y < height; y++ ) {

r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0;

r_out_sum = radiusPlus1 * ( pr = pixels[yi] );
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] );
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] );

r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;

stack = stackStart;

for( i = 0; i < radiusPlus1; i++ )
{
    stack.r = pr;
    stack.g = pg;
    stack.b = pb;
    stack = stack.next;
}

for( i = 1; i < radiusPlus1; i++ )
{
    p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 );
    r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i );
    g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs;
    b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs;

    r_in_sum += pr;
    g_in_sum += pg;
    b_in_sum += pb;

    stack = stack.next;
}

stackIn = stackStart;
stackOut = stackEnd;
for ( x = 0; x < width; x++ )
{
    pixels[yi]   = (r_sum * mul_sum) >> shg_sum;
    pixels[yi+1] = (g_sum * mul_sum) >> shg_sum;
    pixels[yi+2] = (b_sum * mul_sum) >> shg_sum;

    r_sum -= r_out_sum;
    g_sum -= g_out_sum;
    b_sum -= b_out_sum;

    r_out_sum -= stackIn.r;
    g_out_sum -= stackIn.g;
    b_out_sum -= stackIn.b;

    p =  ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2;

    r_in_sum += ( stackIn.r = pixels[p]);
    g_in_sum += ( stackIn.g = pixels[p+1]);
    b_in_sum += ( stackIn.b = pixels[p+2]);

    r_sum += r_in_sum;
    g_sum += g_in_sum;
    b_sum += b_in_sum;

    stackIn = stackIn.next;

    r_out_sum += ( pr = stackOut.r );
    g_out_sum += ( pg = stackOut.g );
    b_out_sum += ( pb = stackOut.b );

    r_in_sum -= pr;
    g_in_sum -= pg;
    b_in_sum -= pb;

    stackOut = stackOut.next;

    yi += 4;
}
yw += width;

}

for ( x = 0; x < width; x++ ) {

g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0;

yi = x << 2;
r_out_sum = radiusPlus1 * ( pr = pixels[yi]);
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]);
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]);

r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;

stack = stackStart;

for( i = 0; i < radiusPlus1; i++ )
{
    stack.r = pr;
    stack.g = pg;
    stack.b = pb;
    stack = stack.next;
}

yp = width;

for( i = 1; i <= radius; i++ )
{
    yi = ( yp + x ) << 2;

    r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i );
    g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs;
    b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs;

    r_in_sum += pr;
    g_in_sum += pg;
    b_in_sum += pb;

    stack = stack.next;

    if( i < heightMinus1 )
    {
        yp += width;
    }
}

yi = x;
stackIn = stackStart;
stackOut = stackEnd;
for ( y = 0; y < height; y++ )
{
    p = yi << 2;
    pixels[p]   = (r_sum * mul_sum) >> shg_sum;
    pixels[p+1] = (g_sum * mul_sum) >> shg_sum;
    pixels[p+2] = (b_sum * mul_sum) >> shg_sum;

    r_sum -= r_out_sum;
    g_sum -= g_out_sum;
    b_sum -= b_out_sum;

    r_out_sum -= stackIn.r;
    g_out_sum -= stackIn.g;
    b_out_sum -= stackIn.b;

    p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2;

    r_sum += ( r_in_sum += ( stackIn.r = pixels[p]));
    g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1]));
    b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2]));

    stackIn = stackIn.next;

    r_out_sum += ( pr = stackOut.r );
    g_out_sum += ( pg = stackOut.g );
    b_out_sum += ( pb = stackOut.b );

    r_in_sum -= pr;
    g_in_sum -= pg;
    b_in_sum -= pb;

    stackOut = stackOut.next;

    yi += width;
}

}

context.putImageData( imageData, top_x, top_y );

} function BlurStack() { this.r = 0; this.g = 0; this.b = 0; this.a = 0; this.next = null; }

Cards Against Humanity

Whiteshoulders — Wed, 07 Aug 2013 21:10:00 +0200

Dans la catégorie "useless, but fun", je vous présente Cards Against Humanity, javascript édition : un petit programme javascript pour jouer tout seul à un jeu qui n'est amusant qu'a plusieurs. Oui, c'est inutile.

Le jeu n'est pas fourni du tout, juste quelques question et quelques réponse. C’était plus pour le fun qu'autre chose. Le code source de la chose et disponible ici

Valider

Ruperth

Whiteshoulders — Wed, 26 Jun 2013 21:20:00 +0200

Rpg.js v0.1

Whiteshoulders — Sat, 25 May 2013 22:25:00 +0200

Après Atoll, j'ai eu envie de faire d'autres petit jeu. Comme j'avais envie d'apprendre le javascript, j'ai pensé aux jeux HTML5. Et je me suis mis en tête de faire le mien.

C'est donc la fleur au fusil que j'ai choisi de faire un mini RPG

Pour l'instant, c'est vraiment quelque chose de mini-mini. A peine un prototype. Les déplacements du personnage sont là, selon 8 directions.

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,1,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,1,1,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

[{"map_1A":[[4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4],[4,4,4,4,4,4,4,4,5,4,4,4,4,4,4,4,4,4,4,4],[4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4],[4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,4],[4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4],[4,4,4,4,4,4,4,4,4,4,4,4,4,4,24,4,4,4,4,4],[4,4,4,4,4,4,4,25,4,4,4,4,4,4,4,24,4,4,4,4],[4,4,4,4,4,4,4,44,4,4,4,4,4,4,4,44,24,24,4,4],[4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,44,24,4,4,4],[24,44,4,4,4,4,4,4,4,4,4,4,4,64,65,64,25,25,4,4],[25,45,64,4,4,4,4,4,4,4,4,64,64,65,64,45,45,25,4,4],[4,45,44,64,4,4,4,4,4,4,65,64,65,45,64,44,25,4,4,4],[4,24,45,45,64,65,64,64,65,64,65,64,45,45,45,45,24,4,4,4],[4,4,25,44,45,64,45,64,45,64,64,45,45,24,4,25,4,4,4,4],[4,4,24,24,25,45,45,45,44,45,24,25,24,4,4,4,4,4,4,4],[4,4,4,4,4,24,25,24,25,24,4,4,4,4,4,4,4,4,4,4],[4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,4,4,4],[4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4],[4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4],[4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4]],"map_1B":[[0,0,42,0,0,0,0,0,0,0,0,0,0,0,0,0,0,262,0,0],[0,0,0,0,0,0,0,0,0,0,43,0,0,42,0,0,0,262,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,262,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,24,0,262,0,0],[0,0,24,24,63,0,0,0,0,24,42,0,0,0,24,24,24,262,0,0],[0,24,44,44,24,24,139,0,0,62,24,24,24,24,44,44,44,24,0,0],[24,44,76,77,44,24,24,162,24,24,44,44,24,65,74,75,44,24,0,0],[0,24,96,97,52,44,24,182,24,44,65,51,86,87,94,95,44,24,0,0],[0,0,116,117,72,73,64,44,65,65,70,71,106,107,114,115,24,262,0,0],[0,0,0,137,92,93,86,87,88,89,90,91,126,127,134,0,0,262,0,0],[0,0,0,157,112,113,106,107,108,109,110,111,146,147,154,0,0,262,0,0],[0,0,0,0,132,133,126,127,128,129,130,131,0,105,0,0,0,262,0,0],[0,0,23,0,0,153,146,147,148,149,150,105,105,0,0,0,0,262,0,0],[0,43,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,262,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,262,0,0],[0,0,0,0,0,0,0,0,62,0,0,0,0,0,0,0,0,262,0,0],[0,0,0,0,0,62,62,0,0,0,0,0,0,0,0,0,0,262,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,262,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,63,0,0,62,0,262,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,262,0,0]],"map_2A":[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,78,79,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,98,101,102,103,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,120,121,122,123,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,141,142,143,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"map_2B":[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"map_event":[[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":2,"up":0,"left":0,"right":0,"down":5},{"type":2,"up":0,"left":0,"right":0,"down":5},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":2,"up":0,"left":0,"right":0,"down":5},{"type":2,"up":0,"left":0,"right":0,"down":5},{"type":2,"up":0,"left":0,"right":0,"down":5},{"type":2,"up":0,"left":0,"right":0,"down":5},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}],[{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0},{"type":0}]],"borderTransition":{"up":0,"down":0,"left":0,"right":0}}]

De manière générale pour les déplacements, je me suis inspiré de "Zelda: A Link To The Past", avec un déplacement libre entre les "cases", et en utilisant le cornering lors des collisions. On obtient ainsi un mouvement assez fluide, malgré quelques bugs (arriver en diagonale sur un obstacle lui aussi en diagonale, comme une partie de la falaise)

Une gestion de la "profondeur" est également présente (personnage devant/derrière l'arbre), en utilisant plusieurs calques pour dessiner la map. A terme, il sera également possible de mettre en place des ponts, donc des zone où l'on passera au dessus du tile ou en dessous, selon notre déplacement.

Pour ce jeu, j'ai aussi bossé sur le scrolling dans la map et sur les transitions au bord de la map. Ici, la transition se fait entre la map et elle même, parce que je n'ai fait qu'une seule map pour le moment.

J'ai aussi commencé à mettre en place une gestion de certains événements, qui va s'étoffer à terme, avec la possibilité de sauter, depuis le haut de la falaise.

Pour l'occasion, et vu que c'est un projet qui va avoir plus d'ampleur que tout ce que j'ai pu produire jusqu’à maintenant, j'ai commencé à utiliser Git. Je ne saurais pas encore dire si c'est gadget vu que je développe tout seul, l'avenir me le dira.

The War

Whiteshoulders — Mon, 25 Mar 2013 21:54:00 +0100

Atoll - C'est fini

Whiteshoulders — Tue, 05 Mar 2013 01:05:00 +0100

Ayé, Atoll est fini. J'ai passé ma soutenance, le projet est achevé. J'ai essayé d'en faire un truc jouable avec une interface propre, quitte à ce que le jeu soit moins étoffé que prévu. J'aurais au moins inclus ma génération de map aléatoire, et ça, ça me tenais vraiment à cœur.

J'aurais bien aimé ajouter bien des choses. J'aurais bien aimé essayer de généraliser le jeu pour plus de deux joueurs. Il aurait fallut modifier un peu les règles, agrandir la map, et pourquoi pas ajouter des bonus (comme la possibilité de convertir un pont adverse), mais pourquoi pas ?

J'aurais bien aimé programmer une IA pour jouer contre l'ordinateur aussi. Ça aurait été faisable sans que ça soit trop compliqué conceptuellement, mais ça aurait pris du temps. Et de la motivation. Phase descendante, tout ça ...

Par contre la musique qu'on ne peut pas couper, c'est normal, c'est prévu, c'est juste mon coté sadique. Amusez-vous bien.

Télécharger Atoll.zip [7.84 Mo]

L'archive contient un .exe, qui peut rendre votre antivirus nerveux, mais croix-de-bois-croix-de-fer, si y'a un virus, j'vais en enfer. Il faut juste lancer le-dit .exe, et pouf, profitez.
Si vous tombez sur des bugs, ou des trucs louches, des erreurs, des problèmes, des gaffes, des bévues, des boulettes, ou n'importe quoi d'autres, faites m'en part.

Atoll - Quelques nouvelles

Whiteshoulders — Wed, 13 Feb 2013 00:21:00 +0100

Mon petit projet de jeu avance plutôt bien. Le cœur du jeu est terminé, avec toutes les règles du jeu, les bonus, etc ...
Maintenant je travaille sur l'interface. Comme on pouvait s'y attendre en voyant les map générées aléatoirement, ça ne sera que du gros pixel, pour mon plus grand plaisir.

Pour le moment la carte n'est pas dynamique, c'est juste une image sur laquelle je dessine les ponts. Mais à terme, pourquoi ne pas faire "bouger" la mer, avec un bruit dynamique ?

Si tôt

Whiteshoulders — Wed, 06 Feb 2013 16:30:00 +0100

[mp3]

Atoll - Generation aléatoire

Whiteshoulders — Sat, 02 Feb 2013 00:50:00 +0100

Atoll, c'est un petit projet de jeu en C++, inspiré d'un jeu de plateau : Kahuna. L'idée était de proposer un jeu simple, jouable rapidement, et sur lequel je puisse développer un IA assez simple.

Comme dans kahuna, le plateau de jeu est un archipel d'iles, entre lesquelles chaque joueurs peut construire un pont. En construisant plus de la moitié des ponts d'une ile, les joueurs deviennent propriétaires des iles, le but du jeu étant de posséder le plus d'ile possible.

Là ou le jeu devient stratégique, c'est que lorsqu'un joueur prend la propriété d'une ile, il détruit tout les ponts de son adversaire partant de cette ile. De cette manière, il peut faire perdre la propriété des iles voisine à son adversaire. A ceci s'ajoute la possibilité de placer des bombes sur certains ponts, ou de piéger les liens non construit entre les iles. Ces bonus seront gagnés aléatoirement lors de la prise d'une ile.

Dans ce projet, ce qui me tenais vraiment à cœur, c'était la génération aléatoire d'une carte de jeu. La carte étant un graphe, où les iles sont des nœuds et les liens des arêtes, il faut se plonger un chouilla dans la théorie.

Théorie des graphes

La carte de jeu doit présenter environ une dizaine de nœuds, et ils doivent être reliés aléatoirement a d'autres nœuds, de manière à ne pas croiser d'autres arêtes. En théorie des graphe, on dit que ce graphe est planaire. Donc il faut que je soit capable de générer un graphe planaire.

Mais il faut aussi que les ils ne soit pas trop proche d'autres iles, ou d'autres liens (un lien doit passer dans la mer, pas au dessus d'une ile). Ce qu'il faut réaliser, c'est une triangulation de Delaunay. On relie les iles de manière à réaliser un maillage ou les triangles sont les moins plats possible. De cette manière, les noeuds sont les plus éloignés possible des arêtes.

Sachant que le nombre de noeud restera petit, il est possible d'implémenter un algorithme simple, sans se soucier de son efficacité : la méthode incrémentale. On obtient alors de jolies triangulations.

Dessiner les iles

Pour dessiner les iles, il faut ruser un peu. On pourrait dessiner un cercle autour de chaque point, mais il ne faut pas que les iles se superposent. Donc il faut que le rayon soit plus petit que la moitié du plus petit lien. Mais on aura des iles toutes de la même taille, ce qui n'est pas très esthétique.

La solution retenue est la suivante. Pour chaque point à l'intérieur d'un triangle, on cherche le sommet dont il est le plus proche, et on traduit ses coordonnées en coordonnées barycentriques par rapport à ce sommet. Puis, en fonction de ces valeurs, je colorie le pixel en bleu si il est éloigné du sommet, ou en jaune si il est proche. J'aurais ainsi autour des iles des portions de cercles plus ou moins grand selon la taille du triangle dans lequel il se trouve.

Pour colorier l'extérieur du graphe, il a fallu ajouter des points en dehors de l'image, pour que les triangles couvrent toute l'image.

Maintenant, je peux ajouter un peu de bruit, pour déformer le contour de mes iles. Le bruit de valeur est le candidat idéal. Je multiplie la valeur de la distance en coordonnées barycentrique trouvée précédemment pour un pixel par la valeur du bruit en ce pixel. On obtient un visuel beaucoup plus réaliste.

Il reste quelques artefacts, comme ces grandes lignes droite dans la mer, mais la carte est satisfaisante.

La carte se génère en moins d'une seconde, ce qui est suffisamment rapide. On pourrait tout optimiser, mais ce n'est pas le but recherché pour le moment

Atoll

Whiteshoulders — Tue, 29 Jan 2013 18:20:00 +0100

For Fist

Whiteshoulders — Wed, 09 Jan 2013 22:16:00 +0100