Add a "mask"/ "image" on top of these to work with a kind of cut out moving circle

[vrtx]

hi there, people…!
I have been mixing lots of codes and learned a lot. Need to get more into the real codes, but its for another topic/time.
I made this, and somethings is happenig, wich i have no ideia wy and how to fix it.

1- the big rect flash/blink got slower. Do not respond to the code as it does on others sketchs;
2 - the Blur. I try to add it only on the text “Techno” and the image “ET”;
3 - in the ET head has a dot when you pass the mouse in it, it appears. It has a link to some webpage. I dont no why the link do not go together when i tranfer to p5.js.
Here is my link https://vrtxart.github.io/p5-tutorial/ ;

4 - i want to add a image that cover all of it with a circle “cutout” to show whats under the image. will send a exemple;

And here is the processing source code;

PImage et;


boolean overButton = false;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

PShader blur;


void setup() {
  size(600, 600);

  et = loadImage("et.png");  // Load the image into the program
  filter(BLUR, 6);
}



void draw() {
  background(0);  // total canva black



  // rect flahing/blinking

  int m = millis();
  fill(m % 200);              // velocity of flashs ** not working good ** maybe my computer..
  rect(25, 25, 555, 555, 30);

  image(et, 0, 0 );
  textSize(128);
  fill(0, 408, 612, 816);


  //text

  text("Techno", 100, 150, -120);
  filter(BLUR, 6);


  //button link to web page

  if (overButton == true) {
    noStroke();
    fill(74, 245, 243, 70);
  } else {
    noStroke();
    noFill();
  }

  circle(267, 290, 30);
}
void mousePressed() {
  if (overButton) {
    link("https://web.facebook.com/groups/378940129825776");
  }
}
void mouseMoved() {
  checkButtons();
}

void mouseDragged() {
  checkButtons();
}


