let OSlider; //slider épaisseur 2

let CSlider; //slider couleur 1

let ASlider; //slider couleur 2

​

​

​

function setup() {

  createCanvas(600, 600);

  fill(0);

  //position slider

  rSlider = createSlider(1, 18, 0);

  rSlider.position(width/3, 120);

  OSlider = createSlider(1, 18, 0);

  OSlider.position(width/3, 160);

  CSlider = createSlider(10, 255, 0);

  CSlider.position(width/3, 240);

  ASlider = createSlider(10, 255, 0);

  ASlider.position(width/3, 280);

}

​

​

function draw() {

    background(255);

    translate(120, 120);

    drawGrid();

    fill(0);   

}

​

​

​

​

​

​

​

​

​

function drawGrid() {

    fill(120);

    //couleur lignes 1

    const C = CSlider.value();

    //couleur lignes 2

    const A = ASlider.value();

    //épaisseur lignes 1

    const r = rSlider.value();

    //épaisseur lignes 2

    const O = OSlider.value();

    for (var x=-width; x < width; x+=20) {

      stroke(C, 123, 27);

      strokeWeight(r);

        line(x, -height, x, height);

    }

    for (var y=-height; y < height; y+=20) {

      stroke(A, 10, 156);

      strokeWeight(O);

        line(-width, y, width, y);

    }

}

​

//https://p5js.org/examples/dom-slider.html

//http://danielstern.ca/range.css/#/

​

//épaisseur de la grille = OK

//couleur traits horizontaux et verticaux : 1 slider horizontal et 1 slider vertical = OK

//nombre de lignes par rapport à la formule