Loading...
Logo
Processing Forum
General Discussion Other
aoife38
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
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.

Copy code
  1. PImage myButton;
  2. int num_buttons = 5;
  3. Button[] buttons;

  5. class Button{
  6.   int x,y,w,h,j;
  7.   Button(int i){
  8.     j = i;
  9.     x = 20 + i * (myButton.width+20);
  10.     y = (height-myButton.width)/2;
  11.     w = myButton.width;
  12.     h = myButton.height;
  13.   }
  14.   boolean isPressed(){
  15.     return( mousePressed&&mouseX>x&&mouseX<x+w&&mouseY>y&&mouseY<y+h );
  16.   }
  17.   void draw(){
  18.     switch( j ){
  19.       case 0:
  20.         pushStyle();
  21.         if( isPressed() ) tint(128);
  22.         image( myButton, x, y );
  23.         popStyle();
  24.         break;
  25.         
  26.       case 1:
  27.         pushStyle();
  28.         image( myButton, x, y );
  29.         if( isPressed() ){
  30.           noStroke();
  31.           fill( random(255),random(255),random(255), 128 );
  32.           rect( x-10, y-10, w+20, h+20 );
  33.         }
  34.         popStyle();
  35.         break;
  36.         
  37.       case 2:
  38.         pushStyle();
  39.           noStroke();
  40.           fill( 128 );
  41.         if( isPressed() ){
  42.           rect( x+2, y+2, w, h );
  43.         } else {
  44.           rect( x+6, y+6, w, h );
  45.         }
  46.         image( myButton, x, y );
  47.         popStyle();
  48.         break;
  49.         
  50.       case 3:
  51.         pushStyle();
  52.         if( !isPressed() ){
  53.         image( myButton, x, y );
  54.         } else {
  55.           pushMatrix();
  56.           translate(x+w/2,y+h/2);
  57.           rotate(map(millis()%5000,0,5000,0,TWO_PI));
  58.           image( myButton, -w/2, -h/2 );
  59.           popMatrix();
  60.         }
  61.         popStyle();
  62.         break;
  63.         
  64.       case 4:
  65.         pushStyle();
  66.         if( isPressed() ){ fill(255,0,0); stroke(255,255,0); rect(x-10,y-10,w+20,h+20); }
  67.         image( myButton, x, y );
  68.         popStyle();
  69.         break;
  70.         
  71.         
  72.     }    
  73.   }
  74. }  

  76. void setup(){
  77.   // I don't have a button image so I'm gonna make one!
  78.   PGraphics pg = createGraphics( 50, 50, P2D );
  79.   pg.beginDraw();
  80.   pg.background(200);
  81.   pg.fill(200,0,0);
  82.   pg.ellipse(pg.width/2,pg.height/2,pg.width-8,pg.height-8);
  83.   pg.noFill();
  84.   pg.rect(0,0,pg.width-1,pg.height-1);
  85.   pg.endDraw();
  86.   myButton = pg.get(); 
  87.   size( 20 + num_buttons * (myButton.width + 20 ), 80 + myButton.height );
  88.   buttons = new Button[num_buttons];
  89.   for( int i=0; i< num_buttons; i++ ){
  90.     buttons[i] = new Button(i);
  91.   } 
  92. }

  94. void draw(){
  95.   background(196);
  96.   for( int i=0; i< num_buttons; i++ ){
  97.     buttons[i].draw();
  98.   }   
  99. }
Code is easily extensible for anyone else who wants to add a button style. 
Top Reply

Statistics

  • 1 Replies
  • 277  Views
  • 0 Followers

Actions

Related Posts