Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.

Messages - p01

Pages: [1]
1
Productions / Re : Re : 4k canvas javascript
« on: 07 November 2013 à 10:19:01  »
un peu pareil, de la 3D canvas sans WebGL, cette fois par notch (le créateur de Minecraft) : http://jsdo.it/notch/dB1E

Un peu pareil, de la 3D canvas sans WEBGL, cette fois par moi, en 252 octets:

MINICRAFT avec explication de quelques astuces pour atteindre cette taille.

2
Productions / Re : ANDES / ribbon
« on: 08 August 2013 à 22:35:07  »
MERCI!!!

Ooops, j'ai corrigé le lien vers Pouet.

Aussi, je me demande si le code est assez clair. Je crois que c'est assez facile a lire une fois passé re-indenté et le syntax highlighting de votre editeur préferé. Mais je peux me tromper.

3
Productions / ANDES / ribbon
« on: 07 August 2013 à 22:07:23  »
Tada!!! Voici ma nouvelle 1k en JavaScript pour l'Assembly 2013. Elle est arrivée 4e, sur 13.



Et les liens vers: Pouet, le post mortem, la version online non compressée, l'archive et la video sur YouTube. Pfioooou, si avec tout ca vous arrivez pas à la voire et vous faire une idée de ANDES :p

Le post mortem et l'archive contiennent des liens vers les versions en 4:3, 16:9 et 16:10 et non-compressée au cas ou Firefox 22 fasses des siennes.

Évidement vu que l'idée était de jouer dans la cours de grands, le rendu est en webGL et le tout est optimisé à la main avec amour et compressé avec l'incontournable JSexe / Adinpsz.

A la base je voulait faire une landscape avec des cubes imenses qui tombent doucement dans le fond, mais vu que j'ai jamais fait de landscape en raymarching avant, c'était un peu chaud en tout juste 2 semaines. J'ai dû dire au revoir aux cubes, mais au final je suis plutôt content du rendu.


Voilà j'espère que ca vous plaira.
C'était bien sympa de jouer un peu avec webGL et de faire un prod vite fait.

4
Productions / MINAMI DISTRICT / ribbon
« on: 17 July 2013 à 21:24:55  »
Voici ma derniere 1k en Javascript, pour DemoJS 2013



Pouet : http://pouet.net/prod.php?which=61496
En ligne : http://www.p01.org/releases/MINAMI_DISTRICT/MINAMI_DISTRICT.unpacked.htm

Avril 2013, j'ai commencé à cogiter à propos de DemoJS 2013, je voullais faire une scene "realiste" en 3D, qqc de jamais vu dans une demo. Aprés un peu de recherche je suis tombé sur des photos et concepts de gratte ciels tournant. Bingo!

Aprés il fallait trouver LA méthode pour afficher ca:
* en particules, il en fallait ~40.000 pour avoic qqc de potable ( Matraka en a 2.560 ). Comment les afficher ? position:absolute, CSS translate 2D, CSS 3D transforms, CSS 3D transform + animations, Canvas 2D. Nope. Super souple, mais bien trop lent.
* En affichant des lignes ( une par etage ), même histoire. Pas assez rapide.
* Avec des polygones et texture generée en JS, trop gros.
* Avec des polygones et CSS gradient.... mmmh pas assez souple.
* Canvas 2D en polygone flat, un peu gros mais assez souple et bien rapide.

Ensuite il a fallut optimizer, ajuster les couleurs, la trajectoire de la camera, rendre les building semi-transparents, ...

Au finale il y a une grille de 32x32 grate ciels, tournés et triés en 3D, ensuite je construit et affiche les etages de chaque grate ciel. Pour le tri des faces, pour chaque etage, je tourne autour du centre du grate ciel et calcule ( rotation et projection ) CINQ vertex. Une fois le premier vertex generé, je compare le X projeté du vertex courant et precedent. Si la difference est possitive, ca veut dire que cette face est tournée vers la camera.

Et la musique dans tout ca ? J'ais essayé, mais il fallait au moins 300 octets et les graphismes aurraient trop souffert :( C'est pas facile de faire un JS1k.


Voilà, j'espere que MINAMI DISTRICT vous plait. C'était sympa de travailler sur cette prod, j'ai pu essayé des tonnes de methodes et pousser un petit peu le schmilblick du rendu 3D "classique" dans les JS1k.

