P5.js with multiple circles - Fill circles with gradient

Question

How can I give every circle its own linear gradient? I don't find a solution to do this in p5.js?

function setup() {
    createCanvas(400, 400);
    
    noLoop(); //// make a static sketch
}

function draw() {
    background(color(0,0,0));
    noStroke();

    fill(color(255,255,0));
    circle(30, 30, 20);

    fill(color(255,0,0));
    circle(100, 120, 80);

    fill(color(255,0,255));
    circle(320, 280, 50);
}

CodePen CodeExample

Does this answer your question? [How can I fill a shape with a gradient on p5.js?](https://stackoverflow.com/questions/58959940/how-can-i-fill-a-shape-with-a-gradient-on-p5-js) — Rabbid76, Jul 21 '23 at 14:49
Im sorry but this is not answering my questions. This is a radial gradient and not a linear gradient. Still very interesting. — public9nf, Jul 21 '23 at 15:59
This is a general answer. You have to create the gradient yourself, because there is no built-in function in p5.js. If you are having difficulty with this, please show what you have tried so far and where you are struggling. By the way, your question is missing the information that exactly informs how the gradient should look like. — Rabbid76, Jul 21 '23 at 16:04

user1329019 · Answer 1 · 2023-07-25T16:54:01.603

2 versions for modern dont-care-about-performance subculture. With circle hatched with parallel lines

let angle = 45;

function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
noFill();
}

function draw() {
background(220);

stroke(0, 0, 255);

drawWLines(222,110,50, 100)
drawWLines(111,200,50, 30)

drawWLines(155,155,50, 50)
angle+=1;
}


function drawWLines(x1,y1,num_lines, radius){
  
  ellipse(x1, y1, radius*2, radius*2);
  
var delta_y = (2.0 * radius) / (num_lines);
var cos_a = Math.cos(angle * Math.PI / 180.0);
var sin_a = Math.sin(angle * Math.PI / 180.0);

for (var i = 0; i < num_lines; i++)
{
var y = delta_y * i - radius;
var x = Math.sqrt(radius * radius - y * y);

var left_x  =x1+ y * sin_a + x * cos_a;
var right_x =x1+ y * sin_a - x * cos_a;
var left_y  =y1+ y * cos_a - x * sin_a;
var right_y =y1+ y * cos_a + x * sin_a;

stroke(255*i/num_lines, 255*sin(i/num_lines*233), 0);
line(left_x, left_y, right_x, right_y);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

And with masks




function setup() {
createCanvas(300, 300);
}

function draw() {
x=50; y=50; r=20;
// Draw the gradient background
setGradient(0, r, width, r*4, color(255, 0, 0), color(0, 255, 255));

// Set the circle as a transparency mask
setCircleMask(x, y, r);
}


function setGradient(x, y, w, h, c1, c2) {
for (var i = y; i <= y + h; i++) {
var inter = map(i, y, y + h, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x + w, i);
}
}

function setCircleMask(x, y, radius) {
// Create a new canvas to use as the mask
var maskCanvas = createGraphics(300, 300);

maskCanvas.background(111);

// drawing mode to XOR
maskCanvas.drawingContext.globalCompositeOperation = 'xor';

// Draw the circle on the mask canvas
maskCanvas.fill(255);
maskCanvas.noStroke();
maskCanvas.ellipse(x-r, y-r, radius * 2, radius * 2);

// Apply the mask canvas as the transparency mask
drawingContext.save();
drawingContext.drawImage(maskCanvas.elt, 0, 0);
drawingContext.restore();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

And better solution with fragment shader

P5.js with multiple circles - Fill circles with gradient

1 Answers1