fragment

ชิ้นส่วน

สภาพแวดล้อมการพัฒนาเว็บสำหรับการเข้ารหัสเชิงสร้างสรรค์

fragment ให้ API ง่าย ๆ ในการทำงานกับ <canvas>

คุณสมบัติ

• โหมดการเรนเดอร์หลายโหมด: Canvas 2D, P5.JS, Three.js, shader Fragment WebGL
• GUI ในตัวจากไฟล์ร่าง
• ส่งออก <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 ฟเปิดใช้งาน Loglevel Vite info ซึ่งเป็นประโยชน์สำหรับการพัฒนา มิฉะนั้นมันจะทำงานเช่นเดียวกับเมื่อคุณทำงานจากแพ็คเกจ NPM

หรือคุณสามารถบอกให้ NPM ชี้คำสั่ง fragment ไปยังโฟลเดอร์ที่ถูกโคลนใหม่

 # at the root of the repo
npm link

คุณควรจะสามารถคำสั่งได้เหมือนก่อนคราวนี้มันจะชี้ไปที่ที่เก็บแทนแพ็คเกจที่ติดตั้งทั่วโลก

 fragment sketch.js

หากไม่เป็นเช่นนั้นให้พยายามถอนการติดตั้ง fragment-tools ทั่วโลกก่อนตรวจสอบให้แน่ใจว่าไม่พบคำสั่ง fragment อีกต่อไปจากนั้นลองเชื่อมโยงโครงการจากรูทของ repo

การให้เครดิต

• Vite
• svelte
• ตัวอักษรที่ใช้สำหรับการแสดงผลคือ Jetbrains mono
• ไอคอนมาจากสัญลักษณ์
• ขอขอบคุณเป็นพิเศษสำหรับ Matt Deslauriers สำหรับ Canvas-Sketch และโครงการหลายโครงการของเขาเกี่ยวกับเครื่องมือศิลปะการกำเนิด

ใบอนุญาต

ดูใบอนุญาตสำหรับรายละเอียด