WedX - журнал о программировании и компьютерных науках

Как справиться с несколькими холстами и асинхронным поведением?

Я практиковал несколько холстов: я пытаюсь рисовать пиксели одного холста на другом, но дело в том, что когда я загружаю изображение на первый холст, я не знаю, как дождаться его на втором холсте.

function sketch(p) {

  p.preload = function() {
    p.img = p.loadImage('/*...*/')
  }

  p.setup = function() {
    //...
  };
}

var myp = new p5(sketch);

function sketch2(p) {
  p.setup = function() {
    myp.loadPixels(); // this is not giving anything
    // but works when myp doesnt have a preload    
  };
}

var main = new p5(sketch2);
p5.js
31.10.2018

Ответы:


1

Функция preload() обрабатывает асинхронную загрузку в своем экземпляре, поэтому она останавливает выполнение setup() только первого эскиза. Проблема в том, что есть два экземпляра, поэтому вы в конечном итоге пытаетесь вызвать loadPixels(), когда еще нет пикселей для загрузки.

Когда избавляешься от предзагрузки, создание первого скетча происходит достаточно быстро, чтобы было что подгружать при использовании loadPixels(). Это можно сделать элегантно, но, чтобы проиллюстрировать суть, вы можете переместить строку var main = new p5(sketch2);, которая будет выполняться в конце настройки первого скетча, и увидеть, как она работает:

function sketch(p) {
    p.preload = function() {
        p.img = p.loadImage('https://picsum.photos/200');
    }

    p.setup = function() {

        //Something to display and check that the pixels are actually loaded.
        //Can be ignored.
        //p.createCanvas(200, 200);
        //p.background(0);
        //p.image(p.img, 0, 0);

        var main = new p5(sketch2);
    }
}

var myp = new p5(sketch);

function sketch2(p) {
    p.setup = function() {
        myp.loadPixels()
        console.log(myp.pixels); 

        p.createCanvas(200, 200);
        p.background(125);
    };
}
31.01.2019
Новые материалы
Как создать диаграмму градиентной кисти с помощью D3.js
Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Для любых предложений по сайту: [email protected]