fragment

Fragmento

Um ambiente de desenvolvimento da web para codificação criativa

fragment fornece uma API simples para trabalhar <canvas> .

Características

• Modos de renderização múltiplos: Canvas 2d, p5.js, três.js, shaders de fragmento Webgl
• GUI embutida de arquivos de esboço
• Exportar <canvas> para imagens (.png, .webm, .jpg) ou vídeos (.mp4, .webm, .gif) em tempo
• Recarregamento do Shader Hot Support e suporte GLSLIFY
• Esboços interativos usando gatilhos
• Construção estática para implantação de produção

Instalação

Com npx

npx fragment-tools sketch.js --new

Instalando globalmente com --global

npm install fragment-tools --global

Agora você deve ser capaz de executar fragment da sua linha de comando.

fragment sketch.js --new

Instalando 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

Saiba mais sobre as opções de bandeira disponíveis nos documentos da CLI.

Exemplo

Este é um exemplo de esboço desenhando um círculo azul em um fundo preto com um controle personalizado para o raio do 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 escrever seu próprio esboço, seguindo o guia de início, lendo os documentos da API ou os exemplos.

Contribuindo

Se você encontrar problemas, arquive um com detalhes sobre como reproduzi -lo.

Sinta -se à vontade para chegar ao Twitter se quiser discutir o projeto.

Executando 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

O sinalizador --dev permite apenas o Vite info Loglevel, útil para o desenvolvimento. Caso contrário, funcionará da mesma forma que quando você estiver fugindo do pacote NPM.

Como alternativa, você pode dizer ao NPM para apontar o comando fragment para a pasta recém -clonada.

 # at the root of the repo
npm link

Você deve poder o comando como antes, só que desta vez ele apontará para o repositório em vez do pacote instalado globalmente.

 fragment sketch.js

Se não for esse o caso, tente desinstalar fragment-tools em todo o mundo primeiro, verifique se o comando fragment não é mais encontrado e depois retratar o projeto da raiz do repo.

Créditos

• Vite
• SVELTE
• A fonte usada para exibição é o JetBrains Mono.
• Os ícones são de icônicos
• Um agradecimento especial a Matt Deslauriers pelo esqui de lona e seus vários projetos em torno de ferramentas generativas de arte.

Licença

Consulte License.md para obter detalhes.