Text opacity with mouse moved

Programming Questions

maddydi

Text opacity with mouse moved

in Programming Questions • 1 years ago

Sorry but i'm kind of new to processing and i've never really worked with text before. I was wondering if anyone could help me figure out how to get the transparent words on my sketch to become more solid in colour as the mouse is moved over them individually.

This may not help but i have the code.

PImage img0;
PImage img1;
PImage img2;
PFont font1;
PFont font2;

void setup()
{
    size(504, 378);
smooth();
img0 = loadImage("Journeybackyard040.JPG");
img1 = loadImage("Journeybackyard039.JPG");
img2 = loadImage("Journeybackyard041.jpg");
   font1= loadFont ("OratorStd-60.vlw");
    font2= loadFont ("OratorStd-200.vlw");
}

void draw()
{
    background(255);
       tint(255,200);
image (img0,0,0);
tint(255, 150);
    image (img1,0,0);
    tint(255,50);
image (img2,0,0);

textFont(font1,40);
textAlign (LEFT);
   fill(255,40);
   text("0573",50,300);
   text("0574",400,60);
   text("0575",100,100);
   text("0576",0,0);
   text("0577",0,0);

   textFont(font2,150);
text("0574",200,60);
text("0579",50,300);
text("0579",300,400);

textFont(font2,110);
text("0579",0,80);

textFont(font2,200);
text("0579",-10,450);
textFont(font2,90);
text("0572",200,180);
}

there isn't anything in here about the changing opacity but can anyone show/teach me how i program the void mousemoved for this?

Replies(1)

amnon.owed

Re: Text opacity with mouse moved

1 years ago

Things like these are done more easily with classes. Because you can describe that general behavior in a class and then have a lot of instances of it that all have the same variables and behaviors, but act independently. That way you can for example store the respective text, position and transparency.

I've created a small example that shows how to use a class in this context. For clarity I've added some small red dots so you can see where the text is. The behavior is in the update function. When the mouse is near, the transparency variable increases, when the mouse is far it decreases. Move the mouse over the canvas to see this effect.

Code Example

ArrayList <TransparentText> nums = new ArrayList <TransparentText> ();
void setup() {
size(600, 600);
textSize(30);
textAlign(CENTER, CENTER);
noStroke();
smooth();
for (int i=0; i<40; i++) {
String txt = nfs(int(random(10000)), 4);
nums.add(new TransparentText(txt, random(width), random(height)));
}
}
void draw() {
background(255);
for (TransparentText tt : nums) {
tt.update();
tt.display();
}
}
class TransparentText {
String txt;
float x, y;
float transparency;
TransparentText(String txt, float x, float y) {
this.txt = txt;
this.x = x;
this.y = y;
}
void update() {
if (dist(mouseX, mouseY, x, y) < 50 && transparency < 255) { transparency += 4; }
else if (transparency > 0) { transparency -= 2; }
}
void display() {
fill(255, 0, 0, 50);
ellipse(x, y, 4, 4);
fill(0, transparency);
text(txt, x, y);
}
}

Top Reply