5
Kanel: Si ca peut te rassurer, ici c'est plutot du 20E de l'heure; 15 au black.

6
Productions / Re : Adinpsz - JsExe
« on: 07 June 2012 à 13:03:31  »
Bravo pour JSexe. C'est cool d'avoir un outil qui integre plusieurs variantes et choisi la meilleure.


En dessous de 1k, le PNG bootstrapping* n'est pas efficace. Daeken voullait faire une intro WebGL en 512 octets. Il bloquait a ~750 octets avec le PNG bootstrapping. J'ai pu caser Micro Nova dans 512 octets sans trop battailler juste avec de la bonne vieille minification à la main et un hash des methodes du contexte WebGL.

Pour les 1k, je confirme ce qu'a dit wullon: C'est vraiment au cas par cas entre les packers JS classiques et le PNG bootstrapping.

Ca devient vraiment efficace au delà de 1k, où c'est clairement la methode la plus simple pour obtenir qqc de correct.



*: Si vous voullez en savoir plus sur cette technique, lisez la thread sur PNG bootstrapping et global eval sur Pouet.

7
Actualités / Re : JS1K 2012 Love Edition
« on: 04 April 2012 à 16:30:09  »
JS1k 2012 c'est fini et voici les résultats:


Un bon cru en effet!

8
Actualités / Re : JS1K 2012 Love Edition
« on: 14 March 2012 à 20:43:01  »
JS1K Speech Synthesis ( http://js1k.com/2012-love/demo/1274 ) génére et joue les sons/phonemes à la volée et phrases completes quand on appuie sur ENTER

J'espere que ca vous plaira ;)

9
Actualités / Re : JS1K 2012 Love Edition
« on: 14 March 2012 à 15:47:08  »
J'ai soumit ma prod pour JS1K ce matin. Cette fois pasde grosse 3D ou de FPS, mais:

1K JavaScript Speech Synthesizer
Les sons/phonemes sont genérés et joués quand l'utilisateur tape son texte, et la phrase complete est genérée et jouée quand on press ENTER

J'espere que ca vous plaira  ;)

La qualité sonore est pas geniale geniale, hey! c'est 1k de JavaScript aprés tout, mais je suis assez content d'avoir reussi à generer les sons à la volée et les phrases completes.


Comme d'habitude, les prods soumise le dernier jour de JS1k ne sont pas publiques tout de suite, mais juste aprés la deadline.

10
Actualités / Re : JS1K 2012 Love Edition
« on: 11 February 2012 à 21:07:20  »
ponce: Merci:

vince: ??? je croyais qu'il etait possible d'obtenir le context 2d ET webgl pour le même Canvas.

Sinon je serait curieux de voir tes esais WebGL pour JS1k. Au final, pour GL1k Cotton Candy, je me suis arreté à 87 octets de HTML+CSS et 314 octets de JS pour avoir un triangle en plein ecran ( mais en conservant le viewport initial de 300x150 ) avec un fragment shader et une variable uniform 't'. J'imagine que modifier le viewport et le fragment shader en fonction doit couter 50-100 octets.

11
Actualités / Re : JS1K 2012 Love Edition
« on: 10 February 2012 à 09:55:04  »
Hola,

1kb est la taille maxi du JS à mettre dans le shim*. Les prods doivent imperativement fonctionner dans TOUS les navigateurs stables ( FF, OP, CH, SF ).

Attention, le shim, et donc le JS, est en UTF-8: tout caracter dont le code ASCII est >127 coute 1 octet suplementaire!!!

Et non, les optimizer/minifiers ne font pas le poids face à l'optimization à la mano. Oh, et dans JS1k il est interdit d'utiliser des resources externes ( donc pas d'image, pas de  son, pas de données qui viennet d'une API genre Twitter, Flickr, ... ).

Aussi, je ne demande qu'à me tromper mais mon experience est que pour JS1k, packer le code dans une PNG/GIF ne vaut pas le coup car l'image doit etre stockée dont une chaine de characteres** en BASE64 et du coup ca augmente la taille de la PNG/GIF 33%. Et il faut compter 100-150 octets pour charger cette image, la mettre ans un canvas, boucler sur tous les pixels pour reconstruire le code et evaluer le code. En gros il faut que la PNG/GIF fasse moins de 675 octets. Bonne chance!

*: http://js1k.com/2012-love/shim.html
**: Il est interdit d'utiliser des resources externes dans JS1k

Pages: [1]