Обработка. js - updatePixels () для указанного массива c

Question

Мне удалось кэшировать массив в виде пикселей на моем холсте с помощью этого кода, используя функции loadPixels(); и updatePixels();. Проблема с этим методом в том, что он загружает / обновляет весь холст. Я хочу кэшировать только массив с именем drawings, потому что, если я захочу позже разместить некоторые элементы управления пользовательского интерфейса или курсор мыши, он также напечатает их на холсте. Каким может быть самый простой способ растеризовать то, что хранится в этом массиве drawings?

Answer 1

Пока loadPixels() загружает весь рисунок (что здорово, так как это конечный результат вашей работы, вы получаете таким образом, а не каждый чертов спрайт), есть простой способ загрузить пиксели a specifici c image:

Класс PImage имеет собственный метод loadPixels(). Короче говоря, каждое изображение имеет свой собственный массив myPImage.pixels[], но вам необходимо загрузить его с помощью myPImage.loadPixels(), прежде чем вы сможете его использовать.

Вот некоторый скелетный код прямо из справочного материала по обработке:

PImage myImage;
int halfImage;

void setup() {
  size(100, 100);
  halfImage = width * height/2;
  myImage = loadImage("apples.jpg");
  myImage.loadPixels();
  for (int i = 0; i < halfImage; i++) {
    myImage.pixels[i+halfImage] = myImage.pixels[i];
  }
  myImage.updatePixels();
}

void draw() {
  image(myImage, 0, 0);
}

Я останусь здесь, если у вас возникнут дополнительные вопросы. Удачи!

EDIT: прочитав ваши вопросы, я решил, что вы получите больше информации из рабочего примера, который демонстрирует, как использовать массив pixels[], чем только базовую документацию c, так что вот она. Вы можете скопировать и вставить его в Processing IDE и поэкспериментировать с кодом, чтобы лучше понять эти концепции.

Я взял на себя смелость упростить приведенный вами пример до его голого ядра, чтобы вы могли понять основы pixels[], updatePixels() и loadPixels(). Сначала я хотел просто отредактировать его, но то, как оно работает, сделало бы упражнение слишком запутанным на мой вкус.

Я просто подчеркнул, как использовать эти концепции, создав белый холст, на котором вы можете «рисовать». с помощью мыши. Когда вы нажимаете "s", он сохраняет текущее состояние чертежа. Когда вы нажимаете «l», вы загружаете ранее сохраненное состояние. Я думаю, он покажет вам то, что вы хотели здесь понять.

(рисунок будет схематичным, так как это не объект здесь, поэтому меня это не волновало)

Вот код. Комментарии включены для дополнительной информации.

color[] savedBackground;

void setup()
{
  size(400, 400);
  background(255);
  loadPixels();
  savedBackground = pixels.clone();
}

void draw() {
} // I only keep this so the mouse/key events works

void keyPressed() {
  switch (key) {
  case 's':
  case 'S':
    // when you press the 's' key, we save the current image data
    loadPixels();
    cloneArray(pixels, savedBackground);
    println("saved");
    break;
  case 'l':
  case 'L':
    // when you press the 'l' key, we reload the previously saved image data
    cloneArray(savedBackground, pixels);
    updatePixels();
    println("loaded");
    break;
  }
}

void mouseDragged() {
  // this will leave a trail of black dots when you drag the mouse around while pressing a button
  // Since 'pixels' is a 1-dimentional array and I have 2-dimentional coordinates, I have to use
  // math to find the right spot where to edit the array
  pixels[mouseX + (mouseY * width)] = color(0);
  updatePixels();
}

// I'm using this method to clone the arrays
// There are other methods to clone arrays
void cloneArray(color[] original, color[] clone) {
  for (int i = 0; i < original.length; i++) {
    clone[i] = original[i];
  }
}

Удачи!