how to smooth ellipse

mxloizix

Hello,

I have made this little code for trying P5JS

  var bubbleDiam = 40;
  var bubbleNb = 80;
  var xpos = [];
  var ypos = [];
  var hue = []; 

 function setup() {

 createCanvas(windowWidth, windowHeight);
 colorMode(HSB,360,100,100);
 noStroke();

  for( var i = 0 ; i < bubbleNb ; i++){
  xpos[i] = random(bubbleDiam, windowWidth - bubbleDiam);
  ypos[i] = random(bubbleDiam, windowHeight - bubbleDiam);
  hue[i] = random(360);
  }      
}

function draw() {
 var bri = map(mouseY,0,displayHeight, 60,100);
 var vary = map(mouseX,0,displayWidth,-60,60);

  for( var i = 0 ; i < bubbleNb ; i++){
    fill(hue[i] + vary, 80,bri);
    ellipse(xpos[i],ypos[i],bubbleDiam,bubbleDiam, 100);
}

}

but there is a strong problem of aliasing as you can see

temp-bubbles

how can I have beautiful circles in P5js ?

thanks

koogs

did you try smooth()?

https://forum.processing.org/two/discussion/8075/why-are-text-and-graphics-so-ugly-and-blocky

mxloizix

yes, sure, its the same result because its active by default https://p5js.org/reference/#/p5/smooth

koogs

my link is actually a different cause - the build up of alpha over time due to lack of background()

mxloizix

thank you !
solution : adding background(255); after the function draw(){