Darkoneko's Weblog

Yesterday, today, and no future / time waits for no one

Guest Post by Yuyucow: For an internet FREE of KyoAni myths

Posted by DarkoNeko le Samedi 5 avril 2014

DarkoNeko:

reblogged for great justice.

Originally posted on The Vanishing Trooper Incident:

Grumpy Oreki Sorry for the lack of updates lately, but as I think of something to write for the blog here’s a post from our internet neighbour Yuyucow who has once again decided to drop in to write a guest post. Today he will be sharing some of his insight discussing Kyoto Animation, commonly know as KyoAni, trying to clear up some of the unfortunate myths about them that have spread across the internet recently.

Voir l'original 1 394 mots de plus

Posted in les coulisses de Wikipédia | Commentaires fermés

Wikipédia, avertissement usuel pour le premier avril

Posted by DarkoNeko le Lundi 31 mars 2014

Demain, nous seront le premier avril.

Et comme chaque année, des milliers de gens vont trouver intelligent et original d’essayer d’ajouter des informations fausses dans notre Wikipédia (je veux dire qu’ils seront plus nombreux que les guignols faisant déjà ça le reste de l’année)

N’hésitez donc surtout pas à participer au nettoyage des âneries et à surveiller Wikipédia:modifications récentes !

D’avance, merci ! :)

Posted in actualités, les coulisses de Wikipédia | Tagué: , , , , | Commentaires fermés

Editnotice

Posted by DarkoNeko le Samedi 12 octobre 2013

Ce billet fait partie de la série "Personnalisons Wikipédia".

Mediawiki possède une fonctionnalité permettant d’afficher un message aux personnes tentant d’éditer une page donnée, appelée l’Editnotice (notice d’édition). Cela peut servir dans les articles comme pour les pages utilisateurs ou de discussion.

Mettons que j’en ai marre que les gens éditent la page de mon bot, Loveless. Il me suffit de créer User:Loveless/Editnotice et voici ce que les éditeurs potentiels verrons :

Version éditeur visuel

editnotice-wysiwygVersion éditeur normal

editnotice-edit

Par contre, ayez pitié des visiteurs : n’en faites pas un pavé clignotant digne de la page de user:MG et évitez donc de faire ça ! :D

—-

ressources :

 

Posted in Personnalisons Wikipédia | Tagué: , , , | Commentaires fermés

formulation malheureuse

Posted by DarkoNeko le Jeudi 29 août 2013

Cette histoire date un peu, mais ça me fait toujours autant rire.

Posted in les coulisses de Wikipédia | Tagué: , , , | Commentaires fermés

[html5] zombies – intro

Posted by DarkoNeko le Mercredi 24 juillet 2013

Ce billet fait parti de la série "bidouillons avec HTML5".

Billet en retard. Pour me changer les idées, j’ai commencé à coder un jeu simple. Il fait trop chaud pour coder correctement donc ça traîne, mais voici l’idée générale :

  • Le but du jeu est de tuer tous les zombies de la carte sans se faire dévorer.
  • Le jeu fonctionne au tour par tour. Chaque cycle (tour), le joueur et les zombies peuvent soit se déplacer d’une case, soit attaquer.
  • Le joueur commence au bord gauche de la carte. Les zombies sont positionnés aléatoirement, en tenant compte d’une "zone de sécurité" pour éviter qu’un zombie démarre trop près  du joueur.
  • Les zombies n’attaquent qu’à bout portant (case adjacente au joueur).
  • Le joueur possède une arme à feu (munitions illimitées) pouvant tirer à une distance X. Pour simplifier, l’arme fait pour l’instant mouche à tous les coups. À terme, je compte changer ça vers quelque chose de plus subtil, tel 90% max de faire mouche + un malus en fonction de la distance à la cible.
  • Les zombies sont aveugles, fonctionnent à l’oreille. S’ils entendent le joueur (coup de feu ou déplacement), ils se dirigeront vers cette position.
exemple de carte

exemple de carte. Point jaune = joueur, point rouge = zombie

La version actuelle du code est disponible ici.
Il manque encore la gestion de l’IA zombie, la détection du bruit, la gestion des tirs, et le test de condition de fin du jeu (zombie est au contact = perdu, 0 zombies restant = gagné). Je compte aussi ajouter 2/3 effets (pour les tirs notamment), mais ça demandera la gestion d’un 2nd calque mais j’ai atteins mon but (apprendre), donc j’arrête ce projet ici. D’autres suivrons !

