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.
IndexProgramming Questions & HelpPrograms › rectangle + rounded corners + gradient
Page Index Toggle Pages: 1
rectangle + rounded corners + gradient (Read 2991 times)
rectangle + rounded corners + gradient
Mar 16th, 2008, 9:15pm
 
Hi,

Well i know how to make rounded corners en how to make a gradient, but the ways how i do it are impossible to combine (i think).

Now i'm making rounded corners by setting a really big stroke with a ROUND strokejoin. And i'm making gradients by drawing small rectangles with a little difference in color.

Does anyone know how to combine these two? Probbably with lots of math :p but i really suck at math so... Smiley

greets
Daan
Re: rectangle + rounded corners + gradient
Reply #1 - Mar 17th, 2008, 10:45am
 
Well, for the round rectangle part, you can let Java do much of the work for you. There's a convenient "RoundRectangle2D" class, with documentation here:

http://java.sun.com/j2se/1.4.2/docs/api/java/awt/geom/RoundRectangle2D.html

That, by itself, won't help you much, but notice that any object that implements Java's Shape interface must contain a "getPathIterator" method:

http://java.sun.com/j2se/1.4.2/docs/api/java/awt/Shape.html

If you dig a little more into the documentation, you'll find that you can combine this PathIterator with Processing's beginShape and endShape methods

(http://processing.org/reference/vertex_.html)

to draw a "java"-style shape using Processing. However, the gradient issue is where things get a little tricky.

If you're willing to stick with the Java2D renderer, you can pretty easily grab the Graphics2D object from Processing and then use Java2D directly to do the gradient fills. This will likely be much easier (and faster) then using Processing to approximate a gradient, although you lose the flexibility (and comfort!) of working strictly within the Processing API.

http://java.sun.com/j2se/1.4.2/docs/api/java/awt/Graphics2D.html

Cheers
greg
Re: rectangle + rounded corners + gradient
Reply #2 - Mar 17th, 2008, 2:00pm
 
How do you do the gradient?

Re: rectangle + rounded corners + gradient
Reply #3 - Mar 17th, 2008, 2:57pm
 
Here's a good place to get started:

http://java.sun.com/j2se/1.4.2/docs/api/java/awt/GradientPaint.html

And to get the Graphics2D object from Processing, use this (I'm not sure if it's strictly correct, but this is the general idea):

PGraphicsJava2D pgj = (PGraphicsJava2D)p.g;
Graphics2D g2 = pgj.g2;

Then, you can call various methods on the Graphics2D object to do some further drawing. This includes the draw, fill, and setPaint methods. See this documentation for more info:

http://java.sun.com/j2se/1.4.2/docs/api/java/awt/Graphics2D.html
Re: rectangle + rounded corners + gradient
Reply #4 - Mar 17th, 2008, 11:35pm
 
thnx Smiley going to try it out, we also had another possibility, by placing some shapes at each corner for the rounding, but then we had the problem that we had to specify a background color Smiley which isn't exactly what we are looking for.
Re: rectangle + rounded corners + gradient
Reply #5 - Mar 18th, 2008, 9:30am
 
I think the solution you gave me isn't going to work for me because i also need to make multiple gradients :)
for example: color1 to color2 to color3... :) and in the gradientpaint API it says i can only specify 2.

now i'm having something like this:
- first drawing the gradient
- then hiding the gradient with some rounded corners (but i need to drag and drop this so the backcolor can change, while the color of the rounded corners stays the same)


int h = this.getHeight()+STROKEWEIGHT;
int nboflines= (h/criterias.size())*2;
app.strokeWeight(0);

for(int i = 0; i< criterias.size()-1;i=i+1){
int rd = criterias.get(i).getParentCollection().getColor().getRed()/nboflines;
int gd = criterias.get(i).getParentCollection().getColor().getGreen()/nboflines;
int bd = criterias.get(i).getParentCollection().getColor().getBlue()/nboflines;
int ru = criterias.get(i+1).getParentCollection().getColor().getRed()/nboflines;
int gu = criterias.get(i+1).getParentCollection().getColor().getGreen()/nboflines;
int bu = criterias.get(i+1).getParentCollection().getColor().getBlue()/nboflines;
for(int j = 0; j<nboflines;j++){

int r = (criterias.get(i).getParentCollection().getColor().getRed()-(rd*j))+(j*ru);
int g = (criterias.get(i).getParentCollection().getColor().getGreen()-(gd*j))+(j*gu);
int b = (criterias.get(i).getParentCollection().getColor().getBlue()-(bd*j))+(j*bu);
app.stroke(r,g,b);
app.fill(r,g,b);
//app.line(getX()-(STROKEWEIGHT/2), (getY()+(i*nboflines)+j)+2, getX()+getWidth()+STROKEWEIGHT/2, (getY()+(i*nboflines)+j)+2);
app.rect(getX()-(STROKEWEIGHT/2), (getY()+(i*nboflines)+j)-STROKEWEIGHT/2, this.getWidth()+STROKEWEIGHT, 1);
}



}


