Annonce

>>> Bienvenue sur codelab! >>> Première visite ? >>> quelques mots sur codelab //// partage de liens //// une carte des membres//// (apéros) codelab


#1 2009-10-22 18:57:59 ProcessingJS : Quelques infos + Ressources

22_79
modérateur
Lieu: Paris
Date d'inscription: 2009-05-05
Messages: 91

ProcessingJS : Quelques infos + Ressources



L'élément canvas fait partie de la spécification de HTML 5 (bien que déjà introduit de manière non standard dans HTML 4)
Manipulé par du code javascript, il permet de créer des graphiques dynamiques sur le web.
Il peut être vu comme une alternative au flash, dans le sens où ils partagent un certain nombre de champs applicatifs communs, mais dans la réalité, les deux langages sont assez différents :
Chargement léger pour js / canvas mais possibilités et performances moindres ; la 3D n'est pas encore supportée, même si Mozilla y travaille.


Un des aspects étonnant de processing.js est le fait qu'on puisse mélanger le code java et le code javascript.
Toute la syntaxe java est parsée (analysée) et retranscrite en javascript, ce qui permet aux développeurs processing de ne pas être dépaysés.
L'utilisation de la syntaxe javascript permet quant à elle un développement beaucoup plus léger et souple ... les objets sont dynamiquement typés :

On peut facilement mélanger processing.js avec d'autres librairies javascript et interagir avec les éléments de la page web sur laquelle le script se déroule.

Mozilla s'intéresse particulièrement à processing.js : https://wiki.mozilla.org/Education/Proj … gForTheWeb


// processingjs


http://processingjs.org/  -->  le site officiel du projet processing.js

http://groups.google.com/group/processingjs  --> le forum de processing.js

http://hascanvas.com/ --> un site qui permet de créer en ligne son script pjs et de le partager

// canvas

http://www.canvasdemos.com/

http://dev.opera.com/articles/view/html … he-basics/

// javascript

http://javascript.developpez.com/cours/

http://ejohn.org/apps/learn/ -- tutoriel dynamique par le créateur de processingjs



Quelques twitter intéressants :

@jeresig - créateur processingjs et jQuerry
@F1LT3R - le développeur qui maintient processing.js
@processingjs
@sanchothefat - créateur de hascanvas
@canvasdemo
@chiptune : développeur javascript


-1

Hors ligne

 

#2 2009-10-22 19:25:33 Re : ProcessingJS : Quelques infos + Ressources

oyster_twiter
membre
Lieu: saint-herblain
Date d'inscription: 2008-04-01
Messages: 444
Site web

Re: ProcessingJS : Quelques infos + Ressources



super initiative !!
merci et vivement les tutaux smile

j'ai trouvé ce lien pas si mal :
http://lethain.com/entry/2008/may/10/ge … essing-js/
ainsi que celui ci :
http://hyper-metrix.com/processing-js/docs/

+++

Hors ligne

 

#3 2009-10-26 11:26:11 Re : ProcessingJS : Quelques infos + Ressources

22_79
modérateur
Lieu: Paris
Date d'inscription: 2009-05-05
Messages: 91

Re: ProcessingJS : Quelques infos + Ressources



Yop,

J'ai développé un peu le premier post ...


-1

Hors ligne

 

#4 2009-12-24 00:30:27 Re : ProcessingJS : Quelques infos + Ressources

emoc
@#@*$
Lieu: Quimper
Date d'inscription: 2008-01-28
Messages: 1573
Site web

Re: ProcessingJS : Quelques infos + Ressources



Hello,

un double hors-sujet, mais à moitié seulement, le lively kernel est un environnement de programmation javascript dans le brouteur / butineur / browser. C'est un projet de recherche de Sun

« The Lively Kernel places a special emphasis on treating web applications as real applications, as opposed to the document-oriented nature of most web applications today. In general, we want to put programming  into web development, as opposed to the current weaving of HTML, XML and CSS documents that is also sometimes referred to as programming. »

http://research.sun.com/projects/lively/

enter the lively kernel : http://research.sun.com/projects/lively/index.xhtml

Sinon, effectgames propose un moteur en javascript pour réaliser des jeux en lignes, je n'ai pas vraiment creusé, mais il y a quelques démos en ligne

