Combining textures onto a shape?

edited September 2017 in Questions about Code

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

Answers

  • edited September 2017

    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...

  • 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);
    
    }
    
  • Answer ✓
      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.)

  • 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();
    }
    
  • edited September 2017

    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);
    
    }
    
Sign In or Register to comment.