create a shade/shadow effect around a PImage?

General Discussion Other

aoife38

create a shade/shadow effect around a PImage?

in General Discussion • Other • 3 months ago

Can anyone tell me whether it is possible/how to create a shadow around the circumference or even entirety of a PImage in Processing.org? I want to make it look as if my buttons are being pressed (the buttons being the PImages..). If anyone has any other ideas how this effect could be achieved I'd greatly appreciate it,

Thanks

Replies(1)

tfguy44

Re: create a shade/shadow effect around a PImage?

3 months ago

Your buttons, your style. Here's some sample buttons though. Personally I like the middle button best. It's simply and easy.

PImage myButton;
int num_buttons = 5;
Button[] buttons;
class Button{
int x,y,w,h,j;
Button(int i){
j = i;
x = 20 + i * (myButton.width+20);
y = (height-myButton.width)/2;
w = myButton.width;
h = myButton.height;
}
boolean isPressed(){
return( mousePressed&&mouseX>x&&mouseX<x+w&&mouseY>y&&mouseY<y+h );
}
void draw(){
switch( j ){
case 0:
pushStyle();
if( isPressed() ) tint(128);
image( myButton, x, y );
popStyle();
break;
case 1:
pushStyle();
image( myButton, x, y );
if( isPressed() ){
noStroke();
fill( random(255),random(255),random(255), 128 );
rect( x-10, y-10, w+20, h+20 );
}
popStyle();
break;
case 2:
pushStyle();
noStroke();
fill( 128 );
if( isPressed() ){
rect( x+2, y+2, w, h );
} else {
rect( x+6, y+6, w, h );
}
image( myButton, x, y );
popStyle();
break;
case 3:
pushStyle();
if( !isPressed() ){
image( myButton, x, y );
} else {
pushMatrix();
translate(x+w/2,y+h/2);
rotate(map(millis()%5000,0,5000,0,TWO_PI));
image( myButton, -w/2, -h/2 );
popMatrix();
}
popStyle();
break;
case 4:
pushStyle();
if( isPressed() ){ fill(255,0,0); stroke(255,255,0); rect(x-10,y-10,w+20,h+20); }
image( myButton, x, y );
popStyle();
break;
}
}
}
void setup(){
// I don't have a button image so I'm gonna make one!
PGraphics pg = createGraphics( 50, 50, P2D );
pg.beginDraw();
pg.background(200);
pg.fill(200,0,0);
pg.ellipse(pg.width/2,pg.height/2,pg.width-8,pg.height-8);
pg.noFill();
pg.rect(0,0,pg.width-1,pg.height-1);
pg.endDraw();
myButton = pg.get();
size( 20 + num_buttons * (myButton.width + 20 ), 80 + myButton.height );
buttons = new Button[num_buttons];
for( int i=0; i< num_buttons; i++ ){
buttons[i] = new Button(i);
}
}
void draw(){
background(196);
for( int i=0; i< num_buttons; i++ ){
buttons[i].draw();
}
}

Code is easily extensible for anyone else who wants to add a button style.

Top Reply