void checkButtons() {
  if (mouseX > 200 && mouseX < 500 && mouseY > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

and here is my github;

https://github.com/VrtXArt/p5-tutorial.git

I saw an example in another topic and then I applied what I’ve been learning. Here is the link;
the circle that show what’s underneath

The image that i will add on top of everything any, but here ir goes one;

thank you

[debxyz]

Alpha Mask / Examples

Hello @vrtx
Above is an example on how to add a mask to your sketch!

[vrtx]

the square in the image should be the other way around. Also, I don’t understand where it says this is a square when I’m trying to make a circle.
There would be an image on top of everything, and the transparent circle showing the image behind it…

PImage et;

PImage img; //here

boolean overButton = false;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

PShader blur;


void setup() {
  size(600, 600);

  img = createImage(100, 100, ARGB);   // here
  for (int i = 0; i < img.pixels.length; i++) {  // here
    float a = map(i, 0, img.pixels.length, 255, 0); //here
    img.pixels[i] = color(0, 153, 204); //here
  }


  et = loadImage("et.png");  // Load the image into the program
  filter(BLUR, 6);
}



void draw() {
  background(0);  // total canva black



  // rect flahing/blinking

  int m = millis();
  fill(m % 200);              // velocity of flashs ** not working good ** maybe my computer..
  rect(25, 25, 555, 555, 30);

  image(et, 0, 0 );
  textSize(128);
  fill(0, 408, 612, 816);


  //text

  text("Techno", 100, 150, -120);
  filter(BLUR, 6);

  image(img, mouseX-img.width/2, mouseY-img.height/2); // here
  //button link to web page

  if (overButton == true) {
    noStroke();
    fill(74, 245, 243, 70);
  } else {
    noStroke();
    noFill();
  }

  circle(267, 290, 30);
}
void mousePressed() {
  if (overButton) {
    link("https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK01y34_ouFkU5wpFW5HyE7");
  }
}
void mouseMoved() {
  checkButtons();
}

void mouseDragged() {
  checkButtons();
}


void checkButtons() {
  if (mouseX > 200 && mouseX < 500 && mouseY > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

[glv]

Hello @vrtx,

Here is a static sketch that shows masking:

// Masking
// v1.0.0
// GLV 2022-11-29

PImage img1, img2;
PGraphics pg;

size(300, 300);

img1 = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg"); // Load the image into the program 
img1.resize(300, 300);

img2 = loadImage("https://processing.org/img/processing-web.png");
img2.resize(300, 300);

pg = createGraphics(300, 300);

pg.beginDraw();
pg.background(0);
pg.noStroke();
pg.fill(0, 0, 255); // Look this up in the references!
pg.circle(width/3, height/3, 100); // Try this with mouseX and mouseY!
pg.endDraw();

// The "pg image" is masking the "img1 image"
img1.mask(pg); //Look this up in the references!

background(128, 255, 0);
image(img2, 0, 0); 
image(img1, 0, 0);    

Try integrating this into an active sketch with setup() and draw().

Have fun!

:)

[vrtx]

@glv … lots of fun… goshh… hours … non stoping…But,i did learned a lot… tks.
Here it goes my last sketch, till now. in Java Prodessing;
The cover is there on top of everything, music, buttom embebbed with a link.
New images that was taking time to run the project. So i worked them outside and put together again.
Its light, appears… when i do translate to p5js…
By now, i must make the circle be a cutout, to see whats behind…
I mashed up lots of exemples in so many ways.
here i am for now…
If you take the “esfera1600.jpg” out, you will see behind … looks preatty cool lol

import processing.sound.*;
SoundFile soundfile;
PImage et;
PImage capa;
PImage img; //here
PImage txt;
PGraphics pg;
boolean overButton = false;
boolean backwards=false;
int timeLapse=400;
int timeTrack;


void setup() {
  size(600, 600);
 

  soundfile = new SoundFile(this, "fabX.mp3");
  // Play the file in a loop
  soundfile.loop();
  /*
  img = createImage(100, 100,0);   // here
   for (int i = 0; i < img.pixels.length; i++) {  // here
   float a = map(i, 0, img.pixels.length, 255, 0); //here
   img.pixels[i] = color(0, 153, 204); //here
   }
   */

  pg = createGraphics(400, 400);
  txt = loadImage("TextoTecFXpng.png");
  et = loadImage("etFXpng.png");  // Load the image into the program
  et.resize(258, 458);
   capa = loadImage("esfera1600.jpg");
}



void draw() {
  background(0);  // total canva black


  // rect flahing/blinking

  int m = millis();
  fill(m % 200);              // velocity of flashs ** not working good ** maybe my computer..
  rect(25, 25, 555, 555, 30);
  
  
    pg.beginDraw();
  pg.background(0);
   pg.fill(255,255,255, 100);
   pg.noStroke();
  pg.ellipse(mouseX-120, mouseY-160, 160, 160);
   pg.endDraw();
  
  
  image(et, 130, 125 );
  image(txt, 50, 40);
  image(capa,0, 0);
  noFill();
  stroke(255);
  ellipse(mouseX, mouseY, 160, 160);




  // Draw the offscreen buffer to the screen with image()
  //image(pg, 220, 160);


  // image(img, mouseX-img.width/2, mouseY-img.height/2); // here
  //button link to web page

  if (overButton == true) {
    noStroke();
    fill(74, 245, 243, 70);
  } else {
    noStroke();
    noFill();
  }

  circle(260, 230, 30);
}
void mousePressed() {
  if (overButton) {
    link("https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK01y34_ouFkU5wpFW5HyE7");
  }
}
void mouseMoved() {
  checkButtons();
}

void mouseDragged() {
  checkButtons();
}


void checkButtons() {
  if (mouseX > 200 && mouseX < 500 && mouseY > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

[vrtx]

ok guys, i found what i am looking for. Here in this forum…
Strugling to add this, on my project…

Here is what i found;

https://discourse.processing.org/t/first-project-moving-a-transparent-circle-over-a-semi-opaque-background-with-an-image-behind/1078/3

PImage img, img2;
PGraphics msk;

void setup() {
  size(600, 600);
  msk = createGraphics(width, height);
  background(100, 0, 0);
  noStroke();
  for ( int t = 0; t < 100; t++) {
    fill(random(200), random(200), random(200));
    rect( random(width-20), random(height-20), 20, 20);
  }
  img = get();
}

void draw() {
  msk.beginDraw();
  msk.background(0);
  msk.fill(255);
  msk.ellipse(mouseX, mouseY, 80, 80);
  msk.endDraw();
  background(img);
  img2 = get();
  filter(BLUR, 7);
  img2.mask(msk);
  image( img2, 0, 0);
  noFill();
  stroke(0);
  ellipse(mouseX, mouseY, 80, 80);
}

Now the focus is how to join them, like, what i have to take off from one and other leaving the basics, the fundamental things/ideias of my on project/sketch there.
I am almos there!!!
Take a look on my last skecth above… Seems it is easy, like, only make the circle transparent to show whats is behind.
But i seeing the last example i got totally confused… …
Keeping on!!!

[vrtx]

@glv Hi there.
I got the code, but i have being trying to put the image “capa” in front of everything and the circle not to get the blur effect.
This is what i got…

import processing.sound.*;

import processing.sound.*;

SoundFile soundfile0,
  soundfile1,
  soundfile2,
  soundfile3;
PImage capa;
PGraphics pg;

PImage et;
float opacity = 0;
PImage img;
PImage txt;
PImage trc;
boolean overButton = false;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

//botoes
int value1 = 0;
int value2 = 0;
int value3 = 0;
int value4 = 0;


void setup() {
  size(600, 600);



  soundfile0 = new SoundFile(this, "fabFX.mp3");
  soundfile1 = new SoundFile(this, "Data2.mp3");
  soundfile2 = new SoundFile(this, "Data.mp3");
  soundfile3 = new SoundFile(this, "pulse.wav");

  //images

  capa = loadImage("capapng.png");
  capa.resize(600, 600);
  trc = loadImage("Trance3png.png");
  txt = loadImage("TextoTecFXpng.png");
  et = loadImage("etFXpng.png");  // Load the image into the program
  et.resize(258, 458);
}

void draw() {

  background(0);  // total canva black

  pg = createGraphics(600, 600);

  pg.beginDraw();
  pg.background(0);
  pg.stroke(255);
  pg.fill(0, 0, 255); // Look this up in the references!
  pg.circle(mouseX-1, mouseY-55, 195); // Try this with mouseX and mouseY!
  pg.endDraw();
  capa.mask(pg); //Look this up in the references!


  // rect flahing/blinking
  int m = millis();
  fill(m % 200);              // velocity of flashs ** not working good ** maybe my computer..
  rect(25, 25, 555, 555, 30);
  //image(et, 130, 125 );
  // image(txt, 50, 40);

 
  //rgb
  tint(20, 17, 247, 100); // Alpha to 102 without changing the tin
  image(et, 140, 125 );
  tint(255, 0, 0, 80); // Tint to yellow, alpha to 153
  image(et, 120, 125 );


  //opacity
  if (opacity < 255) { // When less than the maximum,
    opacity += 0.5; // increase opacity
  }

  tint(255, opacity);
  image(et, 130, 125 );
  image(txt, 50, 40);
  image(trc, 85, 130);


  //buttons draws

  fill(value1);
  rect(500, 200, 50, 50, 30);
  fill(value2);
  rect(500, 300, 50, 50, 30);
  fill(value3);
  rect(500, 400, 50, 50, 30);
  fill(value4);
  rect(500, 500, 50, 50, 30);

  /*
  //ciercle flow with mouse
   noFill();
   stroke(255);
   ellipse(mouseX, mouseY-55, 200, 200);
   */



  //button link to web page
  if (overButton == true) {
    int m4 = millis();
    fill(m4 % 150);
    ellipse(260, 230, 30, 0);
    cursor(CROSS);
  } else {
    noStroke();
    noFill();
    cursor(HAND);
  }

 image(capa, 0, 0);

}

void mouseReleased() {

  loop();

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 200)&(mouseY <= 230)) {

    //song.play();

    if (soundfile0.isPlaying()) {
      // .isPlaying() returns a boolean
      soundfile0.stop();
    } else {
      soundfile0.play();
    }

    if (value1 == 255) {
      value1 = 0;
    } else {
      value1 = 255;
    }

    println("btn1 hit.");
  }



  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 300)&(mouseY <= 330)) {

    //song.play();

    if (soundfile1.isPlaying()) {
      // .isPlaying() returns a boolean
      soundfile1.stop();
    } else {
      soundfile1.play();
    }


    if (value2 == 255) {
      value2 = 0;
    } else {
      value2 = 255;
    }
    println("btn2 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 400)&(mouseY <= 430)) {
    //soundfile2.play();
    //song.play();

    if (soundfile2.isPlaying()) {
      // .isPlaying() returns a boolean
      soundfile2.stop();
    } else {
      soundfile2.play();
    }


    if (value3 == 255) {
      value3 = 0;
    } else {
      value3 = 255;
    }
    println("btn3 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 500)&(mouseY <= 530)) {
    // soundfile3.play();

    //song.play();

    if (soundfile3.isPlaying()) {
      // .isPlaying() returns a boolean
      soundfile3.stop();
    } else {
      soundfile3.play();
    }



    if (value4 == 255) {
      value4 = 0;
    } else {
      value4 = 255;
    }
    println("btn4 hit.");
  }
}
void mousePressed() {
  if (overButton) {
    link("https://www.youtube.com/playlist?list=PL087855B0290C2154");
    link("https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK3aWfOtz0-wEpL6fkvZiBB");
  }
}


void mouseMoved() {
  checkButtons();
}

void mouseDragged() {
  checkButtons();
}


void checkButtons() {
  if (mouseX > 200 && mouseX-40 < 300 && mouseY+35 > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

It is the other wayround…