Загрузите SVG в эскиз P5

Question

Я программировал в процессе обработки некоторое время. Я также работал с формами и SVG файлами. Имея этот скромный опыт относительно 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 - две совершенно разные вещи.

Answer 2

В дополнение к ответу Кевина, если вы хотите нагрузки и SVG в p5.js вы должны проверить p5.js-svg и svg manipulation example

Как quick'n'dirty начать вы можете попробовать это :

1. Скачать p5.svg.js на p5. эскиз библиотеки папки
2. импортировать его в index.html: <script src="libraries/p5.svg.js" type="text/javascript"></script>
3. Создание SVG Canvas: createCanvas(600, 200, SVG);