l'idée c'est de mettre des cercles de la même couleur sur ou sous des bandes de couleurs différentes. Et alors des cercles de même couleur apparaissent différents

inspiré de https://munker-illusion--jgordon510.repl.co/

Voir aussi https://confetti-munker.glitch.me/

Voir aussi https://p5js.org/examples/simulate-stepping-feet-illusion.html

Et aussi https://io9.gizmodo.com/the-munker-illusion-destroys-your-faith-in-color-5907175

​

*/

var cercles = 10;

var cercleSize = 100;

var colors = ['red', 'green', 'blue'];

var lineWidth = 10;

var k ;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  frameRate(2) ;

  noStroke() ;

​

​

​

​

​

}

​

function draw() {

  background(0);

  k = int(random( colors.length )) ;

  print(k) ;

  drawBands( k ) ;

  for (var i = 0; i < cercles; i++) {

    faireCercle(i);

  }

  k = (k+1) % colors.length ;

  print(k) ;

  drawBands( k ) ;

  k = (k+1) % colors.length ;

    print(k) ;

  drawBands( k ) ;

​

}

​

​

function faireCercle(i) {

  var rayon = random(cercleSize/3, cercleSize) ;

  var posX = random ( rayon/2 + 10, height - ( rayon/2 + 10 ) ) ;

  var posY = random ( rayon/2 + 10, height - ( rayon/2 + 10 ) ) ;

​

//  var n = i % colors.length ;

//  fill( colors[n] ) ;

​

  fill('tan');

  ellipse( posX, posY, rayon ) ;

}

​

function drawBands( i ) {

​

  if( i > colors.length ) {

    print(i, "i doit être inférieur ou = au nb de couleurs" ) ;

  }

      var currentColor = colors[i] ;

      fill(currentColor);

​

      for (var y = 0; y < height; y += lineWidth) {

        rect(0, y + i * lineWidth / colors.length, width, lineWidth / colors.length);

      }

  }

​