ellipse gradient stroke

General Discussion Other

lunchboxav

in General Discussion • Other • 1 year ago

hi,

i'd like to make an ellipse with a gradient stroke that fades from white to pure transparent, similar to this

it's taken from a cover of The Mars Volta's latest album, Noctorniquet, and I really like that subtle circles. So I'm looking to recreate it in Processing. Anybody knows how to do it? I tried to hack the radial gradient example but so far I'm failed because those gradients were made to do a fill and not a stroke, per se.

Replies(2)

asimes

Re: ellipse gradient stroke

1 year ago

Not quite what you are looking for, but here is a quick code for something like it. You'll probably have to fine tune it to make it not become white so quickly:

void setup() {
size(400, 400);
background(0);
smooth();
noStroke();
}
void draw() {
}
void mousePressed() {
int circleSize = (int)random(50, 200);
for (int i = 0; i < circleSize; i++) {
float val = 255/circleSize*i;
fill(255-val, val);
ellipse(mouseX, mouseY, circleSize-i, circleSize-i);
}
}

lunchboxav

Re: ellipse gradient stroke

1 year ago

yay! thanks for the code man. I tweaked it a bit, so it looks like this

void setup() {
size(400, 400);
background(0);
smooth();
noStroke();
}
void draw() {
}
void mousePressed() {
int circleSize = (int)random(50, 200);
for (int i = 0; i < circleSize; i++) {
float val = 255/circleSize*6*i;
fill(255-val, 30);
ellipse(mouseX, mouseY, circleSize-i, circleSize-i);
}
}

It's because I want the gradient to happen just a little bit before it reaches the end of the circle. It should be simple but my brain refuses to work, lol. Again, thanks for the help :D

Top Reply