We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Programs › rects with rounded corners & rotation
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
rects with rounded corners & rotation (Read 1056 times)
jher
rects with rounded corners & rotation
Feb 1st, 2008, 4:32pm  
I want to make an interface that is basically a large grid of rectangles. when you mouse over them the rectangle grows a bit and if you click on the rect it rotates 180 degrees and shows a video.

How do I make rects with rounded corners?

How do I a rect 180 degrees? (I tried the rotateY function before I drew one of the rects but it slides it all over the screen and back in space???)

Thanks
Back to top
 
 
mflux
Re: rects with rounded corners & rotation
Reply #1 - Feb 2nd, 2008, 8:51am  
rotate() uses radians so make sure you pass in radians or convert your degrees using radians().

You can try using Candy SVG import to import rounded rectangles. You can also construct them mathematically via bezierPoint().
Back to top
 
Portfolio
fluxhavoc  
davbol
Re: rects with rounded corners & rotation
Reply #2 - Feb 2nd, 2008, 6:50pm  
here's one method you might use for drawing "rounded rectangles":

Quote:


/**
BezierRects.pde
*/
void setup() {
 size(200,400);
 smooth();
}

void draw() {
 background(255);
 fill(192);
 stroke(64);
 bezierRect(10, 10,180,80,5,5);
 bezierRect(10,110,180,80,25,25);
 bezierRect(10,210,180,80,-20,-20);
 bezierRect(10,310,180,80,50,-30);
}

/**
@param x  x-coordinate of upper-left
@param y  y-coordinate of upper-left
@param w  width of the rectangle
@param h  height of the rectangle
@param xr radius to inset x-coordinate corners for bezier controls (may be negative to "outset")
@param yr radius to inset y-coordinate corners for bezier controls (may be negative to "outset")
*/
void bezierRect(float x, float y, float w, float h, float xr, float yr) {
 float w2=w/2f, h2=h/2f, cx=x+w2, cy=y+h2;
 beginShape();
 vertex(cx,cy-h2);
 bezierVertex(cx+w2-xr, cy-h2, cx+w2, cy-h2+yr, cx+w2, cy);
 bezierVertex(cx+w2, cy+h2-yr, cx+w2-xr, cy+h2, cx, cy+h2);
 bezierVertex(cx-w2+xr, cy+h2, cx-w2, cy+h2-yr, cx-w2, cy);
 bezierVertex(cx-w2, cy-h2+yr, cx-w2+xr, cy-h2, cx, cy-h2);
 endShape();
}
Back to top
 
WWW  
jher
Re: rects with rounded corners & rotation
Reply #3 - Feb 3rd, 2008, 8:47pm  
Cool!

Thanks guys. Is there a mask functionality that would allow me to import a regular image and round the corners on that beast?


Thanks for al the help!!!
Back to top
 
 
skanaar
Re: rects with rounded corners & rotation
Reply #4 - Feb 7th, 2008, 10:50am  
jher: the rotate()-functions rotates the coordinate system around the origin, which by default is located at the upper left corner of the canvas. This would cause your "sliding over the screen" behaviour.

If this is the problem it should be solved by:
Code:
pushMatrix();
translate(x,y); // coordinates of the rect
rotate(angle);
// the origin is now located at (x,y)
// so draw the rectangle at (0,0)
rect(0,0,50,50); 
popMatrix(); // return coordinate system to the previous state
Back to top
 
WWW  
skanaar
Re: rects with rounded corners & rotation
Reply #5 - Feb 7th, 2008, 10:56am  
Masking an image can be done by modifying the alpha-channel of  an image.

Here is a nifty function for adding transparent rounded corners to an image:

Code:
PImage rounded;

void setup(){
  size(200,200);
  PImage img = loadImage("hybrid.png");
  rounded = roundImageCorners( img, 20 );
}

void draw(){
  background(255);
  image(rounded,50,50);
  image(rounded,mouseX,mouseY);
}

PImage roundImageCorners( PImage img, int radius ){
  
  PImage rounded = createImage(img.height,img.width,ARGB);
  
  for(int i=0; i<img.width; i++){
    for(int j=0; j<img.height; j++){
	
	float d;
	
	if( i<radius && j<radius )
	  d = dist(i,j,radius,radius);
	else if( i>img.width-radius-1 && j<radius )
	  d = dist(i+1,j,img.width-radius,radius);
	else if( i<radius && j>img.height-radius-1 )
	  d = dist(i,j+1,radius,img.height-radius);
	else if( i>img.width-radius-1 && j>img.height-radius-1 )
	  d = dist(i+1,j+1,img.width-radius,img.height-radius);
	else
	  d = 0;
	
	color pixel = img.pixels[i + img.width*j];
	float opacity = constrain(255*(1+radius-d),0,255);
	opacity = min( alpha(pixel), opacity ); // preserve the transparency of the original image.
	rounded.pixels[i + img.width*j] = color( red(pixel), green(pixel), blue(pixel) , opacity );
	
    }
  }
  return rounded;
  
}
Back to top
 
WWW  
jher
Re: rects with rounded corners & rotation
Reply #6 - Feb 7th, 2008, 2:39pm  
Thanks guys...

Im trying to zoom into these rects and the rects in the center of the screen look really good when they zoom up, but when the ones ones on the side of the screen zoom to the left or the right, and I cant seem to make them zoom up without perspective. I am using the z parameter of the translate method.

If I scale the width and height instead of modifying the z parameter of the translate, then it looks right until I rotate the rect and there is some clipping against the neighboring cell.



below is my code

