​

​

function setup() {

  createCanvas(windowWidth, windowHeight);//la taille du canvas dans la page

  frameRate(1);//le nombre d'images par secondes

​

}

​

​

​

//on bouge

function draw() {

  background('#EAEAEA');//la couleur du fond

  //circle(mouseX, mouseY, 200);

    phrase(500,-150);

}

​

​

​

function brailleO(x, y) {

​

  let myColors = ["#4f5bdb", "#66cdaa", "#00a4b2", "#ebeb21"];

  let randCol;

  randCol=random(myColors.length);

  randCol=floor(randCol);

  let c1 = random(0,255);//aléatoire entre 0 et 255

  let c2 = random(100,200);

  let size1 = random(10,120);//aléatoire entre 20 et 120

  let size2 = random(2,10);

  let size3 = random(2,10);

  //cercle 1

  push();

  translate(x,y);

  fill(myColors[randCol]);//la couleur de fond du cercle en rgb

  //fill(c1, 12, c2);

  stroke('#3C4048');//la couleur du contour  

  strokeWeight(size2);//l'épaisseur du contour 2

  circle(100, 100, size1);//le cercle avec une position x et y et un diametre

  //cercle 2

  fill('#EAEAEA');

  strokeWeight(size3);

  circle(240, 100, 100);

  //cercle 3

  strokeWeight(size2);

  circle(100, 240, 100);

  //cercle 4

  fill(0,0,c1);

  circle(240, 240, size1);

  //cercle 5

  circle(100, 380, size1);

  //cercle 6

  fill('#EAEAEA');

  strokeWeight(size2);

  circle(240, 380, 100);

  pop();

}

​

​

​

function brailleK(x, y) {

    //cercle 1

  push();

  translate(x,y);

  fill('#B2B2B2');//la couleur de fond du cercle

  stroke('#3C4048');//la couleur du contour  

  strokeWeight(2);//l'épaisseur du contour

  circle(100, 100, 100);//le cercle avec une position x et y et un diametre

  //cercle 2

  fill('#EAEAEA');

  circle(240, 100, 100);

  circle(100, 240, 100);

  circle(240, 240, 100);

  fill('#B2B2B2');

  circle(100, 380, 100);

  circle(240, 380, 100);

  pop();

}

​

​

function phrase(x,y) {

  push();

  translate(x,y);

  brailleO(0, 300);

  brailleK(300, 300);

  pop();

}