Posted in bidouillons avec html5 | Tagué: , , , , | 5 Comments »

[html5] carte 3 – hexagones et repère carthésien

Posted by DarkoNeko le Dimanche 30 juin 2013

Ce billet fait parti de la série "bidouillons avec HTML5".

Mon précédent article a vu la création d’une carte à cases hexagonales. Aujourd’hui vous allons voir, en pratique, comment ajouter quelquechose dans cette carte.

Système de coordonnées ?

En programmation, les données d’une carte sont typiquement stockées dans un tableau à deux dimensions, chaque case du tableau correspondant à une case de la carte. Ça fonctionne très bien avec des cases carrées, mais comment faire avec une carte hexagonale ? (mes coupains twittos se souviendrons de mon raclage de cerveau sur le sujet)

À ma grande surprise, cela reste similaire. C’est toujours un système de coordonnées cartésiennes, sauf qu’il n’est pas orthonormé : au lieu d’avoir un axe horizontal, l’axe des X est parallèle avec les rangées d’hexagones. Ce qui nous donne :

hexagon-mapx

hexagon-map5
Pour les curieux, le code utilisé pour générer l’image des coordonnées est disponible ici (trop long pour être sur la page), et une animation de l’algo est visible là.

Position d’une case

Nous disposons maintenant un système de coordonnées pour les cases. Voyons maintenant comment faire une translation de ce système de coordonnées vers celui du canvas.

  • La position d’une case est ici définie par les coordonnées  du centre de celle ci.
  • Le système de coordonnées cartésiennes utilisé pour la carte sera ci dessous  appelé "plan hexagonal".
  • Le système de coordonnées orthonormé utilisé par le canvas sera ci dessous appelé le "plan canvas". Le point d’origine du canvas est en haut à gauche, ce qui fait que l’axe des Y est inversé.
  • "A" désigne ici la longueur d’un côté d’un hexagone.

hexagon-translation-canvas2         hexagon-angles

Écart vertical

Les axes Y du plan hexagonal (en vert) et du  plan canvas sont parallèles, donc rien de sorcier.
Les coordonnées "plan hexagonal" [1;0] et [0;0] sont séparées par une distance canvas de [ 2 * A * cos(30°) , 0].

Écart horizontal

Là par contre, ça coince un peu. L’axe X du canvas est horizontal, alors que celui du plan hexagonal (en rouge) non.
Quelle distance sépare les coordonnées "plan hexagonal" [0;0] et [0;1], en équivalent canvas ?

  • y : A * cos(30°)
  • x : A + A * sin(30°)

Pratiquons

Code

//ici le code traçant les hexagones et les lignes de repère *snip*
(...)
//point d'origine du plan canvas, defini manuellement
var origin_y = 5 * cos_unit; // 3eme bloc en partant du haut (donc 2.5 block de haut pour être au milieu)
var origin_x = sin_unit + unit/2; //centre du 1er bloc en partant de la gauche

pinceau.beginPath();
pinceau.font = '12pt Calibri';
pinceau.textAlign = 'center';
pinceau.fillStyle = 'green';

var coord = coordinates_hexa_to_canvas(0, 0 )
pinceau.fillText("0+0", coord.x, coord.y); //du texte, mais ça pourrait être une image ou autre.

coord = coordinates_hexa_to_canvas(1, 2 )
pinceau.fillText("y1;x2", coord.x, coord.y);

coord = coordinates_hexa_to_canvas(3, 2 )
pinceau.fillText("y3;x2", coord.x, coord.y);

coord = coordinates_hexa_to_canvas(4, 4)
pinceau.fillText("y4;x4", coord.x, coord.y);

function coordinates_hexa_to_canvas(wanted_y, wanted_x ) {
   //variables "globales" utilisées : cos_unit, sin_unit, unit, origin_y, origin_x
  var coordinates = [];
   //vertical part. canvas system has Y inverted, so goes down as hexa coordinates go up.
   coordinates.y = origin_y - (wanted_y * (2 * cos_unit));
   //"horizontal" part
   coordinates.y += (wanted_x * cos_unit);
   coordinates.x = origin_x + (wanted_x * (unit + sin_unit));

   return coordinates;
}

(code complet ici)

Affichage

hexagon-map-translation

Et voilou !

Posted in bidouillons avec html5 | Tagué: , , , , | Commentaires fermés

[html5] carte 2 – carte hexagonale

Posted by DarkoNeko le Samedi 29 juin 2013

Ce billet fait parti de la série "bidouillons avec HTML5".

