P5スケッチにSVGをロード

Question

私は今何時かの処理中にプログラミングしています。 私も図形とSVGファイルを扱っています。 ProcessingでSVGファイルに関するこの謙虚な経験を持っていれば、それは明らかにそうではなく、私に助けを求めてくれるP5.jsの同じ物語だと私は考えました。

PShape shape; 
/***************************************************************************/ 
void setup() 
{ 
    size(400, 400); 
    shapeMode(CENTER); 
    shape = loadShape("bot1.svg"); 
} 
/***************************************************************************/ 
void draw() 
{ 
    background(100); 
    pushMatrix(); 
    translate(width/2, height/2); 
    shape(shape, 0, 0); 
    popMatrix(); 
} 

P5そのように動作しません：

戻る処理中に、私はちょうどこのような単純なコードを持っているでしょう。 P5.jsはそれに相当しますか？

var shape; 
    var canvas; 
/***************************************************************************/ 
    function setup() 
    { 
     canvas = createCanvas(400, 400); 
     canvas.position(0, 0); 
     //shapeMode(CENTER); 
     //shape = loadShape("bot1.svg"); 
    } 
    /***************************************************************************/ 
    void draw() 
    { 
     background(100); 
     push(); 
     translate(width/2, height/2); 
     //shape(shape, 0, 0); 
     pop(); 
    } 

Answer 1

P5.jsはSVGファイルの読み込みをサポートしていません。 HereはGitHubに関する議論で、これに関する大量の情報が含まれています。

Processing.jsはSVGファイルをサポートしています。詳細はthe referenceです。

あなたの質問にprocessing.jsとタグを付けましたが、私は元々約p5.jsと尋ねていたと思います。しかし、Processing.jsとP5.jsはまったく異なる2つの事柄です。ケビンの答えに加えて

Answer 2

、あなたがp5.jsに負荷し、SVGをしたいです場合quick'n'dirtyあなたはこれを試すことができます開始するとして、あなたはp5.js-svgとsvg manipulation example

をチェックアウトする必要があります：

1. p5.svg.jsをp5にダウンロードしてください。スケッチライブラリはindex.htmlの中
2. インポート、それをフォルダ：<script src="libraries/p5.svg.js" type="text/javascript"></script>
3. はSVGキャンバスを作成します。createCanvas(600, 200, SVG);