http://www.effectgames.com/effect/

Hors ligne

 

#5 2010-02-19 17:10:38 Re : ProcessingJS : Quelques infos + Ressources

emoc
@#@*$
Lieu: Quimper
Date d'inscription: 2008-01-28
Messages: 1573
Site web

Re: ProcessingJS : Quelques infos + Ressources



Hello,

Un projet jumeau à processingjs :

Context  Free est un langage qui permet de générer du graphisme à partir d'une grammaire http://www.contextfreeart.org/

Il en existe une version javascript, qui comme processingjs, permet d'utiliser le langage pour créer des images directement dans le navigateur, à condition que le navigateur utilise <canvas>, c'est à dire pas tous, et en particulier pas explorer...

http://code.google.com/p/contextfree/

Algorithm Ink, est un site qui permet d'éditer des scripts contextfree en ligne : http://www.azarask.in/projects/algorithm-ink/ ( l'équivalent de hascanvas pour processingjs )

Il s'en passe des choses dans le domaine, dommage que microsoft ne se décide pas à intégrer canvas, explorer représente encore plus de 60%des navigateurs installés... Quelle plaie

Hors ligne

 

#6 2010-02-20 03:31:46 Re : ProcessingJS : Quelques infos + Ressources

22_79
modérateur
Lieu: Paris
Date d'inscription: 2009-05-05
Messages: 91

Re: ProcessingJS : Quelques infos + Ressources



Merci smile, je ne connaissais pas ...
Oui ... MS fait vraiment chier ... cette technologie n'aura aucun avenir tant que IE ne la supportera pas nativement (il faut installer un plugin aujourd'hui) ... ce qui empêche tout développement puisqu'aucun site commercial ou d'envergure ne prendra le risque de travailler dessus tant qu'une partie conséquente de ses utilisateurs ne pourra pas y accéder facilement.
Mais si il n'y avait que ce problème ... en 2010, dans le développement web, on en est encore à se prendre la tête à cause de la compatibilité avec IE6 (sorti en 2001)
Le cancer du web .... on pourrait offrir des interfaces tellement plus sophistiquées et riches sans passer par du flash ...
Parfois, j'essaye de comprendre où est leur intérêt dans tout ça ... et si il y a réellement un sens, aussi cynique soit-il.


-1

Hors ligne

 

#7 2010-02-25 13:04:05 Re : ProcessingJS : Quelques infos + Ressources

emoc
@#@*$
Lieu: Quimper
Date d'inscription: 2008-01-28
Messages: 1573
Site web

Re: ProcessingJS : Quelques infos + Ressources



22_79 a écrit:

(...) ce qui empêche tout développement puisqu'aucun site commercial ou d'envergure ne prendra le risque de travailler dessus tant qu'une partie conséquente de ses utilisateurs ne pourra pas y accéder facilement.

Même pour un site non-commercial de petite envergure, c'est se tirer une balle dans le pied, que de se fermer à 60% des brouteurs. Pour l'instant, seuls des sites expérimentaux peuvent utiliser <canvas>, pour les visiteurs desquels « html5 » a un sens. sad Tiens, y a pas de smiley avec de grosses larmes.

