fragment

Fragment

Eine Webentwicklungsumgebung für kreative Codierung

fragment bietet eine einfache API, um mit <canvas> zu arbeiten.

Merkmale

• Mehrere Rendering -Modi: Canvas 2d, P5.js, drei.js, WebGL -Fragment -Shaders
• Integrierte GUI aus Skizzendateien
• <canvas>
• Hot Shader Reloading & GLSLIFY -Unterstützung
• Interaktive Skizzen mit Triggern
• Statischer Build für den Produktionseinsatz

Installation

Mit npx

npx fragment-tools sketch.js --new

Global mit --global installieren

npm install fragment-tools --global

Sie sollten jetzt in der Lage sein, fragment aus Ihrer Befehlszeile auszuführen.

fragment sketch.js --new

Lokal installieren

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

Verwendung

 # 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

Erfahren Sie mehr über die verfügbaren Flag -Optionen in den Cli -Dokumenten.

Beispiel

Dies ist ein Beispiel für eine Skizze, die einen blauen Kreis auf einem schwarzen Hintergrund mit einer benutzerdefinierten Steuerung für den Radius des Kreises zeichnet.

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

Erfahren Sie, wie Sie Ihre eigene Skizze schreiben, indem Sie den Anleitung zum Ersten Anfänger folgen, die API -Dokumente oder die Beispiele lesen.

Beitragen

Wenn Sie Probleme finden, stellen Sie bitte Einzelheiten zur Reproduktion ein.

Wenden Sie sich gerne auf Twitter, wenn Sie das Projekt besprechen möchten.

Leiten Sie es 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

Das --dev Flag ermöglicht nur Vite info Loglevel, hilfreich für die Entwicklung. Andernfalls funktioniert es genauso wie beim Laufen aus dem NPM -Paket.

Alternativ können Sie NPM anweisen, den Befehl fragment auf den neu geklonten Ordner zu richten.

 # at the root of the repo
npm link

Sie sollten den Befehl wie zuvor in der Lage sein, nur dieses Mal zu dem Repository anstelle des global installierten Pakets zu verweisen.

 fragment sketch.js

Wenn dies nicht der Fall ist, versuchen Sie zunächst, dass der Befehl fragment nicht mehr fragment-tools deinstalliert wird, und dann wiederholen, um das Projekt aus der Wurzel des Repo zu verknüpfen.

Credits

• Vite
• Sufle
• Die für die Anzeige verwendete Schriftart ist das Jetbrains -Mono.
• Die Ikonen sind von ikonisch
• Ein besonderer Dank geht an Matt Deslauriers für die Leinwand-Sketch und seine zahlreichen Projekte rund um Generationen-Kunst-Tools.

Lizenz

Weitere Informationen finden Sie unter Lizenz.MD.