Suite à mon précédent article, je passe maintenant aux cases hexagonales.
La base HTML reste la même :

<!DOCTYPE html5>
<html>
<body>
<canvas id ="canvas1" width="400" height="300" style="border:5px solid black;">
</canvas>
</body>
</html>

Dessine moi un hexagone

Mathématiquement

hexagoneBon pour commencer, ça se dessine comment exactement, un hexagone ?
N’oubliez pas que sur un canvas, l’origine [0;0] est en haut à gauche. L’axe vertical est inversé, donc "y" est à son minimum au point d’origine.

Trait par trait (d’une longueur A), d’en haut à gauche et dans le sens des aiguilles d’une montre, ça donne ça :

  • Position de départ : [x, y]
  • Trait horizontal du haut : [+A, +0]
  • diagonale côté haut droit : [+A*sin(30°), +A*cos(30°)]
  • diagonale côté bas droit : [-A*sin(30°), +A*cos(30°)]
  • Trait horizontal du bas : [-A, -0]
  • diagonale côté bas gauche : [-A*sin(30°), -A*cos(30°)]
  • diagonale côté haut gauche : [+A*sin(30°), -A*cos(30°)]

Et niveau code ?

Notez que contrairement à la liste (ou la position est indiquée incrémentalement, par rapport à celle de la fin du trait précédent), le code ci dessous garde tout du long la position de départ comme référentiel :

<script language="javascript" type="text/javascript">
var c1=document.getElementById("canvas1");
var pinceau =c1.getContext("2d");

initial_h = 100; //position verticale de base
initial_w = 100; //position horizontale de base

unit = 50; //longueur d'un coté de l'hexagone
//pour ne pas avoir à le recalculer à chaque fois
sin_unit = unit * Math.sin(30*Math.PI/180); 
cos_unit = unit * Math.cos(30*Math.PI/180);

pinceau.moveTo(initial_w                  , initial_h); //point de départ
pinceau.lineTo(initial_w + unit           , initial_h);
pinceau.lineTo(initial_w + unit + sin_unit, initial_h + cos_unit);
pinceau.lineTo(initial_w + unit           , initial_h + 2 * cos_unit);
pinceau.lineTo(initial_w                  , initial_h + 2 * cos_unit);
pinceau.lineTo(initial_w - sin_unit       , initial_h + cos_unit);
pinceau.lineTo(initial_w                  , initial_h); //retour au point de départ
pinceau.stroke();
</script>

canvas2-1

Comme sur des roulettes ! Passons au remplissage

Tracer la carte

Tracer chaque hexagone de la carte étant fastidieux et inefficace, j’ai décidé de tracer les diagonales par colonnes, puis d’ajouter les traits horizontaux manquants.

Code

<script language="javascript" type="text/javascript">
var c1=document.getElementById("canvas1");
var pinceau=c1.getContext("2d");

var unit = 40;
var sin_unit = unit * Math.sin(30*Math.PI/180);
var cos_unit = unit * Math.cos(30*Math.PI/180);

//trace the diagonals
var count = 0;

for(var w = 0 ; w < c1.width ; w += unit + sin_unit) {
   if( count % 2 == 0) {
      pinceau.moveTo(w , 0); //point de depart
      for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
         pinceau.lineTo(w + sin_unit , h + cos_unit); /* \ */
         pinceau.lineTo(w, h + 2 * cos_unit);        /* / */
      }
   } else {
      pinceau.moveTo(w + sin_unit, 0); //point de depart
      for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
         pinceau.lineTo(w, h + cos_unit);               /* / */
         pinceau.lineTo(w + sin_unit, h + 2 * cos_unit); /* \ */
      }
   }
   count++;
}

//trace the lines
count = 0;

for(var w = 0 ; w < c1.width ; w += unit + sin_unit) {
   if( count % 2 == 0) {
      for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
         pinceau.moveTo(w + sin_unit, h + cos_unit);
         pinceau.lineTo(w + sin_unit + unit , h + cos_unit);
      }
   } else {
      for(var h = cos_unit ; h < c1.height ; h += 2 * cos_unit) {
         pinceau.moveTo(w + sin_unit, h + cos_unit); 
         pinceau.lineTo(w + sin_unit + unit, h + cos_unit);
      }
   }
   count++;
}
pinceau.stroke();
</script>

Visuellement

Étape 1 :
canvas2-3b
Étape 2 :
canvas2-4

Posted in bidouillons avec html5 | Tagué: , , , | Commentaires fermés

