Combining textures onto a shape?

steve_j

Im trying to mix images on a texture using tint (as i would sending it directly to image) but it doesnt seem to be working. Can anyone explain to me why? Do i need to render the mix before applying them to the texture? if so how?

What i currently have

PImage img1, img2;

int alpha = 0;
boolean up = true;


void setup() {
  size(640, 360, P2D);
  img1 = loadImage("layer1.jpg");
  img2 = loadImage("layer2.jpg");
}

void draw() {
  background(0);

  if (up == true && alpha < 255)
  {
    alpha++;
  } else up = false;
  if (up == false && alpha > 0) 
  {
    alpha--;
  } else up = true;

  beginShape();
  tint(255, 255);
  texture(img1);
  tint(255, alpha);
  texture(img2);
  vertex(10, 10, 0, 0);
  vertex(width-10, 10, img1.width, 0);
  vertex(width-10, height-10, img1.width, img1.height);
  vertex(10, height-10, 0, img1.height);
  endShape();
}

blindfish

In terms of performance it would make a lot more sense to pre-render the combined image once in setup ;)

Edit: sorry I see that you're adjusting the opacity of the second image dynamically; so the above doesn't apply.

Looking at the reference for texture it makes no mention that textures can be combined, so I suspect you need to combine the images before applying the texture...

steve_j

Thanks for the response blindfish. Thats the problem im struggling with. I can easily render the blend to image functions. But how do i get that composition onto a texture instead of the main raster?

PImage img1, img2;

int alpha = 0;
boolean up = true;

void setup() {
  size(640, 360, P2D);
  img1 = loadImage("layer1.jpg");
  img2 = loadImage("layer2.jpg");

}

void draw() {
  background(0);

  if (up == true && alpha < 255)
  {   alpha++; }
  else up = false;
  if (up == false && alpha > 0) 
  { alpha--;} 
  else up = true;

  tint(255, 255);
  image(img1, 0, 0);
  tint(255, alpha);
  image(img2, 0, 0);

}

koogs

  tint(255, 255);
  texture(img1);
  tint(255, alpha);
  texture(img2);
  vertex(10, 10, 0, 0);
  vertex(width-10, 10, img1.width, 0);
  vertex(width-10, height-10, img1.width, img1.height);
  vertex(10, height-10, 0, img1.height);

this is like calling fill() twice before drawing a rectangle, only the last is going to make a difference.

you probably need to set the first texture, apply to the shape, set the second texture, apply to the shape again, something like

  tint(255, 255);
  texture(img1);
  vertex(10, 10, 0, 0);
  vertex(width-10, 10, img1.width, 0);
  vertex(width-10, height-10, img1.width, img1.height);
  vertex(10, height-10, 0, img1.height);
  tint(255, alpha);
  texture(img2);
  vertex(10, 10, 0, 0);
  vertex(width-10, 10, img1.width, 0);
  vertex(width-10, height-10, img1.width, img1.height);
  vertex(10, height-10, 0, img1.height);

(not tested, and would obviously benefit from a method.)

steve_j

Ok, so that seemed to work, am still pretty stuck trying to get them onto the same
primative though. had another go with trying to iterate thought the pixles of each and individually procesing them. Although i seem to have got stuck. Any idea why this isnt working?

PImage img1, img2;
int blend = 0;
boolean up = true;



PImage img1, img2;
int blend = 0;
boolean up = true;

void setup() {
  size(640, 360, P2D);
  img1 = loadImage("layer1.jpg");
  img2 = loadImage("layer2.jpg");
}

void draw() {
  background(0);

  if (up == true && blend < 255)
  { blend++; }
  else up = false;
  if (up == false && blend > 0) 
  { blend--;} 
  else up = true;

  float blendInv = map(blend, 0, 255, 255, 0);

  img1.loadPixels();
  img2.loadPixels();

  for (int x = 0; x < img1.width; x++) {
    for (int y = 0; y < img1.height; y++ ) {
      int loc = x + y*img1.width;
      float r1 = red   (img1.pixels[loc]);
      float g1 = green (img1.pixels[loc]);
      float b1 = blue  (img1.pixels[loc]);

      float r2 = red   (img1.pixels[loc]);
      float g2 = green (img1.pixels[loc]);
      float b2 = blue  (img1.pixels[loc]);

      img2.pixels[loc]  = color((r1/255*blend)+(r2/255*blendInv), (g1/255*blend)+(g2/255*blendInv),(b1/255*blend)+(b2/255*blendInv));

    }
  }
// Updating changes in img2
  img2.updatePixels();

  beginShape();
  texture(img2);
  vertex(10, 10, 0, 0);
  vertex(width-10, 10, img1.width, 0);
  vertex(width-10, height-10, img1.width, img1.height);
  vertex(10, height-10, 0, img1.height);
  endShape();
}

steve_j

Silly mistake, forgot to update the second rgb floats to img2 (copy paste error) Also needed to pass the combined images to another pi image for output.

Heres the working code for others refernce

PImage img1, img2, img3;
int blend = 0;
boolean up = true;

void setup() {
  size(640, 360, P2D);
  img1 = loadImage("layer1.jpg");
  img2 = loadImage("layer2.jpg");
  img3 = createImage(width, height, ARGB);
  frameRate(100);
}

void draw() {
  background(0);
  if (up == true && blend < 255)
  { blend++; }
  else up = false;
  if (up == false && blend > 0) 
  { blend--;} 
  else up = true;

  float blendInv = map(blend, 0, 255, 255, 0);



  img1.loadPixels();
  img2.loadPixels();

  for (int x = 0; x < img1.width; x++) {
    for (int y = 0; y < img1.height; y++ ) {
      int loc = x + y*img1.width;
      float r1 = red   (img1.pixels[loc]);
      float g1 = green (img1.pixels[loc]);
      float b1 = blue  (img1.pixels[loc]);

      float r2 = red   (img2.pixels[loc]);
      float g2 = green (img2.pixels[loc]);
      float b2 = blue  (img2.pixels[loc]);

      img3.pixels[loc]  = color((r1/255*blend)+(r2/255*blendInv), (g1/255*blend)+(g2/255*blendInv),(b1/255*blend)+(b2/255*blendInv));
    }
  }

// Updating changes in img2
  img3.updatePixels();
 // println (blend, blendInv); 

  beginShape();
  texture(img3);
  vertex(10, 10, 0, 0);
  vertex(width-10, 10, img1.width, 0);
  vertex(width-10, height-10, img1.width, img1.height);
  vertex(10, height-10, 0, img1.height);
  endShape();

  println(frameRate);

}