처리중인 이미지의 불투명도

Question

매우 간단한 것부터 시작하려고합니다. 나는 서로 위에 2 개의 이미지를 갖고 싶습니다. 마우스 이벤트를 드래그하여 상단 이미지를 클릭하면 선택한 최상위 이미지 영역이 희미 해지고 하단 이미지가 표시됩니다.

이

내가 (선택된 영역 내에서) 시간이 지남에 따라 상단 이미지를 투명하게 만들 수 또는 나는 스프레이에 개별적으로 픽셀을 삭제할 수 있습니다

내가 볼때, 나는이 작업을 수행 할 수있는 2 가지 방법이 있습니다 스타일 패션 수 있습니다. MS 페인트의 스프레이 도구는 그날 다시 사용할 수 있다고 생각하십시오.

는 Heres는 단지 서로

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 개의 이미지를 가지고있다. 하단 이미지를 볼 수있는 최상위 이미지를 약간 수정할 수 있기를 바랍니다. 그러나 최상위 이미지의 일부만 수정해야합니다.

어느 것이 더 나은 옵션인지 알고 싶습니다. tint()를 사용하거나 상단 레이어에서 픽셀을 삭제하여 상단 이미지의 일부를 투명하게 만들려면

그런 다음 그 방법을 진행하겠습니다. 그것을하는 방법에 관해서도 어떤 표시도 감사합니다.

혼란이 없기를 바랍니다.

Answer 1

단순히 이미지간에 크로스 페이드를 원한다면 제안하는 것처럼 색조()로 표시 할 수 있습니다. 당신은 아주 가까운 실제로했다 : 들어

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); 
} 

침식 단순히 대상 이미지로 원본 이미지의 픽셀을 복사 할 수 있습니다 "스프레이 스타일을 수 있습니다."

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)); 
     } 
    } 
    } 
} 

: 그것은 어떻게 당신에게 루프 픽셀 (얼마나 많은, 어떤 순서 등) 여기 당신이 원하는 효과처럼 "스프레이"를 얻을 수 있지만, 할 수있는 copy() 기능을 사용하는 방법에 대한 기본 예제입니다 통해 당신까지 내가 단순히 사각형 (40x40의 경우)을 복사하기 위해 루프를 돌리고 있지만 루프를 만들고 다른 효과를 얻는 다른 재미있는 방법을 찾을 수 있습니다.

재미있게 보내세요!