Objects affecting other objects transparency

Processing Project Guidance
1

Hello there, this might be a little ambitious for my begginer/intermediate self, but i will give it a try.

I am working on a Project for a brand logo, wich is just a single word. I am using it as a string array so i can anímate each single letter as an object.

The basic idea is there will be image display in front of the screen (the letters), below it a black square that covers all the screen (as a background), and below some sort of animation i am working on, that should only be seen through the letters (some fancy collection of colored stuff that will dress up the letters) .

I would like to know if there is any approach to make the parameters of the letters make that black square invisible just within those parameters. Painting with transparency the black square.

Any advice will come handy. I am mostly looking what kind of functions should i investigate more deeply to get that. And maybe another way of heading to it, like drawing animated colored shapes within the letters range.

A key information here is that the letters will be anímated too, so maybe coding animation inside of their parameters might be too much for my actual knowledge on coding.

Thanks for the reading!

1 Like
2

i try with subtracting

  • a (white) text ( with transparent background )

from

  • a image as transparent

on pixel level
with a dynamic background show can see what part is transparent


String mytext = "Hallo World";
PGraphics my_tt; //my_trans_text;
PImage my_btt;
int bw=180, bh=40;
int ck = 0;

void make_my_tt() {                        // only text
  my_tt = createGraphics(bw, bh);
  my_tt.beginDraw();
  my_tt.fill(255, 255, 255);               // in white
  my_tt.textSize(30);
  my_tt.text(mytext, 7, 30);
  my_tt.endDraw();
}

void make_my_btt() {
  my_btt = createImage(bw, bh, ARGB);
  for (int y = 0; y < my_btt.height; y++) {
    for (int x = 0; x < my_btt.width; x++) { 
      color ctt = my_tt.get(x, y);
      if ( red(ctt) >= 255 )     my_btt.set(x, y, color(0, 0, 0, 0) );           // and set pixel transparent
      else                       my_btt.set(x, y, color(0, 0, 255, 255) );       // set background
    }
  }
}

void draw_background_show() {
  fill(0, 200, 0);
  stroke(200,0,0); // noStroke();
  circle(width/2, height/2, ck);
  ck++;
  if ( ck > width ) ck = 0;
}

void setup() {
  size(200, 200);
  make_my_tt();
  make_my_btt();
}

void draw () {
  background(200, 200, 0);
  draw_background_show();
  image(my_tt, 10, 10);
  image(my_btt, 10, 110);
}

2019-02-15_15-08-21_snap
2019-02-15_15-08-21_snap.png960×779 65.3 KB

there might be much smarter ways, but this should do for a first test.

other test combine with mirror:
2019-02-15_15-23-28_snap

1 Like
3

i’d start with looking up masks. here is an example of something you can do with it

GIF

PImage img;
PGraphics mask;
PVector pos;
PVector vel;

void setup() {
  size(512, 256);
  surface.setSize(512, 256);
  img = loadImage("flowers.png");
  mask = createGraphics(512, 256);  
  pos = new PVector();
  vel = new PVector(random(2), random(2));
}
 
 void draw() {
  background(255);
  pos.add(vel);
  if(pos.x < 0 | pos.x > width)
    vel.x = -vel.x;
  if(pos.y < 0 | pos.y > height)
    vel.y = -vel.y;
   
  mask.beginDraw();
  mask.clear();
  mask.textSize(128);
  mask.text("yoyo", pos.x, pos.y);
  mask.endDraw();
  
  img.mask(mask);
  
  image(img, 0, 0);
 }
2 Likes