fragment

Fragmento

Un entorno de desarrollo web para la codificación creativa

fragment proporciona una API simple para funcionar con <canvas> .

Características

• Modos de renderizado múltiples: Canvas 2d, P5.JS, Three.js, WebGL Fragment Shaders
• GUI incorporado a partir de archivos de boceto
• Exportar <canvas> a imágenes (.png, .webm, .jpg) o videos (.mp4, .webm, .gif) sobre la mosca
• Soporte de recarga y soporte de glslify
• Bocetos interactivos usando desencadenantes
• Construcción estática para la implementación de producción

Instalación

Con npx

npx fragment-tools sketch.js --new

Instalación global con --global

npm install fragment-tools --global

Ahora debería poder ejecutar fragment desde su línea de comando.

fragment sketch.js --new

Instalación localmente

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

Uso

 # 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

Obtenga más información sobre las opciones de bandera disponibles en los documentos CLI.

Ejemplo

Este es un ejemplo de un boceto que dibuja un círculo azul sobre un fondo negro con un control personalizado para el radio del círculo.

 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 ( ) ;
} ;

Aprenda a escribir su propio boceto siguiendo la guía de inicio, leyendo los documentos de la API o los ejemplos.

Que contribuye

Si encuentra problemas, presente uno con detalles sobre cómo reproducirlo.

No dude en comunicarse con Twitter si desea discutir el proyecto.

Ejecutándolo localmente

 # 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

La bandera --dev solo permite a Vite info Loglevel, útil para el desarrollo. De lo contrario, funcionará igual que cuando esté ejecutando el paquete NPM.

Alternativamente, puede decirle a NPM que apunte el comando fragment a la carpeta recién clonada.

 # at the root of the repo
npm link

Debería poder el comando como antes, solo esta vez señalará el repositorio en lugar del paquete instalado globalmente.

 fragment sketch.js

Si ese no es el caso, intente desinstalar fragment-tools a nivel mundial primero, asegúrese de que el comando fragment ya no se encuentre, luego vuelva a intentar vincular el proyecto desde la raíz del repositorio.

Créditos

• Vite
• Esbelto
• La fuente utilizada para la pantalla es el JetBrains Mono.
• Los iconos son de icónico
• Un agradecimiento especial a Matt Deslauriers por Canvas-Sketch y sus múltiples proyectos en torno a las herramientas de arte generativo.

Licencia

Vea la licencia.md para más detalles.