fragment

Fragment

Un environnement de développement Web pour le codage créatif

fragment fournit une API simple pour travailler avec <canvas> .

Caractéristiques

• Modes de rendu multiples: Canvas 2d, P5.js, trois.js, shaders de fragments Webgl
• GUI intégrée à partir de fichiers de croquis
• Exporter <canvas> vers des images (.png, .webm, .jpg) ou des vidéos (.mp4, .webm, .gif) à la volée
• SHADER RECODION ET SUPPORT GLSLIFY
• Croquis interactifs utilisant des déclencheurs
• Build statique pour le déploiement de la production

Installation

Avec npx

npx fragment-tools sketch.js --new

Installation à l'échelle mondiale avec --global

npm install fragment-tools --global

Vous devriez maintenant pouvoir exécuter fragment à partir de votre ligne de commande.

fragment sketch.js --new

Installation localement

npm install fragment-tools
npx fragment sketch.js --new

Usage

 # create a new directory for your sketches
mkdir sketches

# move into that folder
cd sketches

# create a sketch from a template
npx fragment-tools ./sketch.js --new --template=2d

En savoir plus sur les options de drapeau disponibles dans les documents CLI.

Exemple

Ceci est un exemple d'un croquis dessinant un cercle bleu sur un fond noir avec un contrôle personnalisé pour le rayon du cercle.

 export let props = {
  radius : {
    value : 10 ,
    params : {
      min : 4 ,
      max : 30 ,
    } ,
  } ,
} ;

export let update = ( { context , width , height } ) => {
  // draw background
  context . fillStyle = '#000000' ;
  context . fillRect ( 0 , 0 , width , height ) ;

  // draw circle
  const radius = props . radius . value ;

  context . fillStyle = '#0000ff' ;
  context . beginPath ( ) ;
  context . arc ( width * 0.5 , height * 0.5 , radius , 0 , 2 * Math . PI , false ) ;
  context . fill ( ) ;
} ;

Apprenez à rédiger votre propre croquis en suivant le guide de démarrage, en lisant les documents API ou les exemples.

Contributif

Si vous trouvez des problèmes, veuillez en déposer un avec des détails sur la façon de le reproduire.

N'hésitez pas à contacter Twitter si vous souhaitez discuter du projet.

L'exécuter localement

 # clone or fork the project
git clone https://github.com/raphaelameaume/fragment.git

# move to the root of the repository
cd fragment

# run the command line locally
node ./bin/index.js examples/shape-2d.js --dev

# or from your sketch folder
node [path-to-root]/bin/index.js sketch.js --dev

L'indicateur --dev permet uniquement aux info VITE LOGLEVEL, utile pour le développement. Sinon, cela fonctionnera de la même manière que lorsque vous courez à partir du package NPM.

Alternativement, vous pouvez dire à NPM de pointer la commande fragment vers le dossier nouvellement cloné.

 # at the root of the repo
npm link

Vous devriez pouvoir la commande comme précédemment, seulement cette fois, il pointera vers le référentiel au lieu du package installé à l'échelle mondiale.

 fragment sketch.js

Si ce n'est pas le cas, essayez d'abord de désinstaller fragment-tools dans le monde, assurez-vous que la commande fragment n'est plus trouvée, puis réessayez pour relier le projet à partir de la racine du référentiel.

Crédits

• Vite
• Svelte
• La police utilisée pour l'affichage est le JetBrains Mono.
• Les icônes sont iconiques
• Un merci spécial à Matt Deslauriers pour le sketch sur toile et ses multiples projets autour d'outils de génération en génération.

Licence

Voir Licence.MD pour plus de détails.