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.
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
gradient (Read 704 times)
zach.gold
gradient
Apr 21st, 2009, 11:25am  
Hi,

I feel ridiculous asking this, but I can't figure out how to stroke or fill a shape with a gradient.  I don't see a standard function for it and don't want to have to address the individual pixels with set().  I'm sure there must be a very simple solution for this.

Thanks,
Zach
Back to top
 
 
pedro veneroso
Re: gradient
Reply #1 - Apr 21st, 2009, 11:39am  
the simplest solution i can think of would be addressing to individual pixels within a for structure, therein defining how a particular area is to be filled. once you have the coordinates and size of the shape it is not difficult for you to address to individual pixels.
Back to top
 
marginalia project: http://www.marginaliaproject.com
diachronic blending: http://www.vimeo.com/4205136
WWW  
PhiLho 
Re: gradient
Reply #2 - Apr 21st, 2009, 11:20pm  
I once made a gradient background using lerpColor and a bunch of line().
I also shown somewhere how to use mask() to full a shape with a texture (image but can be a gradient too).
Oh, I even shown both, search CreateGradient on the forum with PhiLho as author.
Back to top
 
WWW  
zach.gold
Re: gradient
Reply #3 - Apr 22nd, 2009, 8:11am  
Thanks for the tips.  After looking at some of the examples I was able to solve my particular case rather simply:

void setup() {
 size(480, 270);
 background(0);
 smooth();
}

void draw() {
 noFill();
 strokeWeight(50);
 strokeCap(SQUARE);
 for(float i=0; i < 2*PI; i += .1){
   stroke(i*(255/(2*PI)));
   arc(135, 135, 195, 195, i, i+.1);
 }
}
Back to top
 
 
zach.gold
Re: gradient
Reply #4 - Apr 22nd, 2009, 8:41am  
Now my problem is how to animate it to rotate around the center of the "circle" I've created.  Any ideas?
Back to top
 
 
NoahBuddy
Re: gradient
Reply #5 - Apr 22nd, 2009, 11:23am  
Use another variable to hold the rotation (radians of course) and in the arc() call add your rotation: arc(135, 135, 195, 195, i+rot, i+rot+.1);

Increment the rotation every frame.
Back to top
 
 
zach.gold
Re: gradient
Reply #6 - Apr 22nd, 2009, 11:25am  
Here is my attempt.  I think it would work correctly if only I could figure out how to group my arcs into a shape, or create the same gradient effect using lines, curves, or beziers.  

void setup() {
 size(500, 500);
 background(0);
 smooth();
 frameRate(30);
 noFill();
 strokeWeight(50);
 strokeCap(SQUARE);
 ellipseMode(CENTER);
}

float angle;
float change;

void draw() {
 if(second()%2 == 0){
   change = .1;
 }
 angle = angle + change;
 translate(width/2, height/2);
 rotate(angle);
 
 for(float i=0; i < 2*PI; i += .1){
   stroke(i*(255/(2*PI)));
   arc(250, 250, 400, 400, i, i+.1);
 }
}
Back to top
 
 
PhiLho 
Re: gradient
Reply #7 - Apr 23rd, 2009, 1:30am  
Perhaps you want to do:
Code:
void draw() {
 background(0);
 if(second()%2 == 0){
   change = .1;
 }
 angle = angle + change;
 translate(width/2, height/2);
 rotate(angle);
 translate(-width/2, -height/2);

 for(float i=0; i < 2*PI; i += .1){
   stroke(i*(255/(2*PI)));
   arc(250, 250, 400, 400, i, i+.1);
 }
}
Back to top
 
WWW  
zach.gold
Re: gradient
Reply #8 - Apr 23rd, 2009, 6:43am  
Perfect.  Thanks!
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›