MoI discussion forum
MoI discussion forum

Full Version: New Concept of Coding! ;)

From: Frenchy Pilou (PILOU)
7 Sep 2018   [#1]
Un nouveau concept: vous codez directement dans votre navigateur!

p5.Js Web Editor

The site : https://p5js.org/
The Editor : https://editor.p5js.org/
Have fun!

Take the train!






Mon code : Bougez la souris! (en fait j'ai copié quelque chose pour le coller dans mon code pour tester! ;)

En full screen: https://editor.p5js.org/full/rJX8zSXO7

Bougez la souris!


From: Frenchy Pilou (PILOU)
11 Sep 2018   [#2]
J'ai oublié de mettre le code!

https://editor.p5js.org/Pilou/sketches/rJX8zSXO7

que l'on peut modifier en direct , voir le résultat, sauvegarder si l'on est enregistré (free),

ou même sauvegarder sur son ordi par un simple Ctrl + C, Ctrl + V dans NotePad+ par exemple! :)

(même si on n'est pas enregistré ! ;)
From: Phiro
12 Sep 2018   [#3]
J'adore ce langage... Il permet de manière simple de débuter ou approfondir la programmation objet.
En plus, comme le résultat est dans une page web, la portabilité est totale.

Un exemple simple sur les harmoniques de point qui rebondissent
https://editor.p5js.org/Socratew/sketches/rJApE1POQ

Le lien suivant, c'est un exercice suite un cours en video de Daniel Shiffman.
Ce mec est un peu fou, et sa manière d'expliquer est assez géniale.
Les points qui forment les mots réagissent au comportement de la souris.
Toujours amusant d'empêcher un point de rejoindre sa place...
C'est encore plus fun sur un écran tactile, les points régissent face à notre doigt...
http://www.maxetjuju.org/training/Freissi_dot_text/
From: Frenchy Pilou (PILOU)
13 Sep 2018   [#4] In reply to [#3]
Tout à fait d'accord! Je suis fan du Daniel depuis des lustres! :)

Ce qui est cool c'est que l'on peut passer directement quelque chose à l'utilisateur sans s'il connaissent quoi que soit!
Plus de format de fichier spécifique, de logiciel à posséder etc...tout part directement dans le Navigateur!

Bon d'accord ça va 3 fois moins vite que du Processing pour les calculs critiques...

Mais c'est d'une telle souplesse!

Ce que je n'ai pas trouvé c'est comment recharger de l'ordi vers son compte sur le NET,
un projet que l'on aurait précédemment chargé par Menu Fichier / Download ???

A suivre...

D'ailleurs je n'arrive pas non plus à charger son code de cette vidéo!
Un problème de mauvaise adresse, d'anti-virus que sais-je?
Est-ce le même pour vous ?
https://editor.p5js.org/codingtrain/sketches/HkDVpSvDm


From: Frenchy Pilou (PILOU)
13 Sep 2018   [#5]
Ah, ça été long mais j'ai une piste solide! :)
Pour importer quelque chose d'un ordi par exemple!
La petite flèche vers le bas!

Y a plus qu'a ne pas faire d'erreur d'attribution! (du jaune sur fond blanc, c'est illisible)
C'est pas hyper clair mais y a du mieux! Choix dans le répertoire ou Drag& Drop! :)

From: Frenchy Pilou (PILOU)
13 Sep 2018   [#6]
J'ai commencé une page pense-bête! :)

http://moiscript.weebly.com/p5js-web-editor.html
From: Frenchy Pilou (PILOU)
15 Mar 2019   [#7]
Voilà ça marche! :)

Après bien des vicissitudes je vois le bout du tunnel grâce à Makio https://twitter.com/makio135

Vous pouvez mettre autant d'images que vous voulez!
Have fun!
Sur un merveilleux site http://moiscript.weebly.com/p5js-web-editor.html

En Full screen https://editor.p5js.org/Pilou/full/y1GHaBqyT

Directement dans l'éditeur https://editor.p5js.org/Pilou/sketches/y1GHaBqyT pour le bidouiller suivant votre inspiration si vous n'avez pas peur et n'êtes pas cardiaques! :

Bouton jaune Play et balancez une image PNG à fond transparent (les espaces vides)

Et une seconde après vous avez les yeux ébaubis devant tant de beauté naturelle!
Tout dépend de votre image de départ! :)
Clic droit sur l'image pour l'enregistrer à votre guise!

Ou encore ici même! une image PNG à fond transparent (les espaces vides)


ma première image test :)

etc...


et bien sûr avec un objet Moi3D! :)


avec un objet Magica

From: Frenchy Pilou (PILOU)
15 Mar 2019   [#8]

From: Frenchy Pilou (PILOU)
22 Mar 2019   [#9]
Avec le free Bricsys Shape https://www.bricsys.com/fr-fr/shape (une ergonomie délicate - pas sûr que je comprenne tout, mais....
(ce sera la même chose avec SketchUp, ZBrush ou Moi, peut-être un peu moins rapide! ;)

Faire un petit dessin (10 secondes suivant entraînement) avec la fonction Quick Draw (première icône :)

Prenez une capture écran - (touche Imp Ecran) créez une image PNG avec un fond transparent (quelques surfaces blanches transparente par exemple) avec n'importe quel Prog 2D !

Et glisser-déposer le résultat sur mon petit programme quelques post au-dessus!
http://moi3d.com/forum/index.php?webtag=MOI_FRANCAIS&msg=562.7


Et voilà! :)

Clic droit Enregistrer l'image et voilà ! :)

Bien sûr c'est infini parce que vous pouvez dessiner tout ce que vous voulez comme dessin de départ !
Seule votre imagination peut limiter le processus ! :)