fragment

Фрагмент

Среда веб -разработки для творческого кодирования

fragment обеспечивает простой API для работы с <canvas> .

Функции

• Несколько режимов рендеринга: Canvas 2D, P5
• Встроенный графический интерфейс из файлов Sketch
• Экспорт <canvas> на изображения (.png, .webm, .jpg) или видео (.mp4, .webm, .gif) на лете
• Hot Shader Reloading & Glslify Поддержка
• Интерактивные наброски с использованием триггеров
• Статическая сборка для развертывания производства

Установка

С npx

npx fragment-tools sketch.js --new

Установка глобально с помощью --global

npm install fragment-tools --global

Теперь вы должны иметь возможность запустить fragment из вашей командной строки.

fragment sketch.js --new

Установка локально

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

Использование

 # 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

Узнайте больше о доступных вариантах флага в документах CLI.

Пример

Это пример эскиза, рисующего синий круг на черном фоне с пользовательским управлением радиусом круга.

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

Узнайте, как написать свой собственный эскиз, следуя руководству по началу работы, прочитав документы API или примеры.

Внося

Если вы найдете проблемы, пожалуйста, подайте его с подробностями о том, как их воспроизвести.

Не стесняйтесь обращаться в Twitter, если вы хотите обсудить проект.

Запустить его на местном уровне

 # 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

Флаг --dev только позволяет VITE info Loglevel, полезному для разработки. В противном случае он будет работать так же, как и когда вы работаете из пакета NPM.

В качестве альтернативы, вы можете указать NPM указать команду fragment на недавно клонированную папку.

 # at the root of the repo
npm link

Вы должны иметь возможность команду, как и раньше, только на этот раз она будет указывать на репозиторий вместо глобально установленного пакета.

 fragment sketch.js

Если это не так, попробуйте сначала удалить fragment-tools во всем мире, убедитесь, что команда fragment больше не найдена, а затем повторно связать проект из корня репо.

Кредиты

• Просие
• Стройный
• Шрифт, используемый для дисплея, - это моно Jetbrains.
• Иконки из знаковых
• Особая благодарность Мэтту Деслауриера за Canvas-Sketch и его многочисленные проекты вокруг инструментов генеративного искусства.

Лицензия

Смотрите License.md для деталей.