app.fill(0);
app.stroke(0);
//upper left
app.beginShape();
app.vertex(getX()-STROKEWEIGHT/2, getY());
app.bezierVertex(getX()-STROKEWEIGHT/2,getY()-STROKEWEIGHT/4,getX()-STROKEWEIGHT
/4,getY()-STROKEWEIGHT/2,getX(),getY()-STROKEWEIGHT/2);
app.vertex(getX()-STROKEWEIGHT/2, getY()-STROKEWEIGHT/2);
app.vertex(getX()-STROKEWEIGHT/2, getY());
app.endShape();
//upper right
app.beginShape();
app.vertex(getX()+getWidth()+STROKEWEIGHT/2,getY());
app.bezierVertex(getX()+getWidth()+STROKEWEIGHT/2,getY()-STROKEWEIGHT/4,getX()+g
etWidth()+STROKEWEIGHT/4,getY()-STROKEWEIGHT/2,getX()+getWidth(),getY()-STROKEWE
IGHT/2);
app.vertex(1+getX()+getWidth()+STROKEWEIGHT/2,getY()-STROKEWEIGHT/2);
app.vertex(1+getX()+getWidth()+STROKEWEIGHT/2, getY());
app.endShape();

//under left
app.beginShape();
app.vertex(getX()-STROKEWEIGHT/2, getY()+getHeight());
app.bezierVertex(getX()-STROKEWEIGHT/2,getY()+getHeight()+STROKEWEIGHT/4,getX()-
STROKEWEIGHT/4,getY()+getHeight()+STROKEWEIGHT/2,getX(),getY()+getHeight()+STROK
EWEIGHT/2);
app.vertex(getX()-STROKEWEIGHT/2, 2+getY()+getHeight()+STROKEWEIGHT/2);
app.vertex(getX()-STROKEWEIGHT/2, 2+getY()+getHeight());
app.endShape();
//under right
app.beginShape();
app.vertex(getX()+getWidth()+STROKEWEIGHT/2,getY()+getHeight());
app.bezierVertex(getX()+getWidth()+STROKEWEIGHT/2,getY()+getHeight()+STROKEWEIGH
T/4,getX()+getWidth()+STROKEWEIGHT/4,getY()+getHeight()+STROKEWEIGHT/2,getX()+ge
tWidth(),getY()+getHeight()+STROKEWEIGHT/2);
app.vertex(1+getX()+getWidth()+STROKEWEIGHT/2,2+getY()+getHeight()+STROKEWEIGHT/
2);
app.vertex(1+getX()+getWidth()+STROKEWEIGHT/2, 2+getY()+getHeight());
app.endShape();
Re: rectangle + rounded corners + gradient
Reply #6 - Mar 18th, 2008, 5:16pm
 
or you could try a "masking" approach:  (this is inefficient code, but should convey the idea)

Quote:



void setup() {
 size(400,200,JAVA2D);
 smooth();
}

void draw() {
 background(192);
 roundrectgradient(50,50,300,100);
}

// draw a rounded rectangle gradient via masking
void roundrectgradient(float x, float y, float w, float h) {
 // w and h must be > sw
 float sw=40f, halfsw=sw/2f, wmsw=w-sw, hmsw=h-sw;
 // make the gradient:
 PGraphics gra = createGraphics(int(w), int(h), JAVA2D);
 gra.beginDraw();
 gra.noStroke();
 gra.colorMode(HSB);
 for (int i=0; i<w; i++) {
   gra.fill(float(i)/w*255f, 150, 255);
   gra.rect(i,0,1,h);
 }
 gra.endDraw();
 // make the mask by drawing rect in white:
 PGraphics msk = createGraphics(int(w), int(h), JAVA2D);
 msk.beginDraw();
 msk.smooth();
 msk.stroke(255);
 msk.strokeWeight(sw);
 msk.strokeJoin(ROUND);
 msk.rect(halfsw,halfsw,wmsw,hmsw);
 msk.endDraw();
 // apply the mask:  (hmm, mask() not supported by JAVA2D? ok then, manually)
 gra.loadPixels();
 msk.loadPixels();
 int n = gra.pixels.length;
 for (int i=0; i<n; i++)
     gra.pixels[i] = (msk.pixels[i] & 0xff000000) | (gra.pixels[i] & 0xffffff);
 gra.updatePixels();
 // blit the composite image:
 image(gra,x,y);
}



Page Index Toggle Pages: 1