Как добавить библиотеку (p5.js) в среду разработки Stackblitz?

Question

Я использовал Stackblitz в качестве своей IDE, чтобы я мог лучше кодировать на своем Chromebook, он работает хорошо, но я изо всех сил пытался реализовать библиотеку p5. Я должен отметить, что я только недавно начал заниматься программированием, поэтому я буду понимать только основы.

Я добавил зависимость p5, а затем файл p5.js, соединив его в HTML. И все еще ничего.

Если бы все работало, функция draw вызывала бы себя в цикле и рисовала запрошенный фон и квадрат. Если я попытаюсь вызвать функцию, как это обычно делается в JavaScript, она выдаст мне ошибку: "фон не определен", по сути, сообщая мне, что p5 не реализован.

Answer 1

Поскольку зависимость p5 вводится и управляется с помощью npm, вам нужно использовать режим экземпляра p5.js. Для запуска в StackBlitz после внедрения зависимости p5 ваш код должен выглядеть примерно так:

import p5 from 'p5';

let sketch = (p) => {

  p.setup = () => {
    p.createCanvas(500, 500);
  };

  p.draw = () => {
    p.background(220);
    p.fill(120);
    p.rect(50, 50, 100, 100);
    console.log("Hello? 1")
  };

  console.log("Hello? 2")
};

let myp5 = new p5(sketch);

Имейте в виду, что когда вы хотите использовать функцию p5, находясь в режиме экземпляра, вы должны вызывать ее как метод объекта p (или любого имени, которое вы хотите дать), но родные методы JS можно вызывать как обычно.