La stratégie de MS est obscure (c'est déjà un truc de stratège...), dans le pire des cas ils préparent une nouvelle « révolution » pour le web avec « ze microsoft visualisation language » ( http://codelab.fr/1424 ) intégré dans une prochaine version d'IE, pour créer un nouveau schisme et affaiblir / ralentir la progression de firefox, chrome, etc. Ils ont les moyens marketing pour tenter ce genre de trucs (cf : ms surface, microsoft invente le multitouch) Ou simplement ils gagnent du temps, en ne bougeant pas, pour voir comment le vent tourne et comment tirer leur épingle du jeu... Leur intérêt, c'est de rester le plus longtemps possible les maîtres du jeu, et de casser les reins du logiciel libre, et dans ce domaine là, ils sont passés de la brute force à l'aïkido.

En fait, je voulais ajouter Lily ( http://www.lilyapp.org/ ), un environnement de programmation visuelle dans le navigateur, à la liste des applications intéressantes/ à suivre en javascript.

Hors ligne

 

#8 2010-02-25 13:33:07 Re : ProcessingJS : Quelques infos + Ressources

22_79
modérateur
Lieu: Paris
Date d'inscription: 2009-05-05
Messages: 91

Re: ProcessingJS : Quelques infos + Ressources



emoc a écrit:

Tiens, y a pas de smiley avec de grosses larmes.

lol
tu as bien synthétisé le problème ...


-1

Hors ligne

 

#9 2010-04-01 12:17:22 Re : ProcessingJS : Quelques infos + Ressources

emoc
@#@*$
Lieu: Quimper
Date d'inscription: 2008-01-28
Messages: 1573
Site web

Re: ProcessingJS : Quelques infos + Ressources



Je viens de lire cet article qui compare (par la pratique) flash et canvas, plutôt instructif!

http://github.com/blog/621-bye-bye-flas … now-canvas

Hors ligne

 

#10 2010-11-19 18:21:25 Re : ProcessingJS : Quelques infos + Ressources

oyster_twiter
membre
Lieu: saint-herblain
Date d'inscription: 2008-04-01
Messages: 444
Site web

Re: ProcessingJS : Quelques infos + Ressources



Version 1.0 sortie !
http://processingjs.org/

Hors ligne

 

#11 2012-01-04 18:33:56 Re : ProcessingJS : Quelques infos + Ressources

GildasP
nouveau membre
Lieu: Rennes
Date d'inscription: 2012-01-04
Messages: 4
Site web

Re: ProcessingJS : Quelques infos + Ressources



Purée, c'est le topic que j'aurais dû commencer par lire !
Je suis en train de produire une documentation sur Processing.js + JQuery + MooTools pour travailler en full-javascript :
http://www.gildasp.fr/playingwithpixels/

et la démo de ce que j'ai réussi à faire depuis fin novembre smile
http://www.gildasp.fr

je vais regarder tous les liens du topic, déjà HasCanvas est franchement sympa...

Hors ligne

 

#12 2012-01-06 13:28:33 Re : ProcessingJS : Quelques infos + Ressources

22_
membre
Lieu: paris
Date d'inscription: 2010-04-08
Messages: 189

Re: ProcessingJS : Quelques infos + Ressources



Chouette !
Oui, ce qui est étrange dans le paradigme de p5.js c'est qu'on en vient à faire du java réinterpréte en js alors que le js me semble autrement plus jouissif à coder.
J'avais écris un framework js pour le canvas... https://github.com/siouxcore/SCCanvas
mais après réflexion (et après avoir découvert d3.js), il faut que je le refonde entièrement.

Hors ligne

 

#13 2012-12-26 16:57:26 Re : ProcessingJS : Quelques infos + Ressources

EricRG
membre
Lieu: Lorient
Date d'inscription: 2008-03-11
Messages: 170
Site web

Re: ProcessingJS : Quelques infos + Ressources



Comment obtenir du son avec ProcessingJS ?

Je viens de trouver  ceci : http://www.cs.plu.edu/~brink/KISA/KISATutorial.html

... en attendant d'avoir lu tout ça, pour revenir faire un petit commentaire dessus smile

Hors ligne

 

#14 2014-02-27 15:06:52 Re : ProcessingJS : Quelques infos + Ressources

GildasP
nouveau membre
Lieu: Rennes
Date d'inscription: 2012-01-04
Messages: 4
Site web

Re: ProcessingJS : Quelques infos + Ressources



Bonjour à tous !
Je viens de publier une petite extension pour ProcessingJS (3.5 Ko) qui facilite grandement l'intégration d'un sketch dans une page web.

Le postulat est de rendre un sketch responsive (ou fullscreen) en une ligne de code.
ça gère aussi les événements souris/tactile qu'on perd dès qu'on place un overlay devant le sketch (pour un sketch en fond de page par exemple).
Avec le plugin, les événements fonctionnent quand-même, au travers de l'overlay, exactement comme d'habitude.

Bref, pour ceux ça intéresse c'est documenté ici : http://t.co/V8nDsjnNoV
et sur GitHub : http://github.com/GildasP/jProcessingJS

Have fun !

Dernière modification par GildasP (2014-02-27 15:08:18)

Hors ligne

 

fil rss de cette discussion : rss

Pied de page des forums

Powered by FluxBB

codelab, graphisme & code : emoc / 2008-2017