Непрозрачность в изображениях с обработкой - PullRequest
Новая
       30

Непрозрачность в изображениях с обработкой

0 голосов
/ 03 ноября 2011

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

Как я вижу, есть два способа сделать этоэто:

Я могу сделать верхнее изображение прозрачным с течением времени (в пределах выделенной области) или я могу удалить пиксели по отдельности в стиле аэрозольного баллона.Подумайте о том, что аэрозольный баллончик от MS Paint может быть в тот день.

Вот какой-то очень простой код, который я начал, который просто кладет изображения поверх друг друга 

  PImage sand;
  PImage fossil;

void setup()
{
  size(400,400);
  background(255,255,0);
  frameRate(30);

  fossil = loadImage("foss.jpg");
  sand = loadImage("sand.jpeg");
}

void draw()
{

   image(fossil, 0, 0, width,height);
   image(sand, 0, 0, width,height);
   smooth();

 if (mousePressed) {
    fill(0);
    tint(255,127); //the opacity function
  } else {
    fill(255);
  } 
}

Так что кто-нибудь комментируетоб этих двух способах создания непрозрачности или, может быть, есть более простой способ, который я упустил?

Возможно, я не совсем понял в своей спецификации, так как 2 комментария ниже просят разъяснений.

Проще говоря, у меня есть 2 изображения друг над другом.Я хотел бы иметь возможность внести некоторые изменения в изображение верхнего уровня, чтобы сделать нижнее изображение видимым.Однако мне нужно сделать эту модификацию только для части изображения верхнего уровня.

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

Затем я продолжу этот подход.Любые указания относительно того, как это сделать, также приветствуются.

Надеюсь, это устранит любую путаницу.

1 Ответ

3 голосов
/ 07 ноября 2011

Если вы просто хотите плавно переходить между изображениями, это может быть с tint (), как вы предлагаете в коде. Вы были на самом деле довольно близко: 

PImage sand;
PImage fossil;

void setup()
{
  size(400, 400);
  fossil = loadImage("CellNoise.jpg");
  sand = loadImage("CellVoronoi.jpg");
}

void draw()
{
  //tint from 255 to 0 for the top image
  tint(255,map(mouseX,0,width,255,0));
  image(fossil, 0, 0, width, height);
  //tint from 0 to 255 for the bottom image - 'cross fade'
  tint(255,map(mouseX,0,width,0,255));
  image(sand, 0, 0, width, height);
}

Для эрозии "аэрозольного баллона" вы можете просто скопировать пиксели из исходного изображения в конечное изображение. От вас зависит, как вы будете проходить по пикселям (сколько, в каком порядке и т. Д.), Чтобы получить нужный эффект «распыления», но вот базовый пример того, как использовать функцию copy () : 

PImage sand,fossil;
int side = 40;//size of square 'brush'
void setup()
{
  size(400, 400);
  fossil = loadImage("CellNoise.jpg");
  sand = loadImage("CellVoronoi.jpg");
}
void draw()
{
  image(fossil, 0, 0, 400, 400);
  if(mousePressed) {
    for(int y = 0 ; y < side ; y++){
       for(int x = 0; x < side; x++){
        //copy pixel from 'bottom' image to the top one
        //map sketch dimensions to sand/fossil an dimensions to copy from/to right coords
        int srcX = (int)map(mouseX+x,0,width+side,0,sand.width);
        int srcY = (int)map(mouseY+y,0,height+side,0,sand.height);
        int dstX = (int)map(mouseX+x,0,width+side,0,fossil.width);
        int dstY = (int)map(mouseY+y,0,height+side,0,fossil.height);
        fossil.set(dstX, dstY, sand.get(srcX,srcY));
       }
     }
  }
}

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

Веселись!

...