Loading...
Logo
Processing Forum

Circle gradient

in Programming Questions  •  3 months ago  

I try to make a circle gradient with two colors. I have the following code and of course don’t work. 

Copy code
  1. void setup(){
  2.   size(200, 200);
  3.   smooth();
  4.   noStroke();
  5.   //background(0);
  6.   ellipseMode(CENTER);
  7.   ellipse(width/2, height/2 ,180, 180);
  8. }

  9. void draw(){
  10.   for (int i = 0; i < 255; i++) {
  11.     fill(i);
  12.     //ellipse();
  13.     noStroke();
  14. }

Any idea what to do;

Replies(9)

Re: Circle gradient

3 months ago
probably the ugliest way to do it, but it works :)

Copy code
  1. void setup() {
      size(300, 300);
      smooth();
      ellipseMode(CENTER);
    }

    void draw() {
      background(255);
      noStroke();
      for (int i = 1; i < 150; i++) {
        fill(float(i)*2);
        ellipse(150, 150, 300-(2*i), 300-(2*i));
      }
    }

Re: Circle gradient

3 months ago
Just some redundancy observations:
  • Since it's just 1 static immutable drawing, there's no need to put that in draw(). You can do everything within setup(), plus noLoop().  Or even in Processing's static mode.
  • if all drawings use noStroke(), you can move that at the top of the for loop.
  • Any function which accepts a float or a double as its parameter(s), also accepts any other primitive data-types (except boolean). No need to convert an int into float for fill() for example!
  • You can use function map() to convert a source value range into a desired value range.
Here's a slightly re-tweaked version using Processing's static mode:
Copy code
    size(600, 600);
    smooth();
    noLoop();
    noStroke();
    ellipseMode(CENTER);
    background(-1);
    
    final int w = width, h = height;
    final int cx = w >> 1, cy = h >> 1;
    final int step = 030;
    
    for (int i = 0; i <= w; i += step) {
      fill( map(i, 0, w, 0, 0400) );
      ellipse(cx, cy, w - i, h - i);
    }
    

Re: Circle gradient

3 months ago
First of all, thank to all for your answers but esspecially you "goToLoop". I have same questions, about code.
background(-1) what "color" is that? and the line 9 what exactly does.

Re: Circle gradient

3 months ago
Hi Vardaloupas!

In Processing, the raw white color is #FFFFFF.
If you display that in Java Mode, you'll see that's the same as int -1:  
println(#FFFFFF);

To understand why it is so, you need to know how values are represented 
in binary form in the computer's memory!  

And I choose to use -1 b/c it's much shorter and neat.
The same reason I use 0, rather than #000000, for black!  

And 1 more curious binary knowledge:
println(0x7FFFFFFF);      // highest int number.
println(0x7FFFFFFF + 1);  // lowest  int number.

By line #9 you mean the bitwise right-shift operator >>?
Well, just consider that >> 1 is the same as a integral division by 2.
And << 1 as multiplying by 2!

Re: Circle gradient

3 months ago
" And I choose to use -1 b/c it's much shorter and neat."
background(255); works as well and is more usually used...

GoToLoop likes to puzzle newbies with his answers.

Re: Circle gradient

3 months ago
I did some changes and i came up with this :
Copy code
  1. //import processing.pdf.*;
  2. size(600, 600); //PDF, "gradient_B&W.pdf");
  3. smooth();
  4. noLoop();
  5. noStroke();
  6. ellipseMode(CENTER);
  7. background(-1);

  8. final int w = width, h = height;
  9. final int cx = w >> 1, cy = h >> 1;
  10. final int step = 010;

  11. for (int i = 0; i <= w; i += step) {
  12.   fill( map(i, 0, w, 0, 0400) );
  13.   ellipse(cx, cy, w - i, h - i);
  14. }
  15.   // Exit the program 
  16.   println("Finished.");
  17.   //saveFrame("output-####.png");
  18.   exit();
If you uncomment you will have a .pdf as an export. If you leave the code as it is, then the programm exports an image.
My question is: if I want the "steps" to be between 0 and 255 (for every shade a circle) Is it nesessary to make any changes? 

Re: Circle gradient

3 months ago
If I want the "steps" to be between 0 and 255 (for every shade a circle) Is it necessary to make any changes?
I don't get what you meant. The only "configurable" variable there is step.
It determines how many pixels some current gray shade takes until changing to a new 1.
For maximum smoothness, make step = 1.

Now,  map(i, 0, w, 0, 0400) converts the range values of the screen width (0, width) 
to the range of gray colors (0, 0400).
So, it starts as white, and finishes as black. If you want the opposite, use:  
  fill( map(i, 0, w, 0400, 0) );
Just be aware that 0400 is actually the number value 256!  

Re: Circle gradient

3 months ago
I find this toο

Copy code
  1. void setup(){
  2.   
  3.   size(800, 800);
  4.   background(200);
  5.   smooth();

  6.   int radius = width/2;
  7.   // create some gradients
  8.   for (int i=radius; i< width; i+=width){
  9.     for (int j =radius; j< height; j+=width){
  10.       createGradient(i, j, radius, 
  11.       color(int(255), int(255), int(255)), 
  12.       color(int(0), int(0), int(0)));
  13.     }
  14.   }
  15. }

  16. void createGradient (float x, float y, float radius, color c1, color c2){
  17.   float px = 0, py = 0, angle = 0;

  18.   // calculate differences between color components 
  19.   float deltaR = red(c2)-red(c1);
  20.   float deltaG = green(c2)-green(c1);
  21.   float deltaB = blue(c2)-blue(c1);
  22.   // hack to ensure there are no holes in gradient
  23.   // needs to be increased, as radius increases
  24.   float gapFiller = 32.0;

  25.   for (int i=0; i< radius; i++){
  26.     for (float j=0; j<360; j+=1.0/gapFiller){
  27.       px = x+cos(radians(angle))*i;
  28.       py = y+sin(radians(angle))*i;
  29.       angle+=1.0/gapFiller;
  30.       color c = color(
  31.       (red(c1)+(i)*(deltaR/radius)),
  32.       (green(c1)+(i)*(deltaG/radius)),
  33.       (blue(c1)+(i)*(deltaB/radius)) 
  34.         );
  35.       set(int(px), int(py), c);      
  36.     }
  37.   }
  38.   // adds smooth edge 
  39.   // hack anti-aliasing
  40.   noFill();
  41.   stroke(150);
  42.   strokeWeight(2);
  43.   ellipse(x, y, width, width);
  44. }