fragment

Fragmen

Lingkungan pengembangan web untuk pengkodean kreatif

fragment menyediakan API sederhana untuk bekerja dengan <canvas> .

Fitur

• Mode Rendering Multiple: Canvas 2D, P5.JS, Three.js, WebGL Fragment Shaders
• GUI bawaan dari file sketsa
• Ekspor <canvas> ke gambar (.png, .webm, .jpg) atau video (.mp4, .webm, .gif) dengan cepat
• Hot Shader Reloading & Dukungan Glslify
• Sketsa interaktif menggunakan pemicu
• Bangunan statis untuk penyebaran produksi

Instalasi

Dengan npx

npx fragment-tools sketch.js --new

Memasang secara global dengan --global

npm install fragment-tools --global

Anda sekarang harus dapat menjalankan fragment dari baris perintah Anda.

fragment sketch.js --new

Menginstal secara lokal

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

Penggunaan

 # 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

Pelajari lebih lanjut tentang opsi bendera yang tersedia di CLI Docs.

Contoh

Ini adalah contoh sketsa menggambar lingkaran biru pada latar belakang hitam dengan kontrol khusus untuk jari -jari lingkaran.

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

Pelajari cara menulis sketsa Anda sendiri dengan mengikuti panduan memulai, membaca dokumen API atau contohnya.

Berkontribusi

Jika Anda menemukan masalah, silakan ajukan satu dengan detail tentang cara mereproduksi.

Jangan ragu untuk menjangkau di Twitter jika Anda ingin mendiskusikan proyek tersebut.

Menjalankannya secara lokal

 # 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

Bendera --dev hanya memungkinkan Vite info Logglevel, bermanfaat untuk pengembangan. Kalau tidak, itu akan bekerja sama seperti saat Anda menjalankan dari paket NPM.

Atau, Anda dapat memberi tahu NPM untuk mengarahkan perintah fragment ke folder yang baru dikloning.

 # at the root of the repo
npm link

Anda harus dapat perintah seperti sebelumnya, hanya kali ini akan menunjuk ke repositori alih -alih paket yang diinstal secara global.

 fragment sketch.js

Jika bukan itu masalahnya, cobalah untuk menghapus fragment-tools terlebih dahulu secara global, pastikan perintah fragment tidak ditemukan lagi, lalu coba lagi untuk menghubungkan proyek dari akar repo.

Kredit

• Vite
• Langsing
• Font yang digunakan untuk tampilan adalah jetbrains mono.
• Ikon berasal dari ikon
• Terima kasih khusus kepada Matt Deslauriers untuk Canvas-Sketch dan beberapa proyeknya di sekitar alat seni generatif.

Lisensi

Lihat lisensi.md untuk detailnya.