Как связать несколько JS-проектов p5 с одним index.html? - PullRequest
Новая
       7

Как связать несколько JS-проектов p5 с одним index.html?

0 голосов
/ 15 февраля 2019

У меня есть папка проекта JavaScript p5, содержащая множество документов / проектов JavaScript.Очевидно, что для просмотра своего кода в браузере я просто запускаю связанный HTML-документ.

Моя проблема в том, что если бы я связал несколько JavaScript-проектов p5 в моем index.html, я получил бы только последний связанный JavaScript-проект.

Я мог бы просто создать отдельный HTML-документ для каждого проекта.однако это удвоит количество документов в папке моего проекта и потенциально создаст много ненужной работы для меня.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JS learnings</title>
  </head>
  <body>
    <script language="javascript" type="text/javascript" src="node_modules/p5/lib/p5.js"></script>
    <script language="javascript" type="text/javascript" src="node_modules/p5/lib/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src="node_modules/p5/lib/addons/p5.sound.js"></script>
    <script src="./classes.js"></script>;
    <script src="./function-picture.js"></script>;
    <script src="./ifs-within-ifs.js"></script>;
    <script src="./while-and-for-loops.js"></script>;
    <script src="./Boolean.js"></script>;
    <script src="./object-var.js"></script>;
    <script src="./move.js"></script>;
  </body>
</html>

Этот код просто отображается ./move.js в браузере.

1 Ответ

0 голосов
/ 15 февраля 2019

Если вы хотите поддерживать несколько эскизов в одном окне, вам нужно будет использовать режим экземпляра .

По умолчанию P5.js использует глобальное пространство имен для своих переменныхи функции.Поэтому каждый раз, когда вы определяете функцию setup() или draw(), вы перезаписываете все предыдущие значения.Вот почему вы видите только последний загруженный эскиз.

Чтобы обойти это, вы можете использовать режим экземпляра для инкапсуляции каждого эскиза в неглобальной области видимости.Вы можете прочитать больше о режиме экземпляра здесь , но вот пример: 

var s = function( sketch ) {

  var x = 100; 
  var y = 100;

  sketch.setup = function() {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
  };
};

var myp5 = new p5(s);

Вы хотите создать новый экземпляр p5 для каждого эскиза.

...