p5element v0.5.155

Простое начало

Используйте p5.js для создания собственного канваса. Если вам необходима модульность в разработке, то используйте следующий метод:

В любом файле (например index.ts/js) создайте функцию sketch вместо отдельного файла с таким названием. Функция принимает p5.js в качестве аргумента

//index.ts
function sketch(p5: p5){
    // Здесь можно инициировать все прочие сущности для разработки
    p5.preload = function(){
      // Здесь настройки прелоада
    }
    p5.setup = function() {
        // Здесь расположите функцию предустановки для канваса и сущностей вашего приложения
      };   
      p5.draw = function() {
        // Здесь задаются инструкции отрисовки на каждый кадр (по-умолчанию 60)
      }
      p5.mouseClicked = function(){
        // Здесь располагается функция клика
      }
      p5.mouseMoved = function(){
        // Здесь располагается функция движения мыши
      }
} 
// Создаем новый объект p5
new p5(sketch);

Далее в отдельном модуле создайте объект p5Element

let square = new P5Element(p5, variables: // Здесь располагаются данные, подвергающиеся изменению. Обязательно для прописания x и y по канвасу, а также для правильно обработки клика необходимо установить cornerType: "CORNER")

Далее определите функцию отрисовки

square.defineDrawFn(() => {
                    p5.push()
                    p5.rectMode('corner')
                    p5.stroke('rgb(183, 227, 9)')
                    p5.fill('rgba(183, 227, 9, 0.5)')
                    p5.strokeWeight(2)
                    p5.rect(0, 0, 100, 100, 10)
                    p5.pop()
                })

Добавьте элемент в функцию draw любым удобным образом