//rouge: #D74326

//vert: #6FBE5A

​

​

var y = 100;

var x = 100;

var m = -3;

var n = -5;

​

​

let fps = 25;

​

​

​

function setup() {

  createCanvas(1080, 1920);

  frameRate(fps);

}

​

​

​

​

function draw() {

  background('#2E2749');

  stroke('#3B4F9A');// couleurs des lignes

  strokeWeight(10);

    y = y + (3*m); 

  if (y < 0) { 

    m = m*(-1); 

  } 

  if (y > height) {

    m = m*(-1);

  }

​

​

  //noFill();

  let www = color(255,255,255,210); //transparence

  fill(www);

​

  rect(0, y, width/2, height);

  rect(width/2, y, width/2, height/2);

  rect(0, y, width/2, x);

  line(0,y,width,height/3);

​

​

​

  x = x + (3*n); 

  if (x < 0) { 

    n = n*(-1);

  } 

  if (x>width) {

    n = n*(-1);

  }

​

​

  rect(0, height/2, x, 0);

  //rect(0, x, x, height/2);

  //cercle animé

  let ttt = color(111,190,90,200); //transparence

  fill(ttt);

  noStroke();

  ellipse(0, height/2.5, y, y);

​

    //cerle fixe jaune

  let ppp = color(209, 220, 85, 220);

  fill(ppp);

  ellipse(800,1200,360);

  //chiffre qui défile

  //fill('#fff');

  //textSize(90);

  //text("" + y, 700, y, y);

​

 //grille de cercles 

    for (var a = 5; a < 1125; a = a+50){

        for (var b = 5; b < 2436; b = b+50){

            push();

            translate(a, b);            

            drawCercles();

            pop();

        }   

    }

​

function drawCercles() {

  noStroke();

  fill('#D74326'); //couleur des cercles dans la grille

  ellipse(10, 10, 5);

}

}