the Ebbinghaus Illusion or Titchener circles

https://medium.com/@naziafakhruddin/creating-illusions-using-basic-shapes-in-p5-js-part-1-8076b3f53678

*******************************************************/

​

var col ;

var k ;

function setup() {

  createCanvas(600, 400);

  noStroke() ;

}

​

function draw() {

  background(220);

​

  k = map(mouseX, 0, width, 200, 60) ;

​

  // identical yellow circles 

  col = color( 'yellow' );

  col.setAlpha(k) ;  

  drawCircle( col, 160, 200, 50 ) ;

  drawCircle( col, 450, 200, 50 ) ;

​

  // large violet petals around first circle

  col = color( 155, 0, 215 );

  col.setAlpha(k) ;  

  drawCircle( col, 110, 120, 90 ) ;

  drawCircle( col, 210, 120, 90 ) ;  

  drawCircle( col, 110, 280, 90 ) ;

  drawCircle( col, 210, 280, 90 ) ; 

  drawCircle( col, 60, 200, 90 ) ;

  drawCircle( col, 260, 200, 90 ) ; 

  // small violet petals around second circle

  col = color( 155, 0, 215 );

  col.setAlpha(k) ;  

  drawCircle( col, 450, 154, 25 ) ;

  drawCircle( col, 450, 246, 25 ) ;  

  drawCircle( col, 400, 200, 25 ) ;

  drawCircle( col, 500, 200, 25 ) ; 

  drawCircle( col, 415, 168, 25 ) ;

  drawCircle( col, 415, 232, 25 ) ;  

  drawCircle( col, 485, 168, 25 ) ;

  drawCircle( col, 485, 232, 25 ) ;   

}

​

function drawCircle(col, posX, posY, rayon ) {

​

​

  fill(col) ;

  ellipse(posX, posY, rayon, rayon ) ;

}