xxxxxxxxxx
53
/*******************************************************
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 ) ;
}