[html5] carte 1 – base et quadrillage

Posted by DarkoNeko le Jeudi 27 juin 2013

Ce billet débute la série "bidouillons avec HTML5".

Mais le HTML5 ça ajoute quoi par rapport à HTML en fait ? *ouvre un tutorial*
Ok, donc ya une balise <canvas> et on peut gribouiller des trucs dedans. Commençons par ça.

Ça tombe bien, je m’amuse ces temps ci à réfléchir aux algos utilisés dans les jeux au tour par tour, notamment ceux utilisant une carte avec des cases hexagonales (tels que Battle Isle et Wesnoth). Traçons une carte ! Je garde les hexagones pour plus tard, voyons déjà si j’arrive à faire des cases carrées.

Tout d’abord, squelette de page avec un canvas de 400 de large pour 300 de haut.

<!DOCTYPE html5>
 <html>
 <body>
     <canvas id="canvas1" width="400" height="300" style="border:5px solid black;"></canvas>
 </body>
 </html>

canvas1

Jusque là, rien de sorcier. Il manque un certain nombre de trucs pour que ça soit propre (comme avoir le CSS et le JS dans une page à part, indiquer le le charset, etc.), mais ça suffira pour l’exercice.

Voyons le gribouillage maintenant.
"HTML5" gère le dessin sur canvas via des méthodes JavaScript spécifiques. en ce qui me concerne :

  • x.moveTo(x, y) permet de positionner le curseur/pinceau
  • x.lineTo(x,y) permet de tracer un trait entre la position actuelle et celle spécifiée en paramètre.
  • x.stroke() finalise le ou les tracés.

Sachant que le point d’origine [0;0] du canvas se trouve en haut à gauche, tentons une première ligne 50 pixels plus bas.

<script language="javascript" type="text/javascript">
var c1=document.getElementById("canvas1");
var pinceau=c1.getContext("2d");

pinceau.moveTo(0, 50); 
pinceau.lineTo(c1.width, 50); 
pinceau.stroke();
</script>

canvas1-2

Magnifique !
Avec un soupçon d’algorithmie, traçons maintenant le reste de la grille.

<script language="javascript" type="text/javascript">
var c1=document.getElementById("canvas1");
var pinceau=c1.getContext("2d");

var ecart = 50; //largeur d'un côté des cases
//lignes
for(var h = ecart ; h < c1.height ; h += ecart) {
   pinceau.moveTo(0, h); //déplacer le pinceau à (x,y) sans tracer
   pinceau.lineTo(c1.width, h); //tracer jusqu'à (x,y)
}
//colonnes
for(var w = ecart ; w < c1.width ; w += ecart) {
   pinceau.moveTo(w, 0);
   pinceau.lineTo(w, c1.height);
}
pinceau.stroke();
</script>

canvas1-3

Et voilou ! Bien sur, le but à terme sera de remplir ces cases avec des textures de terrain et/ou de combattants ! Mais ça sera pour plus tard.
Prochain billet, encore une carte vide, mais cette fois avec des cases hexagonales. Ça s’annonce plus tendu :)

Posted in bidouillons avec html5 | Tagué: , , , | 1 Comment »

le HTML5, c’est fun

Posted by DarkoNeko le Mercredi 26 juin 2013

IdeaAloha !

Je me suis mis récemment au HTML5 (utile dans ma branche de métier), et me suis dit que ça serait cool de partager ça ici.
Et puis, ça fera toujours un peu d’activité sur ce blog.

Ces prochains jours/semaines, je vais donc poster des bout de code/algo et en expliquer les grandes lignes. Pas vraiment un tutoriel, mais si vous maîtrisez un peu HTML et JavaScript, vous devriez comprendre sans trop de souci :)

À bientôt donc.

Posted in bidouillons avec html5 | Tagué: , , , | 1 Comment »

Station spatiale internationale

Posted by DarkoNeko le Mercredi 12 juin 2013

Quelques petits trucs concernant la Station spatiale internationale (ISS)  que j’ai découvert récemment :

Position de l’ISS

Sur ce site, mis à jour en temps réel à partir de données de la NASA.

ISS1a
ISS1b

Caméra

Avec vue du sol depuis  l’ISS par défaut ; le canal est aussi utilisée pour des "animations" réalisées par l’équipage et montrer leur vie de tous les jours

ISS2

Voili voilou.

Posted in divers | Tagué: , , | Commentaires fermés

 
Suivre

Recevez les nouvelles publications par mail.

Rejoignez 408 autres abonnés