float SELECTED_WIDTH = 300, SELECTED_HEIGHT = 220;
float STANDARD_WIDTH = 215, STANDARD_HEIGHT = 157;
boolean timerSet = false;
Cell[] cellArray = new Cell[20];
int selectedIndex;


void setup()
{
 size(1280, 720, P3D);
 bezierDetail(50);
//  ortho(0, width, 0, height, -100, 100);
 float xPos = 0;
 float yPos = 0;
 selectedIndex = 0;
 //strokeCap(ROUND);
 stroke(255,255,255);

 
 for(int i=0; i < cellArray.length; i++)
 {

   
   if (xPos > (width - STANDARD_WIDTH))
   {
xPos =0;
yPos += STANDARD_HEIGHT+3;  
   }
   xPos += STANDARD_WIDTH+3;
   cellArray[i] = new Cell( (int)xPos, (int)yPos);
 }
 cellArray[selectedIndex].isHovered = true;
}


void draw()
{
 background(0);
 translate(-10, 115);
 for(int i=0; i < cellArray.length; i++)
 {
   if(i != selectedIndex )cellArray[i].update();
 }
 cellArray[selectedIndex].update();
}


void keyPressed() {
 if(keyCode == 10) setSelection();
 if (key == CODED) {
   
   switch(keyCode)
   {
case LEFT:
  changeSelection(-1);
break;
 
case RIGHT:
  changeSelection(1);
break;
 
case 10:
  setSelection();
break;
 
case DOWN:
  changeSelection(5);
break;
 
case UP:
  changeSelection(-5);
break;
 
   }
   
 }
}

void changeSelection(int delta)
{
if(selectedIndex + delta >= 0 && selectedIndex + delta < cellArray.length)
{
  cellArray[selectedIndex].isHovered = false;
  cellArray[selectedIndex].isSelected = false;
  selectedIndex += delta;
  cellArray[selectedIndex].isHovered = true;
}
}

void setSelection()
{
cellArray[selectedIndex].isSelected = true;  
}



class Cell
{
 float xPos, yPos;
 boolean isSelected = false, isHovered = false;
 float cellWidth, cellHeight;
 float rotationVal = 0.0;
 float zoomLevel = 0.0;
 int timeZoomed=-1;
 Cell(int x, int y)
 {
   xPos = x;
   yPos = y;
   cellWidth = STANDARD_WIDTH;
   cellHeight = STANDARD_HEIGHT;
 }  
 void update()
 {
   
   if(isHovered)
   {
zoom();
   }
   else  
   {
cellWidth = STANDARD_WIDTH;
cellHeight = STANDARD_HEIGHT;
unZoom();
   }
   if(isSelected) rotate();
   else unRotate();
   draw();
 }

 void rotate()
 {
   //ortho(-width/2, width/2, -height/2, height/2, -10, 10);
   rotationVal += .2;
   if(rotationVal > PI/2) fill(255);
   else fill(100);
   if(rotationVal > PI) rotationVal = PI;

 }
 void unRotate()
 {
   //ortho(-width/2, width/2, -height/2, height/2, -10, 10);
   rotationVal -= .2;
   if(rotationVal < PI/2) fill(100);
   else fill(255);
   if(rotationVal < 0) rotationVal = 0;

 }
 void zoom()
 {
   zoomLevel += 3;
   if(zoomLevel > 100)
   {
zoomLevel = 100;
if(!timerSet)
{
  timeZoomed = millis();
  timerSet = true;
  println(timeZoomed);
}
else if(millis() - timeZoomed >= 5000)
    {  
 this.isSelected = true;
 timerSet  =false;
    }
   }
   /*cellWidth += (SELECTED_WIDTH -  cellWidth)/5;
    if(cellWidth > SELECTED_WIDTH) cellWidth = SELECTED_WIDTH;
    cellHeight += (SELECTED_HEIGHT -  cellHeight)/5;
    if(cellHeight > SELECTED_HEIGHT) cellHeight = SELECTED_HEIGHT;
    */
 }
 void unZoom()
 {
   zoomLevel -= 6;
   if(zoomLevel < 0)
   {
zoomLevel = 0;
     
   }
   /*cellWidth += (SELECTED_WIDTH -  cellWidth)/5;
    if(cellWidth > SELECTED_WIDTH) cellWidth = SELECTED_WIDTH;
    cellHeight += (SELECTED_HEIGHT -  cellHeight)/5;
    if(cellHeight > SELECTED_HEIGHT) cellHeight = SELECTED_HEIGHT;
    */
 }
 void draw()
 {
   pushMatrix();
   translate(xPos, yPos, zoomLevel);
   rotateY(rotationVal);
   strokeWeight(3);
   
   bezierRect(-cellWidth/2, -cellHeight/2, cellWidth, cellHeight, -10, -10);
   popMatrix();
 }
 
 void bezierRect(float x, float y, float w, float h, float xr, float yr) {  
 float w2=w/2f, h2=h/2f, cx=x+w2, cy=y+h2;  
 beginShape();  
 vertex(cx,cy-h2);
 bezierVertex(cx+w2-xr, cy-h2, cx+w2, cy-h2+yr, cx+w2, cy);  
 bezierVertex(cx+w2, cy+h2-yr, cx+w2-xr, cy+h2, cx, cy+h2);  
 bezierVertex(cx-w2+xr, cy+h2, cx-w2, cy+h2-yr, cx-w2, cy);  
 bezierVertex(cx-w2, cy-h2+yr, cx-w2+xr, cy-h2, cx, cy-h2);  
 endShape();  
}  

}
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›