p5でcanvas直書きグラデ

p5.js Web Editor

function setup() {
  frameRate(2);
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(220);
  for(let i=0;i<40;i++){
    drawBall(windowWidth*random(),windowHeight*random(),100*random());  
  }
}

function drawBall(x,y,r){
  
  let ctx = drawingContext;
  let radius = r;
  let startAngle = 0;
  let endAngle = Math.PI*2;
  let antiClockwise = false;
  
  radialGradient = ctx.createRadialGradient(x+r/2, y-r/2, r/10, x+r/2, y-r/2, r);
  radialGradient.addColorStop(0, "#fff");
  radialGradient.addColorStop(1, "#222");
            
  ctx.fillStyle = radialGradient;
            
  ctx.beginPath();
  ctx.arc(x, y, radius, startAngle, endAngle);
  ctx.closePath();
            
  ctx.fill();
  
}

/*

x0
円形グラデーション開始円の中心のx座標
y0
円形グラデーション開始円の中心のy座標
r0
円形グラデーション開始円の半径
x1
円形グラデーション終了円の中心のx座標
y1
円形グラデーション終了円の中心のy座標
r1
円形グラデーション終了円の半径
*/

ellipse

function drawBall(x,y,r1,r2){
  
  let r = Math.max(r1,r2);
  let ctx = drawingContext;
  let radius = r1;
  let startAngle = 0;
  let endAngle = Math.PI*2;
  let antiClockwise = false;
  
  radialGradient = ctx.createRadialGradient(x+r/2, y-r/2, r/10, x+r/2, y-r/2, r);
  radialGradient.addColorStop(0, "#fff");
  radialGradient.addColorStop(0.5, "#f0f");  
  radialGradient.addColorStop(1, "#f00");
            
  ctx.fillStyle = radialGradient;
            
  ctx.beginPath();
  //ctx.arc(x, y, radius, startAngle, endAngle);
  ctx.ellipse(
        x, 
        y, 
        radius, 
        r2, 0, startAngle, endAngle
    );
  
  ctx.closePath();
            
  ctx.fill();
  
}