Как поместить скетч Processing 5 с изображением на HTML-страницу?
Я создаю веб-страницу, на которой будет место для трех разных эскизов p5. Проблема в том, что когда я пытаюсь загрузить скетч p5 на страницу index.html, он загружается неправильно или работает неправильно. Однако, когда я попытался сделать то же самое со скетчем p5, не содержащим изображения, все сработало отлично.
Я пытался использовать <script src= script src = "sketch.js"></script>, и это сработало для эскизов p5, которые не включают изображения, однако это не сработало для эскизов, в которых есть изображения.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script;
<script src = "sketch.js"></script>
Есть две вещи, которые приходят на ум из вашего вопроса. Вы не можете поместить несколько файлов sketch.js в один тег сценария HTML. Допустим, у вас есть два скетча с именами sketch1.js и sketch2.js. Вам понадобится <script src='sketch1.js'></script><script src='sketch2.js'></script> Поскольку у вас есть несколько эскизов, вам придется использовать режим экземпляра. См.: github.com/processing/p5.js/wiki/Глобальный режим и экземпляр и stackoverflow.com/a/55388897/1978785.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы не можете просто получить доступ к локальным файлам с помощью JavaScript, как вы это делаете с HTML. Вам нужно использовать File API, как описано здесь: https://www.html5rocks.com/en/tutorials/file/dndfiles/ Источник: Доступ к локальным файлам с помощью javascript
По поводу проблемы "разместить эскизы на странице". Я думаю, что лучший способ сделать это описан в этой статье: https://github.com/processing/p5.js/wiki/Позиционирование-вашего-холста#перемещение-холста
Не могли бы вы опубликовать минимальный воспроизводимый пример? Можете ли вы попытаться быть более конкретным, чем сказать, что это не сработало? Можете ли вы проверить свой инструменты разработчика на наличие ошибок JavaScript или сети?